Skip to content

Commit 0afe686

Browse files
jamiebuilds-signaljamiebuilds-signal
authored
Fix tailwind sources and prefers-contrast theme
1 parent d6e6869 commit 0afe686

File tree

1 file changed

+93
-86
lines changed

1 file changed

+93
-86
lines changed

‎stylesheets/tailwind-config.css‎

Lines changed: 93 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
@import 'tailwindcss';
1+
@import 'tailwindcss' source(none);
2+
3+
@source "../ts";
4+
@source "../test";
5+
@source "../.storybook";
6+
@source "../*.{html,js}";
27

38
/**
49
* Custom Variants
@@ -105,94 +110,96 @@
105110
--color-shadow-highlight: light-dark(/* */ transparent, --alpha(#FFF / 08%));
106111
}
107112

108-
@layer base {
113+
@layer theme {
109114
/* High Contrast Mode */
110115
/* prettier-ignore */
111116
@media (prefers-contrast: more) {
112-
/* Colors/Labels */
113-
--color-label-primary: light-dark(/* */ #000 /* */, /* */ #FFF /* */);
114-
--color-label-secondary: light-dark(--alpha(#000 / 70%), --alpha(#FFF / 70%));
115-
--color-label-placeholder: light-dark(--alpha(#000 / 50%), --alpha(#FFF / 50%));
116-
--color-label-disabled: light-dark(--alpha(#000 / 40%), --alpha(#FFF / 40%));
117-
118-
--color-label-primary-inverted: light-dark(/* */ #FFF /* */, /* */ #000 /* */);
119-
--color-label-secondary-inverted: light-dark(--alpha(#FFF / 70%), --alpha(#000 / 70%));
120-
--color-label-placeholder-inverted: light-dark(--alpha(#FFF / 50%), --alpha(#000 / 50%));
121-
--color-label-disabled-inverted: light-dark(--alpha(#FFF / 40%), --alpha(#000 / 40%));
122-
123-
--color-label-primary-on-color: light-dark(/* */ #FFF /* */, /* */ #FFF /* */);
124-
--color-label-secondary-on-color: light-dark(--alpha(#FFF / 90%), --alpha(#FFF / 90%));
125-
--color-label-placeholder-on-color: light-dark(--alpha(#FFF / 60%), --alpha(#FFF / 60%));
126-
--color-label-disabled-on-color: light-dark(--alpha(#FFF / 50%), --alpha(#FFF / 50%));
127-
128-
/* Colors/Color Label */
129-
--color-color-label-primary: light-dark(/* */ #000ECC /* */, /* */ #D5D9FF /* */);
130-
--color-color-label-primary-disabled: light-dark(--alpha(#000ECC / 40%), --alpha(#D5D9FF / 40%));
131-
--color-color-label-light: light-dark(/* */ #D5D9FF /* */, /* */ #D5D9FF /* */);
132-
--color-color-label-light-disabled: light-dark(--alpha(#D5D9FF / 40%), --alpha(#D5D9FF / 40%));
133-
--color-color-label-affirmative: light-dark(/* */ #004D0F /* */, /* */ #4CEF6D /* */);
134-
--color-color-label-affirmative-disabled: light-dark(--alpha(#004D0F / 40%), --alpha(#4CEF6D / 40%));
135-
--color-color-label-destructive: light-dark(/* */ #8A0B00 /* */, /* */ #FFC5C2 /* */);
136-
--color-color-label-destructive-disabled: light-dark(--alpha(#8A0B00 / 40%), --alpha(#FFC5C2 / 40%));
137-
138-
/* Colors/Background */
139-
--color-background-primary: light-dark(/* */ #FFFFFF /* */, /* */ #121212 /* */);
140-
--color-background-secondary: light-dark(/* */ #F6F6F6 /* */, /* */ #1E1E1E /* */);
141-
--color-background-overlay: light-dark(--alpha(#000000 / 40%), --alpha(#000000 / 60%));
142-
143-
/* Colors/Elevated Background */
144-
--color-elevated-background-primary: light-dark(#FFFFFF, #222222);
145-
--color-elevated-background-secondary: light-dark(#F2F2F2, #2A2A2A);
146-
--color-elevated-background-tertiary: light-dark(#EAEAEA, #323232);
147-
--color-elevated-background-quaternary: light-dark(#262626, #3A3A3A);
148-
149-
/* Colors/Fill */
150-
--color-fill-primary: light-dark(/* */ #FFFFFF /* */, --alpha(#808080 / 30%));
151-
--color-fill-primary-pressed: light-dark(/* */ #EAEAEA /* */, --alpha(#808080 / 38%));
152-
--color-fill-secondary: light-dark(--alpha(#808080 / 22%), --alpha(#808080 / 30%));
153-
--color-fill-secondary-pressed: light-dark(--alpha(#808080 / 30%), --alpha(#808080 / 38%));
154-
--color-fill-selected: light-dark(--alpha(#808080 / 34%), --alpha(#808080 / 42%));
155-
--color-fill-inverted: light-dark(/* */ #2A2A2A /* */, /* */ #F6F6F6 /* */);
156-
--color-fill-inverted-pressed: light-dark(/* */ #363636 /* */, /* */ #E2E2E2 /* */);
157-
--color-fill-floating: light-dark(/* */ #FFFFFF /* */, /* */ #323232 /* */);
158-
--color-fill-floating-pressed: light-dark(/* */ #EAEAEA /* */, /* */ #3A3A3A /* */);
159-
--color-fill-on-media: light-dark(--alpha(#000000 / 85%), --alpha(#000000 / 85%));
160-
--color-fill-on-media-pressed: light-dark(--alpha(#000000 / 93%), --alpha(#000000 / 93%));
161-
162-
/* Colors/Message Fill */
163-
--color-message-fill-incoming-primary: light-dark(/* */ #E0E0E0 /* */, /* */ #424242 /* */);
164-
--color-message-fill-incoming-secondary: light-dark(--alpha(#FFFFFF / 90%), --alpha(#FFFFFF / 30%));
165-
--color-message-fill-incoming-tertiary: light-dark(--alpha(#FFFFFF / 70%), --alpha(#FFFFFF / 22%));
166-
--color-message-fill-outgoing-primary: light-dark(/* */ #0842B9 /* */, /* */ #0842B9 /* */);
167-
--color-message-fill-outgoing-secondary: light-dark(--alpha(#FFFFFF / 70%), --alpha(#FFFFFF / 70%));
168-
--color-message-fill-outgoing-tertiary: light-dark(--alpha(#FFFFFF / 30%), --alpha(#FFFFFF / 30%));
169-
170-
/* Colors/Color Fill */
171-
--color-color-fill-primary: light-dark(#2B3BED, #2B3BED);
172-
--color-color-fill-primary-pressed: light-dark(#1E2EE0, #1E2EE0);
173-
--color-color-fill-affirmative: light-dark(#1D7A2F, #1D7A2F);
174-
--color-color-fill-affirmative-pressed: light-dark(#115E23, #116E23);
175-
--color-color-fill-warning: light-dark(#F0C000, #F0C000);
176-
--color-color-fill-warning-pressed: light-dark(#E4B600, #E4B600);
177-
--color-color-fill-destructive: light-dark(#B7271A, #B7271A);
178-
--color-color-fill-destructive-pressed: light-dark(#A61609, #A61609);
179-
180-
/* Colors/Border */
181-
--color-border-primary: light-dark(--alpha(#000000 / 32%), --alpha(#FFFFFF / 32%));
182-
--color-border-secondary: light-dark(--alpha(#000000 / 16%), --alpha(#FFFFFF / 16%));
183-
--color-border-focused: light-dark(/* */ #A0A7FE /* */, /* */ #A0A7FE /* */);
184-
--color-border-selected: light-dark(/* */ #2B3BED /* */, /* */ #5563FF /* */);
185-
--color-border-selected-on-color: light-dark(/* */ #FFFFFF /* */, /* */ #FFFFFF /* */);
186-
--color-border-error: light-dark(/* */ #B7271A /* */, /* */ #FB4332 /* */);
187-
188-
/* Colors/Shadow */
189-
--color-shadow-elevation-1: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
190-
--color-shadow-elevation-2: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
191-
--color-shadow-elevation-3: light-dark(--alpha(#000 / 10%), --alpha(#000 / 20%));
192-
--color-shadow-elevation-4: light-dark(--alpha(#000 / 12%), --alpha(#000 / 24%));
193-
--color-shadow-elevation-5: light-dark(--alpha(#000 / 20%), --alpha(#000 / 40%));
194-
--color-shadow-outline: light-dark(--alpha(#000 / 32%), /* */ transparent);
195-
--color-shadow-highlight: light-dark(/* */ transparent, --alpha(#FFF / 32%));
117+
:root {
118+
/* Colors/Labels */
119+
--color-label-primary: light-dark(/* */ #000 /* */, /* */ #FFF /* */);
120+
--color-label-secondary: light-dark(--alpha(#000 / 70%), --alpha(#FFF / 70%));
121+
--color-label-placeholder: light-dark(--alpha(#000 / 50%), --alpha(#FFF / 50%));
122+
--color-label-disabled: light-dark(--alpha(#000 / 40%), --alpha(#FFF / 40%));
123+
124+
--color-label-primary-inverted: light-dark(/* */ #FFF /* */, /* */ #000 /* */);
125+
--color-label-secondary-inverted: light-dark(--alpha(#FFF / 70%), --alpha(#000 / 70%));
126+
--color-label-placeholder-inverted: light-dark(--alpha(#FFF / 50%), --alpha(#000 / 50%));
127+
--color-label-disabled-inverted: light-dark(--alpha(#FFF / 40%), --alpha(#000 / 40%));
128+
129+
--color-label-primary-on-color: light-dark(/* */ #FFF /* */, /* */ #FFF /* */);
130+
--color-label-secondary-on-color: light-dark(--alpha(#FFF / 90%), --alpha(#FFF / 90%));
131+
--color-label-placeholder-on-color: light-dark(--alpha(#FFF / 60%), --alpha(#FFF / 60%));
132+
--color-label-disabled-on-color: light-dark(--alpha(#FFF / 50%), --alpha(#FFF / 50%));
133+
134+
/* Colors/Color Label */
135+
--color-color-label-primary: light-dark(/* */ #000ECC /* */, /* */ #D5D9FF /* */);
136+
--color-color-label-primary-disabled: light-dark(--alpha(#000ECC / 40%), --alpha(#D5D9FF / 40%));
137+
--color-color-label-light: light-dark(/* */ #D5D9FF /* */, /* */ #D5D9FF /* */);
138+
--color-color-label-light-disabled: light-dark(--alpha(#D5D9FF / 40%), --alpha(#D5D9FF / 40%));
139+
--color-color-label-affirmative: light-dark(/* */ #004D0F /* */, /* */ #4CEF6D /* */);
140+
--color-color-label-affirmative-disabled: light-dark(--alpha(#004D0F / 40%), --alpha(#4CEF6D / 40%));
141+
--color-color-label-destructive: light-dark(/* */ #8A0B00 /* */, /* */ #FFC5C2 /* */);
142+
--color-color-label-destructive-disabled: light-dark(--alpha(#8A0B00 / 40%), --alpha(#FFC5C2 / 40%));
143+
144+
/* Colors/Background */
145+
--color-background-primary: light-dark(/* */ #FFFFFF /* */, /* */ #121212 /* */);
146+
--color-background-secondary: light-dark(/* */ #F6F6F6 /* */, /* */ #1E1E1E /* */);
147+
--color-background-overlay: light-dark(--alpha(#000000 / 40%), --alpha(#000000 / 60%));
148+
149+
/* Colors/Elevated Background */
150+
--color-elevated-background-primary: light-dark(#FFFFFF, #222222);
151+
--color-elevated-background-secondary: light-dark(#F2F2F2, #2A2A2A);
152+
--color-elevated-background-tertiary: light-dark(#EAEAEA, #323232);
153+
--color-elevated-background-quaternary: light-dark(#262626, #3A3A3A);
154+
155+
/* Colors/Fill */
156+
--color-fill-primary: light-dark(/* */ #FFFFFF /* */, --alpha(#808080 / 30%));
157+
--color-fill-primary-pressed: light-dark(/* */ #EAEAEA /* */, --alpha(#808080 / 38%));
158+
--color-fill-secondary: light-dark(--alpha(#808080 / 22%), --alpha(#808080 / 30%));
159+
--color-fill-secondary-pressed: light-dark(--alpha(#808080 / 30%), --alpha(#808080 / 38%));
160+
--color-fill-selected: light-dark(--alpha(#808080 / 34%), --alpha(#808080 / 42%));
161+
--color-fill-inverted: light-dark(/* */ #2A2A2A /* */, /* */ #F6F6F6 /* */);
162+
--color-fill-inverted-pressed: light-dark(/* */ #363636 /* */, /* */ #E2E2E2 /* */);
163+
--color-fill-floating: light-dark(/* */ #FFFFFF /* */, /* */ #323232 /* */);
164+
--color-fill-floating-pressed: light-dark(/* */ #EAEAEA /* */, /* */ #3A3A3A /* */);
165+
--color-fill-on-media: light-dark(--alpha(#000000 / 85%), --alpha(#000000 / 85%));
166+
--color-fill-on-media-pressed: light-dark(--alpha(#000000 / 93%), --alpha(#000000 / 93%));
167+
168+
/* Colors/Message Fill */
169+
--color-message-fill-incoming-primary: light-dark(/* */ #E0E0E0 /* */, /* */ #424242 /* */);
170+
--color-message-fill-incoming-secondary: light-dark(--alpha(#FFFFFF / 90%), --alpha(#FFFFFF / 30%));
171+
--color-message-fill-incoming-tertiary: light-dark(--alpha(#FFFFFF / 70%), --alpha(#FFFFFF / 22%));
172+
--color-message-fill-outgoing-primary: light-dark(/* */ #0842B9 /* */, /* */ #0842B9 /* */);
173+
--color-message-fill-outgoing-secondary: light-dark(--alpha(#FFFFFF / 70%), --alpha(#FFFFFF / 70%));
174+
--color-message-fill-outgoing-tertiary: light-dark(--alpha(#FFFFFF / 30%), --alpha(#FFFFFF / 30%));
175+
176+
/* Colors/Color Fill */
177+
--color-color-fill-primary: light-dark(#2B3BED, #2B3BED);
178+
--color-color-fill-primary-pressed: light-dark(#1E2EE0, #1E2EE0);
179+
--color-color-fill-affirmative: light-dark(#1D7A2F, #1D7A2F);
180+
--color-color-fill-affirmative-pressed: light-dark(#115E23, #116E23);
181+
--color-color-fill-warning: light-dark(#F0C000, #F0C000);
182+
--color-color-fill-warning-pressed: light-dark(#E4B600, #E4B600);
183+
--color-color-fill-destructive: light-dark(#B7271A, #B7271A);
184+
--color-color-fill-destructive-pressed: light-dark(#A61609, #A61609);
185+
186+
/* Colors/Border */
187+
--color-border-primary: light-dark(--alpha(#000000 / 32%), --alpha(#FFFFFF / 32%));
188+
--color-border-secondary: light-dark(--alpha(#000000 / 16%), --alpha(#FFFFFF / 16%));
189+
--color-border-focused: light-dark(/* */ #A0A7FE /* */, /* */ #A0A7FE /* */);
190+
--color-border-selected: light-dark(/* */ #2B3BED /* */, /* */ #5563FF /* */);
191+
--color-border-selected-on-color: light-dark(/* */ #FFFFFF /* */, /* */ #FFFFFF /* */);
192+
--color-border-error: light-dark(/* */ #B7271A /* */, /* */ #FB4332 /* */);
193+
194+
/* Colors/Shadow */
195+
--color-shadow-elevation-1: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
196+
--color-shadow-elevation-2: light-dark(--alpha(#000 / 08%), --alpha(#000 / 16%));
197+
--color-shadow-elevation-3: light-dark(--alpha(#000 / 10%), --alpha(#000 / 20%));
198+
--color-shadow-elevation-4: light-dark(--alpha(#000 / 12%), --alpha(#000 / 24%));
199+
--color-shadow-elevation-5: light-dark(--alpha(#000 / 20%), --alpha(#000 / 40%));
200+
--color-shadow-outline: light-dark(--alpha(#000 / 32%), /* */ transparent);
201+
--color-shadow-highlight: light-dark(/* */ transparent, --alpha(#FFF / 32%));
202+
}
196203
}
197204
}
198205

0 commit comments

Comments
 (0)