Merge pull request #21 from edx/swang/update-button-styles-final

feat: update brand and primary button tokens
edx · May 23, 2024 · 377d681 · 377d681
2 parents e8e0bf8 + 4ce8276
commit 377d681
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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,30 +325,28 @@
   --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;
   --pgn-color-btn-hover-border-outline-danger: #8B0B02FF;
   --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
@@ -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
@@ -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"
           },