File size: 12,222 Bytes
2e1ab99 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 |
/* Color Tokens Light Theme */
:root,
:root[data-theme='light'] {
--bolt-elements-borderColor: theme('colors.alpha.gray.10');
--bolt-elements-borderColorActive: theme('colors.accent.600');
--bolt-elements-bg-depth-1: theme('colors.white');
--bolt-elements-bg-depth-2: theme('colors.gray.50');
--bolt-elements-bg-depth-3: theme('colors.gray.200');
--bolt-elements-bg-depth-4: theme('colors.alpha.gray.5');
--bolt-elements-textPrimary: theme('colors.gray.950');
--bolt-elements-textSecondary: theme('colors.gray.600');
--bolt-elements-textTertiary: theme('colors.gray.500');
--bolt-elements-code-background: theme('colors.gray.100');
--bolt-elements-code-text: theme('colors.gray.950');
--bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
--bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-button-primary-text: theme('colors.accent.500');
--bolt-elements-button-secondary-background: theme('colors.alpha.gray.5');
--bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.gray.10');
--bolt-elements-button-secondary-text: theme('colors.gray.950');
--bolt-elements-button-danger-background: theme('colors.alpha.red.10');
--bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
--bolt-elements-button-danger-text: theme('colors.red.500');
--bolt-elements-item-contentDefault: theme('colors.alpha.gray.50');
--bolt-elements-item-contentActive: theme('colors.gray.950');
--bolt-elements-item-contentAccent: theme('colors.accent.700');
--bolt-elements-item-contentDanger: theme('colors.red.500');
--bolt-elements-item-backgroundDefault: rgba(0, 0, 0, 0);
--bolt-elements-item-backgroundActive: theme('colors.alpha.gray.5');
--bolt-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
--bolt-elements-item-backgroundDanger: theme('colors.alpha.red.10');
--bolt-elements-loader-background: theme('colors.alpha.gray.10');
--bolt-elements-loader-progress: theme('colors.accent.500');
--bolt-elements-artifacts-background: theme('colors.white');
--bolt-elements-artifacts-backgroundHover: theme('colors.alpha.gray.2');
--bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
--bolt-elements-artifacts-inlineCode-background: theme('colors.gray.100');
--bolt-elements-artifacts-inlineCode-text: var(--bolt-elements-textPrimary);
--bolt-elements-actions-background: theme('colors.white');
--bolt-elements-actions-code-background: theme('colors.gray.800');
--bolt-elements-messages-background: theme('colors.gray.100');
--bolt-elements-messages-linkColor: theme('colors.accent.500');
--bolt-elements-messages-code-background: theme('colors.gray.800');
--bolt-elements-messages-inlineCode-background: theme('colors.gray.200');
--bolt-elements-messages-inlineCode-text: theme('colors.gray.800');
--bolt-elements-icon-success: theme('colors.green.500');
--bolt-elements-icon-error: theme('colors.red.500');
--bolt-elements-icon-primary: theme('colors.gray.950');
--bolt-elements-icon-secondary: theme('colors.gray.600');
--bolt-elements-icon-tertiary: theme('colors.gray.500');
--bolt-elements-dividerColor: theme('colors.gray.100');
--bolt-elements-prompt-background: theme('colors.alpha.white.80');
--bolt-elements-sidebar-dropdownShadow: theme('colors.alpha.gray.10');
--bolt-elements-sidebar-buttonBackgroundDefault: theme('colors.alpha.accent.10');
--bolt-elements-sidebar-buttonBackgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-sidebar-buttonText: theme('colors.accent.700');
--bolt-elements-preview-addressBar-background: theme('colors.gray.100');
--bolt-elements-preview-addressBar-backgroundHover: theme('colors.alpha.gray.5');
--bolt-elements-preview-addressBar-backgroundActive: theme('colors.white');
--bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
--bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
--bolt-elements-terminals-background: theme('colors.white');
--bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-4);
--bolt-elements-cta-background: theme('colors.gray.100');
--bolt-elements-cta-text: theme('colors.gray.950');
/* Terminal Colors */
--bolt-terminal-background: var(--bolt-elements-terminals-background);
--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-elements-borderColor: theme('colors.alpha.white.10');
--bolt-elements-borderColorActive: theme('colors.accent.500');
--bolt-elements-bg-depth-1: theme('colors.gray.950');
--bolt-elements-bg-depth-2: theme('colors.gray.900');
--bolt-elements-bg-depth-3: theme('colors.gray.800');
--bolt-elements-bg-depth-4: theme('colors.alpha.white.5');
--bolt-elements-textPrimary: theme('colors.white');
--bolt-elements-textSecondary: theme('colors.gray.400');
--bolt-elements-textTertiary: theme('colors.gray.500');
--bolt-elements-code-background: theme('colors.gray.800');
--bolt-elements-code-text: theme('colors.white');
--bolt-elements-button-primary-background: theme('colors.alpha.accent.10');
--bolt-elements-button-primary-backgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-button-primary-text: theme('colors.accent.500');
--bolt-elements-button-secondary-background: theme('colors.alpha.white.5');
--bolt-elements-button-secondary-backgroundHover: theme('colors.alpha.white.10');
--bolt-elements-button-secondary-text: theme('colors.white');
--bolt-elements-button-danger-background: theme('colors.alpha.red.10');
--bolt-elements-button-danger-backgroundHover: theme('colors.alpha.red.20');
--bolt-elements-button-danger-text: theme('colors.red.500');
--bolt-elements-item-contentDefault: theme('colors.alpha.white.50');
--bolt-elements-item-contentActive: theme('colors.white');
--bolt-elements-item-contentAccent: theme('colors.accent.500');
--bolt-elements-item-contentDanger: theme('colors.red.500');
--bolt-elements-item-backgroundDefault: rgba(255, 255, 255, 0);
--bolt-elements-item-backgroundActive: theme('colors.alpha.white.10');
--bolt-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
--bolt-elements-item-backgroundDanger: theme('colors.alpha.red.10');
--bolt-elements-loader-background: theme('colors.alpha.gray.10');
--bolt-elements-loader-progress: theme('colors.accent.500');
--bolt-elements-artifacts-background: theme('colors.gray.900');
--bolt-elements-artifacts-backgroundHover: theme('colors.alpha.white.5');
--bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
--bolt-elements-artifacts-inlineCode-background: theme('colors.gray.800');
--bolt-elements-artifacts-inlineCode-text: theme('colors.white');
--bolt-elements-actions-background: theme('colors.gray.900');
--bolt-elements-actions-code-background: theme('colors.gray.800');
--bolt-elements-messages-background: theme('colors.gray.800');
--bolt-elements-messages-linkColor: theme('colors.accent.500');
--bolt-elements-messages-code-background: theme('colors.gray.900');
--bolt-elements-messages-inlineCode-background: theme('colors.gray.700');
--bolt-elements-messages-inlineCode-text: var(--bolt-elements-textPrimary);
--bolt-elements-icon-success: theme('colors.green.400');
--bolt-elements-icon-error: theme('colors.red.400');
--bolt-elements-icon-primary: theme('colors.gray.950');
--bolt-elements-icon-secondary: theme('colors.gray.600');
--bolt-elements-icon-tertiary: theme('colors.gray.500');
--bolt-elements-dividerColor: theme('colors.gray.100');
--bolt-elements-prompt-background: theme('colors.alpha.gray.80');
--bolt-elements-sidebar-dropdownShadow: theme('colors.alpha.gray.30');
--bolt-elements-sidebar-buttonBackgroundDefault: theme('colors.alpha.accent.10');
--bolt-elements-sidebar-buttonBackgroundHover: theme('colors.alpha.accent.20');
--bolt-elements-sidebar-buttonText: theme('colors.accent.500');
--bolt-elements-preview-addressBar-background: var(--bolt-elements-bg-depth-1);
--bolt-elements-preview-addressBar-backgroundHover: theme('colors.alpha.white.5');
--bolt-elements-preview-addressBar-backgroundActive: var(--bolt-elements-bg-depth-1);
--bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
--bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
--bolt-elements-terminals-background: var(--bolt-elements-bg-depth-1);
--bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-3);
--bolt-elements-cta-background: theme('colors.alpha.white.10');
--bolt-elements-cta-text: theme('colors.white');
/* Terminal Colors */
--bolt-terminal-background: var(--bolt-elements-terminals-background);
--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: 54px;
--chat-max-width: 37rem;
--chat-min-width: 640px;
--workbench-width: min(calc(100% - var(--chat-min-width)), 1536px);
--workbench-inner-width: var(--workbench-width);
--workbench-left: calc(100% - var(--workbench-width));
/* Toasts */
--toastify-color-progress-success: var(--bolt-elements-icon-success);
--toastify-color-progress-error: var(--bolt-elements-icon-error);
/* 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);
}
|