Merge pull request #11 from edx/bseverino/WS-4601-btn-fixes

WS-4601: button fixes
edx · May 7, 2024 · b463016 · b463016
2 parents cfc2520 + 16535ce
commit b463016
Show file tree

Hide file tree

Showing 15 changed files with 1,698 additions and 419 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 Mon, 22 Apr 2024 21:11:50 GMT
+ * Generated on Tue, 07 May 2024 17:30:46 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 Mon, 22 Apr 2024 21:11:50 GMT
+ * Generated on Tue, 07 May 2024 17:30:46 GMT
  */
 
 :root {
@@ -80,10 +80,9 @@
   --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-btn-focus-border-radius: 0px;
-  --pgn-size-btn-border-radius-sm: 0px;
-  --pgn-size-btn-border-radius-lg: 0px;
-  --pgn-size-btn-border-radius-base: 0px;
+  --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;

diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css
diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
@@ -17,14 +17,20 @@
     "btn": {
       "border": {
         "radius": {
-          "base": { "value": "0px" },
-          "lg": { "value": "0px" },
-          "sm": { "value": "0px" }
+          "base": { "value": "100px", "type": "dimension", "source": "$btn-border-radius" },
+          "lg": { "value": "100px", "type": "dimension", "source": "$btn-border-radius-lg" },
+          "sm": { "value": "100px", "type": "dimension", "source": "$btn-border-radius-sm" }
         }
       },
       "focus": {
         "border-radius": {
-          "value": "0px"
+          "base": {
+            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "type": "dimension",
+            "source": "$btn-focus-border-radius"
+          },
+          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
         }
       }
     }

diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json
@@ -13,19 +13,19 @@
           ]
         },
         "outline-brand": {
-          "value": "{color.primary.base}",
+          "value": "{color.btn.bg.brand}",
           "type": "color",
           "source": "$btn-brand-outline-color"
         }
       },
       "bg": {
         "brand": {
-          "value": "{color.primary.base}",
+          "value": "{color.brand.600}",
           "type": "color",
           "source": "$btn-brand-bg"
         },
         "outline-brand": {
-          "value": "transparent",
+          "value": "{color.white}",
           "type": "color",
           "source": "$btn-brand-outline-bg"
         }
@@ -37,7 +37,7 @@
           "source": "$btn-brand-border-color"
         },
         "outline-brand": {
-          "value": "{color.primary.base}",
+          "value": "{color.btn.bg.brand}",
           "type": "color",
           "source": "$btn-brand-outline-border-color"
         }
@@ -55,9 +55,14 @@
             ]
           },
           "outline-brand": {
-            "value": "{color.theme.hover.brand}",
+            "value": "{color.brand.600}",
             "type": "color",
-            "source": "$btn-brand-outline-hover-color"
+            "source": "$btn-brand-outline-hover-color",
+            "modify": [
+              {
+                "type": "color-yiq"
+              }
+            ]
           }
         },
         "bg": {
@@ -67,19 +72,19 @@
             "source": "$btn-brand-hover-bg"
           },
           "outline-brand": {
-            "value": "{color.primary.100}",
+            "value": "{color.brand.600}",
             "type": "color",
             "source": "$btn-brand-outline-hover-bg"
           }
         },
         "border": {
           "brand": {
-            "value": "{color.theme.hover.brand}",
+            "value": "{color.btn.hover.bg.brand}",
             "type": "color",
             "source": "$btn-brand-hover-border-color"
           },
           "outline-brand": {
-            "value": "{color.primary.900}",
+            "value": "{color.btn.hover.bg.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-hover-border-color"
           }
@@ -115,7 +120,7 @@
             "source": "$btn-brand-active-bg"
           },
           "outline-brand": {
-            "value": "{color.theme.bg.brand}",
+            "value": "{color.btn.bg.brand}",
             "type": "color",
             "source": "$btn-brand-outline-active-bg"
           }
@@ -127,7 +132,7 @@
             "source": "$btn-brand-active-border-color"
           },
           "outline-brand": {
-            "value": "{color.theme.active.brand}",
+            "value": "{color.btn.bg.brand}",
             "type": "color",
             "source": "$btn-brand-outline-active-border-color"
           }
@@ -160,12 +165,12 @@
         },
         "outline": {
           "brand": {
-            "value": "{color.theme.focus.brand}",
+            "value": "{color.btn.border.brand}",
             "type": "color",
             "source": "$btn-brand-focus-focus-outline-color"
           },
           "outline-brand": {
-            "value": "{color.theme.focus.brand}",
+            "value": "{color.btn.border.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-focus-outline-color"
           }
@@ -177,7 +182,7 @@
             "source": "$btn-brand-focus-bg"
           },
           "outline-brand": {
-            "value": "inherit",
+            "value": "{color.btn.bg.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-focus-bg"
           }
@@ -203,7 +208,7 @@
             "source": "$btn-brand-disabled-bg"
           },
           "outline-brand": {
-            "value": "inherit",
+            "value": "{color.btn.bg.outline-brand",
             "type": "color",
             "source": "$btn-brand-outline-disabled-bg"
           }
@@ -215,12 +220,12 @@
             "source": "$btn-brand-disabled-border-color"
           },
           "outline-brand": {
-            "value": "{color.btn.hover.text.outline-brand}",
+            "value": "{color.btn.border.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-disabled-border-color"
           }
         }
       }
     }
   }
-}
+}
diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json
@@ -78,28 +78,19 @@
   "size": {
     "btn": {
       "border": {
-        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" },
-        "radius": {
-          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" },
-          "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" },
-          "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
-        }
+        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" }
       },
       "focus": {
-        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
-        "border-radius": {
-          "base": {
-            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-            "type": "dimension",
-            "source": "$btn-focus-border-radius"
-          },
-          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
-          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
-        }
+        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" }
       }
     }
   },
   "transition": {
     "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
+  },
+  "other": {
+    "btn": {
+      "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$btn-disabled-opacity" }
+    }
   }
-}
+}