alouette
Version:
A modern, customizable design system built on top of NativeWind v5 with configurable defaults
423 lines (410 loc) • 17.2 kB
CSS
/* Generated by scripts/build-css.ts. DO NOT EDIT.
Default alouette palette in sRGB hex (optional). Import after
'alouette/core.css'. Complete on its own — add
'alouette/default-palette-oklch.css' after it to opt web into the wide-gamut
ramp. A BYO app imports its own generateTheme() palette CSS instead. */
@theme {
/* color tokens — light theme as defaults, enabling bg-*, text-*, border-*
color utilities. This block is the whole palette on native, where ScopedTheme
overrides it at runtime with the themeVariables map fed to NativeWind's
VariableContextProvider. Web instead resolves the .<theme> blocks below,
applied as a className (the closest theme class wins, through inheritance). */
--color-translucent: #ffffff66;
--color-screen: #eeeeee;
--color-highlight: #ffffff;
--color-disabled-sharp: #5d5d5d;
--color-disabled-muted: #838383;
--color-disabled-interactive: #bababa;
--color-disabled-interactive-muted: #dbdbdb;
--color-sharp: #262626;
--color-muted: #4d4d4d;
--color-form-border-disabled: #bababa;
--color-form-placeholder: #5d5d5d;
--color-form-disabled-text: #4d4d4d;
--color-interactive-contained-disabled: #bababa;
--color-interactive-outlined-disabled: #bababa;
--color-interactive-accent-outlined-disabled: #bababa;
--color-surface: #f8f8f8;
--color-enabled: #5d5d5d;
--color-highlight-accent: #dbdbdb;
--color-lowered: #dbdbdb;
--color-screen-gradient-start: #dbdbdb;
--color-screen-gradient-middle: #cecece;
--color-screen-gradient-end: #bababa;
--color-border-muted: #cecece;
--color-border-sharp: #5d5d5d;
--color-interactive-contained-pressable: #ffffff;
--color-interactive-contained-hover: #f8f8f8;
--color-interactive-contained-focus: #f8f8f8;
--color-interactive-contained-active: #eeeeee;
--color-interactive-outlined-pressable: #5d5d5d;
--color-interactive-outlined-hover: #838383;
--color-interactive-outlined-focus: #838383;
--color-interactive-outlined-active: #838383;
--color-interactive-outlined-outline-focus: #838383;
--color-interactive-active: #5d5d5d;
--color-interactive-pressable: #4d4d4d;
--color-interactive-hover: #262626;
--color-accent: #262626;
--color-on-accent: #262626;
--color-on-accent-muted: #5d5d5d;
--color-selection: #4d4d4d40;
}
@layer theme {
@supports (display: contents) {
.light {
--color-translucent: #ffffff66;
--color-screen: #eeeeee;
--color-highlight: #ffffff;
--color-disabled-sharp: #5d5d5d;
--color-disabled-muted: #838383;
--color-disabled-interactive: #bababa;
--color-disabled-interactive-muted: #dbdbdb;
--color-sharp: #262626;
--color-muted: #4d4d4d;
--color-form-border-disabled: #bababa;
--color-form-placeholder: #5d5d5d;
--color-form-disabled-text: #4d4d4d;
--color-interactive-contained-disabled: #bababa;
--color-interactive-outlined-disabled: #bababa;
--color-interactive-accent-outlined-disabled: #bababa;
--color-surface: #f8f8f8;
--color-enabled: #5d5d5d;
--color-highlight-accent: #dbdbdb;
--color-lowered: #dbdbdb;
--color-screen-gradient-start: #dbdbdb;
--color-screen-gradient-middle: #cecece;
--color-screen-gradient-end: #bababa;
--color-border-muted: #cecece;
--color-border-sharp: #5d5d5d;
--color-interactive-contained-pressable: #ffffff;
--color-interactive-contained-hover: #f8f8f8;
--color-interactive-contained-focus: #f8f8f8;
--color-interactive-contained-active: #eeeeee;
--color-interactive-outlined-pressable: #5d5d5d;
--color-interactive-outlined-hover: #838383;
--color-interactive-outlined-focus: #838383;
--color-interactive-outlined-active: #838383;
--color-interactive-outlined-outline-focus: #838383;
--color-interactive-active: #5d5d5d;
--color-interactive-pressable: #4d4d4d;
--color-interactive-hover: #262626;
--color-accent: #262626;
--color-on-accent: #262626;
--color-on-accent-muted: #5d5d5d;
--color-selection: #4d4d4d40;
}
.dark {
--color-translucent: #1f1e1e55;
--color-screen: #1f1f1f;
--color-highlight: #333333;
--color-disabled-sharp: #d2d2d2;
--color-disabled-muted: #d2d2d2;
--color-disabled-interactive: #555555;
--color-disabled-interactive-muted: #333333;
--color-sharp: #f2f2f2;
--color-muted: #d2d2d2;
--color-form-border-disabled: #555555;
--color-form-placeholder: #bcbcbc;
--color-form-disabled-text: #d2d2d2;
--color-interactive-contained-disabled: #3d3d3d;
--color-interactive-outlined-disabled: #484848;
--color-interactive-accent-outlined-disabled: #484848;
--color-surface: #292929;
--color-enabled: #555555;
--color-highlight-accent: #333333;
--color-lowered: #121212;
--color-screen-gradient-start: #292929;
--color-screen-gradient-middle: #1f1f1f;
--color-screen-gradient-end: #121212;
--color-border-muted: #555555;
--color-border-sharp: #bcbcbc;
--color-interactive-contained-pressable: #484848;
--color-interactive-contained-hover: #555555;
--color-interactive-contained-focus: #555555;
--color-interactive-contained-active: #555555;
--color-interactive-outlined-pressable: #555555;
--color-interactive-outlined-hover: #bcbcbc;
--color-interactive-outlined-focus: #bcbcbc;
--color-interactive-outlined-active: #bcbcbc;
--color-interactive-outlined-outline-focus: #bcbcbc;
--color-interactive-active: #d2d2d2;
--color-interactive-pressable: #f2f2f2;
--color-interactive-hover: #ffffff;
--color-accent: #ffffff;
--color-on-accent: #ffffff;
--color-on-accent-muted: #f2f2f2;
--color-selection: #f2f2f240;
}
.light_brand {
--color-surface: #edf6fa;
--color-enabled: #0a6783;
--color-highlight-accent: #bde2f1;
--color-lowered: #bde2f1;
--color-screen-gradient-start: #bde2f1;
--color-screen-gradient-middle: #98d9f3;
--color-screen-gradient-end: #60caf0;
--color-border-muted: #98d9f3;
--color-border-sharp: #0a6783;
--color-interactive-contained-pressable: #0a6783;
--color-interactive-contained-hover: #0e7a9a;
--color-interactive-contained-focus: #0e7a9a;
--color-interactive-contained-active: #2493b7;
--color-interactive-outlined-pressable: #0a6783;
--color-interactive-outlined-hover: #2493b7;
--color-interactive-outlined-focus: #2493b7;
--color-interactive-outlined-active: #2493b7;
--color-interactive-outlined-outline-focus: #2493b7;
--color-interactive-active: #0a6783;
--color-interactive-pressable: #07556d;
--color-interactive-hover: #032b38;
--color-accent: #07556d;
--color-on-accent: #ffffff;
--color-on-accent-muted: #bde2f1;
--color-selection: #07556d40;
}
.light_info {
--color-surface: #eff6fa;
--color-enabled: #0a668b;
--color-highlight-accent: #c3e0f1;
--color-lowered: #c3e0f1;
--color-screen-gradient-start: #c3e0f1;
--color-screen-gradient-middle: #a2d6f3;
--color-screen-gradient-end: #75c6f0;
--color-border-muted: #a2d6f3;
--color-border-sharp: #0a668b;
--color-interactive-contained-pressable: #0a668b;
--color-interactive-contained-hover: #0d78a3;
--color-interactive-contained-focus: #0d78a3;
--color-interactive-contained-active: #2391c1;
--color-interactive-outlined-pressable: #0a668b;
--color-interactive-outlined-hover: #2391c1;
--color-interactive-outlined-focus: #2391c1;
--color-interactive-outlined-active: #2391c1;
--color-interactive-outlined-outline-focus: #2391c1;
--color-interactive-active: #0a668b;
--color-interactive-pressable: #065473;
--color-interactive-hover: #032a3c;
--color-accent: #065473;
--color-on-accent: #ffffff;
--color-on-accent-muted: #c3e0f1;
--color-selection: #06547340;
}
.light_success {
--color-surface: #e9fae9;
--color-enabled: #0a721f;
--color-highlight-accent: #a2f2a4;
--color-lowered: #a2f2a4;
--color-screen-gradient-start: #a2f2a4;
--color-screen-gradient-middle: #6aef75;
--color-screen-gradient-end: #5ada65;
--color-border-muted: #6aef75;
--color-border-sharp: #0a721f;
--color-interactive-contained-pressable: #0a721f;
--color-interactive-contained-hover: #0e8626;
--color-interactive-contained-focus: #0e8626;
--color-interactive-contained-active: #24a037;
--color-interactive-outlined-pressable: #0a721f;
--color-interactive-outlined-hover: #24a037;
--color-interactive-outlined-focus: #24a037;
--color-interactive-outlined-active: #24a037;
--color-interactive-outlined-outline-focus: #24a037;
--color-interactive-active: #0a721f;
--color-interactive-pressable: #075e18;
--color-interactive-hover: #033009;
--color-accent: #075e18;
--color-on-accent: #ffffff;
--color-on-accent-muted: #a2f2a4;
--color-selection: #075e1840;
}
.light_warning {
--color-surface: #faf5e1;
--color-enabled: #916f0c;
--color-highlight-accent: #f5e7b7;
--color-lowered: #f5e7b7;
--color-screen-gradient-start: #f5e7b7;
--color-screen-gradient-middle: #f6d97b;
--color-screen-gradient-end: #e3c156;
--color-border-muted: #f6d97b;
--color-border-sharp: #916f0c;
--color-interactive-contained-pressable: #916f0c;
--color-interactive-contained-hover: #9f7a0f;
--color-interactive-contained-focus: #9f7a0f;
--color-interactive-contained-active: #e2b930;
--color-interactive-outlined-pressable: #916f0c;
--color-interactive-outlined-hover: #e2b930;
--color-interactive-outlined-focus: #e2b930;
--color-interactive-outlined-active: #e2b930;
--color-interactive-outlined-outline-focus: #e2b930;
--color-interactive-active: #916f0c;
--color-interactive-pressable: #694d06;
--color-interactive-hover: #342302;
--color-accent: #694d06;
--color-on-accent: #ffffff;
--color-on-accent-muted: #f5e7b7;
--color-selection: #694d0640;
}
.light_danger {
--color-surface: #faf2f2;
--color-enabled: #af0d23;
--color-highlight-accent: #f1d2d1;
--color-lowered: #f1d2d1;
--color-screen-gradient-start: #f1d2d1;
--color-screen-gradient-middle: #f4bfbc;
--color-screen-gradient-end: #f1a2a0;
--color-border-muted: #f4bfbc;
--color-border-sharp: #af0d23;
--color-interactive-contained-pressable: #af0d23;
--color-interactive-contained-hover: #cd112c;
--color-interactive-contained-focus: #cd112c;
--color-interactive-contained-active: #f1293f;
--color-interactive-outlined-pressable: #af0d23;
--color-interactive-outlined-hover: #f1293f;
--color-interactive-outlined-focus: #f1293f;
--color-interactive-outlined-active: #f1293f;
--color-interactive-outlined-outline-focus: #f1293f;
--color-interactive-active: #af0d23;
--color-interactive-pressable: #92091a;
--color-interactive-hover: #4e0408;
--color-accent: #92091a;
--color-on-accent: #ffffff;
--color-on-accent-muted: #f1d2d1;
--color-selection: #92091a40;
}
.dark_brand {
--color-surface: #0e2831;
--color-enabled: #1f6d87;
--color-highlight-accent: #12323e;
--color-lowered: #071418;
--color-screen-gradient-start: #0e2831;
--color-screen-gradient-middle: #0a1d25;
--color-screen-gradient-end: #071418;
--color-border-muted: #1f6d87;
--color-border-sharp: #37add5;
--color-interactive-contained-pressable: #184f61;
--color-interactive-contained-hover: #1f6d87;
--color-interactive-contained-focus: #1f6d87;
--color-interactive-contained-active: #1f6d87;
--color-interactive-outlined-pressable: #1f6d87;
--color-interactive-outlined-hover: #37add5;
--color-interactive-outlined-focus: #37add5;
--color-interactive-outlined-active: #37add5;
--color-interactive-outlined-outline-focus: #37add5;
--color-interactive-active: #74d2f6;
--color-interactive-pressable: #9edef7;
--color-interactive-hover: #dff4fd;
--color-accent: #9edef7;
--color-on-accent: #ffffff;
--color-on-accent-muted: #9edef7;
--color-selection: #9edef740;
}
.dark_info {
--color-surface: #0e2734;
--color-enabled: #1f6b8e;
--color-highlight-accent: #123242;
--color-lowered: #07131a;
--color-screen-gradient-start: #0e2734;
--color-screen-gradient-middle: #0a1d27;
--color-screen-gradient-end: #07131a;
--color-border-muted: #1f6b8e;
--color-border-sharp: #36abe0;
--color-interactive-contained-pressable: #184e67;
--color-interactive-contained-hover: #1f6b8e;
--color-interactive-contained-focus: #1f6b8e;
--color-interactive-contained-active: #1f6b8e;
--color-interactive-outlined-pressable: #1f6b8e;
--color-interactive-outlined-hover: #36abe0;
--color-interactive-outlined-focus: #36abe0;
--color-interactive-outlined-active: #36abe0;
--color-interactive-outlined-outline-focus: #36abe0;
--color-interactive-active: #85cff6;
--color-interactive-pressable: #a8dbf7;
--color-interactive-hover: #e2f3fd;
--color-accent: #a8dbf7;
--color-on-accent: #ffffff;
--color-on-accent-muted: #a8dbf7;
--color-selection: #a8dbf740;
}
.dark_success {
--color-surface: #0f2b11;
--color-enabled: #1f772a;
--color-highlight-accent: #123715;
--color-lowered: #071508;
--color-screen-gradient-start: #0f2b11;
--color-screen-gradient-middle: #0b200c;
--color-screen-gradient-end: #071508;
--color-border-muted: #1f772a;
--color-border-sharp: #37bc48;
--color-interactive-contained-pressable: #19561f;
--color-interactive-contained-hover: #1f772a;
--color-interactive-contained-focus: #1f772a;
--color-interactive-contained-active: #1f772a;
--color-interactive-outlined-pressable: #1f772a;
--color-interactive-outlined-hover: #37bc48;
--color-interactive-outlined-focus: #37bc48;
--color-interactive-outlined-active: #37bc48;
--color-interactive-outlined-outline-focus: #37bc48;
--color-interactive-active: #4fe760;
--color-interactive-pressable: #5df76d;
--color-interactive-hover: #d5fdd5;
--color-accent: #5df76d;
--color-on-accent: #ffffff;
--color-on-accent-muted: #5df76d;
--color-selection: #5df76d40;
}
.dark_warning {
--color-surface: #57451f;
--color-enabled: #8f7021;
--color-highlight-accent: #685223;
--color-lowered: #322714;
--color-screen-gradient-start: #57451f;
--color-screen-gradient-middle: #3e3016;
--color-screen-gradient-end: #322714;
--color-border-muted: #8f7021;
--color-border-sharp: #e0b93c;
--color-interactive-contained-pressable: #846724;
--color-interactive-contained-hover: #8f7021;
--color-interactive-contained-focus: #8f7021;
--color-interactive-contained-active: #8f7021;
--color-interactive-outlined-pressable: #8f7021;
--color-interactive-outlined-hover: #e0b93c;
--color-interactive-outlined-focus: #e0b93c;
--color-interactive-outlined-active: #e0b93c;
--color-interactive-outlined-outline-focus: #e0b93c;
--color-interactive-active: #f4cd4b;
--color-interactive-pressable: #f9dc7e;
--color-interactive-hover: #fdf0c4;
--color-accent: #f9dc7e;
--color-on-accent: #ffffff;
--color-on-accent-muted: #f9dc7e;
--color-selection: #f9dc7e40;
}
.dark_danger {
--color-surface: #421110;
--color-enabled: #b2242d;
--color-highlight-accent: #531514;
--color-lowered: #220907;
--color-screen-gradient-start: #421110;
--color-screen-gradient-middle: #320c0b;
--color-screen-gradient-end: #220907;
--color-border-muted: #b2242d;
--color-border-sharp: #f56d6d;
--color-interactive-contained-pressable: #811c20;
--color-interactive-contained-hover: #b2242d;
--color-interactive-contained-focus: #b2242d;
--color-interactive-contained-active: #b2242d;
--color-interactive-outlined-pressable: #b2242d;
--color-interactive-outlined-hover: #f56d6d;
--color-interactive-outlined-focus: #f56d6d;
--color-interactive-outlined-active: #f56d6d;
--color-interactive-outlined-outline-focus: #f56d6d;
--color-interactive-active: #f7aeac;
--color-interactive-pressable: #f8c4c2;
--color-interactive-hover: #fdebeb;
--color-accent: #f8c4c2;
--color-on-accent: #ffffff;
--color-on-accent-muted: #f8c4c2;
--color-selection: #f8c4c240;
}
}
}