diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css index 9e1ddca..1619e81 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:07:52 GMT + * Generated on Thu, 23 May 2024 14:49:30 GMT */ diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css index 22b50a2..a07a659 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:07:52 GMT + * Generated on Thu, 23 May 2024 14:49:30 GMT */ :root { diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css index 18d4137..0b6da8f 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:07:52 GMT + * Generated on Thu, 23 May 2024 14:49:30 GMT */ :root { @@ -142,14 +142,22 @@ --pgn-color-body-bg: #FFFFFFFF; --pgn-color-form-input-focus-bg: #FFFFFFFF; --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-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-brand: #FFFFFFFF; --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-primary: #002022FF; + --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; @@ -170,7 +178,7 @@ --pgn-color-btn-bg-success: #0B663EFF; --pgn-color-btn-bg-outline-secondary: #FFFFFFFF; --pgn-color-btn-bg-outline-primary: #FFFFFFFF; - --pgn-color-btn-bg-primary: #002022FF; + --pgn-color-btn-bg-primary: #00262BFF; --pgn-color-btn-bg-outline-light: #FFFFFFFF; --pgn-color-btn-bg-light: #A29F97FF; --pgn-color-btn-bg-outline-info: #FFFFFFFF; @@ -256,7 +264,7 @@ --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-primary: #002022FF; + --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; @@ -277,7 +285,7 @@ --pgn-color-btn-focus-bg-success: #0B663EFF; --pgn-color-btn-focus-bg-outline-secondary: #FFFFFFFF; --pgn-color-btn-focus-bg-outline-primary: #FFFFFFFF; - --pgn-color-btn-focus-bg-primary: #002022FF; + --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-outline-info: #FFFFFFFF; @@ -293,7 +301,7 @@ --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: #002022FF; + --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; @@ -303,13 +311,11 @@ --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-border-outline-brand: #D74000FF; - --pgn-color-btn-active-border-brand: #511D08FF; --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-bg-outline-primary: #002022FF; + --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; @@ -319,11 +325,9 @@ --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-active-bg-outline-brand: #D74000FF; - --pgn-color-btn-active-bg-brand: #511D08FF; --pgn-color-btn-hover-border-outline-warning: #AE9400FF; --pgn-color-btn-hover-border-outline-success: #0B663EFF; - --pgn-color-btn-hover-border-outline-primary: #002022FF; + --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; @@ -331,18 +335,18 @@ --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-primary: #001A1AFF; --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-hover-text-primary: #393939FF; --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-border-outline-primary: #002022FF; - --pgn-color-btn-border-primary: #002022FF; + --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; @@ -357,7 +361,7 @@ --pgn-color-btn-text-warning: #2D2D2DFF; --pgn-color-btn-text-outline-success: #0B663EFF; --pgn-color-btn-text-success: #FFFFFFFF; - --pgn-color-btn-text-outline-primary: #002022FF; + --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; @@ -386,8 +390,8 @@ --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-primary: #002022FF; - --pgn-color-btn-disabled-border-primary: #002022FF; + --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; @@ -410,8 +414,8 @@ --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-primary: #002022FF; - --pgn-color-btn-focus-outline-primary: #002022FF; + --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; @@ -426,8 +430,8 @@ --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-primary: #002022FF; - --pgn-color-btn-focus-border-primary: #002022FF; + --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; @@ -442,7 +446,7 @@ --pgn-color-btn-focus-text-warning: #2D2D2DFF; --pgn-color-btn-focus-text-outline-success: #0B663EFF; --pgn-color-btn-focus-text-success: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-primary: #002022FF; + --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; @@ -452,8 +456,6 @@ --pgn-color-btn-focus-text-dark: #FFFFFFFF; --pgn-color-btn-focus-text-outline-danger: #8B0B02FF; --pgn-color-btn-focus-text-danger: #FFFFFFFF; - --pgn-color-btn-focus-text-outline-brand: #D74000FF; - --pgn-color-btn-focus-text-brand: #FFFFFFFF; --pgn-color-btn-active-text-outline-warning: #2D2D2DFF; --pgn-color-btn-active-text-warning: #FFFFFFFF; --pgn-color-btn-active-text-outline-success: #FFFFFFFF; @@ -470,7 +472,6 @@ --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-primary: #001A1AFF; --pgn-color-btn-hover-border-light: #6C6A65FF; --pgn-color-btn-hover-border-info: #003A5BFF; --pgn-color-btn-hover-border-dark: #0F211EFF; @@ -480,7 +481,6 @@ --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-primary: #FFFFFFFF; --pgn-color-btn-hover-text-light: #FFFFFFFF; --pgn-color-btn-hover-text-info: #FFFFFFFF; --pgn-color-btn-hover-text-dark: #FFFFFFFF; diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index d5c15af..e1d2b4f 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -47,12 +47,7 @@ "brand": { "value": "{color.black}", "type": "color", - "source": "$btn-brand-hover-color", - "modify": [ - { - "type": "color-yiq" - } - ] + "source": "$btn-brand-hover-color" }, "outline-brand": { "value": "{color.brand.500}", @@ -115,24 +110,24 @@ }, "bg": { "brand": { - "value": "{color.theme.active.brand}", + "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-active-bg" }, "outline-brand": { - "value": "{color.btn.bg.brand}", + "value": "{color.white}", "type": "color", "source": "$btn-brand-outline-active-bg" } }, "border": { "brand": { - "value": "{color.theme.active.brand}", + "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-active-border-color" }, "outline-brand": { - "value": "{color.btn.bg.brand}", + "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-outline-active-border-color" } @@ -141,12 +136,12 @@ "focus": { "text": { "brand": { - "value": "{color.btn.text.brand}", + "value": "{color.white}", "type": "color", "source": "$btn-brand-focus-color" }, "outline-brand": { - "value": "{color.btn.text.outline-brand}", + "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-outline-focus-color" } diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index dc0790e..f888da9 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -20,7 +20,7 @@ }, "bg": { "primary": { - "value": "{color.primary.600}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-bg" }, @@ -55,7 +55,7 @@ ] }, "outline-primary": { - "value": "{color.primary.600}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-hover-color", "modify": [ @@ -67,19 +67,19 @@ }, "bg": { "primary": { - "value": "{color.theme.hover.primary}", + "value": "{color.primary.300}", "type": "color", "source": "$btn-primary-hover-bg" }, "outline-primary": { - "value": "{color.primary.600}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-outline-hover-bg" } }, "border": { "primary": { - "value": "{color.btn.hover.bg.primary}", + "value": "{color.primary.500}", "type": "color", "source": "$btn-primary-hover-border-color" },