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