mirror of
https://github.com/bitwarden/browser
synced 2026-02-16 16:59:30 +00:00
Use centralized theme variables for colors
This commit is contained in:
Jeffrey Holland
145
libs/components/src/tw-theme-variables.css
Normal file
145
libs/components/src/tw-theme-variables.css
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* Shared Theme Variables
|
||||
*
|
||||
* CSS custom properties for light and dark themes.
|
||||
* This file contains only variables without any Tailwind directives,
|
||||
* allowing it to be imported by any CSS file.
|
||||
*
|
||||
* Usage:
|
||||
* - For Tailwind components: imported by tw-theme.css
|
||||
* - For standalone CSS (e.g., inline menu): import directly
|
||||
*
|
||||
* Note: Color values are space-separated RGB values (e.g., "255 255 255")
|
||||
* to support Tailwind's opacity modifier syntax. When using in plain CSS,
|
||||
* wrap with rgb(): background-color: rgb(var(--color-background));
|
||||
*/
|
||||
|
||||
:root {
|
||||
--color-transparent-hover: rgb(0 0 0 / 0.02);
|
||||
--color-shadow: 168 179 200;
|
||||
|
||||
--color-background: 255 255 255;
|
||||
--color-background-alt: 243 246 249;
|
||||
--color-background-alt2: 23 92 219;
|
||||
--color-background-alt3: 22 55 146;
|
||||
--color-background-alt4: 2 15 102;
|
||||
|
||||
--color-primary-100: 219 229 246;
|
||||
--color-primary-300: 121 161 233;
|
||||
--color-primary-600: 23 93 220;
|
||||
--color-primary-700: 26 65 172;
|
||||
|
||||
--color-secondary-100: 230 233 239;
|
||||
--color-secondary-300: 168 179 200;
|
||||
--color-secondary-500: 90 109 145;
|
||||
--color-secondary-600: 83 99 131;
|
||||
--color-secondary-700: 63 75 99;
|
||||
|
||||
--color-info-100: 219 229 246;
|
||||
--color-info-600: 121 161 233;
|
||||
--color-info-700: 13 36 123;
|
||||
|
||||
--color-warning-100: 255 244 212;
|
||||
--color-warning-600: 255 191 0;
|
||||
--color-warning-700: 142 64 0;
|
||||
|
||||
--color-danger-100: 255 236 239;
|
||||
--color-danger-600: 203 38 58;
|
||||
--color-danger-700: 149 27 42;
|
||||
|
||||
--color-success-100: 213 243 216;
|
||||
--color-success-600: 12 128 24;
|
||||
--color-success-700: 8 81 15;
|
||||
|
||||
--color-notification-100: 255 225 247;
|
||||
--color-notification-600: 192 17 118;
|
||||
|
||||
--color-text-main: 27 32 41;
|
||||
--color-text-muted: 96 109 145;
|
||||
--color-text-contrast: 255 255 255;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 192 17 118;
|
||||
|
||||
--color-hover-default: rgb(26 65 172 / 0.1);
|
||||
--color-hover-contrast: rgb(255 255 255 / 0.15);
|
||||
|
||||
--color-marketing-logo: 23 93 220;
|
||||
--color-bw-blue: 23 93 220;
|
||||
|
||||
--tw-ring-offset-color: #ffffff;
|
||||
|
||||
--tw-sm-breakpoint: 640px;
|
||||
|
||||
--color-illustration-outline: 2 15 102;
|
||||
--color-illustration-bg-primary: 219 229 246;
|
||||
--color-illustration-bg-secondary: 170 195 239;
|
||||
--color-illustration-bg-tertiary: 255 255 255;
|
||||
--color-illustration-tertiary: 255 191 0;
|
||||
--color-illustration-logo: 23 93 220;
|
||||
}
|
||||
|
||||
.theme_light {
|
||||
/* should be left empty as white is the default */
|
||||
}
|
||||
|
||||
.theme_dark {
|
||||
--color-transparent-hover: rgb(255 255 255 / 0.02);
|
||||
--color-shadow: 0 0 0;
|
||||
|
||||
--color-background: 32 39 51;
|
||||
--color-background-alt: 18 26 39;
|
||||
--color-background-alt2: 47 52 61;
|
||||
--color-background-alt3: 48 57 70;
|
||||
--color-background-alt4: 18 26 39;
|
||||
|
||||
--color-primary-100: 29 46 99;
|
||||
--color-primary-300: 26 65 172;
|
||||
--color-primary-600: 101 171 255;
|
||||
--color-primary-700: 170 195 239;
|
||||
|
||||
--color-secondary-100: 48 57 70;
|
||||
--color-secondary-300: 82 91 106;
|
||||
--color-secondary-500: 121 128 142;
|
||||
--color-secondary-600: 143 152 166;
|
||||
--color-secondary-700: 158 167 181;
|
||||
|
||||
--color-success-100: 8 81 15;
|
||||
--color-success-600: 107 241 120;
|
||||
--color-success-700: 213 243 216;
|
||||
|
||||
--color-danger-100: 149 27 42;
|
||||
--color-danger-600: 255 78 99;
|
||||
--color-danger-700: 255 236 239;
|
||||
|
||||
--color-warning-100: 142 64 0;
|
||||
--color-warning-600: 255 191 0;
|
||||
--color-warning-700: 255 244 212;
|
||||
|
||||
--color-info-100: 13 36 123;
|
||||
--color-info-600: 121 161 233;
|
||||
--color-info-700: 219 229 246;
|
||||
|
||||
--color-notification-100: 117 37 83;
|
||||
--color-notification-600: 255 143 208;
|
||||
|
||||
--color-text-main: 243 246 249;
|
||||
--color-text-muted: 136 152 181;
|
||||
--color-text-contrast: 18 26 39;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 255 143 208;
|
||||
|
||||
--color-hover-default: rgb(170 195 239 / 0.1);
|
||||
--color-hover-contrast: rgb(0 0 0 / 0.15);
|
||||
|
||||
--color-marketing-logo: 255 255 255;
|
||||
--color-bw-blue: 23 93 220;
|
||||
|
||||
--tw-ring-offset-color: #1f242e;
|
||||
|
||||
--color-illustration-outline: 23 93 220;
|
||||
--color-illustration-bg-primary: 170 195 239;
|
||||
--color-illustration-bg-secondary: 121 161 233;
|
||||
--color-illustration-bg-tertiary: 243 246 249;
|
||||
--color-illustration-tertiary: 255 191 0;
|
||||
--color-illustration-logo: 255 255 255;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "theme.css";
|
||||
@import "tw-theme-variables.css";
|
||||
@import "@angular/cdk/a11y-prebuilt.css";
|
||||
@import "@angular/cdk/text-field-prebuilt.css";
|
||||
@import "./reset.css";
|
||||
@@ -12,136 +13,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-transparent-hover: rgb(0 0 0 / 0.02);
|
||||
--color-shadow: 168 179 200;
|
||||
|
||||
--color-background: 255 255 255;
|
||||
--color-background-alt: 243 246 249;
|
||||
--color-background-alt2: 23 92 219;
|
||||
--color-background-alt3: 22 55 146;
|
||||
--color-background-alt4: 2 15 102;
|
||||
|
||||
--color-primary-100: 219 229 246;
|
||||
--color-primary-300: 121 161 233;
|
||||
--color-primary-600: 23 93 220;
|
||||
--color-primary-700: 26 65 172;
|
||||
|
||||
--color-secondary-100: 230 233 239;
|
||||
--color-secondary-300: 168 179 200;
|
||||
--color-secondary-500: 90 109 145;
|
||||
--color-secondary-600: 83 99 131;
|
||||
--color-secondary-700: 63 75 99;
|
||||
|
||||
--color-info-100: 219 229 246;
|
||||
--color-info-600: 121 161 233;
|
||||
--color-info-700: 13 36 123;
|
||||
|
||||
--color-warning-100: 255 244 212;
|
||||
--color-warning-600: 255 191 0;
|
||||
--color-warning-700: 142 64 0;
|
||||
|
||||
--color-danger-100: 255 236 239;
|
||||
--color-danger-600: 203 38 58;
|
||||
--color-danger-700: 149 27 42;
|
||||
|
||||
--color-success-100: 213 243 216;
|
||||
--color-success-600: 12 128 24;
|
||||
--color-success-700: 8 81 15;
|
||||
|
||||
--color-notification-100: 255 225 247;
|
||||
--color-notification-600: 192 17 118;
|
||||
|
||||
--color-text-main: 27 32 41;
|
||||
--color-text-muted: 96 109 145;
|
||||
--color-text-contrast: 255 255 255;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 192 17 118;
|
||||
|
||||
--color-hover-default: rgb(26 65 172 / 0.1);
|
||||
--color-hover-contrast: rgb(255 255 255 / 0.15);
|
||||
|
||||
--color-marketing-logo: 23 93 220;
|
||||
--color-bw-blue: 23 93 220;
|
||||
|
||||
--tw-ring-offset-color: #ffffff;
|
||||
|
||||
--tw-sm-breakpoint: 640px;
|
||||
|
||||
--color-illustration-outline: 2 15 102;
|
||||
--color-illustration-bg-primary: 219 229 246;
|
||||
--color-illustration-bg-secondary: 170 195 239;
|
||||
--color-illustration-bg-tertiary: 255 255 255;
|
||||
--color-illustration-tertiary: 255 191 0;
|
||||
--color-illustration-logo: 23 93 220;
|
||||
}
|
||||
|
||||
.theme_light {
|
||||
/* should be left empty as white is the default */
|
||||
}
|
||||
|
||||
.theme_dark {
|
||||
--color-transparent-hover: rgb(255 255 255 / 0.02);
|
||||
--color-shadow: 0 0 0;
|
||||
|
||||
--color-background: 32 39 51;
|
||||
--color-background-alt: 18 26 39;
|
||||
--color-background-alt2: 47 52 61;
|
||||
--color-background-alt3: 48 57 70;
|
||||
--color-background-alt4: 18 26 39;
|
||||
|
||||
--color-primary-100: 29 46 99;
|
||||
--color-primary-300: 26 65 172;
|
||||
--color-primary-600: 101 171 255;
|
||||
--color-primary-700: 170 195 239;
|
||||
|
||||
--color-secondary-100: 48 57 70;
|
||||
--color-secondary-300: 82 91 106;
|
||||
--color-secondary-500: 121 128 142;
|
||||
--color-secondary-600: 143 152 166;
|
||||
--color-secondary-700: 158 167 181;
|
||||
|
||||
--color-success-100: 8 81 15;
|
||||
--color-success-600: 107 241 120;
|
||||
--color-success-700: 213 243 216;
|
||||
|
||||
--color-danger-100: 149 27 42;
|
||||
--color-danger-600: 255 78 99;
|
||||
--color-danger-700: 255 236 239;
|
||||
|
||||
--color-warning-100: 142 64 0;
|
||||
--color-warning-600: 255 191 0;
|
||||
--color-warning-700: 255 244 212;
|
||||
|
||||
--color-info-100: 13 36 123;
|
||||
--color-info-600: 121 161 233;
|
||||
--color-info-700: 219 229 246;
|
||||
|
||||
--color-notification-100: 117 37 83;
|
||||
--color-notification-600: 255 143 208;
|
||||
|
||||
--color-text-main: 243 246 249;
|
||||
--color-text-muted: 136 152 181;
|
||||
--color-text-contrast: 18 26 39;
|
||||
--color-text-alt2: 255 255 255;
|
||||
--color-text-code: 255 143 208;
|
||||
|
||||
--color-hover-default: rgb(170 195 239 / 0.1);
|
||||
--color-hover-contrast: rgb(0 0 0 / 0.15);
|
||||
|
||||
--color-marketing-logo: 255 255 255;
|
||||
--color-bw-blue: 23 93 220;
|
||||
|
||||
--tw-ring-offset-color: #1f242e;
|
||||
|
||||
--color-illustration-outline: 23 93 220;
|
||||
--color-illustration-bg-primary: 170 195 239;
|
||||
--color-illustration-bg-secondary: 121 161 233;
|
||||
--color-illustration-bg-tertiary: 243 246 249;
|
||||
--color-illustration-tertiary: 255 191 0;
|
||||
--color-illustration-logo: 255 255 255;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/**
|
||||
* tw-break-words does not work with table cells:
|
||||
|
||||
Reference in New Issue
Block a user