From f5cbc6451d0af26dd74419a9802d7ca046868a1b Mon Sep 17 00:00:00 2001 From: srwang Date: Thu, 23 May 2024 17:39:05 -0400 Subject: [PATCH 1/5] fix: updating the primary button styles --- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 16 ++++++++-------- .../themes/light/components/Button/primary.json | 12 ++++++------ 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index 1619e81..22c5e8d 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 14:49:30 GMT + * Generated on Thu, 23 May 2024 21:01:53 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index a07a659..03674a4 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 14:49:30 GMT + * Generated on Thu, 23 May 2024 21:01:53 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index 0b6da8f..4ec65fd 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 14:49:30 GMT + * Generated on Thu, 23 May 2024 21:01:55 GMT */ :root { @@ -144,11 +144,15 @@ --pgn-color-form-input-bg-base: #FFFFFFFF; --pgn-color-btn-focus-text-outline-brand: #D74000FF; --pgn-color-btn-focus-text-brand: #FFFFFFFF; + --pgn-color-btn-active-border-outline-primary: #FFFFFFFF; + --pgn-color-btn-active-border-primary: #00262BFF; --pgn-color-btn-active-border-outline-brand: #D74000FF; --pgn-color-btn-active-border-brand: #D74000FF; --pgn-color-btn-active-bg-inverse-tertiary: #96A4A7FF; --pgn-color-btn-active-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-active-bg-brand: #D74000FF; + --pgn-color-btn-active-text-outline-primary: #454545FF; + --pgn-color-btn-active-text-primary: #454545FF; --pgn-color-btn-active-text-outline-brand: #FFFFFFFF; --pgn-color-btn-active-text-brand: #454545FF; --pgn-color-btn-hover-border-primary: #00262BFF; @@ -165,7 +169,8 @@ --pgn-color-btn-hover-bg-outline-brand: #D74000FF; --pgn-color-btn-hover-text-outline-warning: #2D2D2DFF; --pgn-color-btn-hover-text-outline-success: #FFFFFFFF; - --pgn-color-btn-hover-text-outline-primary: #FFFFFFFF; + --pgn-color-btn-hover-text-outline-primary: #454545FF; + --pgn-color-btn-hover-text-primary: #454545FF; --pgn-color-btn-hover-text-outline-light: #353535FF; --pgn-color-btn-hover-text-outline-info: #FFFFFFFF; --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF; @@ -273,7 +278,7 @@ --pgn-color-btn-disabled-bg-brand: #FEF9F7FF; --pgn-color-btn-disabled-text-outline-warning: #2D2D2DFF; --pgn-color-btn-disabled-text-outline-success: #FFFFFFFF; - --pgn-color-btn-disabled-text-outline-primary: #FFFFFFFF; + --pgn-color-btn-disabled-text-outline-primary: #454545FF; --pgn-color-btn-disabled-text-outline-light: #353535FF; --pgn-color-btn-disabled-text-outline-info: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-dark: #FFFFFFFF; @@ -301,8 +306,6 @@ --pgn-color-btn-active-border-warning: #554900FF; --pgn-color-btn-active-border-outline-success: #0B663EFF; --pgn-color-btn-active-border-success: #0B360BFF; - --pgn-color-btn-active-border-outline-primary: #00262BFF; - --pgn-color-btn-active-border-primary: #001315FF; --pgn-color-btn-active-border-outline-light: #A29F97FF; --pgn-color-btn-active-border-light: #201F1DFF; --pgn-color-btn-active-border-outline-info: #005572FF; @@ -340,7 +343,6 @@ --pgn-color-btn-hover-bg-dark: #0F211EFF; --pgn-color-btn-hover-bg-danger: #77160FFF; --pgn-color-btn-hover-bg-brand: #FEF9F7FF; - --pgn-color-btn-hover-text-primary: #393939FF; --pgn-color-btn-border-outline-warning: #AE9400FF; --pgn-color-btn-border-warning: #AE9400FF; --pgn-color-btn-border-outline-success: #0B663EFF; @@ -460,8 +462,6 @@ --pgn-color-btn-active-text-warning: #FFFFFFFF; --pgn-color-btn-active-text-outline-success: #FFFFFFFF; --pgn-color-btn-active-text-success: #FFFFFFFF; - --pgn-color-btn-active-text-outline-primary: #FFFFFFFF; - --pgn-color-btn-active-text-primary: #FFFFFFFF; --pgn-color-btn-active-text-outline-light: #353535FF; --pgn-color-btn-active-text-light: #FFFFFFFF; --pgn-color-btn-active-text-outline-info: #FFFFFFFF; diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index f888da9..6cfa8d2 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -45,7 +45,7 @@ "hover": { "text": { "primary": { - "value": "{color.btn.hover.bg.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-hover-color", "modify": [ @@ -55,7 +55,7 @@ ] }, "outline-primary": { - "value": "{color.primary.500}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-outline-hover-color", "modify": [ @@ -93,7 +93,7 @@ "active": { "text": { "primary": { - "value": "{color.btn.active.bg.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-active-color", "modify": [ @@ -103,7 +103,7 @@ ] }, "outline-primary": { - "value": "{color.btn.active.bg.outline-primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-outline-active-color", "modify": [ @@ -127,12 +127,12 @@ }, "border": { "primary": { - "value": "{color.theme.active.primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-active-border-color" }, "outline-primary": { - "value": "{color.btn.bg.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-outline-active-border-color" } From 05991531b3682489da80af40d1f656055d6ab79e Mon Sep 17 00:00:00 2001 From: srwang Date: Fri, 24 May 2024 14:50:56 -0400 Subject: [PATCH 2/5] fix: update the color themes --- README.rst | 2 +- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 484 +++++++++--------- tokens/src/themes/light/global/color.json | 189 ++++--- 5 files changed, 371 insertions(+), 308 deletions(-) diff --git a/README.rst b/README.rst index 825e32b..2dcba23 100644 --- a/README.rst +++ b/README.rst @@ -145,7 +145,7 @@ Building design tokens .. code-block:: bash - npm run build-design-tokens + npm run build-tokens -------------------------------- diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index 22c5e8d..c9cee16 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 21:01:53 GMT + * Generated on Fri, 24 May 2024 18:48:53 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 03674a4..50f2b0f 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 21:01:53 GMT + * Generated on Fri, 24 May 2024 18:48:53 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index 4ec65fd..9aaf3f9 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,82 +1,82 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 23 May 2024 21:01:55 GMT + * Generated on Fri, 24 May 2024 18:48:53 GMT */ :root { --pgn-color-dark-base: #D2DAD8FF; - --pgn-color-dark-900: #040A08FF; - --pgn-color-dark-800: #091512FF; - --pgn-color-dark-700: #0F211EFF; - --pgn-color-dark-600: #17322CFF; + --pgn-color-dark-900: #060E0CFF; + --pgn-color-dark-800: #0C1C18FF; + --pgn-color-dark-700: #132925FF; + --pgn-color-dark-600: #193731FF; --pgn-color-dark-500: #1F453DFF; - --pgn-color-dark-400: #798F8BFF; - --pgn-color-dark-300: #BCC7C5FF; - --pgn-color-dark-200: #EFF2F2FF; + --pgn-color-dark-400: #4C6A64FF; + --pgn-color-dark-300: #798F8BFF; + --pgn-color-dark-200: #BFC9CAFF; --pgn-color-light-base: #F9F8F6FF; - --pgn-color-light-900: #201F1DFF; - --pgn-color-light-800: #44423FFF; - --pgn-color-light-700: #6C6A65FF; - --pgn-color-light-600: #A29F97FF; + --pgn-color-light-900: #2D2C2AFF; + --pgn-color-light-800: #5A5854FF; + --pgn-color-light-700: #87857EFF; + --pgn-color-light-600: #B4B1A8FF; --pgn-color-light-500: #E1DDD2FF; - --pgn-color-light-400: #EDEBE4FF; - --pgn-color-light-300: #F6F5F2FF; - --pgn-color-light-200: #FCFCFBFF; + --pgn-color-light-400: #E7E4DBFF; + --pgn-color-light-300: #EDEBE4FF; + --pgn-color-light-200: #F3F1EDFF; --pgn-color-danger-base: #FCF1F4FF; - --pgn-color-danger-900: #4A0A05FF; - --pgn-color-danger-800: #600802FF; - --pgn-color-danger-700: #77160FFF; - --pgn-color-danger-600: #8B0B02FF; + --pgn-color-danger-900: #690E07FF; + --pgn-color-danger-800: #800A02FF; + --pgn-color-danger-700: #951C13FF; + --pgn-color-danger-600: #9A0C02FF; --pgn-color-danger-500: #AB0D02FF; - --pgn-color-danger-400: #D07771FF; - --pgn-color-danger-300: #E59D97FF; - --pgn-color-danger-200: #FCEBEAFF; + --pgn-color-danger-400: #C04A41FF; + --pgn-color-danger-300: #CA3A2FFF; + --pgn-color-danger-200: #F3AEA9FF; --pgn-color-warning-base: #FFFADBFF; - --pgn-color-warning-900: #554900FF; - --pgn-color-warning-800: #796700FF; - --pgn-color-warning-700: #7A6800FF; - --pgn-color-warning-600: #AE9400FF; + --pgn-color-warning-900: #7A6800FF; + --pgn-color-warning-800: #A18900FF; + --pgn-color-warning-700: #998200FF; + --pgn-color-warning-600: #C1A400FF; --pgn-color-warning-500: #D6B600FF; - --pgn-color-warning-400: #E8D670FF; - --pgn-color-warning-300: #F8E680FF; - --pgn-color-warning-200: #FFFADDFF; + --pgn-color-warning-400: #E0C840FF; + --pgn-color-warning-300: #F0CC00FF; + --pgn-color-warning-200: #FFEA75FF; --pgn-color-info-base: #EFF8FAFF; - --pgn-color-info-900: #002134FF; - --pgn-color-info-800: #003B50FF; - --pgn-color-info-700: #003A5BFF; - --pgn-color-info-600: #005572FF; + --pgn-color-info-900: #002F4AFF; + --pgn-color-info-800: #004E6AFF; + --pgn-color-info-700: #004972FF; + --pgn-color-info-600: #005E7FFF; --pgn-color-info-500: #00688DFF; - --pgn-color-info-400: #70AABFFF; - --pgn-color-info-300: #8EC6DFFF; - --pgn-color-info-200: #E6F4F9FF; + --pgn-color-info-400: #408EAAFF; + --pgn-color-info-300: #1C8DBEFF; + --pgn-color-info-200: #9CD2E6FF; --pgn-color-success-base: #F2FAF7FF; - --pgn-color-success-900: #0B360BFF; - --pgn-color-success-800: #08472CFF; - --pgn-color-success-700: #124930FF; - --pgn-color-success-600: #0B663EFF; + --pgn-color-success-900: #0F4D0FFF; + --pgn-color-success-800: #0A5E3AFF; + --pgn-color-success-700: #175B3CFF; + --pgn-color-success-600: #0C7145FF; --pgn-color-success-500: #0D7D4DFF; - --pgn-color-success-400: #77B69BFF; - --pgn-color-success-300: #98D0B8FF; - --pgn-color-success-200: #EEF9F5FF; + --pgn-color-success-400: #4A9E7AFF; + --pgn-color-success-300: #30A171FF; + --pgn-color-success-200: #BBE6D7FF; --pgn-color-brand-base: #F49974FF; - --pgn-color-brand-900: #511D08FF; - --pgn-color-brand-800: #682308FF; - --pgn-color-brand-700: #822A06FF; - --pgn-color-brand-600: #A93405FF; + --pgn-color-brand-900: #73290CFF; + --pgn-color-brand-800: #8B2F0BFF; + --pgn-color-brand-700: #A33508FF; + --pgn-color-brand-600: #BC3A05FF; --pgn-color-brand-500: #D74000FF; - --pgn-color-brand-400: #E7835BFF; - --pgn-color-brand-300: #F3B79FFF; - --pgn-color-brand-200: #FBE1D6FF; + --pgn-color-brand-400: #DF5924FF; + --pgn-color-brand-300: #E76F3FFF; + --pgn-color-brand-200: #EE855AFF; --pgn-color-primary-base: #F0F2F2FF; - --pgn-color-primary-900: #001315FF; - --pgn-color-primary-800: #001618FF; - --pgn-color-primary-700: #001A1AFF; - --pgn-color-primary-600: #002022FF; + --pgn-color-primary-900: #001B1EFF; + --pgn-color-primary-800: #001D20FF; + --pgn-color-primary-700: #002121FF; + --pgn-color-primary-600: #002326FF; --pgn-color-primary-500: #00262BFF; - --pgn-color-primary-400: #4A686BFF; - --pgn-color-primary-300: #96A4A7FF; - --pgn-color-primary-200: #EFF2F2FF; + --pgn-color-primary-400: #0E3639FF; + --pgn-color-primary-300: #2D494EFF; + --pgn-color-primary-200: #BFC9CAFF; --pgn-color-gray-base: #EBEBEBFF; --pgn-color-gray-900: #212529FF; --pgn-color-gray-800: #333333FF; @@ -124,19 +124,19 @@ --pgn-spacing-btn-block-spacing-y: .5rem; --pgn-size-input-btn-focus-width: 1px; --pgn-size-btn-focus-width: 2px; - --pgn-color-dark-100: #FCFDFDFF; - --pgn-color-light-100: #FFFFFEFF; - --pgn-color-danger-100: #FFFEFEFF; - --pgn-color-warning-100: #FFFFFDFF; - --pgn-color-info-100: #FEFFFFFF; - --pgn-color-success-100: #FEFFFFFF; - --pgn-color-brand-100: #FEF9F7FF; + --pgn-color-dark-100: #D2DAD8FF; + --pgn-color-light-100: #F9F8F6FF; + --pgn-color-danger-100: #FCF1F4FF; + --pgn-color-warning-100: #FFFADBFF; + --pgn-color-info-100: #EFF8FAFF; + --pgn-color-success-100: #F2FAF7FF; + --pgn-color-brand-100: #F49974FF; --pgn-color-primary-100: #FEFEFEFF; --pgn-color-gray-100: #EBEBEBFF; --pgn-color-tooltip-bg-base: #F0F2F2FF; --pgn-color-tooltip-light: #F0F2F2FF; --pgn-color-pagination-text-base: #F0F2F2FF; - --pgn-color-link-hover: #003A5BFF; + --pgn-color-link-hover: #004972FF; --pgn-color-link-base: #00688DFF; --pgn-color-headings-base: #1F453DFF; --pgn-color-body-bg: #FFFFFFFF; @@ -148,7 +148,7 @@ --pgn-color-btn-active-border-primary: #00262BFF; --pgn-color-btn-active-border-outline-brand: #D74000FF; --pgn-color-btn-active-border-brand: #D74000FF; - --pgn-color-btn-active-bg-inverse-tertiary: #96A4A7FF; + --pgn-color-btn-active-bg-inverse-tertiary: #2D494EFF; --pgn-color-btn-active-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-active-bg-brand: #D74000FF; --pgn-color-btn-active-text-outline-primary: #454545FF; @@ -157,62 +157,62 @@ --pgn-color-btn-active-text-brand: #454545FF; --pgn-color-btn-hover-border-primary: #00262BFF; --pgn-color-btn-hover-border-brand: #D74000FF; - --pgn-color-btn-hover-bg-outline-warning: #AE9400FF; - --pgn-color-btn-hover-bg-inverse-tertiary: #96A4A7FF; - --pgn-color-btn-hover-bg-outline-success: #0B663EFF; + --pgn-color-btn-hover-bg-outline-warning: #C1A400FF; + --pgn-color-btn-hover-bg-inverse-tertiary: #2D494EFF; + --pgn-color-btn-hover-bg-outline-success: #0C7145FF; --pgn-color-btn-hover-bg-outline-primary: #00262BFF; - --pgn-color-btn-hover-bg-primary: #96A4A7FF; - --pgn-color-btn-hover-bg-outline-light: #A29F97FF; - --pgn-color-btn-hover-bg-outline-info: #005572FF; - --pgn-color-btn-hover-bg-outline-dark: #17322CFF; - --pgn-color-btn-hover-bg-outline-danger: #8B0B02FF; + --pgn-color-btn-hover-bg-primary: #2D494EFF; + --pgn-color-btn-hover-bg-outline-light: #B4B1A8FF; + --pgn-color-btn-hover-bg-outline-info: #005E7FFF; + --pgn-color-btn-hover-bg-outline-dark: #193731FF; + --pgn-color-btn-hover-bg-outline-danger: #9A0C02FF; --pgn-color-btn-hover-bg-outline-brand: #D74000FF; - --pgn-color-btn-hover-text-outline-warning: #2D2D2DFF; + --pgn-color-btn-hover-text-outline-warning: #393939FF; --pgn-color-btn-hover-text-outline-success: #FFFFFFFF; --pgn-color-btn-hover-text-outline-primary: #454545FF; --pgn-color-btn-hover-text-primary: #454545FF; - --pgn-color-btn-hover-text-outline-light: #353535FF; + --pgn-color-btn-hover-text-outline-light: #414141FF; --pgn-color-btn-hover-text-outline-info: #FFFFFFFF; --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF; --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF; --pgn-color-btn-hover-text-outline-brand: #FFFFFFFF; --pgn-color-btn-hover-text-brand: #FFFFFFFF; --pgn-color-btn-bg-outline-warning: #FFFFFFFF; - --pgn-color-btn-bg-warning: #AE9400FF; + --pgn-color-btn-bg-warning: #C1A400FF; --pgn-color-btn-bg-outline-success: #FFFFFFFF; - --pgn-color-btn-bg-success: #0B663EFF; + --pgn-color-btn-bg-success: #0C7145FF; --pgn-color-btn-bg-outline-secondary: #FFFFFFFF; --pgn-color-btn-bg-outline-primary: #FFFFFFFF; --pgn-color-btn-bg-primary: #00262BFF; --pgn-color-btn-bg-outline-light: #FFFFFFFF; - --pgn-color-btn-bg-light: #A29F97FF; + --pgn-color-btn-bg-light: #B4B1A8FF; --pgn-color-btn-bg-outline-info: #FFFFFFFF; - --pgn-color-btn-bg-info: #005572FF; + --pgn-color-btn-bg-info: #005E7FFF; --pgn-color-btn-bg-outline-dark: #FFFFFFFF; - --pgn-color-btn-bg-dark: #17322CFF; + --pgn-color-btn-bg-dark: #193731FF; --pgn-color-btn-bg-outline-danger: #FFFFFFFF; - --pgn-color-btn-bg-danger: #8B0B02FF; + --pgn-color-btn-bg-danger: #9A0C02FF; --pgn-color-btn-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-bg-brand: #D74000FF; --pgn-color-badge-bg-info: #00BBF9FF; --pgn-color-theme-active-gray: #212529FF; - --pgn-color-theme-active-dark: #040A08FF; - --pgn-color-theme-active-light: #201F1DFF; - --pgn-color-theme-active-danger: #4A0A05FF; - --pgn-color-theme-active-warning: #554900FF; - --pgn-color-theme-active-info: #002134FF; - --pgn-color-theme-active-success: #0B360BFF; - --pgn-color-theme-active-brand: #511D08FF; - --pgn-color-theme-active-primary: #001315FF; + --pgn-color-theme-active-dark: #060E0CFF; + --pgn-color-theme-active-light: #2D2C2AFF; + --pgn-color-theme-active-danger: #690E07FF; + --pgn-color-theme-active-warning: #7A6800FF; + --pgn-color-theme-active-info: #002F4AFF; + --pgn-color-theme-active-success: #0F4D0FFF; + --pgn-color-theme-active-brand: #73290CFF; + --pgn-color-theme-active-primary: #001B1EFF; --pgn-color-theme-hover-gray: #454545FF; - --pgn-color-theme-hover-dark: #0F211EFF; - --pgn-color-theme-hover-light: #6C6A65FF; - --pgn-color-theme-hover-danger: #77160FFF; - --pgn-color-theme-hover-warning: #7A6800FF; - --pgn-color-theme-hover-info: #003A5BFF; - --pgn-color-theme-hover-success: #124930FF; - --pgn-color-theme-hover-brand: #822A06FF; - --pgn-color-theme-hover-primary: #001A1AFF; + --pgn-color-theme-hover-dark: #132925FF; + --pgn-color-theme-hover-light: #87857EFF; + --pgn-color-theme-hover-danger: #951C13FF; + --pgn-color-theme-hover-warning: #998200FF; + --pgn-color-theme-hover-info: #004972FF; + --pgn-color-theme-hover-success: #175B3CFF; + --pgn-color-theme-hover-brand: #A33508FF; + --pgn-color-theme-hover-primary: #002121FF; --pgn-color-theme-default-gray: #707070FF; --pgn-color-theme-default-dark: #1F453DFF; --pgn-color-theme-default-light: #E1DDD2FF; @@ -232,14 +232,14 @@ --pgn-color-theme-focus-brand: #D74000FF; --pgn-color-theme-focus-primary: #00262BFF; --pgn-color-theme-border-gray: #CCCCCCFF; - --pgn-color-theme-border-dark: #EFF2F2FF; - --pgn-color-theme-border-light: #FCFCFBFF; - --pgn-color-theme-border-danger: #FCEBEAFF; - --pgn-color-theme-border-warning: #FFFADDFF; - --pgn-color-theme-border-info: #E6F4F9FF; - --pgn-color-theme-border-success: #EEF9F5FF; - --pgn-color-theme-border-brand: #FBE1D6FF; - --pgn-color-theme-border-primary: #EFF2F2FF; + --pgn-color-theme-border-dark: #BFC9CAFF; + --pgn-color-theme-border-light: #F3F1EDFF; + --pgn-color-theme-border-danger: #F3AEA9FF; + --pgn-color-theme-border-warning: #FFEA75FF; + --pgn-color-theme-border-info: #9CD2E6FF; + --pgn-color-theme-border-success: #BBE6D7FF; + --pgn-color-theme-border-brand: #EE855AFF; + --pgn-color-theme-border-primary: #BFC9CAFF; --pgn-color-bg-active: #F0F2F2FF; --pgn-elevation-box-shadow-lg: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15); --pgn-elevation-box-shadow-sm: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15); @@ -267,202 +267,202 @@ --pgn-size-input-btn-border-width: 1px; --pgn-color-form-input-focus-border: #454545FF; --pgn-color-form-input-base: #454545FF; - --pgn-color-btn-disabled-bg-warning: #AE9400FF; - --pgn-color-btn-disabled-bg-success: #0B663EFF; + --pgn-color-btn-disabled-bg-warning: #C1A400FF; + --pgn-color-btn-disabled-bg-success: #0C7145FF; --pgn-color-btn-disabled-bg-primary: #00262BFF; - --pgn-color-btn-disabled-bg-light: #A29F97FF; - --pgn-color-btn-disabled-bg-info: #005572FF; - --pgn-color-btn-disabled-bg-dark: #17322CFF; - --pgn-color-btn-disabled-bg-danger: #8B0B02FF; - --pgn-color-btn-disabled-bg-outline-brand: #FEF9F7FF; - --pgn-color-btn-disabled-bg-brand: #FEF9F7FF; - --pgn-color-btn-disabled-text-outline-warning: #2D2D2DFF; + --pgn-color-btn-disabled-bg-light: #B4B1A8FF; + --pgn-color-btn-disabled-bg-info: #005E7FFF; + --pgn-color-btn-disabled-bg-dark: #193731FF; + --pgn-color-btn-disabled-bg-danger: #9A0C02FF; + --pgn-color-btn-disabled-bg-outline-brand: #F49974FF; + --pgn-color-btn-disabled-bg-brand: #F49974FF; + --pgn-color-btn-disabled-text-outline-warning: #393939FF; --pgn-color-btn-disabled-text-outline-success: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-primary: #454545FF; - --pgn-color-btn-disabled-text-outline-light: #353535FF; + --pgn-color-btn-disabled-text-outline-light: #414141FF; --pgn-color-btn-disabled-text-outline-info: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-dark: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-danger: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-brand: #FFFFFFFF; --pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF; - --pgn-color-btn-focus-bg-warning: #AE9400FF; + --pgn-color-btn-focus-bg-warning: #C1A400FF; --pgn-color-btn-focus-bg-outline-success: #FFFFFFFF; - --pgn-color-btn-focus-bg-success: #0B663EFF; + --pgn-color-btn-focus-bg-success: #0C7145FF; --pgn-color-btn-focus-bg-outline-secondary: #FFFFFFFF; --pgn-color-btn-focus-bg-outline-primary: #FFFFFFFF; --pgn-color-btn-focus-bg-primary: #00262BFF; --pgn-color-btn-focus-bg-outline-light: #FFFFFFFF; - --pgn-color-btn-focus-bg-light: #A29F97FF; + --pgn-color-btn-focus-bg-light: #B4B1A8FF; --pgn-color-btn-focus-bg-outline-info: #FFFFFFFF; - --pgn-color-btn-focus-bg-info: #005572FF; + --pgn-color-btn-focus-bg-info: #005E7FFF; --pgn-color-btn-focus-bg-outline-dark: #FFFFFFFF; - --pgn-color-btn-focus-bg-dark: #17322CFF; + --pgn-color-btn-focus-bg-dark: #193731FF; --pgn-color-btn-focus-bg-outline-danger: #FFFFFFFF; - --pgn-color-btn-focus-bg-danger: #8B0B02FF; + --pgn-color-btn-focus-bg-danger: #9A0C02FF; --pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-focus-bg-brand: #D74000FF; --pgn-color-btn-focus-text-tertiary: #454545FF; - --pgn-color-btn-active-border-outline-warning: #AE9400FF; - --pgn-color-btn-active-border-warning: #554900FF; - --pgn-color-btn-active-border-outline-success: #0B663EFF; - --pgn-color-btn-active-border-success: #0B360BFF; - --pgn-color-btn-active-border-outline-light: #A29F97FF; - --pgn-color-btn-active-border-light: #201F1DFF; - --pgn-color-btn-active-border-outline-info: #005572FF; - --pgn-color-btn-active-border-info: #002134FF; - --pgn-color-btn-active-border-outline-dark: #17322CFF; - --pgn-color-btn-active-border-dark: #040A08FF; - --pgn-color-btn-active-border-outline-danger: #8B0B02FF; - --pgn-color-btn-active-border-danger: #4A0A05FF; - --pgn-color-btn-active-bg-outline-warning: #AE9400FF; - --pgn-color-btn-active-bg-warning: #554900FF; - --pgn-color-btn-active-bg-outline-success: #0B663EFF; - --pgn-color-btn-active-bg-success: #0B360BFF; + --pgn-color-btn-active-border-outline-warning: #C1A400FF; + --pgn-color-btn-active-border-warning: #7A6800FF; + --pgn-color-btn-active-border-outline-success: #0C7145FF; + --pgn-color-btn-active-border-success: #0F4D0FFF; + --pgn-color-btn-active-border-outline-light: #B4B1A8FF; + --pgn-color-btn-active-border-light: #2D2C2AFF; + --pgn-color-btn-active-border-outline-info: #005E7FFF; + --pgn-color-btn-active-border-info: #002F4AFF; + --pgn-color-btn-active-border-outline-dark: #193731FF; + --pgn-color-btn-active-border-dark: #060E0CFF; + --pgn-color-btn-active-border-outline-danger: #9A0C02FF; + --pgn-color-btn-active-border-danger: #690E07FF; + --pgn-color-btn-active-bg-outline-warning: #C1A400FF; + --pgn-color-btn-active-bg-warning: #7A6800FF; + --pgn-color-btn-active-bg-outline-success: #0C7145FF; + --pgn-color-btn-active-bg-success: #0F4D0FFF; --pgn-color-btn-active-bg-outline-primary: #00262BFF; - --pgn-color-btn-active-bg-primary: #001315FF; - --pgn-color-btn-active-bg-outline-light: #A29F97FF; - --pgn-color-btn-active-bg-light: #201F1DFF; - --pgn-color-btn-active-bg-outline-info: #005572FF; - --pgn-color-btn-active-bg-info: #002134FF; - --pgn-color-btn-active-bg-outline-dark: #17322CFF; - --pgn-color-btn-active-bg-dark: #040A08FF; - --pgn-color-btn-active-bg-outline-danger: #8B0B02FF; - --pgn-color-btn-active-bg-danger: #4A0A05FF; - --pgn-color-btn-hover-border-outline-warning: #AE9400FF; - --pgn-color-btn-hover-border-outline-success: #0B663EFF; + --pgn-color-btn-active-bg-primary: #001B1EFF; + --pgn-color-btn-active-bg-outline-light: #B4B1A8FF; + --pgn-color-btn-active-bg-light: #2D2C2AFF; + --pgn-color-btn-active-bg-outline-info: #005E7FFF; + --pgn-color-btn-active-bg-info: #002F4AFF; + --pgn-color-btn-active-bg-outline-dark: #193731FF; + --pgn-color-btn-active-bg-dark: #060E0CFF; + --pgn-color-btn-active-bg-outline-danger: #9A0C02FF; + --pgn-color-btn-active-bg-danger: #690E07FF; + --pgn-color-btn-hover-border-outline-warning: #C1A400FF; + --pgn-color-btn-hover-border-outline-success: #0C7145FF; --pgn-color-btn-hover-border-outline-primary: #00262BFF; - --pgn-color-btn-hover-border-outline-light: #A29F97FF; - --pgn-color-btn-hover-border-outline-info: #005572FF; - --pgn-color-btn-hover-border-outline-dark: #17322CFF; - --pgn-color-btn-hover-border-outline-danger: #8B0B02FF; + --pgn-color-btn-hover-border-outline-light: #B4B1A8FF; + --pgn-color-btn-hover-border-outline-info: #005E7FFF; + --pgn-color-btn-hover-border-outline-dark: #193731FF; + --pgn-color-btn-hover-border-outline-danger: #9A0C02FF; --pgn-color-btn-hover-border-outline-brand: #D74000FF; - --pgn-color-btn-hover-bg-warning: #7A6800FF; - --pgn-color-btn-hover-bg-success: #124930FF; - --pgn-color-btn-hover-bg-light: #6C6A65FF; - --pgn-color-btn-hover-bg-info: #003A5BFF; - --pgn-color-btn-hover-bg-dark: #0F211EFF; - --pgn-color-btn-hover-bg-danger: #77160FFF; - --pgn-color-btn-hover-bg-brand: #FEF9F7FF; - --pgn-color-btn-border-outline-warning: #AE9400FF; - --pgn-color-btn-border-warning: #AE9400FF; - --pgn-color-btn-border-outline-success: #0B663EFF; - --pgn-color-btn-border-success: #0B663EFF; + --pgn-color-btn-hover-bg-warning: #998200FF; + --pgn-color-btn-hover-bg-success: #175B3CFF; + --pgn-color-btn-hover-bg-light: #87857EFF; + --pgn-color-btn-hover-bg-info: #004972FF; + --pgn-color-btn-hover-bg-dark: #132925FF; + --pgn-color-btn-hover-bg-danger: #951C13FF; + --pgn-color-btn-hover-bg-brand: #F49974FF; + --pgn-color-btn-border-outline-warning: #C1A400FF; + --pgn-color-btn-border-warning: #C1A400FF; + --pgn-color-btn-border-outline-success: #0C7145FF; + --pgn-color-btn-border-success: #0C7145FF; --pgn-color-btn-border-outline-primary: #00262BFF; --pgn-color-btn-border-primary: #00262BFF; - --pgn-color-btn-border-outline-light: #A29F97FF; - --pgn-color-btn-border-light: #A29F97FF; - --pgn-color-btn-border-outline-info: #005572FF; - --pgn-color-btn-border-info: #005572FF; - --pgn-color-btn-border-outline-dark: #17322CFF; - --pgn-color-btn-border-dark: #17322CFF; - --pgn-color-btn-border-outline-danger: #8B0B02FF; - --pgn-color-btn-border-danger: #8B0B02FF; + --pgn-color-btn-border-outline-light: #B4B1A8FF; + --pgn-color-btn-border-light: #B4B1A8FF; + --pgn-color-btn-border-outline-info: #005E7FFF; + --pgn-color-btn-border-info: #005E7FFF; + --pgn-color-btn-border-outline-dark: #193731FF; + --pgn-color-btn-border-dark: #193731FF; + --pgn-color-btn-border-outline-danger: #9A0C02FF; + --pgn-color-btn-border-danger: #9A0C02FF; --pgn-color-btn-border-outline-brand: #D74000FF; --pgn-color-btn-border-brand: #D74000FF; - --pgn-color-btn-text-outline-warning: #AE9400FF; - --pgn-color-btn-text-warning: #2D2D2DFF; - --pgn-color-btn-text-outline-success: #0B663EFF; + --pgn-color-btn-text-outline-warning: #C1A400FF; + --pgn-color-btn-text-warning: #393939FF; + --pgn-color-btn-text-outline-success: #0C7145FF; --pgn-color-btn-text-success: #FFFFFFFF; --pgn-color-btn-text-outline-primary: #00262BFF; --pgn-color-btn-text-primary: #FFFFFFFF; - --pgn-color-btn-text-outline-light: #A29F97FF; - --pgn-color-btn-text-light: #353535FF; - --pgn-color-btn-text-outline-info: #005572FF; + --pgn-color-btn-text-outline-light: #B4B1A8FF; + --pgn-color-btn-text-light: #414141FF; + --pgn-color-btn-text-outline-info: #005E7FFF; --pgn-color-btn-text-info: #FFFFFFFF; - --pgn-color-btn-text-outline-dark: #17322CFF; + --pgn-color-btn-text-outline-dark: #193731FF; --pgn-color-btn-text-dark: #FFFFFFFF; - --pgn-color-btn-text-outline-danger: #8B0B02FF; + --pgn-color-btn-text-outline-danger: #9A0C02FF; --pgn-color-btn-text-danger: #FFFFFFFF; --pgn-color-btn-text-outline-brand: #D74000FF; --pgn-color-btn-text-brand: #FFFFFFFF; --pgn-color-theme-bg-gray: #EBEBEBFF; - --pgn-color-theme-bg-dark: #FCFDFDFF; - --pgn-color-theme-bg-light: #FFFFFEFF; - --pgn-color-theme-bg-danger: #FFFEFEFF; - --pgn-color-theme-bg-warning: #FFFFFDFF; - --pgn-color-theme-bg-info: #FEFFFFFF; - --pgn-color-theme-bg-success: #FEFFFFFF; - --pgn-color-theme-bg-brand: #FEF9F7FF; + --pgn-color-theme-bg-dark: #D2DAD8FF; + --pgn-color-theme-bg-light: #F9F8F6FF; + --pgn-color-theme-bg-danger: #FCF1F4FF; + --pgn-color-theme-bg-warning: #FFFADBFF; + --pgn-color-theme-bg-info: #EFF8FAFF; + --pgn-color-theme-bg-success: #F2FAF7FF; + --pgn-color-theme-bg-brand: #F49974FF; --pgn-color-theme-bg-primary: #FEFEFEFF; --pgn-color-input-btn-focus: #F0F2F2FF; --pgn-typography-btn-line-height-lg: 1.5; --pgn-spacing-btn-focus-distance-to-border: calc(calc(2px + 2px) + 1px); --pgn-size-btn-border-width: 1px; - --pgn-color-btn-disabled-border-outline-warning: #AE9400FF; - --pgn-color-btn-disabled-border-warning: #AE9400FF; - --pgn-color-btn-disabled-border-outline-success: #0B663EFF; - --pgn-color-btn-disabled-border-success: #0B663EFF; + --pgn-color-btn-disabled-border-outline-warning: #C1A400FF; + --pgn-color-btn-disabled-border-warning: #C1A400FF; + --pgn-color-btn-disabled-border-outline-success: #0C7145FF; + --pgn-color-btn-disabled-border-success: #0C7145FF; --pgn-color-btn-disabled-border-outline-primary: #00262BFF; --pgn-color-btn-disabled-border-primary: #00262BFF; - --pgn-color-btn-disabled-border-outline-light: #A29F97FF; - --pgn-color-btn-disabled-border-light: #A29F97FF; - --pgn-color-btn-disabled-border-outline-info: #005572FF; - --pgn-color-btn-disabled-border-info: #005572FF; - --pgn-color-btn-disabled-border-outline-dark: #17322CFF; - --pgn-color-btn-disabled-border-dark: #17322CFF; - --pgn-color-btn-disabled-border-outline-danger: #8B0B02FF; - --pgn-color-btn-disabled-border-danger: #8B0B02FF; + --pgn-color-btn-disabled-border-outline-light: #B4B1A8FF; + --pgn-color-btn-disabled-border-light: #B4B1A8FF; + --pgn-color-btn-disabled-border-outline-info: #005E7FFF; + --pgn-color-btn-disabled-border-info: #005E7FFF; + --pgn-color-btn-disabled-border-outline-dark: #193731FF; + --pgn-color-btn-disabled-border-dark: #193731FF; + --pgn-color-btn-disabled-border-outline-danger: #9A0C02FF; + --pgn-color-btn-disabled-border-danger: #9A0C02FF; --pgn-color-btn-disabled-border-outline-brand: #D74000FF; --pgn-color-btn-disabled-border-brand: #D74000FF; - --pgn-color-btn-disabled-text-warning: #2D2D2DFF; + --pgn-color-btn-disabled-text-warning: #393939FF; --pgn-color-btn-disabled-text-success: #FFFFFFFF; --pgn-color-btn-disabled-text-primary: #FFFFFFFF; - --pgn-color-btn-disabled-text-light: #353535FF; + --pgn-color-btn-disabled-text-light: #414141FF; --pgn-color-btn-disabled-text-info: #FFFFFFFF; --pgn-color-btn-disabled-text-dark: #FFFFFFFF; --pgn-color-btn-disabled-text-danger: #FFFFFFFF; --pgn-color-btn-disabled-text-brand: #FFFFFFFF; - --pgn-color-btn-focus-outline-outline-warning: #AE9400FF; - --pgn-color-btn-focus-outline-warning: #AE9400FF; - --pgn-color-btn-focus-outline-outline-success: #0B663EFF; - --pgn-color-btn-focus-outline-success: #0B663EFF; + --pgn-color-btn-focus-outline-outline-warning: #C1A400FF; + --pgn-color-btn-focus-outline-warning: #C1A400FF; + --pgn-color-btn-focus-outline-outline-success: #0C7145FF; + --pgn-color-btn-focus-outline-success: #0C7145FF; --pgn-color-btn-focus-outline-outline-primary: #00262BFF; --pgn-color-btn-focus-outline-primary: #00262BFF; - --pgn-color-btn-focus-outline-outline-light: #A29F97FF; - --pgn-color-btn-focus-outline-light: #A29F97FF; - --pgn-color-btn-focus-outline-outline-info: #005572FF; - --pgn-color-btn-focus-outline-info: #005572FF; - --pgn-color-btn-focus-outline-outline-dark: #17322CFF; - --pgn-color-btn-focus-outline-dark: #17322CFF; - --pgn-color-btn-focus-outline-outline-danger: #8B0B02FF; - --pgn-color-btn-focus-outline-danger: #8B0B02FF; + --pgn-color-btn-focus-outline-outline-light: #B4B1A8FF; + --pgn-color-btn-focus-outline-light: #B4B1A8FF; + --pgn-color-btn-focus-outline-outline-info: #005E7FFF; + --pgn-color-btn-focus-outline-info: #005E7FFF; + --pgn-color-btn-focus-outline-outline-dark: #193731FF; + --pgn-color-btn-focus-outline-dark: #193731FF; + --pgn-color-btn-focus-outline-outline-danger: #9A0C02FF; + --pgn-color-btn-focus-outline-danger: #9A0C02FF; --pgn-color-btn-focus-outline-outline-brand: #D74000FF; --pgn-color-btn-focus-outline-brand: #D74000FF; - --pgn-color-btn-focus-border-outline-warning: #AE9400FF; - --pgn-color-btn-focus-border-warning: #AE9400FF; - --pgn-color-btn-focus-border-outline-success: #0B663EFF; - --pgn-color-btn-focus-border-success: #0B663EFF; + --pgn-color-btn-focus-border-outline-warning: #C1A400FF; + --pgn-color-btn-focus-border-warning: #C1A400FF; + --pgn-color-btn-focus-border-outline-success: #0C7145FF; + --pgn-color-btn-focus-border-success: #0C7145FF; --pgn-color-btn-focus-border-outline-primary: #00262BFF; --pgn-color-btn-focus-border-primary: #00262BFF; - --pgn-color-btn-focus-border-outline-light: #A29F97FF; - --pgn-color-btn-focus-border-light: #A29F97FF; - --pgn-color-btn-focus-border-outline-info: #005572FF; - --pgn-color-btn-focus-border-info: #005572FF; - --pgn-color-btn-focus-border-outline-dark: #17322CFF; - --pgn-color-btn-focus-border-dark: #17322CFF; - --pgn-color-btn-focus-border-outline-danger: #8B0B02FF; - --pgn-color-btn-focus-border-danger: #8B0B02FF; + --pgn-color-btn-focus-border-outline-light: #B4B1A8FF; + --pgn-color-btn-focus-border-light: #B4B1A8FF; + --pgn-color-btn-focus-border-outline-info: #005E7FFF; + --pgn-color-btn-focus-border-info: #005E7FFF; + --pgn-color-btn-focus-border-outline-dark: #193731FF; + --pgn-color-btn-focus-border-dark: #193731FF; + --pgn-color-btn-focus-border-outline-danger: #9A0C02FF; + --pgn-color-btn-focus-border-danger: #9A0C02FF; --pgn-color-btn-focus-border-outline-brand: #D74000FF; --pgn-color-btn-focus-border-brand: #D74000FF; - --pgn-color-btn-focus-text-outline-warning: #AE9400FF; - --pgn-color-btn-focus-text-warning: #2D2D2DFF; - --pgn-color-btn-focus-text-outline-success: #0B663EFF; + --pgn-color-btn-focus-text-outline-warning: #C1A400FF; + --pgn-color-btn-focus-text-warning: #393939FF; + --pgn-color-btn-focus-text-outline-success: #0C7145FF; --pgn-color-btn-focus-text-success: #FFFFFFFF; --pgn-color-btn-focus-text-outline-primary: #00262BFF; --pgn-color-btn-focus-text-primary: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-light: #A29F97FF; - --pgn-color-btn-focus-text-light: #353535FF; - --pgn-color-btn-focus-text-outline-info: #005572FF; + --pgn-color-btn-focus-text-outline-light: #B4B1A8FF; + --pgn-color-btn-focus-text-light: #414141FF; + --pgn-color-btn-focus-text-outline-info: #005E7FFF; --pgn-color-btn-focus-text-info: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-dark: #17322CFF; + --pgn-color-btn-focus-text-outline-dark: #193731FF; --pgn-color-btn-focus-text-dark: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-danger: #8B0B02FF; + --pgn-color-btn-focus-text-outline-danger: #9A0C02FF; --pgn-color-btn-focus-text-danger: #FFFFFFFF; - --pgn-color-btn-active-text-outline-warning: #2D2D2DFF; + --pgn-color-btn-active-text-outline-warning: #393939FF; --pgn-color-btn-active-text-warning: #FFFFFFFF; --pgn-color-btn-active-text-outline-success: #FFFFFFFF; --pgn-color-btn-active-text-success: #FFFFFFFF; - --pgn-color-btn-active-text-outline-light: #353535FF; + --pgn-color-btn-active-text-outline-light: #414141FF; --pgn-color-btn-active-text-light: #FFFFFFFF; --pgn-color-btn-active-text-outline-info: #FFFFFFFF; --pgn-color-btn-active-text-info: #FFFFFFFF; @@ -470,18 +470,18 @@ --pgn-color-btn-active-text-dark: #FFFFFFFF; --pgn-color-btn-active-text-outline-danger: #FFFFFFFF; --pgn-color-btn-active-text-danger: #FFFFFFFF; - --pgn-color-btn-hover-border-warning: #7A6800FF; - --pgn-color-btn-hover-border-success: #124930FF; - --pgn-color-btn-hover-border-light: #6C6A65FF; - --pgn-color-btn-hover-border-info: #003A5BFF; - --pgn-color-btn-hover-border-dark: #0F211EFF; - --pgn-color-btn-hover-border-danger: #77160FFF; + --pgn-color-btn-hover-border-warning: #998200FF; + --pgn-color-btn-hover-border-success: #175B3CFF; + --pgn-color-btn-hover-border-light: #87857EFF; + --pgn-color-btn-hover-border-info: #004972FF; + --pgn-color-btn-hover-border-dark: #132925FF; + --pgn-color-btn-hover-border-danger: #951C13FF; --pgn-color-btn-hover-bg-outline-secondary: #3E3E3EFF; --pgn-color-btn-hover-bg-secondary: #747474FF; --pgn-color-btn-hover-text-warning: #FFFFFFFF; --pgn-color-btn-hover-text-success: #FFFFFFFF; --pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF; - --pgn-color-btn-hover-text-light: #FFFFFFFF; + --pgn-color-btn-hover-text-light: #1E1E1EFF; --pgn-color-btn-hover-text-info: #FFFFFFFF; --pgn-color-btn-hover-text-dark: #FFFFFFFF; --pgn-color-btn-hover-text-danger: #FFFFFFFF; diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index c91507e..bfd3537 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -211,19 +211,22 @@ "value": "#BFC9CA", "type": "color", "source": "$primary-200", - "description": "Primary color of level 200." + "description": "Primary color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#2D494E", "type": "color", "source": "$primary-300", - "description": "Primary color of level 300." + "description": "Primary color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#0E3639", "type": "color", "source": "$primary-400", - "description": "Primary color of level 400." + "description": "Primary color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#00262B", @@ -235,25 +238,29 @@ "value": "#002326", "type": "color", "source": "$primary-600", - "description": "Primary color of level 600." + "description": "Primary color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#002121", "type": "color", "source": "$primary-700", - "description": "Primary color of level 700." + "description": "Primary color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#001D20", "type": "color", "source": "$primary-800", - "description": "Primary color of level 800." + "description": "Primary color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#001B1E", "type": "color", "source": "$primary-900", - "description": "Primary color of level 900." + "description": "Primary color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "brand": { @@ -267,25 +274,29 @@ "value": "{color.brand.base}", "type": "color", "source": "$brand-100", - "description": "Brand color of level 100." + "description": "Brand color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#EE855A", "type": "color", "source": "$brand-200", - "description": "Brand color of level 200." + "description": "Brand color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#E76F3F", "type": "color", "source": "$brand-300", - "description": "Brand color of level 300." + "description": "Brand color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#DF5924", "type": "color", "source": "$brand-400", - "description": "Brand color of level 400." + "description": "Brand color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#D74000", @@ -297,25 +308,29 @@ "value": "#BC3A05", "type": "color", "source": "$brand-600", - "description": "Brand color of level 600." + "description": "Brand color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#A33508", "type": "color", "source": "$brand-700", - "description": "Brand color of level 700." + "description": "Brand color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#8B2F0B", "type": "color", "source": "$brand-800", - "description": "Brand color of level 800." + "description": "Brand color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#73290C", "type": "color", "source": "$brand-900", - "description": "Brand color of level 900." + "description": "Brand color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "success": { @@ -329,25 +344,29 @@ "value": "{color.success.base}", "type": "color", "source": "$success-100", - "description": "Success color of level 100." + "description": "Success color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#BBE6D7", "type": "color", "source": "$success-200", - "description": "Success color of level 200." + "description": "Success color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#30A171", "type": "color", "source": "$success-300", - "description": "Success color of level 300." + "description": "Success color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#4A9E7A", "type": "color", "source": "$success-400", - "description": "Success color of level 400." + "description": "Success color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#0D7D4D", @@ -359,25 +378,29 @@ "value": "#0C7145", "type": "color", "source": "$success-600", - "description": "Success color of level 600." + "description": "Success color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#175B3C", "type": "color", "source": "$success-700", - "description": "Success color of level 700." + "description": "Success color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#0A5E3A", "type": "color", "source": "$success-800", - "description": "Success color of level 800." + "description": "Success color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#0F4D0F", "type": "color", "source": "$success-900", - "description": "Success color of level 900." + "description": "Success color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "info": { @@ -391,25 +414,29 @@ "value": "{color.info.base}", "type": "color", "source": "$info-100", - "description": "Info color of level 100." + "description": "Info color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#9CD2E6", "type": "color", "source": "$info-200", - "description": "Info color of level 200." + "description": "Info color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#1C8DBE", "type": "color", "source": "$info-300", - "description": "Info color of level 300." + "description": "Info color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#408EAA", "type": "color", "source": "$info-400", - "description": "Info color of level 400." + "description": "Info color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#00688D", @@ -421,25 +448,29 @@ "value": "#005E7F", "type": "color", "source": "$info-600", - "description": "Info color of level 600." + "description": "Info color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#004972", "type": "color", "source": "$info-700", - "description": "Info color of level 700." + "description": "Info color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#004E6A", "type": "color", "source": "$info-800", - "description": "Info color of level 800." + "description": "Info color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#002F4A", "type": "color", "source": "$info-900", - "description": "Info color of level 900." + "description": "Info color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "warning": { @@ -453,25 +484,29 @@ "value": "{color.warning.base}", "type": "color", "source": "$warning-100", - "description": "Warning color of level 100." + "description": "Warning color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#FFEA75", "type": "color", "source": "$warning-200", - "description": "Warning color of level 200." + "description": "Warning color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#F0CC00", "type": "color", "source": "$warning-300", - "description": "Warning color of level 300." + "description": "Warning color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#E0C840", "type": "color", "source": "$warning-400", - "description": "Warning color of level 400." + "description": "Warning color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#D6B600", @@ -483,25 +518,29 @@ "value": "#C1A400", "type": "color", "source": "$warning-600", - "description": "Warning color of level 600." + "description": "Warning color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#998200", "type": "color", "source": "$warning-700", - "description": "Warning color of level 700." + "description": "Warning color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#A18900", "type": "color", "source": "$warning-800", - "description": "Warning color of level 800." + "description": "Warning color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#7A6800", "type": "color", "source": "$warning-900", - "description": "Warning color of level 900." + "description": "Warning color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "danger": { @@ -515,25 +554,29 @@ "value": "{color.danger.base}", "type": "color", "source": "$danger-100", - "description": "Danger color of level 100." + "description": "Danger color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#F3AEA9", "type": "color", "source": "$danger-200", - "description": "Danger color of level 200." + "description": "Danger color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#CA3A2F", "type": "color", "source": "$danger-300", - "description": "Danger color of level 300." + "description": "Danger color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#C04A41", "type": "color", "source": "$danger-400", - "description": "Danger color of level 400." + "description": "Danger color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#AB0D02", @@ -545,25 +588,29 @@ "value": "#9A0C02", "type": "color", "source": "$danger-600", - "description": "Danger color of level 600." + "description": "Danger color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#951C13", "type": "color", "source": "$danger-700", - "description": "Danger color of level 700." + "description": "Danger color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#800A02", "type": "color", "source": "$danger-800", - "description": "Danger color of level 800." + "description": "Danger color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#690E07", "type": "color", "source": "$danger-900", - "description": "Danger color of level 900." + "description": "Danger color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "light": { @@ -577,25 +624,29 @@ "value": "{color.light.base}", "type": "color", "source": "$light-100", - "description": "Light color of level 100." + "description": "Light color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#F3F1ED", "type": "color", "source": "$light-200", - "description": "Light color of level 200." + "description": "Light color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#EDEBE4", "type": "color", "source": "$light-300", - "description": "Light color of level 300." + "description": "Light color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#E7E4DB", "type": "color", "source": "$light-400", - "description": "Light color of level 400." + "description": "Light color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#E1DDD2", @@ -607,25 +658,29 @@ "value": "#B4B1A8", "type": "color", "source": "$light-600", - "description": "Light color of level 600." + "description": "Light color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#87857E", "type": "color", "source": "$light-700", - "description": "Light color of level 700." + "description": "Light color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#5A5854", "type": "color", "source": "$light-800", - "description": "Light color of level 800." + "description": "Light color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#2D2C2A", "type": "color", "source": "$light-900", - "description": "Light color of level 900." + "description": "Light color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } }, "dark": { @@ -639,25 +694,29 @@ "value": "{color.dark.base}", "type": "color", "source": "$dark-100", - "description": "Dark color of level 100." + "description": "Dark color of level 100.", + "modify": [{ "type": "mix", "amount": "0" }] }, "200": { "value": "#BFC9CA", "type": "color", "source": "$dark-200", - "description": "Dark color of level 200." + "description": "Dark color of level 200.", + "modify": [{ "type": "mix", "amount": "0" }] }, "300": { "value": "#798F8B", "type": "color", "source": "$dark-300", - "description": "Dark color of level 300." + "description": "Dark color of level 300.", + "modify": [{ "type": "mix", "amount": "0" }] }, "400": { "value": "#4C6A64", "type": "color", "source": "$dark-400", - "description": "Dark color of level 400." + "description": "Dark color of level 400.", + "modify": [{ "type": "mix", "amount": "0" }] }, "500": { "value": "#1F453D", @@ -669,25 +728,29 @@ "value": "#193731", "type": "color", "source": "$dark-600", - "description": "Dark color of level 600." + "description": "Dark color of level 600.", + "modify": [{ "type": "mix", "amount": "0" }] }, "700": { "value": "#132925", "type": "color", "source": "$dark-700", - "description": "Info color of level 700." + "description": "Info color of level 700.", + "modify": [{ "type": "mix", "amount": "0" }] }, "800": { "value": "#0C1C18", "type": "color", "source": "$dark-800", - "description": "Dark color of level 800." + "description": "Dark color of level 800.", + "modify": [{ "type": "mix", "amount": "0" }] }, "900": { "value": "#060E0C", "type": "color", "source": "$dark-900", - "description": "Dark color of level 900." + "description": "Dark color of level 900.", + "modify": [{ "type": "mix", "amount": "0" }] } } } From 304f3613c4dac22003e8111789fd603368ab0021 Mon Sep 17 00:00:00 2001 From: srwang Date: Fri, 24 May 2024 16:56:41 -0400 Subject: [PATCH 3/5] fix: update button primary colors --- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 32 ++--- .../light/components/Button/primary.json | 63 ++++----- tokens/src/themes/light/global/color.json | 126 +++++++++--------- 5 files changed, 109 insertions(+), 116 deletions(-) diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index c9cee16..c68e008 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 18:48:53 GMT + * Generated on Fri, 24 May 2024 20:55:29 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 50f2b0f..6c40225 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 18:48:53 GMT + * Generated on Fri, 24 May 2024 20:55:29 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index 9aaf3f9..e84cdfb 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 18:48:53 GMT + * Generated on Fri, 24 May 2024 20:55:29 GMT */ :root { @@ -96,7 +96,6 @@ --pgn-color-btn-disabled-bg-outline-warning: #000000FF; --pgn-color-btn-disabled-bg-outline-success: #000000FF; --pgn-color-btn-disabled-bg-outline-secondary: #000000FF; - --pgn-color-btn-disabled-bg-outline-primary: #000000FF; --pgn-color-btn-disabled-bg-outline-light: #000000FF; --pgn-color-btn-disabled-bg-outline-info: #000000FF; --pgn-color-btn-disabled-bg-outline-dark: #000000FF; @@ -142,17 +141,22 @@ --pgn-color-body-bg: #FFFFFFFF; --pgn-color-form-input-focus-bg: #FFFFFFFF; --pgn-color-form-input-bg-base: #FFFFFFFF; + --pgn-color-btn-disabled-text-outline-primary: #00262BFF; + --pgn-color-btn-focus-text-outline-primary: #00262BFF; + --pgn-color-btn-focus-text-primary: #FFFFFFFF; --pgn-color-btn-focus-text-outline-brand: #D74000FF; --pgn-color-btn-focus-text-brand: #FFFFFFFF; - --pgn-color-btn-active-border-outline-primary: #FFFFFFFF; + --pgn-color-btn-active-border-outline-primary: #00262BFF; --pgn-color-btn-active-border-primary: #00262BFF; --pgn-color-btn-active-border-outline-brand: #D74000FF; --pgn-color-btn-active-border-brand: #D74000FF; --pgn-color-btn-active-bg-inverse-tertiary: #2D494EFF; + --pgn-color-btn-active-bg-outline-primary: #FFFFFFFF; + --pgn-color-btn-active-bg-primary: #00262BFF; --pgn-color-btn-active-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-active-bg-brand: #D74000FF; - --pgn-color-btn-active-text-outline-primary: #454545FF; - --pgn-color-btn-active-text-primary: #454545FF; + --pgn-color-btn-active-text-outline-primary: #00262BFF; + --pgn-color-btn-active-text-primary: #FFFFFFFF; --pgn-color-btn-active-text-outline-brand: #FFFFFFFF; --pgn-color-btn-active-text-brand: #454545FF; --pgn-color-btn-hover-border-primary: #00262BFF; @@ -169,8 +173,8 @@ --pgn-color-btn-hover-bg-outline-brand: #D74000FF; --pgn-color-btn-hover-text-outline-warning: #393939FF; --pgn-color-btn-hover-text-outline-success: #FFFFFFFF; - --pgn-color-btn-hover-text-outline-primary: #454545FF; - --pgn-color-btn-hover-text-primary: #454545FF; + --pgn-color-btn-hover-text-outline-primary: #FFFFFFFF; + --pgn-color-btn-hover-text-primary: #FFFFFFFF; --pgn-color-btn-hover-text-outline-light: #414141FF; --pgn-color-btn-hover-text-outline-info: #FFFFFFFF; --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF; @@ -194,6 +198,8 @@ --pgn-color-btn-bg-danger: #9A0C02FF; --pgn-color-btn-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-bg-brand: #D74000FF; + --pgn-color-btn-text-outline-primary: #00262BFF; + --pgn-color-btn-text-primary: #FFFFFFFF; --pgn-color-badge-bg-info: #00BBF9FF; --pgn-color-theme-active-gray: #212529FF; --pgn-color-theme-active-dark: #060E0CFF; @@ -269,6 +275,7 @@ --pgn-color-form-input-base: #454545FF; --pgn-color-btn-disabled-bg-warning: #C1A400FF; --pgn-color-btn-disabled-bg-success: #0C7145FF; + --pgn-color-btn-disabled-bg-outline-primary: #FFFFFFFF; --pgn-color-btn-disabled-bg-primary: #00262BFF; --pgn-color-btn-disabled-bg-light: #B4B1A8FF; --pgn-color-btn-disabled-bg-info: #005E7FFF; @@ -278,7 +285,7 @@ --pgn-color-btn-disabled-bg-brand: #F49974FF; --pgn-color-btn-disabled-text-outline-warning: #393939FF; --pgn-color-btn-disabled-text-outline-success: #FFFFFFFF; - --pgn-color-btn-disabled-text-outline-primary: #454545FF; + --pgn-color-btn-disabled-text-primary: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-light: #414141FF; --pgn-color-btn-disabled-text-outline-info: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-dark: #FFFFFFFF; @@ -318,8 +325,6 @@ --pgn-color-btn-active-bg-warning: #7A6800FF; --pgn-color-btn-active-bg-outline-success: #0C7145FF; --pgn-color-btn-active-bg-success: #0F4D0FFF; - --pgn-color-btn-active-bg-outline-primary: #00262BFF; - --pgn-color-btn-active-bg-primary: #001B1EFF; --pgn-color-btn-active-bg-outline-light: #B4B1A8FF; --pgn-color-btn-active-bg-light: #2D2C2AFF; --pgn-color-btn-active-bg-outline-info: #005E7FFF; @@ -363,8 +368,6 @@ --pgn-color-btn-text-warning: #393939FF; --pgn-color-btn-text-outline-success: #0C7145FF; --pgn-color-btn-text-success: #FFFFFFFF; - --pgn-color-btn-text-outline-primary: #00262BFF; - --pgn-color-btn-text-primary: #FFFFFFFF; --pgn-color-btn-text-outline-light: #B4B1A8FF; --pgn-color-btn-text-light: #414141FF; --pgn-color-btn-text-outline-info: #005E7FFF; @@ -406,7 +409,6 @@ --pgn-color-btn-disabled-border-brand: #D74000FF; --pgn-color-btn-disabled-text-warning: #393939FF; --pgn-color-btn-disabled-text-success: #FFFFFFFF; - --pgn-color-btn-disabled-text-primary: #FFFFFFFF; --pgn-color-btn-disabled-text-light: #414141FF; --pgn-color-btn-disabled-text-info: #FFFFFFFF; --pgn-color-btn-disabled-text-dark: #FFFFFFFF; @@ -448,8 +450,6 @@ --pgn-color-btn-focus-text-warning: #393939FF; --pgn-color-btn-focus-text-outline-success: #0C7145FF; --pgn-color-btn-focus-text-success: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-primary: #00262BFF; - --pgn-color-btn-focus-text-primary: #FFFFFFFF; --pgn-color-btn-focus-text-outline-light: #B4B1A8FF; --pgn-color-btn-focus-text-light: #414141FF; --pgn-color-btn-focus-text-outline-info: #005E7FFF; @@ -458,6 +458,8 @@ --pgn-color-btn-focus-text-dark: #FFFFFFFF; --pgn-color-btn-focus-text-outline-danger: #9A0C02FF; --pgn-color-btn-focus-text-danger: #FFFFFFFF; + --pgn-color-btn-active-outline-outline-primary: #00262BFF; + --pgn-color-btn-active-outline-primary: #00262BFF; --pgn-color-btn-active-text-outline-warning: #393939FF; --pgn-color-btn-active-text-warning: #FFFFFFFF; --pgn-color-btn-active-text-outline-success: #FFFFFFFF; diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index 6cfa8d2..0201c7b 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -3,17 +3,13 @@ "btn": { "text": { "primary": { - "value": "{color.btn.bg.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null }, "outline-primary": { - "value": "{color.btn.bg.primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-color" } @@ -48,21 +44,12 @@ "value": "{color.white}", "type": "color", "source": "$btn-primary-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null }, "outline-primary": { "value": "{color.white}", "type": "color", - "source": "$btn-primary-outline-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "source": "$btn-primary-outline-hover-color" } }, "bg": { @@ -96,31 +83,23 @@ "value": "{color.white}", "type": "color", "source": "$btn-primary-active-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null }, "outline-primary": { - "value": "{color.white}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null } }, "bg": { "primary": { - "value": "{color.theme.active.primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-active-bg" }, "outline-primary": { - "value": "{color.btn.bg.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-outline-active-bg" } @@ -132,21 +111,33 @@ "source": "$btn-primary-active-border-color" }, "outline-primary": { - "value": "{color.white}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-active-border-color" } + }, + "outline": { + "primary": { + "value": "{color.btn.border.primary}", + "type": "color", + "source": "$btn-primary-focus-focus-outline-color" + }, + "outline-primary": { + "value": "{color.btn.border.outline-primary}", + "type": "color", + "source": "$btn-primary-outline-focus-outline-color" + } } }, "focus": { "text": { "primary": { - "value": "{color.btn.text.primary}", + "value": "{color.white}", "type": "color", "source": "$btn-primary-focus-color" }, "outline-primary": { - "value": "{color.btn.text.outline-primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-focus-color" } @@ -196,7 +187,7 @@ "source": "$btn-primary-disabled-color" }, "outline-primary": { - "value": "{color.btn.hover.text.outline-primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-disabled-color" } @@ -208,7 +199,7 @@ "source": "$btn-primary-disabled-bg" }, "outline-primary": { - "value": "{color.btn.bg.outline-primary", + "value": "{color.btn.bg.outline-primary}", "type": "color", "source": "$btn-primary-outline-disabled-bg" } diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index bfd3537..4a1a70c 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -212,21 +212,21 @@ "type": "color", "source": "$primary-200", "description": "Primary color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#2D494E", "type": "color", "source": "$primary-300", "description": "Primary color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#0E3639", "type": "color", "source": "$primary-400", "description": "Primary color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#00262B", @@ -239,28 +239,28 @@ "type": "color", "source": "$primary-600", "description": "Primary color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#002121", "type": "color", "source": "$primary-700", "description": "Primary color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#001D20", "type": "color", "source": "$primary-800", "description": "Primary color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#001B1E", "type": "color", "source": "$primary-900", "description": "Primary color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "brand": { @@ -275,28 +275,28 @@ "type": "color", "source": "$brand-100", "description": "Brand color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#EE855A", "type": "color", "source": "$brand-200", "description": "Brand color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#E76F3F", "type": "color", "source": "$brand-300", "description": "Brand color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#DF5924", "type": "color", "source": "$brand-400", "description": "Brand color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#D74000", @@ -309,28 +309,28 @@ "type": "color", "source": "$brand-600", "description": "Brand color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#A33508", "type": "color", "source": "$brand-700", "description": "Brand color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#8B2F0B", "type": "color", "source": "$brand-800", "description": "Brand color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#73290C", "type": "color", "source": "$brand-900", "description": "Brand color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "success": { @@ -345,28 +345,28 @@ "type": "color", "source": "$success-100", "description": "Success color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#BBE6D7", "type": "color", "source": "$success-200", "description": "Success color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#30A171", "type": "color", "source": "$success-300", "description": "Success color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#4A9E7A", "type": "color", "source": "$success-400", "description": "Success color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#0D7D4D", @@ -379,28 +379,28 @@ "type": "color", "source": "$success-600", "description": "Success color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#175B3C", "type": "color", "source": "$success-700", "description": "Success color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#0A5E3A", "type": "color", "source": "$success-800", "description": "Success color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#0F4D0F", "type": "color", "source": "$success-900", "description": "Success color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "info": { @@ -415,28 +415,28 @@ "type": "color", "source": "$info-100", "description": "Info color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#9CD2E6", "type": "color", "source": "$info-200", "description": "Info color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#1C8DBE", "type": "color", "source": "$info-300", "description": "Info color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#408EAA", "type": "color", "source": "$info-400", "description": "Info color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#00688D", @@ -449,28 +449,28 @@ "type": "color", "source": "$info-600", "description": "Info color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#004972", "type": "color", "source": "$info-700", "description": "Info color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#004E6A", "type": "color", "source": "$info-800", "description": "Info color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#002F4A", "type": "color", "source": "$info-900", "description": "Info color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "warning": { @@ -485,28 +485,28 @@ "type": "color", "source": "$warning-100", "description": "Warning color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#FFEA75", "type": "color", "source": "$warning-200", "description": "Warning color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#F0CC00", "type": "color", "source": "$warning-300", "description": "Warning color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#E0C840", "type": "color", "source": "$warning-400", "description": "Warning color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#D6B600", @@ -519,28 +519,28 @@ "type": "color", "source": "$warning-600", "description": "Warning color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#998200", "type": "color", "source": "$warning-700", "description": "Warning color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#A18900", "type": "color", "source": "$warning-800", "description": "Warning color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#7A6800", "type": "color", "source": "$warning-900", "description": "Warning color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "danger": { @@ -555,28 +555,28 @@ "type": "color", "source": "$danger-100", "description": "Danger color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#F3AEA9", "type": "color", "source": "$danger-200", "description": "Danger color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#CA3A2F", "type": "color", "source": "$danger-300", "description": "Danger color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#C04A41", "type": "color", "source": "$danger-400", "description": "Danger color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#AB0D02", @@ -589,28 +589,28 @@ "type": "color", "source": "$danger-600", "description": "Danger color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#951C13", "type": "color", "source": "$danger-700", "description": "Danger color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#800A02", "type": "color", "source": "$danger-800", "description": "Danger color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#690E07", "type": "color", "source": "$danger-900", "description": "Danger color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "light": { @@ -625,28 +625,28 @@ "type": "color", "source": "$light-100", "description": "Light color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#F3F1ED", "type": "color", "source": "$light-200", "description": "Light color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#EDEBE4", "type": "color", "source": "$light-300", "description": "Light color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#E7E4DB", "type": "color", "source": "$light-400", "description": "Light color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#E1DDD2", @@ -659,28 +659,28 @@ "type": "color", "source": "$light-600", "description": "Light color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#87857E", "type": "color", "source": "$light-700", "description": "Light color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#5A5854", "type": "color", "source": "$light-800", "description": "Light color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#2D2C2A", "type": "color", "source": "$light-900", "description": "Light color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } }, "dark": { @@ -695,28 +695,28 @@ "type": "color", "source": "$dark-100", "description": "Dark color of level 100.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "200": { "value": "#BFC9CA", "type": "color", "source": "$dark-200", "description": "Dark color of level 200.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "300": { "value": "#798F8B", "type": "color", "source": "$dark-300", "description": "Dark color of level 300.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "400": { "value": "#4C6A64", "type": "color", "source": "$dark-400", "description": "Dark color of level 400.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "500": { "value": "#1F453D", @@ -729,28 +729,28 @@ "type": "color", "source": "$dark-600", "description": "Dark color of level 600.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "700": { "value": "#132925", "type": "color", "source": "$dark-700", "description": "Info color of level 700.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "800": { "value": "#0C1C18", "type": "color", "source": "$dark-800", "description": "Dark color of level 800.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null }, "900": { "value": "#060E0C", "type": "color", "source": "$dark-900", "description": "Dark color of level 900.", - "modify": [{ "type": "mix", "amount": "0" }] + "modify": null } } } From 09f1349f730a2440b39672c250a022856503b0df Mon Sep 17 00:00:00 2001 From: srwang Date: Fri, 24 May 2024 17:20:42 -0400 Subject: [PATCH 4/5] fix: updated button brand styles --- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 12 ++++---- .../themes/light/components/Button/brand.json | 30 +++++++------------ 4 files changed, 18 insertions(+), 28 deletions(-) diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index c68e008..ff9c4f6 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 20:55:29 GMT + * Generated on Fri, 24 May 2024 21:19:32 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 6c40225..5c14f37 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 20:55:29 GMT + * Generated on Fri, 24 May 2024 21:19:32 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index e84cdfb..b7f10a4 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 20:55:29 GMT + * Generated on Fri, 24 May 2024 21:19:33 GMT */ :root { @@ -141,6 +141,7 @@ --pgn-color-body-bg: #FFFFFFFF; --pgn-color-form-input-focus-bg: #FFFFFFFF; --pgn-color-form-input-bg-base: #FFFFFFFF; + --pgn-color-btn-disabled-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-primary: #00262BFF; --pgn-color-btn-focus-text-outline-primary: #00262BFF; --pgn-color-btn-focus-text-primary: #FFFFFFFF; @@ -157,8 +158,8 @@ --pgn-color-btn-active-bg-brand: #D74000FF; --pgn-color-btn-active-text-outline-primary: #00262BFF; --pgn-color-btn-active-text-primary: #FFFFFFFF; - --pgn-color-btn-active-text-outline-brand: #FFFFFFFF; - --pgn-color-btn-active-text-brand: #454545FF; + --pgn-color-btn-active-text-outline-brand: #D74000FF; + --pgn-color-btn-active-text-brand: #FFFFFFFF; --pgn-color-btn-hover-border-primary: #00262BFF; --pgn-color-btn-hover-border-brand: #D74000FF; --pgn-color-btn-hover-bg-outline-warning: #C1A400FF; @@ -180,7 +181,7 @@ --pgn-color-btn-hover-text-outline-dark: #FFFFFFFF; --pgn-color-btn-hover-text-outline-danger: #FFFFFFFF; --pgn-color-btn-hover-text-outline-brand: #FFFFFFFF; - --pgn-color-btn-hover-text-brand: #FFFFFFFF; + --pgn-color-btn-hover-text-brand: #000000FF; --pgn-color-btn-bg-outline-warning: #FFFFFFFF; --pgn-color-btn-bg-warning: #C1A400FF; --pgn-color-btn-bg-outline-success: #FFFFFFFF; @@ -281,7 +282,6 @@ --pgn-color-btn-disabled-bg-info: #005E7FFF; --pgn-color-btn-disabled-bg-dark: #193731FF; --pgn-color-btn-disabled-bg-danger: #9A0C02FF; - --pgn-color-btn-disabled-bg-outline-brand: #F49974FF; --pgn-color-btn-disabled-bg-brand: #F49974FF; --pgn-color-btn-disabled-text-outline-warning: #393939FF; --pgn-color-btn-disabled-text-outline-success: #FFFFFFFF; @@ -290,7 +290,6 @@ --pgn-color-btn-disabled-text-outline-info: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-dark: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-danger: #FFFFFFFF; - --pgn-color-btn-disabled-text-outline-brand: #FFFFFFFF; --pgn-color-btn-focus-bg-outline-warning: #FFFFFFFF; --pgn-color-btn-focus-bg-warning: #C1A400FF; --pgn-color-btn-focus-bg-outline-success: #FFFFFFFF; @@ -413,6 +412,7 @@ --pgn-color-btn-disabled-text-info: #FFFFFFFF; --pgn-color-btn-disabled-text-dark: #FFFFFFFF; --pgn-color-btn-disabled-text-danger: #FFFFFFFF; + --pgn-color-btn-disabled-text-outline-brand: #D74000FF; --pgn-color-btn-disabled-text-brand: #FFFFFFFF; --pgn-color-btn-focus-outline-outline-warning: #C1A400FF; --pgn-color-btn-focus-outline-warning: #C1A400FF; diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index e1d2b4f..593d212 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -47,17 +47,14 @@ "brand": { "value": "{color.black}", "type": "color", - "source": "$btn-brand-hover-color" + "source": "$btn-brand-hover-color", + "modify": null }, "outline-brand": { - "value": "{color.brand.500}", + "value": "{color.white}", "type": "color", "source": "$btn-brand-outline-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null } }, "bg": { @@ -91,21 +88,13 @@ "value": "{color.white}", "type": "color", "source": "$btn-brand-active-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null }, "outline-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-outline-active-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "modify": null } }, "bg": { @@ -138,7 +127,8 @@ "brand": { "value": "{color.white}", "type": "color", - "source": "$btn-brand-focus-color" + "source": "$btn-brand-focus-color", + "modify": null }, "outline-brand": { "value": "{color.brand.500}", @@ -191,7 +181,7 @@ "source": "$btn-brand-disabled-color" }, "outline-brand": { - "value": "{color.btn.hover.text.outline-brand}", + "value": "{color.btn.text.outline-brand}", "type": "color", "source": "$btn-brand-outline-disabled-color" } @@ -203,7 +193,7 @@ "source": "$btn-brand-disabled-bg" }, "outline-brand": { - "value": "{color.brand.100}", + "value": "{color.white}", "type": "color", "source": "$btn-brand-outline-disabled-bg" } From 1023631dfe74cfe82fd8bda00042fce69b0395f2 Mon Sep 17 00:00:00 2001 From: srwang Date: Fri, 24 May 2024 18:54:38 -0400 Subject: [PATCH 5/5] fix: updated button tertiary colors --- paragon/css/core/custom-media-breakpoints.css | 2 +- paragon/css/core/variables.css | 2 +- paragon/css/themes/light/variables.css | 14 +++-- .../light/components/Button/tertiary.json | 60 ++++++++++++++++++- 4 files changed, 69 insertions(+), 9 deletions(-) diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index ff9c4f6..2bf3700 100644 --- a/paragon/css/core/custom-media-breakpoints.css +++ b/paragon/css/core/custom-media-breakpoints.css @@ -1,6 +1,6 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 21:19:32 GMT + * Generated on Fri, 24 May 2024 22:53:44 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 5c14f37..381716e 100644 --- a/paragon/css/core/variables.css +++ b/paragon/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 21:19:32 GMT + * Generated on Fri, 24 May 2024 22:53:44 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index b7f10a4..6abbac5 100644 --- a/paragon/css/themes/light/variables.css +++ b/paragon/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Fri, 24 May 2024 21:19:33 GMT + * Generated on Fri, 24 May 2024 22:53:45 GMT */ :root { @@ -100,6 +100,7 @@ --pgn-color-btn-disabled-bg-outline-info: #000000FF; --pgn-color-btn-disabled-bg-outline-dark: #000000FF; --pgn-color-btn-disabled-bg-outline-danger: #000000FF; + --pgn-color-btn-focus-outline-tertiary: #00000000; --pgn-other-btn-disabled-opacity: .3; --pgn-elevation-box-shadow-level-4: 0px 8px 48px 0px rgba(0,0,0,0.15), 0px 20px 40px 0px rgba(0,0,0,0.15); --pgn-elevation-box-shadow-level-3: 0px 8px 20px 0px rgba(0,0,0,0.15), 0px 10px 20px 0px rgba(0,0,0,0.15); @@ -143,19 +144,24 @@ --pgn-color-form-input-bg-base: #FFFFFFFF; --pgn-color-btn-disabled-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-disabled-text-outline-primary: #00262BFF; + --pgn-color-btn-focus-bg-tertiary: #FFFFFFFF; + --pgn-color-btn-focus-border-tertiary: #00262BFF; + --pgn-color-btn-focus-text-tertiary: #00262BFF; --pgn-color-btn-focus-text-outline-primary: #00262BFF; --pgn-color-btn-focus-text-primary: #FFFFFFFF; --pgn-color-btn-focus-text-outline-brand: #D74000FF; --pgn-color-btn-focus-text-brand: #FFFFFFFF; + --pgn-color-btn-active-border-tertiary: #00262BFF; --pgn-color-btn-active-border-outline-primary: #00262BFF; --pgn-color-btn-active-border-primary: #00262BFF; --pgn-color-btn-active-border-outline-brand: #D74000FF; --pgn-color-btn-active-border-brand: #D74000FF; - --pgn-color-btn-active-bg-inverse-tertiary: #2D494EFF; + --pgn-color-btn-active-bg-tertiary: #FFFFFFFF; --pgn-color-btn-active-bg-outline-primary: #FFFFFFFF; --pgn-color-btn-active-bg-primary: #00262BFF; --pgn-color-btn-active-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-active-bg-brand: #D74000FF; + --pgn-color-btn-active-text-tertiary: #00262BFF; --pgn-color-btn-active-text-outline-primary: #00262BFF; --pgn-color-btn-active-text-primary: #FFFFFFFF; --pgn-color-btn-active-text-outline-brand: #D74000FF; @@ -163,7 +169,7 @@ --pgn-color-btn-hover-border-primary: #00262BFF; --pgn-color-btn-hover-border-brand: #D74000FF; --pgn-color-btn-hover-bg-outline-warning: #C1A400FF; - --pgn-color-btn-hover-bg-inverse-tertiary: #2D494EFF; + --pgn-color-btn-hover-bg-tertiary: #00262BFF; --pgn-color-btn-hover-bg-outline-success: #0C7145FF; --pgn-color-btn-hover-bg-outline-primary: #00262BFF; --pgn-color-btn-hover-bg-primary: #2D494EFF; @@ -173,6 +179,7 @@ --pgn-color-btn-hover-bg-outline-danger: #9A0C02FF; --pgn-color-btn-hover-bg-outline-brand: #D74000FF; --pgn-color-btn-hover-text-outline-warning: #393939FF; + --pgn-color-btn-hover-text-tertiary: #FFFFFFFF; --pgn-color-btn-hover-text-outline-success: #FFFFFFFF; --pgn-color-btn-hover-text-outline-primary: #FFFFFFFF; --pgn-color-btn-hover-text-primary: #FFFFFFFF; @@ -307,7 +314,6 @@ --pgn-color-btn-focus-bg-danger: #9A0C02FF; --pgn-color-btn-focus-bg-outline-brand: #FFFFFFFF; --pgn-color-btn-focus-bg-brand: #D74000FF; - --pgn-color-btn-focus-text-tertiary: #454545FF; --pgn-color-btn-active-border-outline-warning: #C1A400FF; --pgn-color-btn-active-border-warning: #7A6800FF; --pgn-color-btn-active-border-outline-success: #0C7145FF; diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index 84e5b70..efa5894 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -2,18 +2,72 @@ "color": { "btn": { "hover": { + "text": { + "tertiary": { + "value": "{color.white}", + "type": "color", + "source": "$btn-tertiary-hover-color" + } + }, "bg": { - "inverse-tertiary": { "value": "{color.primary.300}", "modify": null } + "tertiary": { + "value": "{color.primary.500}", + "type": "color", + "source": "$btn-inverse-tertiary-hover-bg" + } } }, "active": { + "text": { + "tertiary": { + "value": "{color.primary.500}", + "type": "color", + "source": "$btn-tertiary-active-color" + } + }, "bg": { - "inverse-tertiary": { "value": "{color.primary.300}" } + "tertiary": { + "value": "{color.white}", + "type": "color", + "source": "$btn-tertiary-active-bg" + } + }, + "border": { + "tertiary": { + "value": "{color.primary.500}", + "type": "color", + "source": "$btn-tertiary-active-border-color" + } } }, "focus": { "text": { - "tertiary": { "value": "{color.btn.text.tertiary}" } + "tertiary": { + "value": "{color.primary.500}", + "type": "color", + "source": "$btn-tertiary-focus-color" + } + }, + "bg": { + "tertiary": { + "value": "{color.white}", + "type": "color", + "source": "$btn-tertiary-focus-bg" + } + }, + "border": { + "tertiary": { + "value": "{color.primary.500}", + "type": "color", + "source": "$btn-tertiary-focus-border-color" + } + }, + "outline": { + "tertiary": { + "value": "transparent", + "type": "color", + "source": "$btn-tertiary-focus-outline-color" + } } } }