esb.lol
Bluesky's "Application Layout Framework"
samuel.fm
1export type Palette = {
2 white: string
3 black: string
4 pink: string
5 yellow: string
6
7 /** @deprecated use `pink` instead */
8 like: string
9
10 contrast_0: string
11 contrast_25: string
12 contrast_50: string
13 contrast_100: string
14 contrast_200: string
15 contrast_300: string
16 contrast_400: string
17 contrast_500: string
18 contrast_600: string
19 contrast_700: string
20 contrast_800: string
21 contrast_900: string
22 contrast_950: string
23 contrast_975: string
24 contrast_1000: string
25
26 primary_25: string
27 primary_50: string
28 primary_100: string
29 primary_200: string
30 primary_300: string
31 primary_400: string
32 primary_500: string
33 primary_600: string
34 primary_700: string
35 primary_800: string
36 primary_900: string
37 primary_950: string
38 primary_975: string
39
40 positive_25: string
41 positive_50: string
42 positive_100: string
43 positive_200: string
44 positive_300: string
45 positive_400: string
46 positive_500: string
47 positive_600: string
48 positive_700: string
49 positive_800: string
50 positive_900: string
51 positive_950: string
52 positive_975: string
53
54 negative_25: string
55 negative_50: string
56 negative_100: string
57 negative_200: string
58 negative_300: string
59 negative_400: string
60 negative_500: string
61 negative_600: string
62 negative_700: string
63 negative_800: string
64 negative_900: string
65 negative_950: string
66 negative_975: string
67}
68
69const STATIC_VALUES = {
70 white: '#FFFFFF',
71 black: '#000000',
72 pink: '#EC4899',
73 yellow: '#FFC404',
74}
75
76export const DEFAULT_PALETTE: Palette = {
77 white: STATIC_VALUES.white,
78 black: STATIC_VALUES.black,
79 pink: STATIC_VALUES.pink,
80 yellow: STATIC_VALUES.yellow,
81 like: STATIC_VALUES.pink,
82
83 contrast_0: '#FFFFFF',
84 contrast_25: '#F9FAFB',
85 contrast_50: '#EFF2F6',
86 contrast_100: '#DCE2EA',
87 contrast_200: '#C0CAD8',
88 contrast_300: '#A5B2C5',
89 contrast_400: '#8798B0',
90 contrast_500: '#667B99',
91 contrast_600: '#526580',
92 contrast_700: '#405168',
93 contrast_800: '#313F54',
94 contrast_900: '#232E3E',
95 contrast_950: '#19222E',
96 contrast_975: '#111822',
97 contrast_1000: '#000000',
98
99 primary_25: '#F5F9FF',
100 primary_50: '#E5F0FF',
101 primary_100: '#CCE1FF',
102 primary_200: '#A8CCFF',
103 primary_300: '#75AFFF',
104 primary_400: '#4291FF',
105 primary_500: '#006AFF',
106 primary_600: '#0059D6',
107 primary_700: '#0048AD',
108 primary_800: '#00398A',
109 primary_900: '#002861',
110 primary_950: '#001E47',
111 primary_975: '#001533',
112
113 positive_25: '#ECFEF5',
114 positive_50: '#D3FDE8',
115 positive_100: '#A3FACF',
116 positive_200: '#6AF6B0',
117 positive_300: '#2CF28F',
118 positive_400: '#0DD370',
119 positive_500: '#09B35E',
120 positive_600: '#04904A',
121 positive_700: '#036D38',
122 positive_800: '#04522B',
123 positive_900: '#033F21',
124 positive_950: '#032A17',
125 positive_975: '#021D0F',
126
127 negative_25: '#FFF5F7',
128 negative_50: '#FEE7EC',
129 negative_100: '#FDD3DD',
130 negative_200: '#FBBBCA',
131 negative_300: '#F891A9',
132 negative_400: '#F65A7F',
133 negative_500: '#E91646',
134 negative_600: '#CA123D',
135 negative_700: '#A71134',
136 negative_800: '#7F0B26',
137 negative_900: '#5F071C',
138 negative_950: '#430413',
139 negative_975: '#30030D',
140}
141
142export const DEFAULT_SUBDUED_PALETTE: Palette = {
143 white: STATIC_VALUES.white,
144 black: STATIC_VALUES.black,
145 pink: STATIC_VALUES.pink,
146 yellow: STATIC_VALUES.yellow,
147 like: STATIC_VALUES.pink,
148
149 contrast_0: '#FFFFFF',
150 contrast_25: '#F9FAFB',
151 contrast_50: '#F2F4F8',
152 contrast_100: '#E2E7EE',
153 contrast_200: '#C3CDDA',
154 contrast_300: '#ABB8C9',
155 contrast_400: '#8D9DB4',
156 contrast_500: '#6F839F',
157 contrast_600: '#586C89',
158 contrast_700: '#485B75',
159 contrast_800: '#394960',
160 contrast_900: '#2C3A4E',
161 contrast_950: '#222E3F',
162 contrast_975: '#1C2736',
163 contrast_1000: '#151D28',
164
165 primary_25: '#F5F9FF',
166 primary_50: '#EBF3FF',
167 primary_100: '#D6E7FF',
168 primary_200: '#ADCFFF',
169 primary_300: '#80B5FF',
170 primary_400: '#4D97FF',
171 primary_500: '#0F73FF',
172 primary_600: '#0661E0',
173 primary_700: '#0A52B8',
174 primary_800: '#0E4490',
175 primary_900: '#123464',
176 primary_950: '#122949',
177 primary_975: '#122136',
178
179 positive_25: '#ECFEF5',
180 positive_50: '#D8FDEB',
181 positive_100: '#A8FAD1',
182 positive_200: '#6FF6B3',
183 positive_300: '#31F291',
184 positive_400: '#0EDD75',
185 positive_500: '#0AC266',
186 positive_600: '#049F52',
187 positive_700: '#038142',
188 positive_800: '#056636',
189 positive_900: '#04522B',
190 positive_950: '#053D21',
191 positive_975: '#052917',
192
193 negative_25: '#FFF5F7',
194 negative_50: '#FEEBEF',
195 negative_100: '#FDD8E1',
196 negative_200: '#FCC0CE',
197 negative_300: '#F99AB0',
198 negative_400: '#F76486',
199 negative_500: '#EB2452',
200 negative_600: '#D81341',
201 negative_700: '#BA1239',
202 negative_800: '#910D2C',
203 negative_900: '#6F0B22',
204 negative_950: '#500B1C',
205 negative_975: '#3E0915',
206}
207
208export function invertPalette(palette: Palette) {
209 return {
210 white: palette.white,
211 black: palette.black,
212 pink: palette.pink,
213 yellow: palette.yellow,
214 like: palette.like,
215
216 contrast_0: palette.contrast_1000,
217 contrast_25: palette.contrast_975,
218 contrast_50: palette.contrast_950,
219 contrast_100: palette.contrast_900,
220 contrast_200: palette.contrast_800,
221 contrast_300: palette.contrast_700,
222 contrast_400: palette.contrast_600,
223 contrast_500: palette.contrast_500,
224 contrast_600: palette.contrast_400,
225 contrast_700: palette.contrast_300,
226 contrast_800: palette.contrast_200,
227 contrast_900: palette.contrast_100,
228 contrast_950: palette.contrast_50,
229 contrast_975: palette.contrast_25,
230 contrast_1000: palette.contrast_0,
231
232 primary_25: palette.primary_975,
233 primary_50: palette.primary_950,
234 primary_100: palette.primary_900,
235 primary_200: palette.primary_800,
236 primary_300: palette.primary_700,
237 primary_400: palette.primary_600,
238 primary_500: palette.primary_500,
239 primary_600: palette.primary_400,
240 primary_700: palette.primary_300,
241 primary_800: palette.primary_200,
242 primary_900: palette.primary_100,
243 primary_950: palette.primary_50,
244 primary_975: palette.primary_25,
245
246 positive_25: palette.positive_975,
247 positive_50: palette.positive_950,
248 positive_100: palette.positive_900,
249 positive_200: palette.positive_800,
250 positive_300: palette.positive_700,
251 positive_400: palette.positive_600,
252 positive_500: palette.positive_500,
253 positive_600: palette.positive_400,
254 positive_700: palette.positive_300,
255 positive_800: palette.positive_200,
256 positive_900: palette.positive_100,
257 positive_950: palette.positive_50,
258 positive_975: palette.positive_25,
259
260 negative_25: palette.negative_975,
261 negative_50: palette.negative_950,
262 negative_100: palette.negative_900,
263 negative_200: palette.negative_800,
264 negative_300: palette.negative_700,
265 negative_400: palette.negative_600,
266 negative_500: palette.negative_500,
267 negative_600: palette.negative_400,
268 negative_700: palette.negative_300,
269 negative_800: palette.negative_200,
270 negative_900: palette.negative_100,
271 negative_950: palette.negative_50,
272 negative_975: palette.negative_25,
273 }
274}