diff --git a/MIGRATION.md b/MIGRATION.md index abc1c0f7..80ca02e9 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -35,42 +35,96 @@ This new path points to the `dist` directory, ensuring that you're importing the ### Brand Colors -### Brand Colors Brand Evolution +- Grey updates +- grey000 added +- grey025 added +- grey050 added +- grey030 removed +- grey040 removed +- grey750 removed +- grey1000 added - Blue updates -- blue000 no longer exist +- blue000 removed - blue025 added -- blue 050 added - -- Orange updates -- orange000 no longer exist -- orange 025 added -- orange 050 added +- blue050 added +- blue400-15 added +- blue500-10 added - Green updates -- green000 no longer exist +- green000 removed - green025 added -- green 050 added +- green050 added +- green400-15 added +- green500-10 added - Red updates -- red000 no longer exist +- red000 removed - red025 added - red050 added +- red400-15 added +- red500-10 added - Yellow updates -- yellow000 no longer exist +- yellow000 removed - yellow025 added - yellow050 added +- yellow100-15 added +- yellow400-15 added +- yellow500-10 added - yellow700 added - yellow800 added - yellow900 added -- Violet no longer exist +- Orange updates +- orange000 removed +- orange025 added +- orange050 added + +- Violet removed - Purple added - Lime added +- White and black updates +- white000 renamed to white +- white010 removed +- black000 renamed to black + +### Brand Colors Brand Evolution + +- Blue updates +- blue300-15 added +- blue400-15 removed + +- Green updates +- green300-15 added +- green400-15 removed + +- Red updates +- red300-15 added +- red400-15 removed + +### Themed Colors + +- overlay-inverse removed +- primary-shadow removed +- primary-disabled removed +- secondary colors removed +- error-shadow removed +- error-disabled removed +- warning-alternative removed +- warning-disabled removed +- success-alternative removed +- success-disabled removed +- info-alternative removed +- info-disabled removed +- network colors removed +- shadow-primary added +- shadow-error added +- button colors removed + ## Step-by-step Migration Process 1. **Step 1**: Description of step 1 diff --git a/src/css/brand-colors-brand-evolution.css b/src/css/brand-colors-brand-evolution.css index b4b66423..891e5d15 100644 --- a/src/css/brand-colors-brand-evolution.css +++ b/src/css/brand-colors-brand-evolution.css @@ -6,9 +6,6 @@ */ :root { - /* White and Black */ - --brand-colors-white-white000: #ffffff; - --brand-colors-black-black000: #000000; /* Grey */ --brand-colors-grey-grey000: #ffffff; --brand-colors-grey-grey025: #f7f9fc; @@ -29,8 +26,10 @@ --brand-colors-blue-blue100: #d6dbff; --brand-colors-blue-blue200: #adb6fe; --brand-colors-blue-blue300: #8b99ff; + --brand-colors-blue-blue300-15: #8b99ff26; --brand-colors-blue-blue400: #6f7eff; --brand-colors-blue-blue500: #4459ff; + --brand-colors-blue-blue500-10: #4459ff1a; --brand-colors-blue-blue600: #2c3dc5; --brand-colors-blue-blue700: #1c277f; --brand-colors-blue-blue800: #131b59; @@ -41,8 +40,10 @@ --brand-colors-green-green100: #c1e6c9; --brand-colors-green-green200: #80cb91; --brand-colors-green-green300: #4cb564; + --brand-colors-green-green300-15: #4cb56426; --brand-colors-green-green400: #279f41; --brand-colors-green-green500: #1c7e33; + --brand-colors-green-green500-10: #1c7e331a; --brand-colors-green-green600: #145d25; --brand-colors-green-green700: #0d3b18; --brand-colors-green-green800: #092912; @@ -53,8 +54,10 @@ --brand-colors-red-red100: #ffd2d5; --brand-colors-red-red200: #ffa1aa; --brand-colors-red-red300: #ff7584; + --brand-colors-red-red300-15: #ff758426; --brand-colors-red-red400: #f74d5e; --brand-colors-red-red500: #ca3542; + --brand-colors-red-red500-10: #ca35421a; --brand-colors-red-red600: #952731; --brand-colors-red-red700: #611a20; --brand-colors-red-red800: #431216; @@ -63,10 +66,13 @@ --brand-colors-yellow-yellow025: #fff9e6; --brand-colors-yellow-yellow050: #fff5d5; --brand-colors-yellow-yellow100: #ffd957; + --brand-colors-yellow-yellow100-15: #ffd95726; --brand-colors-yellow-yellow200: #f0b034; --brand-colors-yellow-yellow300: #e18f01; --brand-colors-yellow-yellow400: #c37b02; + --brand-colors-yellow-yellow400-15: #c37b0226; --brand-colors-yellow-yellow500: #9a6300; + --brand-colors-yellow-yellow500-10: #9a63001a; --brand-colors-yellow-yellow600: #714802; --brand-colors-yellow-yellow700: #482d01; --brand-colors-yellow-yellow800: #321f00; @@ -107,4 +113,8 @@ --brand-colors-lime-lime700: #093a31; --brand-colors-lime-lime800: #012826; --brand-colors-lime-lime900: #011515; + /* White */ + --brand-colors-white: #ffffff; + /* Black */ + --brand-colors-black: #000000; } diff --git a/src/css/brand-colors.css b/src/css/brand-colors.css index bad6141a..fe63bfaf 100644 --- a/src/css/brand-colors.css +++ b/src/css/brand-colors.css @@ -1,5 +1,4 @@ /** - * @deprecated these brand colors have been deprecated in favor of the new brand colors * Brand Colors * Do not use "--brand-colors" in your code * Instead use the "--color-" variables to ensure @@ -7,13 +6,10 @@ */ :root { - /* White and Black */ - --brand-colors-white-white000: #ffffff; - --brand-colors-white-white010: #fcfcfc; - --brand-colors-black-black000: #000000; /* Grey */ - --brand-colors-grey-grey030: #fafbfc; - --brand-colors-grey-grey040: #f2f4f6; + --brand-colors-grey-grey000: #ffffff; + --brand-colors-grey-grey025: #fafbfc; + --brand-colors-grey-grey050: #f2f4f6; --brand-colors-grey-grey100: #d6d9dc; --brand-colors-grey-grey200: #bbc0c5; --brand-colors-grey-grey300: #9fa6ae; @@ -21,63 +17,100 @@ --brand-colors-grey-grey500: #6a737d; --brand-colors-grey-grey600: #535a61; --brand-colors-grey-grey700: #3b4046; - --brand-colors-grey-grey750: #2e3339; --brand-colors-grey-grey800: #24272a; --brand-colors-grey-grey900: #141618; - /* Blue */ - --brand-colors-blue-blue000: #eaf6ff; + --brand-colors-grey-grey1000: #000000; + /* Blue - primary/info */ + --brand-colors-blue-blue025: #eaf6ff; + --brand-colors-blue-blue050: #eaf6ff; --brand-colors-blue-blue100: #a7d9fe; --brand-colors-blue-blue200: #75c4fd; --brand-colors-blue-blue300: #43aefc; --brand-colors-blue-blue400: #1098fc; + --brand-colors-blue-blue400-15: #1098fc26; --brand-colors-blue-blue500: #0376c9; + --brand-colors-blue-blue500-10: #0376c91a; --brand-colors-blue-blue600: #0260a4; --brand-colors-blue-blue700: #024272; --brand-colors-blue-blue800: #01253f; --brand-colors-blue-blue900: #00080d; - /* Orange */ - --brand-colors-orange-orange000: #fef5ef; - --brand-colors-orange-orange100: #fde2cf; - --brand-colors-orange-orange200: #fbc49d; - --brand-colors-orange-orange300: #faa66c; - --brand-colors-orange-orange400: #f8883b; - --brand-colors-orange-orange500: #f66a0a; - --brand-colors-orange-orange600: #bf5208; - --brand-colors-orange-orange700: #954005; - --brand-colors-orange-orange800: #632b04; - --brand-colors-orange-orange900: #321602; - /* Green */ - --brand-colors-green-green000: #f3fcf5; - --brand-colors-green-green100: #d6ffdf; - --brand-colors-green-green200: #afecbd; - --brand-colors-green-green300: #86e29b; - --brand-colors-green-green400: #5dd879; - --brand-colors-green-green500: #28a745; - --brand-colors-green-green600: #1c8234; + /* Green - success */ + --brand-colors-green-green025: #f3fcf5; + --brand-colors-green-green050: #d6ffdf; + --brand-colors-green-green100: #afecbd; + --brand-colors-green-green200: #5dd879; + --brand-colors-green-green300: #28a745; + --brand-colors-green-green400: #28a745; + --brand-colors-green-green400-15: #28a74526; + --brand-colors-green-green500: #1c8234; + --brand-colors-green-green500-10: #1c82341a; + --brand-colors-green-green600: #145523; --brand-colors-green-green700: #145523; --brand-colors-green-green800: #0a2c12; --brand-colors-green-green900: #041007; - /* Red */ - --brand-colors-red-red000: #fcf2f3; + /* Red - error */ + --brand-colors-red-red025: #fcf2f3; + --brand-colors-red-red050: #fcf2f3; --brand-colors-red-red100: #f7d5d8; --brand-colors-red-red200: #f1b9be; --brand-colors-red-red300: #e88f97; --brand-colors-red-red400: #e06470; + --brand-colors-red-red400-15: #e0647026; --brand-colors-red-red500: #d73847; - --brand-colors-red-red600: #b92534; - --brand-colors-red-red700: #8e1d28; - --brand-colors-red-red800: #64141c; + --brand-colors-red-red500-10: #d738471a; + --brand-colors-red-red600: #8e1d28; + --brand-colors-red-red700: #64141c; + --brand-colors-red-red800: #3a0c10; --brand-colors-red-red900: #3a0c10; - /* Purple */ + /* Yellow - warning */ + --brand-colors-yellow-yellow025: #fefcde; + --brand-colors-yellow-yellow050: #fff2c5; + --brand-colors-yellow-yellow100: #ffdf70; + --brand-colors-yellow-yellow100-15: #ffdf7026; + --brand-colors-yellow-yellow200: #ffc70a; + --brand-colors-yellow-yellow300: #f8883b; + --brand-colors-yellow-yellow400: #f66a0a; + --brand-colors-yellow-yellow400-15: #f66a0a26; + --brand-colors-yellow-yellow500: #bf5208; + --brand-colors-yellow-yellow500-10: #bf52081a; + --brand-colors-yellow-yellow600: #954005; + --brand-colors-yellow-yellow700: #632b04; + --brand-colors-yellow-yellow800: #321602; + --brand-colors-yellow-yellow900: #321602; + /* Orange - brand */ + --brand-colors-orange-orange025: #fef5ef; + --brand-colors-orange-orange050: #fde2cf; + --brand-colors-orange-orange100: #fbc49d; + --brand-colors-orange-orange200: #faa66c; + --brand-colors-orange-orange300: #f8883b; + --brand-colors-orange-orange400: #f66a0a; + --brand-colors-orange-orange500: #bf5208; + --brand-colors-orange-orange600: #954005; + --brand-colors-orange-orange700: #632b04; + --brand-colors-orange-orange800: #321602; + --brand-colors-orange-orange900: #321602; + /* Purple - brand */ + --brand-colors-purple-purple025: #fcf6ff; + --brand-colors-purple-purple050: #fbf2ff; + --brand-colors-purple-purple100: #efd2ff; + --brand-colors-purple-purple200: #cfb5f0; + --brand-colors-purple-purple300: #d27dff; + --brand-colors-purple-purple400: #b864f5; --brand-colors-purple-purple500: #8b45b6; - /* Violet */ - --brand-colors-violet-violet300: #cfb5f0; - /* Yellow */ - --brand-colors-yellow-yellow000: #fffdf8; - --brand-colors-yellow-yellow100: #fefcde; - --brand-colors-yellow-yellow200: #fff2c5; - --brand-colors-yellow-yellow300: #ffeaa3; - --brand-colors-yellow-yellow400: #ffdf70; - --brand-colors-yellow-yellow500: #ffd33d; - --brand-colors-yellow-yellow600: #ffc70a; + --brand-colors-purple-purple600: #6c2ab2; + --brand-colors-purple-purple700: #4c1178; + --brand-colors-purple-purple800: #32054d; + --brand-colors-purple-purple900: #280a00; + /* Lime - brand */ + --brand-colors-lime-lime025: #effed9; + --brand-colors-lime-lime050: #e3febd; + --brand-colors-lime-lime100: #b8ef4a; + --brand-colors-lime-lime200: #95ca45; + --brand-colors-lime-lime300: #7ab040; + --brand-colors-lime-lime400: #64993d; + --brand-colors-lime-lime500: #457a39; + --brand-colors-lime-lime600: #275b35; + --brand-colors-lime-lime700: #093a31; + --brand-colors-lime-lime800: #022321; + --brand-colors-lime-lime900: #011515; } diff --git a/src/css/dark-theme-brand-evolution.css b/src/css/dark-theme-brand-evolution.css deleted file mode 100644 index 0cc99886..00000000 --- a/src/css/dark-theme-brand-evolution.css +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Dark Theme Colors - * Colors for dark theme - */ - -[data-theme='dark'] { - /* Background */ - --color-background-default: var(--brand-colors-grey-grey800); - --color-background-default-hover: #2d3034; - --color-background-default-pressed: #363b3f; - --color-background-alternative: var(--brand-colors-grey-grey900); - --color-background-alternative-hover: #1e2124; - --color-background-alternative-pressed: #272b2f; - --color-background-hover: #ffffff0a; - --color-background-pressed: #ffffff14; - /* Text */ - --color-text-default: var(--brand-colors-grey-grey000); - --color-text-alternative: var(--brand-colors-grey-grey200); - --color-text-muted: var(--brand-colors-grey-grey400); - /* Icon */ - --color-icon-default: var(--color-text-default); - --color-icon-alternative: var(--color-text-alternative); - --color-icon-muted: var(--color-text-muted); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey400); - --color-border-muted: #848c9629; - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue400); - --color-primary-default-hover: #26a2fc; - --color-primary-default-pressed: #3baafd; - --color-primary-alternative: var(--brand-colors-blue-blue200); - --color-primary-muted: #1098fc26; - --color-primary-inverse: var(--brand-colors-grey-grey900); - /* Error */ - --color-error-default: var(--brand-colors-red-red400); - --color-error-default-hover: #e47782; - --color-error-default-pressed: #e78891; - --color-error-alternative: var(--brand-colors-red-red200); - --color-error-muted: #e0647026; - --color-error-inverse: var(--brand-colors-grey-grey900); - /* Warning */ - --color-warning-default: var(--brand-colors-yellow-yellow100); - --color-warning-default-hover: #ffe485; - --color-warning-default-pressed: #ffe899; - --color-warning-muted: #ffdf7026; - --color-warning-inverse: var(--brand-colors-grey-grey900); - /* Success */ - --color-success-default: var(--brand-colors-green-green400); - --color-success-default-hover: #2cb94c; - --color-success-default-pressed: #30ca53; - --color-success-muted: #28a74526; - --color-success-inverse: var(--brand-colors-grey-grey900); - /* Info */ - --color-info-default: var(--brand-colors-blue-blue400); - --color-info-muted: #1098fc26; - --color-info-inverse: var(--brand-colors-grey-grey900); - /* Flask */ - --color-flask-default: var(--brand-colors-purple-purple400); - --color-flask-inverse: var(--brand-colors-grey-grey900); - /* Shadow */ - --color-shadow-default: #00000066; - --color-shadow-primary: #1098fc66; - --color-shadow-error: #e0647066; -} diff --git a/src/css/dark-theme-colors-brand-evolution.css b/src/css/dark-theme-colors-brand-evolution.css new file mode 100644 index 00000000..d0bb280e --- /dev/null +++ b/src/css/dark-theme-colors-brand-evolution.css @@ -0,0 +1,151 @@ +/* + * Dark Theme Colors + * Use these css variables in your code. + * This will insure theme compatibility + */ + +[data-theme='dark'] { + /* + * Background + */ + /* For default neutral backgrounds */ + --color-background-default: var(--brand-colors-grey-grey800); + /* For "hover" states that use background-default */ + --color-background-default-hover: #313235; + /* For "pressed" states that use background-alternative */ + --color-background-default-pressed: #3f4145; + /* For secondary neutral backgrounds */ + --color-background-alternative: var(--brand-colors-grey-grey900); + /* For "hover" states that use background-alternative */ + --color-background-alternative-hover: #1f2123; + /* For "pressed" states that use background-alternative */ + --color-background-alternative-pressed: #2e3033; + /* For "hover" state that use no background fill */ + --color-background-hover: #ffffff0f; + /* For "pressed" state that use no background fill */ + --color-background-pressed: #ffffff1f; + + /* + * Text + */ + /* For default neutral text */ + --color-text-default: var(--brand-colors-grey-grey000); + /* For softer contrast neutral text */ + --color-text-alternative: var(--brand-colors-grey-grey200); + /* For the softest contrast neutral text (not accessible) */ + --color-text-muted: var(--brand-colors-grey-grey400); + + /* + * Icon + */ + /* For default neutral icons */ + --color-icon-default: var(--color-text-default); + /* For softer neutral icons */ + --color-icon-alternative: var(--text-alternative); + /* For the weakest contrast neutral icons (not accessible) */ + --color-icon-muted: var(--color-text-muted); + + /* + * Border + */ + /* For soft contrast neutral border */ + --color-border-default: var(--brand-colors-grey-grey400); + /* For the weakest contrast neutral border */ + --color-border-muted: #858b9a33; + + /* + * Overlay + */ + /* For the default shade of screen */ + --color-overlay-default: #00000066; + /* For a stronger shade of screen */ + --color-overlay-alternative: #000000cc; + + /* + * Primary + */ + /* For interactive, active, and selected semantics. Used for text, background, icon or border */ + --color-primary-default: var(--brand-colors-blue-blue300); + /* For the "hover" state of primary-default elements */ + --color-primary-default-hover: #a8b2ff; + /* For the "pressed" state of primary-default elements */ + --color-primary-default-pressed: #c7ceff; + /* For the stronger contrast primary semantic elements */ + --color-primary-alternative: var(--brand-colors-blue-blue200); + /* For the weakest contrast primary semantic backgrounds */ + --color-primary-muted: var(--brand-colors-blue-blue300-15); + /* For elements used on top of primary/default. Used for text, icon or border */ + --color-primary-inverse: var(--brand-colors-grey-grey900); + + /* + * Error + */ + /* For the critical alert semantic elements. Used for text, background, icon or border */ + --color-error-default: var(--brand-colors-red-red300); + /* For the "hover" state of error-default elements */ + --color-error-default-hover: #ff94a0; + /* For the "pressed" state of error-default elements */ + --color-error-default-pressed: #ffb2bb; + /* For the stronger contrast error semantic elements */ + --color-error-alternative: var(--brand-colors-red-red200); + /* For the weakest contrast critical alert semantic backgrounds */ + --color-error-muted: var(--brand-colors-red-red300-15); + /* For elements used on top of error/default. Used for text, icon or border */ + --color-error-inverse: var(--brand-colors-grey-grey900); + + /* + * Warning + */ + /* For the caution alert semantic elements. Used for text, background, icon or border */ + --color-warning-default: var(--brand-colors-yellow-yellow100); + /* For the "hover" state of warning-default elements */ + --color-warning-default-hover: #ffe794; + /* For the "pressed" state of warning-default elements */ + --color-warning-default-pressed: #ffeeb2; + /* For the weakest contrast caution alert semantic backgrounds */ + --color-warning-muted: var(--brand-colors-yellow-yellow100-15); + /* For elements used on top of warning/default. Used for text, icon or border */ + --color-warning-inverse: var(--brand-colors-grey-grey900); + + /* + * Success + */ + /* For the positive semantic elements. Used for text, background, icon or border */ + --color-success-default: var(--brand-colors-green-green300); + /* For the "hover" state of success-default elements */ + --color-success-default-hover: #60bd76; + /* For the "pressed" state of success-default elements */ + --color-success-default-pressed: #76c688; + /* For the weakest contrast positive semantic backgrounds */ + --color-success-muted: var(--brand-colors-green-green300-15); + /* For elements used on top of success/default. Used for text, icon or border */ + --color-success-inverse: var(--brand-colors-grey-grey900); + + /* + * Info + */ + /* For informational read-only elements. Used for text, background, icon or border */ + --color-info-default: var(--brand-colors-blue-blue300); + /* For the weakest contrast informational semantic backgrounds */ + --color-info-muted: var(--brand-colors-blue-blue300-15); + /* For elements used on top of info/default. Used for text, icon or border */ + --color-info-inverse: var(--brand-colors-grey-grey900); + + /* + * Flask + */ + /* For Flask primary accent color */ + --color-flask-default: var(--brand-colors-purple-purple300); + /* For elements used on top of flask/default. Used for text, icon or border */ + --color-flask-inverse: var(--brand-colors-grey-grey900); + + /* + * Shadow + */ + /* For neutral drop shadow color */ + --color-shadow-default: #00000066; + /* For primary drop shadow color */ + --color-shadow-primary: #8b99ff33; + /* For critical/danger drop shadow color */ + --color-shadow-error: #ff758433; +} diff --git a/src/css/dark-theme-colors.css b/src/css/dark-theme-colors.css index f5e81cb2..8e6d0a57 100644 --- a/src/css/dark-theme-colors.css +++ b/src/css/dark-theme-colors.css @@ -1,65 +1,151 @@ -/** +/* * Dark Theme Colors -*/ + * Use these css variables in your code. + * This will insure theme compatibility + */ + [data-theme='dark'] { + /* + * Background + */ + /* For default neutral backgrounds */ --color-background-default: var(--brand-colors-grey-grey800); - --color-background-default-hover: #282b2e; - --color-background-default-pressed: #36383b; + /* For "hover" states that use background-default */ + --color-background-default-hover: #2d3034; + /* For "pressed" states that use background-alternative */ + --color-background-default-pressed: #363b3f; + /* For secondary neutral backgrounds */ --color-background-alternative: var(--brand-colors-grey-grey900); - --color-background-alternative-hover: #191b1d; - --color-background-alternative-pressed: #27292a; - --color-background-hover: #ffffff05; + /* For "hover" states that use background-alternative */ + --color-background-alternative-hover: #1e2124; + /* For "pressed" states that use background-alternative */ + --color-background-alternative-pressed: #272b2f; + /* For "hover" state that use no background fill */ + --color-background-hover: #ffffff0a; + /* For "pressed" state that use no background fill */ --color-background-pressed: #ffffff14; - --color-text-default: var(--brand-colors-white-white000); - --color-text-alternative: var(--brand-colors-grey-grey100); + + /* + * Text + */ + /* For default neutral text */ + --color-text-default: var(--brand-colors-grey-grey000); + /* For softer contrast neutral text */ + --color-text-alternative: var(--brand-colors-grey-grey200); + /* For the softest contrast neutral text (not accessible) */ --color-text-muted: var(--brand-colors-grey-grey400); - --color-icon-default: var(--brand-colors-white-white000); - --color-icon-alternative: var(--brand-colors-grey-grey200); - --color-icon-muted: var(--brand-colors-grey-grey400); + + /* + * Icon + */ + /* For default neutral icons */ + --color-icon-default: var(--color-text-default); + /* For softer neutral icons */ + --color-icon-alternative: var(--text-alternative); + /* For the weakest contrast neutral icons (not accessible) */ + --color-icon-muted: var(--color-text-muted); + + /* + * Border + */ + /* For soft contrast neutral border */ --color-border-default: var(--brand-colors-grey-grey400); - --color-border-muted: var(--brand-colors-grey-grey700); + /* For the weakest contrast neutral border */ + --color-border-muted: #848c9629; + + /* + * Overlay + */ + /* For the default shade of screen */ --color-overlay-default: #00000099; + /* For a stronger shade of screen */ --color-overlay-alternative: #000000cc; - --color-shadow-default: #00000080; - --color-overlay-inverse: var(--brand-colors-white-white010); + + /* + * Primary + */ + /* For interactive, active, and selected semantics. Used for text, background, icon or border */ --color-primary-default: var(--brand-colors-blue-blue400); - --color-primary-default-hover: #0092fa; - --color-primary-default-pressed: #54b6fc; - --color-primary-alternative: var(--brand-colors-blue-blue300); - --color-primary-muted: #1098fc26; + /* For the "hover" state of primary-default elements */ + --color-primary-default-hover: #26a2fc; + /* For the "pressed" state of primary-default elements */ + --color-primary-default-pressed: #3baafd; + /* For the stronger contrast primary semantic elements */ + --color-primary-alternative: var(--brand-colors-blue-blue200); + /* For the weakest contrast primary semantic backgrounds */ + --color-primary-muted: var(--brand-colors-blue-blue400-10); + /* For elements used on top of primary/default. Used for text, icon or border */ --color-primary-inverse: var(--brand-colors-grey-grey900); - --color-primary-disabled: #1098fc80; - --color-primary-shadow: #0376c933; - --color-secondary-default: var(--brand-colors-orange-orange400); - --color-secondary-alternative: var(--brand-colors-orange-orange300); - --color-secondary-muted: #f8883b26; - --color-secondary-inverse: var(--brand-colors-grey-grey900); - --color-secondary-disabled: #f8883b80; - --color-error-default: #ff5263; - --color-error-default-hover: #ff4d58; - --color-error-default-pressed: #f9868e; - --color-error-alternative: var(--brand-colors-red-red300); - --color-error-muted: #ff526326; + + /* + * Error + */ + /* For the critical alert semantic elements. Used for text, background, icon or border */ + --color-error-default: var(--brand-colors-red-red400); + /* For the "hover" state of error-default elements */ + --color-error-default-hover: #e47782; + /* For the "pressed" state of error-default elements */ + --color-error-default-pressed: #e78891; + /* For the stronger contrast error semantic elements */ + --color-error-alternative: var(--brand-colors-red-red200); + /* For the weakest contrast critical alert semantic backgrounds */ + --color-error-muted: var(--brand-colors-red-red400-10); + /* For elements used on top of error/default. Used for text, icon or border */ --color-error-inverse: var(--brand-colors-grey-grey900); - --color-error-disabled: #d7384780; - --color-error-shadow: #ff526366; - --color-warning-default: var(--brand-colors-yellow-yellow500); - --color-warning-default-hover: #ffc60a; - --color-warning-default-pressed: #ffeaa3d1; - --color-warning-alternative: var(--brand-colors-yellow-yellow400); - --color-warning-muted: #ffd33d26; + + /* + * Warning + */ + /* For the caution alert semantic elements. Used for text, background, icon or border */ + --color-warning-default: var(--brand-colors-yellow-yellow100); + /* For the "hover" state of warning-default elements */ + --color-warning-default-hover: #ffe485; + /* For the "pressed" state of warning-default elements */ + --color-warning-default-pressed: #ffe899; + /* For the weakest contrast caution alert semantic backgrounds */ + --color-warning-muted: var(--brand-colors-yellow-yellow100-15); + /* For elements used on top of warning/default. Used for text, icon or border */ --color-warning-inverse: var(--brand-colors-grey-grey900); - --color-warning-disabled: #ffd33d80; - --color-success-default: var(--brand-colors-green-green500); - --color-success-default-hover: #05b82f; - --color-success-default-pressed: #6aec88; - --color-success-alternative: var(--brand-colors-green-green400); - --color-success-muted: #28a74526; + + /* + * Success + */ + /* For the positive semantic elements. Used for text, background, icon or border */ + --color-success-default: var(--brand-colors-green-green400); + /* For the "hover" state of success-default elements */ + --color-success-default-hover: #2cb94c; + /* For the "pressed" state of success-default elements */ + --color-success-default-pressed: #30ca53; + /* For the weakest contrast positive semantic backgrounds */ + --color-success-muted: var(--brand-colors-green-green400-15); + /* For elements used on top of success/default. Used for text, icon or border */ --color-success-inverse: var(--brand-colors-grey-grey900); - --color-success-disabled: #28a74580; + + /* + * Info + */ + /* For informational read-only elements. Used for text, background, icon or border */ --color-info-default: var(--brand-colors-blue-blue400); - --color-info-alternative: var(--brand-colors-blue-blue300); - --color-info-muted: #1098fc26; + /* For the weakest contrast informational semantic backgrounds */ + --color-info-muted: var(--brand-colors-blue-blue400-15); + /* For elements used on top of info/default. Used for text, icon or border */ --color-info-inverse: var(--brand-colors-grey-grey900); - --color-info-disabled: #0376c980; + + /* + * Flask + */ + /* For Flask primary accent color */ + --color-flask-default: var(--brand-colors-purple-purple400); + /* For elements used on top of flask/default. Used for text, icon or border */ + --color-flask-inverse: var(--brand-colors-grey-grey900); + + /* + * Shadow + */ + /* For neutral drop shadow color */ + --color-shadow-default: #00000066; + /* For primary drop shadow color */ + --color-shadow-primary: #1098fc66; + /* For critical/danger drop shadow color */ + --color-shadow-error: #d73a4966; } diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css deleted file mode 100644 index dbdd8e49..00000000 --- a/src/css/dark-theme.css +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Dark Theme Colors - * Colors for dark theme - */ - -[data-theme='dark'] { - /* Background */ - --color-background-default: var(--brand-colors-grey-grey800); - --color-background-default-hover: #282b2e; - --color-background-default-pressed: #36383b; - --color-background-alternative: var(--brand-colors-grey-grey900); - --color-background-alternative-hover: #191b1d; - --color-background-alternative-pressed: #27292a; - --color-background-hover: #ffffff05; - --color-background-pressed: #ffffff14; - /* Text */ - --color-text-default: var(--brand-colors-white-white000); - --color-text-alternative: var(--brand-colors-grey-grey100); - --color-text-muted: var(--brand-colors-grey-grey400); - /* Icon */ - --color-icon-default: var(--brand-colors-white-white000); - --color-icon-alternative: var(--brand-colors-grey-grey200); - --color-icon-muted: var(--brand-colors-grey-grey400); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey400); - --color-border-muted: var(--brand-colors-grey-grey700); - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - /* Shadow */ - --color-shadow-default: #00000080; - /* Overlay */ - --color-overlay-inverse: var(--brand-colors-white-white010); - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue400); - --color-primary-default-hover: #0092fa; - --color-primary-default-pressed: #54b6fc; - --color-primary-alternative: var(--brand-colors-blue-blue300); - --color-primary-muted: #1098fc26; - --color-primary-inverse: var(--brand-colors-grey-grey900); - --color-primary-disabled: #1098fc80; - --color-primary-shadow: #0376c933; - /* Secondary */ - --color-secondary-default: var(--brand-colors-orange-orange400); - --color-secondary-alternative: var(--brand-colors-orange-orange300); - --color-secondary-muted: #f8883b26; - --color-secondary-inverse: var(--brand-colors-grey-grey900); - --color-secondary-disabled: #f8883b80; - /* Error */ - --color-error-default: #ff5263; - --color-error-default-hover: #ff4d58; - --color-error-default-pressed: #f9868e; - --color-error-alternative: var(--brand-colors-red-red300); - --color-error-muted: #ff526326; - --color-error-inverse: var(--brand-colors-grey-grey900); - --color-error-disabled: #d7384780; - --color-error-shadow: #ff526366; - /* Warning */ - --color-warning-default: var(--brand-colors-yellow-yellow500); - --color-warning-default-hover: #ffc60a; - --color-warning-default-pressed: #ffeaa3d1; - --color-warning-alternative: var(--brand-colors-yellow-yellow400); - --color-warning-muted: #ffd33d26; - --color-warning-inverse: var(--brand-colors-grey-grey900); - --color-warning-disabled: #ffd33d80; - /* Success */ - --color-success-default: var(--brand-colors-green-green500); - --color-success-default-hover: #05b82f; - --color-success-default-pressed: #6aec88; - --color-success-alternative: var(--brand-colors-green-green400); - --color-success-muted: #28a74526; - --color-success-inverse: var(--brand-colors-grey-grey900); - --color-success-disabled: #28a74580; - /* Info */ - --color-info-default: var(--brand-colors-blue-blue400); - --color-info-alternative: var(--brand-colors-blue-blue300); - --color-info-muted: #1098fc26; - --color-info-inverse: var(--brand-colors-grey-grey900); - --color-info-disabled: #0376c980; -} diff --git a/src/css/design-tokens-brand-evolution.css b/src/css/design-tokens-brand-evolution.css deleted file mode 100644 index 9067f4ad..00000000 --- a/src/css/design-tokens-brand-evolution.css +++ /dev/null @@ -1,455 +0,0 @@ -/** - * Brand Colors - * Do not use "--brand-colors" in your code - * Instead use the "--color-" variables to ensure - * theme compatible styles - */ - - :root { - /* White and Black */ - --brand-colors-white-white000: #ffffff; - --brand-colors-black-black000: #000000; - /* Grey */ - --brand-colors-grey-grey000: #ffffff; - --brand-colors-grey-grey025: #f7f9fc; - --brand-colors-grey-grey050: #f3f5f9; - --brand-colors-grey-grey100: #dadce5; - --brand-colors-grey-grey200: #b7bbc8; - --brand-colors-grey-grey300: #9ca1af; - --brand-colors-grey-grey400: #858b9a; - --brand-colors-grey-grey500: #686e7d; - --brand-colors-grey-grey600: #4b505c; - --brand-colors-grey-grey700: #31333a; - --brand-colors-grey-grey800: #222325; - --brand-colors-grey-grey900: #121314; - --brand-colors-grey-grey1000: #000000; - /* Blue - primary/info */ - --brand-colors-blue-blue025: #f8f9ff; - --brand-colors-blue-blue050: #f4f5ff; - --brand-colors-blue-blue100: #d6dbff; - --brand-colors-blue-blue200: #adb6fe; - --brand-colors-blue-blue300: #8b99ff; - --brand-colors-blue-blue400: #6f7eff; - --brand-colors-blue-blue500: #4459ff; - --brand-colors-blue-blue600: #2c3dc5; - --brand-colors-blue-blue700: #1c277f; - --brand-colors-blue-blue800: #131b59; - --brand-colors-blue-blue900: #0b0f32; - /* Green - success */ - --brand-colors-green-green025: #f1faf4; - --brand-colors-green-green050: #ebf7ee; - --brand-colors-green-green100: #c1e6c9; - --brand-colors-green-green200: #80cb91; - --brand-colors-green-green300: #4cb564; - --brand-colors-green-green400: #279f41; - --brand-colors-green-green500: #1c7e33; - --brand-colors-green-green600: #145d25; - --brand-colors-green-green700: #0d3b18; - --brand-colors-green-green800: #092912; - --brand-colors-green-green900: #051709; - /* Red - error */ - --brand-colors-red-red025: #fff6f7; - --brand-colors-red-red050: #fff2f3; - --brand-colors-red-red100: #ffd2d5; - --brand-colors-red-red200: #ffa1aa; - --brand-colors-red-red300: #ff7584; - --brand-colors-red-red400: #f74d5e; - --brand-colors-red-red500: #ca3542; - --brand-colors-red-red600: #952731; - --brand-colors-red-red700: #611a20; - --brand-colors-red-red800: #431216; - --brand-colors-red-red900: #3b0f13; - /* Yellow - warning */ - --brand-colors-yellow-yellow025: #fff9e6; - --brand-colors-yellow-yellow050: #fff5d5; - --brand-colors-yellow-yellow100: #ffd957; - --brand-colors-yellow-yellow200: #f0b034; - --brand-colors-yellow-yellow300: #e18f01; - --brand-colors-yellow-yellow400: #c37b02; - --brand-colors-yellow-yellow500: #9a6300; - --brand-colors-yellow-yellow600: #714802; - --brand-colors-yellow-yellow700: #482d01; - --brand-colors-yellow-yellow800: #321f00; - --brand-colors-yellow-yellow900: #1c1100; - /* Orange - brand */ - --brand-colors-orange-orange025: #fff8f5; - --brand-colors-orange-orange050: #fff0ea; - --brand-colors-orange-orange100: #ffd4c1; - --brand-colors-orange-orange200: #ffa47c; - --brand-colors-orange-orange300: #ff7940; - --brand-colors-orange-orange400: #f35714; - --brand-colors-orange-orange500: #c3420d; - --brand-colors-orange-orange600: #932d06; - --brand-colors-orange-orange700: #631800; - --brand-colors-orange-orange800: #451100; - --brand-colors-orange-orange900: #280a00; - /* Purple - brand */ - --brand-colors-purple-purple025: #fcf6ff; - --brand-colors-purple-purple050: #fbf2ff; - --brand-colors-purple-purple100: #efd2ff; - --brand-colors-purple-purple200: #dfa4ff; - --brand-colors-purple-purple300: #d27dff; - --brand-colors-purple-purple400: #b864f5; - --brand-colors-purple-purple500: #8f44e4; - --brand-colors-purple-purple600: #6c2ab2; - --brand-colors-purple-purple700: #6c2ab2; - --brand-colors-purple-purple800: #380658; - --brand-colors-purple-purple900: #280a00; - /* Lime - brand */ - --brand-colors-lime-lime025: #effed9; - --brand-colors-lime-lime050: #e3febd; - --brand-colors-lime-lime100: #b8ef4a; - --brand-colors-lime-lime200: #95ca45; - --brand-colors-lime-lime300: #7ab040; - --brand-colors-lime-lime400: #64993d; - --brand-colors-lime-lime500: #457a39; - --brand-colors-lime-lime600: #275b35; - --brand-colors-lime-lime700: #093a31; - --brand-colors-lime-lime800: #012826; - --brand-colors-lime-lime900: #011515; -} - -/** - * Typography - */ - - :root { - /* typography */ - /* font family */ - --font-family-euclid-circular-b: 'Euclid Circular B', sans-serif; - --font-family-roboto: 'Roboto', sans-serif; - --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif; - /* font sizes */ - --font-size-base: 16px; - --font-size-1: 0.625rem; - --font-size-2: 0.75rem; - --font-size-3: 0.875rem; - --font-size-4: 1rem; - --font-size-5: 1.125rem; - --font-size-6: 1.5rem; - --font-size-7: 2rem; - --font-size-8: 3rem; - /* line heights */ - --line-height-1: 1rem; - --line-height-2: 1.25rem; - --line-height-3: 1.375rem; - --line-height-4: 1.5rem; - --line-height-5: 2rem; - --line-height-6: 2.5rem; - --line-height-7: 3.5rem; - /* font weights */ - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-bold: 700; - /* letter spacing */ - --letter-spacing-0: 0; - --letter-spacing-1: 2.5%; - /* typography scale small screen */ - --typography-s-display-md-font-family: var(--font-family-sans); - --typography-s-display-md-font-size: var(--font-size-7); - --typography-s-display-md-line-height: var(--line-height-6); - --typography-s-display-md-font-weight: var(--font-weight-bold); - --typography-s-display-md-letter-spacing: var(--letter-spacing-0); - --typography-s-heading-lg-font-family: var(--font-family-sans); - --typography-s-heading-lg-font-size: var(--font-size-6); - --typography-s-heading-lg-line-height: var(--line-height-5); - --typography-s-heading-lg-font-weight: var(--font-weight-bold); - --typography-s-heading-lg-letter-spacing: var(--letter-spacing-0); - --typography-s-heading-md-font-family: var(--font-family-sans); - --typography-s-heading-md-font-size: var(--font-size-5); - --typography-s-heading-md-line-height: var(--line-height-4); - --typography-s-heading-md-font-weight: var(--font-weight-bold); - --typography-s-heading-md-letter-spacing: var(--letter-spacing-0); - --typography-s-heading-sm-font-family: var(--font-family-sans); - --typography-s-heading-sm-font-size: var(--font-size-4); - --typography-s-heading-sm-line-height: var(--line-height-4); - --typography-s-heading-sm-font-weight: var(--font-weight-bold); - --typography-s-heading-sm-letter-spacing: var(--letter-spacing-0); - - /** - * @deprecated [#1] since version 1.9 [#2]. - * [#3] Will be deleted in version 2.0. - */ - --typography-s-heading-sm-regular-font-family: var(--font-family-sans); - --typography-s-heading-sm-regular-font-size: var(--font-size-4); - --typography-s-heading-sm-regular-line-height: var(--line-height-4); - --typography-s-heading-sm-regular-font-weight: var(--font-weight-regular); - --typography-s-heading-sm-regular-letter-spacing: var(--letter-spacing-0); - --typography-s-body-lg-medium-font-family: var(--font-family-sans); - --typography-s-body-lg-medium-font-size: var(--font-size-4); - --typography-s-body-lg-medium-line-height: var(--line-height-4); - --typography-s-body-lg-medium-font-weight: var(--font-weight-medium); - --typography-s-body-lg-medium-letter-spacing: var(--letter-spacing-0); - --typography-s-body-lg-regular-font-family: var(--font-family-sans); - --typography-s-body-lg-regular-font-size: var(--font-size-4); - --typography-s-body-lg-regular-line-height: var(--line-height-4); - --typography-s-body-lg-regular-font-weight: var(--font-weight-medium); - --typography-s-body-lg-regular-letter-spacing: var(--letter-spacing-0); - --typography-s-body-md-bold-font-family: var(--font-family-sans); - --typography-s-body-md-bold-font-size: var(--font-size-3); - --typography-s-body-md-bold-line-height: var(--line-height-3); - --typography-s-body-md-bold-font-weight: var(--font-weight-bold); - --typography-s-body-md-bold-letter-spacing: var(--letter-spacing-0); - --typography-s-body-md-medium-font-family: var(--font-family-sans); - --typography-s-body-md-medium-font-size: var(--font-size-3); - --typography-s-body-md-medium-line-height: var(--line-height-3); - --typography-s-body-md-medium-font-weight: var(--font-weight-medium); - --typography-s-body-md-medium-letter-spacing: var(--letter-spacing-0); - --typography-s-body-md-font-family: var(--font-family-sans); - --typography-s-body-md-font-size: var(--font-size-3); - --typography-s-body-md-line-height: var(--line-height-3); - --typography-s-body-md-font-weight: var(--font-weight-regular); - --typography-s-body-md-letter-spacing: var(--letter-spacing-0); - --typography-s-body-sm-bold-font-family: var(--font-family-sans); - --typography-s-body-sm-bold-font-size: var(--font-size-2); - --typography-s-body-sm-bold-line-height: var(--line-height-2); - --typography-s-body-sm-bold-font-weight: var(--font-weight-bold); - --typography-s-body-sm-bold-letter-spacing: var(--letter-spacing-0); - --typography-s-body-sm-medium-font-family: var(--font-family-sans); - --typography-s-body-sm-medium-font-size: var(--font-size-2); - --typography-s-body-sm-medium-line-height: var(--line-height-2); - --typography-s-body-sm-medium-font-weight: var(--font-weight-medium); - --typography-s-body-sm-medium-letter-spacing: var(--letter-spacing-0); - --typography-s-body-sm-font-family: var(--font-family-sans); - --typography-s-body-sm-font-size: var(--font-size-2); - --typography-s-body-sm-line-height: var(--line-height-2); - --typography-s-body-sm-font-weight: var(--font-weight-regular); - --typography-s-body-sm-letter-spacing: var(--letter-spacing-0); - --typography-s-body-xs-medium-font-family: var(--font-family-sans); - --typography-s-body-xs-medium-font-size: var(--font-size-1); - --typography-s-body-xs-medium-line-height: var(--line-height-1); - --typography-s-body-xs-medium-font-weight: var(--font-weight-medium); - --typography-s-body-xs-medium-letter-spacing: var(--letter-spacing-0); - --typography-s-body-xs-font-family: var(--font-family-sans); - --typography-s-body-xs-font-size: var(--font-size-1); - --typography-s-body-xs-line-height: var(--line-height-1); - --typography-s-body-xs-font-weight: var(--font-weight-regular); - --typography-s-body-xs-letter-spacing: var(--letter-spacing-0); - - /* typography scale large screen */ - --typography-l-display-md-font-family: var(--font-family-sans); - --typography-l-display-md-font-size: var(--font-size-8); - --typography-l-display-md-line-height: var(--line-height-7); - --typography-l-display-md-font-weight: var(--font-weight-medium); - --typography-l-display-md-letter-spacing: var(--letter-spacing-0); - --typography-l-heading-lg-font-family: var(--font-family-sans); - --typography-l-heading-lg-font-size: var(--font-size-7); - --typography-l-heading-lg-line-height: var(--line-height-6); - --typography-l-heading-lg-font-weight: var(--font-weight-bold); - --typography-l-heading-lg-letter-spacing: var(--letter-spacing-0); - --typography-l-heading-md-font-family: var(--font-family-sans); - --typography-l-heading-md-font-size: var(--font-size-6); - --typography-l-heading-md-line-height: var(--line-height-5); - --typography-l-heading-md-font-weight: var(--font-weight-bold); - --typography-l-heading-md-letter-spacing: var(--letter-spacing-0); - --typography-l-heading-sm-font-family: var(--font-family-sans); - --typography-l-heading-sm-font-size: var(--font-size-5); - --typography-l-heading-sm-line-height: var(--line-height-4); - --typography-l-heading-sm-font-weight: var(--font-weight-bold); - --typography-l-heading-sm-letter-spacing: var(--letter-spacing-0); - - /** - * @deprecated [#1] since version 1.9 [#2]. - * [#3] Will be deleted in version 2.0. - */ - --typography-l-heading-sm-regular-font-family: var(--font-family-sans); - --typography-l-heading-sm-regular-font-size: var(--font-size-5); - --typography-l-heading-sm-regular-line-height: var(--line-height-4); - --typography-l-heading-sm-regular-font-weight: var(--font-weight-regular); - --typography-l-heading-sm-regular-letter-spacing: var(--letter-spacing-0); - --typography-l-body-lg-medium-font-family: var(--font-family-sans); - --typography-l-body-lg-medium-font-size: var(--font-size-5); - --typography-l-body-lg-medium-line-height: var(--line-height-4); - --typography-l-body-lg-medium-font-weight: var(--font-weight-medium); - --typography-l-body-lg-medium-letter-spacing: var(--letter-spacing-0); - --typography-l-body-md-bold-font-family: var(--font-family-sans); - --typography-l-body-md-bold-font-size: var(--font-size-4); - --typography-l-body-md-bold-line-height: var(--line-height-4); - --typography-l-body-md-bold-font-weight: var(--font-weight-bold); - --typography-l-body-md-bold-letter-spacing: var(--letter-spacing-0); - --typography-l-body-md-medium-font-family: var(--font-family-sans); - --typography-l-body-md-medium-font-size: var(--font-size-4); - --typography-l-body-md-medium-line-height: var(--line-height-4); - --typography-l-body-md-medium-font-weight: var(--font-weight-medium); - --typography-l-body-md-medium-letter-spacing: var(--letter-spacing-0); - --typography-l-body-md-font-family: var(--font-family-sans); - --typography-l-body-md-font-size: var(--font-size-4); - --typography-l-body-md-line-height: var(--line-height-4); - --typography-l-body-md-font-weight: var(--font-weight-regular); - --typography-l-body-md-letter-spacing: var(--letter-spacing-0); - --typography-l-body-sm-bold-font-family: var(--font-family-sans); - --typography-l-body-sm-bold-font-size: var(--font-size-3); - --typography-l-body-sm-bold-line-height: var(--line-height-3); - --typography-l-body-sm-bold-font-weight: var(--font-weight-bold); - --typography-l-body-sm-bold-letter-spacing: var(--letter-spacing-0); - --typography-l-body-sm-medium-font-family: var(--font-family-sans); - --typography-l-body-sm-medium-font-size: var(--font-size-3); - --typography-l-body-sm-medium-line-height: var(--line-height-3); - --typography-l-body-sm-medium-font-weight: var(--font-weight-medium); - --typography-l-body-sm-medium-letter-spacing: var(--letter-spacing-0); - --typography-l-body-sm-font-family: var(--font-family-sans); - --typography-l-body-sm-font-size: var(--font-size-3); - --typography-l-body-sm-line-height: var(--line-height-3); - --typography-l-body-sm-font-weight: var(--font-weight-regular); - --typography-l-body-sm-letter-spacing: var(--letter-spacing-0); - --typography-l-body-xs-medium-font-family: var(--font-family-sans); - --typography-l-body-xs-medium-font-size: var(--font-size-2); - --typography-l-body-xs-medium-line-height: var(--line-height-2); - --typography-l-body-xs-medium-font-weight: var(--font-weight-medium); - --typography-l-body-xs-medium-letter-spacing: var(--letter-spacing-0); - --typography-l-body-xs-font-family: var(--font-family-sans); - --typography-l-body-xs-font-size: var(--font-size-2); - --typography-l-body-xs-line-height: var(--line-height-2); - --typography-l-body-xs-font-weight: var(--font-weight-regular); - --typography-l-body-xs-letter-spacing: var(--letter-spacing-0); -} - -/** - * Shadow - */ - - :root { - /* shadow */ - --shadow-size-xs: 0 2px 4px 0; - --shadow-size-sm: 0 2px 8px 0; - --shadow-size-md: 0 2px 16px 0; - --shadow-size-lg: 0 2px 40px 0; -} - -/* - * Light Theme Colors - * Use these css variables in your code. - * This will insure theme compatibility - */ - - :root, - [data-theme='light'] { - /* Background */ - --color-background-default: var(--brand-colors-grey-grey000); - --color-background-default-hover: #f5f5f5; - --color-background-default-pressed: #ebebeb; - --color-background-alternative: var(--brand-colors-grey-grey050); - --color-background-alternative-hover: #e7ebee; - --color-background-alternative-pressed: #dbe0e6; - --color-background-hover: #0000000a; - --color-background-pressed: #00000014; - /* Text */ - --color-text-default: var(--brand-colors-grey-grey900); - --color-text-alternative: var(--brand-colors-grey-grey500); - --color-text-muted: var(--brand-colors-grey-grey300); - /* Icon */ - --color-icon-default: var(--color-text-default); - --color-icon-alternative: var(--text-alternative); - --color-icon-muted: var(--color-text-mute); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey200); - --color-border-muted: #bbc0c566; - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue500); - --color-primary-default-hover: #036ab5; - --color-primary-default-pressed: #025ea1; - --color-primary-alternative: var(--brand-colors-blue-blue600); - --color-primary-muted: #0376c91a; - --color-primary-inverse: var(--brand-colors-grey-grey000); - /* Error */ - --color-error-default: var(--brand-colors-red-red500); - --color-error-default-hover: #d02a3a; - --color-error-default-pressed: #bf2635; - --color-error-alternative: var(--brand-colors-red-red600); - --color-error-muted: #d738471a; - --color-error-inverse: var(--brand-colors-grey-grey000); - /* Warning */ - --color-warning-default: var(--brand-colors-yellow-yellow500); - --color-warning-default-hover: #ac4a07; - --color-warning-default-pressed: #984106; - --color-warning-muted: #bf52081a; - --color-warning-inverse: var(--brand-colors-grey-grey000); - /* Success */ - --color-success-default: var(--brand-colors-green-green500); - --color-success-default-hover: #18712d; - --color-success-default-pressed: #156127; - --color-success-muted: #1c82341a; - --color-success-inverse: var(--brand-colors-grey-grey000); - /* Info */ - --color-info-default: var(--brand-colors-blue-blue500); - --color-info-muted: #0376c91a; - --color-info-inverse: var(--brand-colors-grey-grey000); - /* Flask */ - --color-flask-default: var(--brand-colors-purple-purple500); - --color-flask-inverse: var(--brand-colors-grey-grey000); - /* Shadow */ - --color-shadow-default: #0000001a; - --color-shadow-primary: #0376c933; - --color-shadow-error: #d7384766; - } - - /** - * Dark Theme Colors - * Colors for dark theme - */ - -[data-theme='dark'] { - /* Background */ - --color-background-default: var(--brand-colors-grey-grey800); - --color-background-default-hover: #2d3034; - --color-background-default-pressed: #363b3f; - --color-background-alternative: var(--brand-colors-grey-grey900); - --color-background-alternative-hover: #1e2124; - --color-background-alternative-pressed: #272b2f; - --color-background-hover: #ffffff0a; - --color-background-pressed: #ffffff14; - /* Text */ - --color-text-default: var(--brand-colors-grey-grey000); - --color-text-alternative: var(--brand-colors-grey-grey200); - --color-text-muted: var(--brand-colors-grey-grey400); - /* Icon */ - --color-icon-default: var(--color-text-default); - --color-icon-alternative: var(--color-text-alternative); - --color-icon-muted: var(--color-text-muted); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey400); - --color-border-muted: #848c9629; - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue400); - --color-primary-default-hover: #26a2fc; - --color-primary-default-pressed: #3baafd; - --color-primary-alternative: var(--brand-colors-blue-blue200); - --color-primary-muted: #1098fc26; - --color-primary-inverse: var(--brand-colors-grey-grey900); - /* Error */ - --color-error-default: var(--brand-colors-red-red400); - --color-error-default-hover: #e47782; - --color-error-default-pressed: #e78891; - --color-error-alternative: var(--brand-colors-red-red200); - --color-error-muted: #e0647026; - --color-error-inverse: var(--brand-colors-grey-grey900); - /* Warning */ - --color-warning-default: var(--brand-colors-yellow-yellow100); - --color-warning-default-hover: #ffe485; - --color-warning-default-pressed: #ffe899; - --color-warning-muted: #ffdf7026; - --color-warning-inverse: var(--brand-colors-grey-grey900); - /* Success */ - --color-success-default: var(--brand-colors-green-green400); - --color-success-default-hover: #2cb94c; - --color-success-default-pressed: #30ca53; - --color-success-muted: #28a74526; - --color-success-inverse: var(--brand-colors-grey-grey900); - /* Info */ - --color-info-default: var(--brand-colors-blue-blue400); - --color-info-muted: #1098fc26; - --color-info-inverse: var(--brand-colors-grey-grey900); - /* Flask */ - --color-flask-default: var(--brand-colors-purple-purple400); - --color-flask-inverse: var(--brand-colors-grey-grey900); - /* Shadow */ - --color-shadow-default: #00000066; - --color-shadow-primary: #1098fc66; - --color-shadow-error: #e0647066; -} diff --git a/src/css/index-brand-evolution.css b/src/css/index-brand-evolution.css new file mode 100644 index 00000000..faa10af0 --- /dev/null +++ b/src/css/index-brand-evolution.css @@ -0,0 +1,5 @@ +@import './brand-colors-brand-evolution.css'; +@import './light-theme-colors-brand-evolution.css'; +@import './dark-theme-colors-brand-evolution.css'; +@import './typography.css'; +@import './shadow.css'; diff --git a/src/css/light-theme-brand-evolution.css b/src/css/light-theme-brand-evolution.css deleted file mode 100644 index 51b25c0a..00000000 --- a/src/css/light-theme-brand-evolution.css +++ /dev/null @@ -1,69 +0,0 @@ -/* - * Light Theme Colors - * Use these css variables in your code. - * This will insure theme compatibility - */ - -:root, -[data-theme='light'] { - /* Background */ - --color-background-default: var(--brand-colors-grey-grey000); - --color-background-default-hover: #f5f5f5; - --color-background-default-pressed: #ebebeb; - --color-background-alternative: var(--brand-colors-grey-grey050); - --color-background-alternative-hover: #e7ebee; - --color-background-alternative-pressed: #dbe0e6; - --color-background-hover: #0000000a; - --color-background-pressed: #00000014; - /* Text */ - --color-text-default: var(--brand-colors-grey-grey900); - --color-text-alternative: var(--brand-colors-grey-grey500); - --color-text-muted: var(--brand-colors-grey-grey300); - /* Icon */ - --color-icon-default: var(--color-text-default); - --color-icon-alternative: var(--text-alternative); - --color-icon-muted: var(--color-text-mute); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey200); - --color-border-muted: #bbc0c566; - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue500); - --color-primary-default-hover: #036ab5; - --color-primary-default-pressed: #025ea1; - --color-primary-alternative: var(--brand-colors-blue-blue600); - --color-primary-muted: #0376c91a; - --color-primary-inverse: var(--brand-colors-grey-grey000); - /* Error */ - --color-error-default: var(--brand-colors-red-red500); - --color-error-default-hover: #d02a3a; - --color-error-default-pressed: #bf2635; - --color-error-alternative: var(--brand-colors-red-red600); - --color-error-muted: #d738471a; - --color-error-inverse: var(--brand-colors-grey-grey000); - /* Warning */ - --color-warning-default: var(--brand-colors-yellow-yellow500); - --color-warning-default-hover: #ac4a07; - --color-warning-default-pressed: #984106; - --color-warning-muted: #bf52081a; - --color-warning-inverse: var(--brand-colors-grey-grey000); - /* Success */ - --color-success-default: var(--brand-colors-green-green500); - --color-success-default-hover: #18712d; - --color-success-default-pressed: #156127; - --color-success-muted: #1c82341a; - --color-success-inverse: var(--brand-colors-grey-grey000); - /* Info */ - --color-info-default: var(--brand-colors-blue-blue500); - --color-info-muted: #0376c91a; - --color-info-inverse: var(--brand-colors-grey-grey000); - /* Flask */ - --color-flask-default: var(--brand-colors-purple-purple500); - --color-flask-inverse: var(--brand-colors-grey-grey000); - /* Shadow */ - --color-shadow-default: #0000001a; - --color-shadow-primary: #0376c933; - --color-shadow-error: #d7384766; -} diff --git a/src/css/light-theme-colors-brand-evolution.css b/src/css/light-theme-colors-brand-evolution.css new file mode 100644 index 00000000..83dfc49f --- /dev/null +++ b/src/css/light-theme-colors-brand-evolution.css @@ -0,0 +1,152 @@ +/* + * Light Theme Colors + * Use these css variables in your code. + * This will insure theme compatibility + */ + +:root, + [data-theme='light'] { + /* + * Background + */ + /* For default neutral backgrounds */ + --color-background-default: var(--brand-colors-grey-grey000); + /* For "hover" states that use background-default */ + --color-background-default-hover: #f0f0f0; + /* For "pressed" states that use background-alternative */ + --color-background-default-pressed: #e0e0e0; + /* For secondary neutral backgrounds */ + --color-background-alternative: var(--brand-colors-grey-grey050); + /* For "hover" states that use background-alternative */ + --color-background-alternative-hover: #dde3ee; + /* For "pressed" states that use background-alternative */ + --color-background-alternative-pressed: #c9d2e4; + /* For "hover" state that use no background fill */ + --color-background-hover: #0000000f; + /* For "pressed" state that use no background fill */ + --color-background-pressed: #0000001f; + + /* + * Text + */ + /* For default neutral text */ + --color-text-default: var(--brand-colors-grey-grey900); + /* For softer contrast neutral text */ + --color-text-alternative: var(--brand-colors-grey-grey500); + /* For the softest contrast neutral text (not accessible) */ + --color-text-muted: var(--brand-colors-grey-grey300); + + /* + * Icon + */ + /* For default neutral icons */ + --color-icon-default: var(--color-text-default); + /* For softer neutral icons */ + --color-icon-alternative: var(--text-alternative); + /* For the weakest contrast neutral icons (not accessible) */ + --color-icon-muted: var(--color-text-muted); + + /* + * Border + */ + /* For soft contrast neutral border */ + --color-border-default: var(--brand-colors-grey-grey200); + /* For the weakest contrast neutral border */ + --color-border-muted: #b7bbc866; + + /* + * Overlay + */ + /* For the default shade of screen */ + --color-overlay-default: #00000066; + /* For a stronger shade of screen */ + --color-overlay-alternative: #000000cc; + + /* + * Primary + */ + /* For interactive, active, and selected semantics. Used for text, background, icon or border */ + --color-primary-default: var(--brand-colors-blue-blue500); + /* For the "hover" state of primary-default elements */ + --color-primary-default-hover: #243cff; + /* For the "pressed" state of primary-default elements */ + --color-primary-default-pressed: #0521ff; + /* For the stronger contrast primary semantic elements */ + --color-primary-alternative: var(--brand-colors-blue-blue600); + /* For the weakest contrast primary semantic backgrounds */ + --color-primary-muted: var(--brand-colors-blue-blue500-10); + /* For elements used on top of primary/default. Used for text, icon or border */ + --color-primary-inverse: var(--brand-colors-grey-grey000); + + /* + * Error + */ + /* For the critical alert semantic elements. Used for text, background, icon or border */ + --color-error-default: var(--brand-colors-red-red500); + /* For the "hover" state of error-default elements */ + --color-error-default-hover: #b22f3a; + /* For the "pressed" state of error-default elements */ + --color-error-default-pressed: #9a2832; + /* For the stronger contrast error semantic elements */ + --color-error-alternative: var(--brand-colors-red-red600); + /* For the weakest contrast critical alert semantic backgrounds */ + --color-error-muted: var(--brand-colors-red-red500-10); + /* For elements used on top of error/default. Used for text, icon or border */ + --color-error-inverse: var(--brand-colors-grey-grey000); + + /* + * Warning + */ + /* For the caution alert semantic elements. Used for text, background, icon or border */ + --color-warning-default: var(--brand-colors-yellow-yellow500); + /* For the "hover" state of warning-default elements */ + --color-warning-default-hover: #7a4f00; + /* For the "pressed" state of warning-default elements */ + --color-warning-default-pressed: #5c3b00; + /* For the weakest contrast caution alert semantic backgrounds */ + --color-warning-muted: var(--brand-colors-yellow-yellow500-10); + /* For elements used on top of warning/default. Used for text, icon or border */ + --color-warning-inverse: var(--brand-colors-grey-grey000); + + /* + * Success + */ + /* For the positive semantic elements. Used for text, background, icon or border */ + --color-success-default: var(--brand-colors-green-green500); + /* For the "hover" state of success-default elements */ + --color-success-default-hover: #166429; + /* For the "pressed" state of success-default elements */ + --color-success-default-pressed: #114b1e; + /* For the weakest contrast positive semantic backgrounds */ + --color-success-muted: var(--brand-colors-green-green500-10); + /* For elements used on top of success/default. Used for text, icon or border */ + --color-success-inverse: var(--brand-colors-grey-grey000); + + /* + * Info + */ + /* For informational read-only elements. Used for text, background, icon or border */ + --color-info-default: var(--brand-colors-blue-blue500); + /* For the weakest contrast informational semantic backgrounds */ + --color-info-muted: var(--brand-colors-blue-blue500-10); + /* For elements used on top of info/default. Used for text, icon or border */ + --color-info-inverse: var(--brand-colors-grey-grey000); + + /* + * Flask + */ + /* For Flask primary accent color */ + --color-flask-default: var(--brand-colors-purple-purple500); + /* For elements used on top of flask/default. Used for text, icon or border */ + --color-flask-inverse: var(--brand-colors-grey-grey000); + + /* + * Shadow + */ + /* For neutral drop shadow color */ + --color-shadow-default: #0000001a; + /* For primary drop shadow color */ + --color-shadow-primary: #4459ff33; + /* For critical/danger drop shadow color */ + --color-shadow-error: #d7384766; +} diff --git a/src/css/light-theme-colors.css b/src/css/light-theme-colors.css index c4ce7de1..b22b3748 100644 --- a/src/css/light-theme-colors.css +++ b/src/css/light-theme-colors.css @@ -1,81 +1,152 @@ /* * Light Theme Colors + * Use these css variables in your code. + * This will insure theme compatibility */ + :root, -[data-theme='light'] { - --color-background-default: var(--brand-colors-white-white000); - --color-background-default-hover: #fafafa; + [data-theme='light'] { + /* + * Background + */ + /* For default neutral backgrounds */ + --color-background-default: var(--brand-colors-grey-grey000); + /* For "hover" states that use background-default */ + --color-background-default-hover: #f5f5f5; + /* For "pressed" states that use background-alternative */ --color-background-default-pressed: #ebebeb; - --color-background-alternative: var(--brand-colors-grey-grey040); - --color-background-alternative-hover: #edeff1; - --color-background-alternative-pressed: #dfe0e2; - --color-background-hover: #00000005; + /* For secondary neutral backgrounds */ + --color-background-alternative: var(--brand-colors-grey-grey050); + /* For "hover" states that use background-alternative */ + --color-background-alternative-hover: #e7ebee; + /* For "pressed" states that use background-alternative */ + --color-background-alternative-pressed: #dbe0e6; + /* For "hover" state that use no background fill */ + --color-background-hover: #0000000a; + /* For "pressed" state that use no background fill */ --color-background-pressed: #00000014; - --color-text-default: var(--brand-colors-grey-grey800); - --color-text-alternative: var(--brand-colors-grey-grey600); - --color-text-muted: var(--brand-colors-grey-grey200); - --color-icon-default: var(--brand-colors-grey-grey800); - --color-icon-alternative: var(--brand-colors-grey-grey500); - --color-icon-muted: var(--brand-colors-grey-grey200); + + /* + * Text + */ + /* For default neutral text */ + --color-text-default: var(--brand-colors-grey-grey900); + /* For softer contrast neutral text */ + --color-text-alternative: var(--brand-colors-grey-grey500); + /* For the softest contrast neutral text (not accessible) */ + --color-text-muted: var(--brand-colors-grey-grey300); + + /* + * Icon + */ + /* For default neutral icons */ + --color-icon-default: var(--color-text-default); + /* For softer neutral icons */ + --color-icon-alternative: var(--text-alternative); + /* For the weakest contrast neutral icons (not accessible) */ + --color-icon-muted: var(--color-text-muted); + + /* + * Border + */ + /* For soft contrast neutral border */ --color-border-default: var(--brand-colors-grey-grey200); - --color-border-muted: var(--brand-colors-grey-grey100); + /* For the weakest contrast neutral border */ + --color-border-muted: #bbc0c566; + + /* + * Overlay + */ + /* For the default shade of screen */ --color-overlay-default: #00000099; + /* For a stronger shade of screen */ --color-overlay-alternative: #000000cc; - --color-overlay-inverse: var(--brand-colors-white-white010); - --color-shadow-default: #0000001a; + + /* + * Primary + */ + /* For interactive, active, and selected semantics. Used for text, background, icon or border */ --color-primary-default: var(--brand-colors-blue-blue500); - --color-primary-default-hover: #0379ce; - --color-primary-default-pressed: #036db9; + /* For the "hover" state of primary-default elements */ + --color-primary-default-hover: #036ab5; + /* For the "pressed" state of primary-default elements */ + --color-primary-default-pressed: #025ea1; + /* For the stronger contrast primary semantic elements */ --color-primary-alternative: var(--brand-colors-blue-blue600); - --color-primary-muted: #0376c919; - --color-primary-inverse: var(--brand-colors-white-white000); - --color-primary-disabled: #0376c980; - --color-primary-shadow: #0376c933; - --color-secondary-default: var(--brand-colors-orange-orange500); - --color-secondary-alternative: var(--brand-colors-orange-orange600); - --color-secondary-muted: #f66a0a19; - --color-secondary-inverse: var(--brand-colors-white-white000); - --color-secondary-disabled: #f66a0a80; + /* For the weakest contrast primary semantic backgrounds */ + --color-primary-muted: var(--brand-colors-blue-blue500-10); + /* For elements used on top of primary/default. Used for text, icon or border */ + --color-primary-inverse: var(--brand-colors-grey-grey000); + + /* + * Error + */ + /* For the critical alert semantic elements. Used for text, background, icon or border */ --color-error-default: var(--brand-colors-red-red500); - --color-error-default-hover: #cd4250; - --color-error-default-pressed: #c63441; + /* For the "hover" state of error-default elements */ + --color-error-default-hover: #d02a3a; + /* For the "pressed" state of error-default elements */ + --color-error-default-pressed: #bf2635; + /* For the stronger contrast error semantic elements */ --color-error-alternative: var(--brand-colors-red-red600); - --color-error-muted: #d7384719; - --color-error-inverse: var(--brand-colors-white-white000); - --color-error-disabled: #d7384780; - --color-error-shadow: #d7384766; - --color-warning-default: var(--brand-colors-orange-orange600); - --color-warning-default-hover: #c2540a; - --color-warning-default-pressed: #a24507; - --color-warning-alternative: var(--brand-colors-yellow-yellow600); - --color-warning-muted: #bf520819; - --color-warning-inverse: var(--brand-colors-white-white000); - --color-warning-disabled: #ffd33d80; - --color-success-default: var(--brand-colors-green-green600); - --color-success-default-hover: #208838; - --color-success-default-pressed: #1b7431; - --color-success-alternative: var(--brand-colors-green-green500); - --color-success-muted: #1c823419; - --color-success-inverse: var(--brand-colors-white-white000); - --color-success-disabled: #28a74580; + /* For the weakest contrast critical alert semantic backgrounds */ + --color-error-muted: var(--brand-colors-red-red500-10); + /* For elements used on top of error/default. Used for text, icon or border */ + --color-error-inverse: var(--brand-colors-grey-grey000); + + /* + * Warning + */ + /* For the caution alert semantic elements. Used for text, background, icon or border */ + --color-warning-default: var(--brand-colors-yellow-yellow500); + /* For the "hover" state of warning-default elements */ + --color-warning-default-hover: #ac4a07; + /* For the "pressed" state of warning-default elements */ + --color-warning-default-pressed: #984106; + /* For the weakest contrast caution alert semantic backgrounds */ + --color-warning-muted: var(--brand-colors-yellow-yellow500-10); + /* For elements used on top of warning/default. Used for text, icon or border */ + --color-warning-inverse: var(--brand-colors-grey-grey000); + + /* + * Success + */ + /* For the positive semantic elements. Used for text, background, icon or border */ + --color-success-default: var(--brand-colors-green-green500); + /* For the "hover" state of success-default elements */ + --color-success-default-hover: #18712d; + /* For the "pressed" state of success-default elements */ + --color-success-default-pressed: #156127; + /* For the weakest contrast positive semantic backgrounds */ + --color-success-muted: var(--brand-colors-green-green500-10); + /* For elements used on top of success/default. Used for text, icon or border */ + --color-success-inverse: var(--brand-colors-grey-grey000); + + /* + * Info + */ + /* For informational read-only elements. Used for text, background, icon or border */ --color-info-default: var(--brand-colors-blue-blue500); - --color-info-alternative: var(--brand-colors-blue-blue600); - --color-info-muted: #0376c919; - --color-info-inverse: var(--brand-colors-white-white000); - --color-info-disabled: #0376c980; - --color-network-goerli-default: var(--brand-colors-blue-blue400); - --color-network-goerli-inverse: var(--brand-colors-white-white010); - --color-network-localhost-default: var(--brand-colors-grey-grey200); - --color-network-localhost-inverse: var(--brand-colors-white-white010); - --color-network-sepolia-default: var(--brand-colors-violet-violet300); - --color-network-sepolia-inverse: var(--brand-colors-white-white010); + /* For the weakest contrast informational semantic backgrounds */ + --color-info-muted: var(--brand-colors-blue-blue500-10); + /* For elements used on top of info/default. Used for text, icon or border */ + --color-info-inverse: var(--brand-colors-grey-grey000); + + /* + * Flask + */ + /* For Flask primary accent color */ --color-flask-default: var(--brand-colors-purple-purple500); - --color-flask-inverse: var(--brand-colors-white-white010); + /* For elements used on top of flask/default. Used for text, icon or border */ + --color-flask-inverse: var(--brand-colors-grey-grey000); - /* Components */ - /* button */ - --component-button-primary-shadow: var(--shadow-size-sm) - var(--color-primary-shadow); - --component-button-danger-shadow: var(--shadow-size-sm) - var(--color-error-shadow); + /* + * Shadow + */ + /* For neutral drop shadow color */ + --color-shadow-default: #0000001a; + /* For primary drop shadow color */ + --color-shadow-primary: #0376c933; + /* For critical/danger drop shadow color */ + --color-shadow-error: #d7384766; } diff --git a/src/css/light-theme.css b/src/css/light-theme.css deleted file mode 100644 index 074d29b5..00000000 --- a/src/css/light-theme.css +++ /dev/null @@ -1,98 +0,0 @@ -/* - * Light Theme Colors - * Use these css variables in your code. - * This will insure theme compatibility - */ - -:root, -[data-theme='light'] { - /* Background */ - --color-background-default: var(--brand-colors-white-white000); - --color-background-default-hover: #fafafa; - --color-background-default-pressed: #ebebeb; - --color-background-alternative: var(--brand-colors-grey-grey040); - --color-background-alternative-hover: #edeff1; - --color-background-alternative-pressed: #dfe0e2; - --color-background-hover: #00000005; - --color-background-pressed: #00000014; - /* Text */ - --color-text-default: var(--brand-colors-grey-grey800); - --color-text-alternative: var(--brand-colors-grey-grey600); - --color-text-muted: var(--brand-colors-grey-grey200); - /* Icon */ - --color-icon-default: var(--brand-colors-grey-grey800); - --color-icon-alternative: var(--brand-colors-grey-grey500); - --color-icon-muted: var(--brand-colors-grey-grey200); - /* Border */ - --color-border-default: var(--brand-colors-grey-grey200); - --color-border-muted: var(--brand-colors-grey-grey100); - /* Overlay */ - --color-overlay-default: #00000099; - --color-overlay-alternative: #000000cc; - --color-overlay-inverse: var(--brand-colors-white-white010); - /* Shadow */ - --color-shadow-default: #0000001a; - /* Primary */ - --color-primary-default: var(--brand-colors-blue-blue500); - --color-primary-default-hover: #0379ce; - --color-primary-default-pressed: #036db9; - --color-primary-alternative: var(--brand-colors-blue-blue600); - --color-primary-muted: #0376c919; - --color-primary-inverse: var(--brand-colors-white-white000); - --color-primary-disabled: #0376c980; - --color-primary-shadow: #0376c933; - /* Secondary */ - --color-secondary-default: var(--brand-colors-orange-orange500); - --color-secondary-alternative: var(--brand-colors-orange-orange600); - --color-secondary-muted: #f66a0a19; - --color-secondary-inverse: var(--brand-colors-white-white000); - --color-secondary-disabled: #f66a0a80; - /* Error */ - --color-error-default: var(--brand-colors-red-red500); - --color-error-default-hover: #cd4250; - --color-error-default-pressed: #c63441; - --color-error-alternative: var(--brand-colors-red-red600); - --color-error-muted: #d7384719; - --color-error-inverse: var(--brand-colors-white-white000); - --color-error-disabled: #d7384780; - --color-error-shadow: #d7384766; - /* Warning */ - --color-warning-default: var(--brand-colors-orange-orange600); - --color-warning-default-hover: #c2540a; - --color-warning-default-pressed: #a24507; - --color-warning-alternative: var(--brand-colors-yellow-yellow600); - --color-warning-muted: #bf520819; - --color-warning-inverse: var(--brand-colors-white-white000); - --color-warning-disabled: #ffd33d80; - /* Success */ - --color-success-default: var(--brand-colors-green-green600); - --color-success-default-hover: #208838; - --color-success-default-pressed: #1b7431; - --color-success-alternative: var(--brand-colors-green-green500); - --color-success-muted: #1c823419; - --color-success-inverse: var(--brand-colors-white-white000); - --color-success-disabled: #28a74580; - /* Info */ - --color-info-default: var(--brand-colors-blue-blue500); - --color-info-alternative: var(--brand-colors-blue-blue600); - --color-info-muted: #0376c919; - --color-info-inverse: var(--brand-colors-white-white000); - --color-info-disabled: #0376c980; - /* Networks */ - --color-network-goerli-default: var(--brand-colors-blue-blue400); - --color-network-goerli-inverse: var(--brand-colors-white-white010); - --color-network-localhost-default: var(--brand-colors-grey-grey200); - --color-network-localhost-inverse: var(--brand-colors-white-white010); - --color-network-sepolia-default: var(--brand-colors-violet-violet300); - --color-network-sepolia-inverse: var(--brand-colors-white-white010); - /* Flasks */ - --color-flask-default: var(--brand-colors-purple-purple500); - --color-flask-inverse: var(--brand-colors-white-white010); - - /* Components */ - /* button */ - --component-button-primary-shadow: var(--shadow-size-sm) - var(--color-primary-shadow); - --component-button-danger-shadow: var(--shadow-size-sm) - var(--color-error-shadow); -}