aylac.top / deer-social-test
deer social fork for personal usage. but you might see a use idk. github mirror
fork atom

basic color theming pt1

commit 600b87d175aea27038e7d6d6fde8d6cac11a10f1
Author: Aviva Ruben <aviva@rubenfamily.com>
Date: Wed Apr 9 21:54:02 2025 -0500

basic color theming pt1

Aviva Ruben ffa7a595 d84b259d

options
unified split
Changed files
+63 -52
assets
favicon.png
src
alf
themes.ts
tokens.ts
lib
styles.ts
style.css
view
icons
Logo.tsx
web
index.html
assets/favicon.png

This is a binary file and will not be displayed.

+27 -27
src/alf/themes.ts
··· 1 1 import {atoms} from '#/alf/atoms' 2 - import {Palette, Theme} from '#/alf/types' 2 + import {type Palette, type Theme} from '#/alf/types' 3 3 import { 4 4 BLUE_HUE, 5 5 defaultScale, ··· 79 79 gray_975: `hsl(${hues.primary}, 28%, ${defaultScale[1]}%)`, 80 80 gray_1000: `hsl(${hues.primary}, 28%, ${defaultScale[0]}%)`, 81 81 82 - primary_25: `hsl(${hues.primary}, 99%, 97%)`, 83 - primary_50: `hsl(${hues.primary}, 99%, 95%)`, 84 - primary_100: `hsl(${hues.primary}, 99%, 90%)`, 85 - primary_200: `hsl(${hues.primary}, 99%, 80%)`, 86 - primary_300: `hsl(${hues.primary}, 99%, 70%)`, 87 - primary_400: `hsl(${hues.primary}, 99%, 60%)`, 88 - primary_500: `hsl(${hues.primary}, 99%, 53%)`, 89 - primary_600: `hsl(${hues.primary}, 99%, 42%)`, 90 - primary_700: `hsl(${hues.primary}, 99%, 34%)`, 91 - primary_800: `hsl(${hues.primary}, 99%, 26%)`, 92 - primary_900: `hsl(${hues.primary}, 99%, 18%)`, 93 - primary_950: `hsl(${hues.primary}, 99%, 10%)`, 94 - primary_975: `hsl(${hues.primary}, 99%, 7%)`, 82 + primary_25: `hsl(145, 30%, 97%)`, 83 + primary_50: `hsl(145, 30%, 95%)`, 84 + primary_100: `hsl(145, 30%, 90%)`, 85 + primary_200: `hsl(145, 32%, 80%)`, 86 + primary_300: `hsl(145, 34%, 70%)`, 87 + primary_400: `hsl(145, 35%, 58%)`, 88 + primary_500: `hsl(145, 35%, 45%)`, 89 + primary_600: `hsl(145, 38%, 38%)`, 90 + primary_700: `hsl(145, 40%, 32%)`, 91 + primary_800: `hsl(145, 42%, 25%)`, 92 + primary_900: `hsl(145, 45%, 18%)`, 93 + primary_950: `hsl(145, 48%, 10%)`, 94 + primary_975: `hsl(145, 50%, 7%)`, 95 95 96 96 green_25: `hsl(${hues.positive}, 82%, 97%)`, 97 97 green_50: `hsl(${hues.positive}, 82%, 95%)`, ··· 265 265 contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, 266 266 contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, 267 267 268 - primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`, 269 - primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`, 270 - primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`, 271 - primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`, 272 - primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`, 273 - primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`, 274 - primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`, 275 - primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`, 276 - primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`, 277 - primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`, 278 - primary_900: `hsl(${hues.primary}, 99%, ${dimScale[11]}%)`, 279 - primary_950: `hsl(${hues.primary}, 99%, ${dimScale[12]}%)`, 280 - primary_975: `hsl(${hues.primary}, 99%, ${dimScale[13]}%)`, 268 + primary_25: `hsl(140, 15%, ${dimScale[1]}%)`, 269 + primary_50: `hsl(140, 18%, ${dimScale[2]}%)`, 270 + primary_100: `hsl(140, 22%, ${dimScale[3]}%)`, 271 + primary_200: `hsl(140, 25%, ${dimScale[4]}%)`, 272 + primary_300: `hsl(140, 28%, ${dimScale[5]}%)`, 273 + primary_400: `hsl(140, 32%, ${dimScale[6]}%)`, 274 + primary_500: `hsl(140, 35%, ${dimScale[7]}%)`, 275 + primary_600: `hsl(140, 38%, ${dimScale[8]}%)`, 276 + primary_700: `hsl(140, 42%, ${dimScale[9]}%)`, 277 + primary_800: `hsl(140, 45%, ${dimScale[10]}%)`, 278 + primary_900: `hsl(140, 48%, ${dimScale[11]}%)`, 279 + primary_950: `hsl(140, 50%, ${dimScale[12]}%)`, 280 + primary_975: `hsl(140, 55%, ${dimScale[13]}%)`, 281 281 282 282 positive_25: `hsl(${hues.positive}, 50%, ${dimScale[1]}%)`, 283 283 positive_50: `hsl(${hues.positive}, 60%, ${dimScale[2]}%)`,
+3 -3
src/alf/tokens.ts
··· 69 69 }, 70 70 sky: { 71 71 values: [ 72 - [0, '#0A7AFF'], 73 - [1, '#59B9FF'], 72 + [0, '#344e41'], 73 + [1, '#a3b18a'], 74 74 ], 75 - hover_value: '#0A7AFF', 75 + hover_value: '#344e41', 76 76 }, 77 77 midnight: { 78 78 values: [
+18 -13
src/lib/styles.ts
··· 1 - import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' 1 + import { 2 + Dimensions, 3 + type StyleProp, 4 + StyleSheet, 5 + type TextStyle, 6 + } from 'react-native' 2 7 3 8 import {isWeb} from '#/platform/detection' 4 - import {Theme, TypographyVariant} from './ThemeContext' 9 + import {type Theme, type TypographyVariant} from './ThemeContext' 5 10 6 11 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest 7 12 export const colors = { ··· 17 22 gray7: '#26272D', 18 23 gray8: '#141417', 19 24 20 - blue0: '#bfe1ff', 21 - blue1: '#8bc7fd', 22 - blue2: '#52acfe', 23 - blue3: '#0085ff', 24 - blue4: '#0062bd', 25 - blue5: '#034581', 26 - blue6: '#012561', 27 - blue7: '#001040', 25 + blue0: '#d5e8d9', 26 + blue1: '#b8d6be', 27 + blue2: '#95bd9f', 28 + blue3: '#729f7c', 29 + blue4: '#528157', 30 + blue5: '#3a6141', 31 + blue6: '#25422c', 32 + blue7: '#14291a', 28 33 29 34 red1: '#ffe6eb', 30 35 red2: '#fba2b2', ··· 58 63 } 59 64 60 65 export const gradients = { 61 - blueLight: {start: '#5A71FA', end: colors.blue3}, // buttons 62 - blue: {start: '#5E55FB', end: colors.blue3}, // fab 63 - blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner 66 + blueLight: {start: '#a3b18a', end: colors.blue3}, // buttons 67 + blue: {start: '#8a9e7b', end: colors.blue3}, // fab 68 + blueDark: {start: '#658764', end: colors.blue3}, // avis, banner 64 69 } 65 70 66 71 export const s = StyleSheet.create({
+2 -2
src/style.css
··· 109 109 pointer-events: none; 110 110 } 111 111 .ProseMirror .mention { 112 - color: #0085ff; 112 + color: rgb(75, 155, 108); 113 113 } 114 114 .ProseMirror a, 115 115 .ProseMirror .autolink { 116 - color: #0085ff; 116 + color: rgb(75, 155, 108); 117 117 } 118 118 /* OLLIE: TODO -- this is not accessible */ 119 119 /* Remove focus state on inputs */
+2 -2
src/view/icons/Logo.tsx
··· 57 57 {gradient && ( 58 58 <Defs> 59 59 <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1"> 60 - <Stop offset="0" stopColor="#0A7AFF" stopOpacity="1" /> 61 - <Stop offset="1" stopColor="#59B9FF" stopOpacity="1" /> 60 + <Stop offset="0" stopColor="#a3b18a" stopOpacity="1" /> 61 + <Stop offset="1" stopColor="#344e41" stopOpacity="1" /> 62 62 </LinearGradient> 63 63 </Defs> 64 64 )}
+11 -5
web/index.html
··· 144 144 <!-- The root element for your Expo app. --> 145 145 <div id="root"> 146 146 <div id="splash"> 147 - <!-- Bluesky SVG --> 148 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#0085ff" 149 - d="m 149.96484,186.56641 46.09766,152.95898 c 0,0 -6.30222,-9.61174 -15.60547,-17.47656 -8.87322,-7.50128 -28.4082,-4.04492 -28.4082,-4.04492 0,0 6.14721,39.88867 15.53125,44.39843 10.71251,5.1482 22.19726,0.16993 22.19726,0.16993 0,0 11.7613,-4.87282 22.82032,31.82421 5.26534,17.47196 15.33258,50.877 20.9707,69.58594 2.16717,7.1913 8.83789,7.25781 8.83789,7.25781 0,0 6.67072,-0.0665 8.83789,-7.25781 5.63812,-18.70894 15.70536,-52.11398 20.9707,-69.58594 11.05902,-36.69703 22.82032,-31.82421 22.82032,-31.82421 0,0 11.48475,4.97827 22.19726,-0.16993 9.38404,-4.50976 15.5332,-44.39843 15.5332,-44.39843 0,0 -19.53693,-3.45636 -28.41015,4.04492 -9.30325,7.86482 -15.60547,17.47656 -15.60547,17.47656 l 46.09766,-152.95898 -49.32618,83.84179 -20.34375,-31.1914 6.35547,54.96875 -23.1582,39.36132 c 0,0 -2.97595,5.06226 -5.94336,4.68946 -0.009,-0.001 -0.0169,0.003 -0.0254,0.01 -0.008,-0.007 -0.0167,-0.0109 -0.0254,-0.01 -2.96741,0.3728 -5.94336,-4.68946 -5.94336,-4.68946 l -23.1582,-39.36132 6.35547,-54.96875 -20.34375,31.1914 z" 150 - transform="matrix(2.6921023,0,0,1.7145911,-396.58283,-308.01527)" 151 - /></svg> 147 + <!-- deer SVG --> 148 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> 149 + 150 + <defs> 151 + <linearGradient x1="0" y1="0" x2="0" y2="1" id="index_sky"><stop offset="0" stop-color="#a3b18a" stop-opacity="1"></stop><stop offset="1" stop-color="#344e41" stop-opacity="1"></stop></linearGradient> 152 + </defs> 153 + <path fill="url(#index_sky)" 154 + d="m 149.96484,186.56641 46.09766,152.95898 c 0,0 -6.30222,-9.61174 -15.60547,-17.47656 -8.87322,-7.50128 -28.4082,-4.04492 -28.4082,-4.04492 0,0 6.14721,39.88867 15.53125,44.39843 10.71251,5.1482 22.19726,0.16993 22.19726,0.16993 0,0 11.7613,-4.87282 22.82032,31.82421 5.26534,17.47196 15.33258,50.877 20.9707,69.58594 2.16717,7.1913 8.83789,7.25781 8.83789,7.25781 0,0 6.67072,-0.0665 8.83789,-7.25781 5.63812,-18.70894 15.70536,-52.11398 20.9707,-69.58594 11.05902,-36.69703 22.82032,-31.82421 22.82032,-31.82421 0,0 11.48475,4.97827 22.19726,-0.16993 9.38404,-4.50976 15.5332,-44.39843 15.5332,-44.39843 0,0 -19.53693,-3.45636 -28.41015,4.04492 -9.30325,7.86482 -15.60547,17.47656 -15.60547,17.47656 l 46.09766,-152.95898 -49.32618,83.84179 -20.34375,-31.1914 6.35547,54.96875 -23.1582,39.36132 c 0,0 -2.97595,5.06226 -5.94336,4.68946 -0.009,-0.001 -0.0169,0.003 -0.0254,0.01 -0.008,-0.007 -0.0167,-0.0109 -0.0254,-0.01 -2.96741,0.3728 -5.94336,-4.68946 -5.94336,-4.68946 l -23.1582,-39.36132 6.35547,-54.96875 -20.34375,31.1914 z" 155 + transform="matrix(2.6921023,0,0,1.7145911,-396.58283,-308.01527)" 156 + /> 157 + </svg> 152 158 </div> 153 159 </div> 154 160 </body>