Merge pull request #18 from edx/swang/update-link-and-button-styles

feat: update button and link colors
edx · May 22, 2024 · 44a5d37 · 44a5d37
2 parents 9a44b3b + 625e57d
commit 44a5d37
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 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 Sun, 12 May 2024 21:26:23 GMT
+ * Generated on Wed, 22 May 2024 19:01:45 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 Sun, 12 May 2024 21:26:23 GMT
+ * Generated on Wed, 22 May 2024 19:01:45 GMT
  */
 
 :root {
@@ -65,27 +65,27 @@
   --pgn-typography-display-weight-3: 700;
   --pgn-typography-display-weight-2: 700;
   --pgn-typography-display-weight-1: 700;
-  --pgn-typography-badge-font-weight: 400;
-  --pgn-typography-badge-font-size: 0.75rem;
   --pgn-typography-headings-font-weight: 700;
   --pgn-typography-btn-font-weight: 500;
+  --pgn-typography-badge-font-weight: 400;
+  --pgn-typography-badge-font-size: 0.75rem;
   --pgn-spacing-spacer-base: 1rem;
   --pgn-spacing-spacer-0: 0;
   --pgn-spacing-btn-focus-gap: 2px;
   --pgn-size-popover-border-width: 0px;
   --pgn-size-nav-pills-border-radius: 0;
   --pgn-size-image-thumbnail-border-radius: 0;
-  --pgn-size-dropdown-border-width: 0;
   --pgn-size-input-btn-border-width: 1px;
   --pgn-size-form-input-radius-border-sm: 0;
   --pgn-size-form-input-radius-border-lg: 0;
   --pgn-size-form-input-radius-border-base: 0;
+  --pgn-size-dropdown-border-width: 0;
   --pgn-size-btn-border-radius-sm: 100px;
   --pgn-size-btn-border-radius-lg: 100px;
   --pgn-size-btn-border-radius-base: 100px;
   --pgn-size-border-radius-sm: .375rem;
   --pgn-size-border-radius-lg: .375rem;
-  --pgn-size-border-radius-base: .375rem;
+  --pgn-size-border-radius-base: 6.25rem;
   --pgn-typography-font-line-height-1: 1rem;
   --pgn-typography-font-weight-base: 400;
   --pgn-typography-font-size-lg: calc(1.125rem * 1.25);

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 Sun, 12 May 2024 21:26:23 GMT
+ * Generated on Wed, 22 May 2024 19:01:46 GMT
  */
 
 :root {
@@ -100,14 +100,13 @@
   --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-disabled-bg-outline-brand: #000000FF;
+  --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);
   --pgn-elevation-box-shadow-level-2: 0px 4px 10px 0px rgba(0,0,0,0.15), 0px 8px 16px 0px rgba(0,0,0,0.15);
   --pgn-elevation-box-shadow-level-1: 0px 2px 8px 0px rgba(0,0,0,0.15), 0px 2px 4px 0px rgba(0,0,0,0.15);
   --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-form-input-base: none;
-  --pgn-other-btn-disabled-opacity: .3;
   --pgn-transition-btn: none;
   --pgn-typography-input-btn-line-height-sm: 1.4286;
   --pgn-typography-input-btn-line-height-base: 1.3333;
@@ -136,14 +135,15 @@
   --pgn-color-tooltip-bg-base: #F0F2F2FF;
   --pgn-color-tooltip-light: #F0F2F2FF;
   --pgn-color-pagination-text-base: #F0F2F2FF;
-  --pgn-color-badge-bg-info: #00BBF9FF;
   --pgn-color-link-hover: #003A5BFF;
-  --pgn-color-link-base: #EFF8FAFF;
+  --pgn-color-link-base: #00688DFF;
   --pgn-color-headings-base: #1F453DFF;
   --pgn-color-body-bg: #FFFFFFFF;
   --pgn-color-form-input-focus-bg: #FFFFFFFF;
   --pgn-color-form-input-bg-base: #FFFFFFFF;
   --pgn-color-btn-active-bg-inverse-tertiary: #96A4A7FF;
+  --pgn-color-btn-active-text-outline-brand: #FFFFFFFF;
+  --pgn-color-btn-active-text-brand: #FFFFFFFF;
   --pgn-color-btn-hover-bg-outline-warning: #AE9400FF;
   --pgn-color-btn-hover-bg-inverse-tertiary: #96A4A7FF;
   --pgn-color-btn-hover-bg-outline-success: #0B663EFF;
@@ -152,7 +152,7 @@
   --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-outline-brand: #A93405FF;
+  --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;
@@ -178,6 +178,7 @@
   --pgn-color-btn-bg-danger: #8B0B02FF;
   --pgn-color-btn-bg-outline-brand: #FFFFFFFF;
   --pgn-color-btn-bg-brand: #A93405FF;
+  --pgn-color-badge-bg-info: #00BBF9FF;
   --pgn-color-theme-active-gray: #171A1DFF;
   --pgn-color-theme-active-dark: #040A08FF;
   --pgn-color-theme-active-light: #201F1DFF;
@@ -257,7 +258,8 @@
   --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-brand: #A93405FF;
+  --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-text-outline-success: #FFFFFFFF;
   --pgn-color-btn-disabled-text-outline-primary: #FFFFFFFF;
@@ -323,7 +325,7 @@
   --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: #A93405FF;
+  --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;
@@ -332,6 +334,7 @@
   --pgn-color-btn-hover-bg-dark: #0F211EFF;
   --pgn-color-btn-hover-bg-danger: #77160FFF;
   --pgn-color-btn-hover-bg-brand: #822A06FF;
+  --pgn-color-btn-hover-text-brand: #454545FF;
   --pgn-color-btn-border-outline-warning: #AE9400FF;
   --pgn-color-btn-border-warning: #AE9400FF;
   --pgn-color-btn-border-outline-success: #0B663EFF;
@@ -463,8 +466,6 @@
   --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-active-text-outline-brand: #FFFFFFFF;
-  --pgn-color-btn-active-text-brand: #FFFFFFFF;
   --pgn-color-btn-hover-border-warning: #7A6800FF;
   --pgn-color-btn-hover-border-success: #124930FF;
   --pgn-color-btn-hover-border-primary: #001A1AFF;
@@ -474,6 +475,7 @@
   --pgn-color-btn-hover-border-danger: #77160FFF;
   --pgn-color-btn-hover-border-brand: #822A06FF;
   --pgn-color-btn-hover-bg-outline-secondary: #323232FF;
+  --pgn-color-btn-hover-bg-secondary: #696969FF;
   --pgn-color-btn-hover-text-warning: #FFFFFFFF;
   --pgn-color-btn-hover-text-success: #FFFFFFFF;
   --pgn-color-btn-hover-text-outline-secondary: #FFFFFFFF;
@@ -482,7 +484,6 @@
   --pgn-color-btn-hover-text-info: #FFFFFFFF;
   --pgn-color-btn-hover-text-dark: #FFFFFFFF;
   --pgn-color-btn-hover-text-danger: #FFFFFFFF;
-  --pgn-color-btn-hover-text-brand: #FFFFFFFF;
   --pgn-color-btn-bg-secondary: #323232FF;
   --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FCF1F4FF' viewBox='2 2 20 20'%3e%3cpath d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M13.25,15.5 L10.75,15.5 C10.6119288,15.5 10.5,15.6119288 10.5,15.75 L10.5,15.75 L10.5,18.25 C10.5,18.3880712 10.6119288,18.5 10.75,18.5 L10.75,18.5 L13.25,18.5 C13.3880712,18.5 13.5,18.3880712 13.5,18.25 L13.5,18.25 L13.5,15.75 C13.5,15.6119288 13.3880712,15.5 13.25,15.5 L13.25,15.5 Z M13.492539,5.5 L10.5001113,5.50010806 C10.3620998,5.50416722 10.2535099,5.61933826 10.2575691,5.75734976 L10.2575691,5.75734976 L10.4928632,13.7573498 C10.4968382,13.8925005 10.607546,14 10.7427552,14 L10.7427552,14 L13.2572448,14 C13.392454,14 13.5031618,13.8925005 13.5071368,13.7573498 L13.5071368,13.7573498 L13.7424309,5.75734976 L13.7424309,5.75734976 C13.742539,5.61192881 13.6306101,5.5 13.492539,5.5 L13.492539,5.5 Z' /%3e%3c/svg%3E");
   --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3e%3cpath fill='%23F2FAF7FF' d='M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M17.5208153,8.03553391 L10.4497475,15.1066017 L6.91421356,11.5710678 L5.5,12.9852814 L10.4497475,17.9350288 L18.9350288,9.44974747 L17.5208153,8.03553391 Z'/%3e%3c/svg%3e");
@@ -494,7 +495,8 @@
   --pgn-color-btn-active-bg-outline-secondary: #323232FF;
   --pgn-color-btn-active-bg-secondary: #272727FF;
   --pgn-color-btn-hover-border-outline-secondary: #323232FF;
-  --pgn-color-btn-hover-bg-secondary: #2C2C2CFF;
+  --pgn-color-btn-hover-border-secondary: #696969FF;
+  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
   --pgn-color-btn-border-outline-secondary: #323232FF;
   --pgn-color-btn-border-secondary: #323232FF;
   --pgn-color-btn-text-outline-secondary: #323232FF;
@@ -510,6 +512,4 @@
   --pgn-color-btn-focus-text-secondary: #FFFFFFFF;
   --pgn-color-btn-active-text-outline-secondary: #FFFFFFFF;
   --pgn-color-btn-active-text-secondary: #FFFFFFFF;
-  --pgn-color-btn-hover-border-secondary: #2C2C2CFF;
-  --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
 }
diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
@@ -45,7 +45,7 @@
       "hover": {
         "text": {
           "brand": {
-            "value": "{color.btn.hover.bg.brand}",
+            "value": "{color.brand.100}",
             "type": "color",
             "source": "$btn-brand-hover-color",
             "modify": [
@@ -55,7 +55,7 @@
             ]
           },
           "outline-brand": {
-            "value": "{color.brand.600}",
+            "value": "{color.brand.500}",
             "type": "color",
             "source": "$btn-brand-outline-hover-color",
             "modify": [
@@ -72,7 +72,7 @@
             "source": "$btn-brand-hover-bg"
           },
           "outline-brand": {
-            "value": "{color.brand.600}",
+            "value": "{color.brand.500}",
             "type": "color",
             "source": "$btn-brand-outline-hover-bg"
           }
@@ -93,7 +93,7 @@
       "active": {
         "text": {
           "brand": {
-            "value": "{color.btn.active.bg.brand}",
+            "value": "{color.brand.500}",
             "type": "color",
             "source": "$btn-brand-active-color",
             "modify": [
@@ -103,7 +103,7 @@
             ]
           },
           "outline-brand": {
-            "value": "{color.btn.active.bg.outline-brand}",
+            "value": "{color.brand.500}",
             "type": "color",
             "source": "$btn-brand-outline-active-color",
             "modify": [
@@ -203,12 +203,12 @@
         },
         "bg": {
           "brand": {
-            "value": "{color.btn.bg.brand}",
+            "value": "{color.brand.100}",
             "type": "color",
             "source": "$btn-brand-disabled-bg"
           },
           "outline-brand": {
-            "value": "{color.btn.bg.outline-brand",
+            "value": "{color.brand.100}",
             "type": "color",
             "source": "$btn-brand-outline-disabled-bg"
           }

diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json
@@ -67,7 +67,7 @@
         },
         "bg": {
           "secondary": {
-            "value": "{color.theme.hover.secondary}",
+            "value": "{color.secondary.400}",
             "type": "color",
             "source": "$btn-secondary-hover-bg"
           },

diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "link": {
-      "base": { "value": "{color.info.base}" },
+      "base": { "value": "{color.info.500}" },
       "hover": { "value": "{color.info.700}", "modify": null }
     }
   }