alouette
Version:
A modern, customizable design system built on top of NativeWind v5 with configurable defaults
512 lines (509 loc) • 22.2 kB
JavaScript
import { Platform } from 'react-native';
const themeVariables = Platform.OS === "web" ? {} : {
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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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-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": "#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"
}
};
export { themeVariables };
//# sourceMappingURL=defaultThemeVariables-react-native.es.js.map