mirror of
https://github.com/stackblitz/bolt.new
synced 2024-11-27 22:42:21 +00:00
129 lines
5.3 KiB
SCSS
129 lines
5.3 KiB
SCSS
/* Color Tokens Light Theme */
|
|
:root,
|
|
:root[data-theme='light'] {
|
|
--bolt-background-primary: theme('colors.gray.0');
|
|
--bolt-background-secondary: theme('colors.gray.50');
|
|
--bolt-background-active: theme('colors.gray.200');
|
|
--bolt-background-accent: theme('colors.accent.600');
|
|
--bolt-background-accent-secondary: theme('colors.accent.600');
|
|
--bolt-background-accent-active: theme('colors.accent.500');
|
|
|
|
--bolt-text-primary: theme('colors.gray.800');
|
|
--bolt-text-primary-inverted: theme('colors.gray.0');
|
|
--bolt-text-secondary: theme('colors.gray.600');
|
|
--bolt-text-secondary-inverted: theme('colors.gray.200');
|
|
--bolt-text-disabled: theme('colors.gray.400');
|
|
--bolt-text-accent: theme('colors.accent.600');
|
|
--bolt-text-positive: theme('colors.positive.700');
|
|
--bolt-text-warning: theme('colors.warning.600');
|
|
--bolt-text-negative: theme('colors.negative.600');
|
|
|
|
--bolt-border-primary: theme('colors.gray.200');
|
|
--bolt-border-accent: theme('colors.accent.600');
|
|
|
|
/* Terminal Colors */
|
|
--bolt-terminal-background: var(--bolt-background-primary);
|
|
--bolt-terminal-foreground: #333333;
|
|
--bolt-terminal-selection-background: #00000040;
|
|
--bolt-terminal-black: #000000;
|
|
--bolt-terminal-red: #cd3131;
|
|
--bolt-terminal-green: #00bc00;
|
|
--bolt-terminal-yellow: #949800;
|
|
--bolt-terminal-blue: #0451a5;
|
|
--bolt-terminal-magenta: #bc05bc;
|
|
--bolt-terminal-cyan: #0598bc;
|
|
--bolt-terminal-white: #555555;
|
|
--bolt-terminal-brightBlack: #686868;
|
|
--bolt-terminal-brightRed: #cd3131;
|
|
--bolt-terminal-brightGreen: #00bc00;
|
|
--bolt-terminal-brightYellow: #949800;
|
|
--bolt-terminal-brightBlue: #0451a5;
|
|
--bolt-terminal-brightMagenta: #bc05bc;
|
|
--bolt-terminal-brightCyan: #0598bc;
|
|
--bolt-terminal-brightWhite: #a5a5a5;
|
|
}
|
|
|
|
/* Color Tokens Dark Theme */
|
|
:root,
|
|
:root[data-theme='dark'] {
|
|
--bolt-background-primary: theme('colors.gray.0');
|
|
--bolt-background-secondary: theme('colors.gray.50');
|
|
--bolt-background-active: theme('colors.gray.200');
|
|
--bolt-background-accent: theme('colors.accent.600');
|
|
--bolt-background-accent-secondary: theme('colors.accent.600');
|
|
--bolt-background-accent-active: theme('colors.accent.500');
|
|
|
|
--bolt-text-primary: theme('colors.gray.800');
|
|
--bolt-text-primary-inverted: theme('colors.gray.0');
|
|
--bolt-text-secondary: theme('colors.gray.600');
|
|
--bolt-text-secondary-inverted: theme('colors.gray.200');
|
|
--bolt-text-disabled: theme('colors.gray.400');
|
|
--bolt-text-accent: theme('colors.accent.600');
|
|
--bolt-text-positive: theme('colors.positive.700');
|
|
--bolt-text-warning: theme('colors.warning.600');
|
|
--bolt-text-negative: theme('colors.negative.600');
|
|
|
|
--bolt-border-primary: theme('colors.gray.200');
|
|
--bolt-border-accent: theme('colors.accent.600');
|
|
|
|
/* Terminal Colors */
|
|
--bolt-terminal-background: #16181d;
|
|
--bolt-terminal-foreground: #eff0eb;
|
|
--bolt-terminal-selection-background: #97979b33;
|
|
--bolt-terminal-black: #000000;
|
|
--bolt-terminal-red: #ff5c57;
|
|
--bolt-terminal-green: #5af78e;
|
|
--bolt-terminal-yellow: #f3f99d;
|
|
--bolt-terminal-blue: #57c7ff;
|
|
--bolt-terminal-magenta: #ff6ac1;
|
|
--bolt-terminal-cyan: #9aedfe;
|
|
--bolt-terminal-white: #f1f1f0;
|
|
--bolt-terminal-brightBlack: #686868;
|
|
--bolt-terminal-brightRed: #ff5c57;
|
|
--bolt-terminal-brightGreen: #5af78e;
|
|
--bolt-terminal-brightYellow: #f3f99d;
|
|
--bolt-terminal-brightBlue: #57c7ff;
|
|
--bolt-terminal-brightMagenta: #ff6ac1;
|
|
--bolt-terminal-brightCyan: #9aedfe;
|
|
--bolt-terminal-brightWhite: #f1f1f0;
|
|
}
|
|
|
|
/*
|
|
* Element Tokens
|
|
*
|
|
* Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
|
|
*/
|
|
:root {
|
|
--header-height: 65px;
|
|
|
|
--z-index-max: 999;
|
|
|
|
/* App */
|
|
--bolt-elements-app-backgroundColor: var(--bolt-background-primary);
|
|
--bolt-elements-app-borderColor: var(--bolt-border-primary);
|
|
--bolt-elements-app-textColor: var(--bolt-text-primary);
|
|
--bolt-elements-app-linkColor: var(--bolt-text-accent);
|
|
|
|
/* Terminal */
|
|
--bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);
|
|
--bolt-elements-terminal-textColor: var(--bolt-terminal-foreground);
|
|
--bolt-elements-terminal-cursorColor: var(--bolt-terminal-foreground);
|
|
--bolt-elements-terminal-selection-backgroundColor: var(--bolt-terminal-selection-background);
|
|
--bolt-elements-terminal-color-black: var(--bolt-terminal-black);
|
|
--bolt-elements-terminal-color-red: var(--bolt-terminal-red);
|
|
--bolt-elements-terminal-color-green: var(--bolt-terminal-green);
|
|
--bolt-elements-terminal-color-yellow: var(--bolt-terminal-yellow);
|
|
--bolt-elements-terminal-color-blue: var(--bolt-terminal-blue);
|
|
--bolt-elements-terminal-color-magenta: var(--bolt-terminal-magenta);
|
|
--bolt-elements-terminal-color-cyan: var(--bolt-terminal-cyan);
|
|
--bolt-elements-terminal-color-white: var(--bolt-terminal-white);
|
|
--bolt-elements-terminal-color-brightBlack: var(--bolt-terminal-brightBlack);
|
|
--bolt-elements-terminal-color-brightRed: var(--bolt-terminal-brightRed);
|
|
--bolt-elements-terminal-color-brightGreen: var(--bolt-terminal-brightGreen);
|
|
--bolt-elements-terminal-color-brightYellow: var(--bolt-terminal-brightYellow);
|
|
--bolt-elements-terminal-color-brightBlue: var(--bolt-terminal-brightBlue);
|
|
--bolt-elements-terminal-color-brightMagenta: var(--bolt-terminal-brightMagenta);
|
|
--bolt-elements-terminal-color-brightCyan: var(--bolt-terminal-brightCyan);
|
|
--bolt-elements-terminal-color-brightWhite: var(--bolt-terminal-brightWhite);
|
|
}
|