bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-09 13:10:17 +00:00
Code Issues Releases Wiki Activity

Use variables-export.css as the source of truth

Browse Source
This commit is contained in:
Jeffrey Holland
2025-12-15 12:53:22 +01:00
parent f00fb081ca
commit cdf7b54953
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
apps/browser/src/autofill/shared/styles/variables.scss
View File

@@ -1,36 +1,37 @@
$dark-icon-themes: "theme_dark";
@import "./variables-export.css" $dark-icon-themes: "theme_dark";
$font-family-sans-serif: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-source-code-pro: "Source Code Pro", monospace;
$font-size-base: 14px;
$font-family-sans-serif: var(--autofill-font-family-sans-serif);
$font-family-source-code-pro: var(--autofill-font-family-source-code-pro);
$font-size-base: var(--autofill-font-size-base);
$text-color-light: #212529;
$muted-text-color-light: #6c747c;
$background-color-light: #ffffff;
$background-offset-color-light: #f0f0f0;
$brand-primary-light: #175ddc;
$password-special-color-light: #b80017;
$password-number-color-light: #1452c1;
$success-color-light: #017e45;
$error-color-light: #c83522;
$text-color-light: var(--autofill-text-color-light);
$muted-text-color-light: var(--autofill-muted-text-color-light);
$background-color-light: var(--autofill-background-color-light);
$background-offset-color-light: var(--autofill-background-offset-color-light);
$border-color-light: var(--autofill-border-color-light);
$brand-primary-light: var(--autofill-brand-primary-light);
$focus-outline-color-light: var(--autofill-focus-outline-color-light);
$password-special-color-light: var(--autofill-password-special-color-light);
$password-number-color-light: var(--autofill-password-number-color-light);
$success-color-light: var(--autofill-success-color-light);
$error-color-light: var(--autofill-error-color-light);
$text-color-dark: #ffffff;
$muted-text-color-dark: #bac0ce;
$background-color-dark: #2f343d;
$background-offset-color-dark: darken(#2f343d, 2.75%);
$border-color-dark: #ddd;
$brand-primary-dark: #6f9df1;
$password-special-color-dark: #ff8d85;
$password-number-color-dark: #6f9df1;
$success-color-dark: #8db89b;
$error-color-dark: #ee9792;
$text-color-dark: var(--autofill-text-color-dark);
$muted-text-color-dark: var(--autofill-muted-text-color-dark);
$background-color-dark: var(--autofill-background-color-dark);
$background-offset-color-dark: var(--autofill-background-offset-color-dark);
$border-color-dark: var(--autofill-border-color-dark);
$brand-primary-dark: var(--autofill-brand-primary-dark);
$focus-outline-color-dark: var(--autofill-focus-outline-color-dark);
$password-special-color-dark: var(--autofill-password-special-color-dark);
$password-number-color-dark: var(--autofill-password-number-color-dark);
$success-color-dark: var(--autofill-success-color-dark);
$error-color-dark: var(--autofill-error-color-dark);
$muted-blue: #5a6d91;
$muted-grey: #bac0ce;
$border-color: #ced4dc;
$muted-blue: var(--autofill-muted-blue);
$muted-grey: var(--autofill-muted-grey);
$border-radius: 3px;
$focus-outline-color: #1252a3;
$border-radius: var(--autofill-border-radius);
$themes: (
light: (
@@ -41,9 +42,9 @@ $themes: (
primaryColor: $brand-primary-light,
buttonPrimaryColor: $brand-primary-light,
textContrast: $background-color-light,
inputBorderColor: darken($border-color-dark, 2.75%),
inputBorderColor: $border-color-light,
inputBackgroundColor: $background-color-light,
borderColor: $border-color,
borderColor: $border-color-light,
focusOutlineColor: $focus-outline-color,
successColor: $success-color-light,
errorColor: $error-color-light,
@@ -59,10 +60,10 @@ $themes: (
buttonPrimaryColor: $brand-primary-dark,
primaryColor: $brand-primary-dark,
textContrast: $background-color-dark,
inputBorderColor: #4c525f,
inputBorderColor: $border-color-dark,
inputBackgroundColor: $background-color-dark,
borderColor: #4c525f,
focusOutlineColor: lighten($focus-outline-color, 25%),
borderColor: $border-color-dark,
focusOutlineColor: $focus-outline-color-dark,
successColor: $success-color-dark,
errorColor: $error-color-dark,
passkeysAuthenticating: $muted-grey,
@@ -89,7 +90,6 @@ $themes: (
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}