feat: button changes (#14)

Merging alpha into main
edx · May 12, 2024 · 9708238 · 9708238
1 parent 599ecbd
commit 9708238
Show file tree

Hide file tree

Showing 15 changed files with 1,705 additions and 426 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, 02 May 2024 05:05:20 GMT
+ * Generated on Sun, 12 May 2024 21:26:23 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, 02 May 2024 05:05:20 GMT
+ * Generated on Sun, 12 May 2024 21:26:23 GMT
  */
 
 :root {
@@ -65,25 +65,24 @@
   --pgn-typography-display-weight-3: 700;
   --pgn-typography-display-weight-2: 700;
   --pgn-typography-display-weight-1: 700;
-  --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-typography-headings-font-weight: 700;
+  --pgn-typography-btn-font-weight: 500;
   --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-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;
@@ -104,9 +103,12 @@
   --pgn-spacing-spacer-1: calc(1rem * .25);
   --pgn-spacing-caret-vertical-align: calc(.3em * .67);
   --pgn-spacing-caret-base: calc(.3em * 1);
+  --pgn-size-btn-focus-border-radius-sm: 100px;
+  --pgn-size-btn-focus-border-radius-base: calc(100px + calc(2px + 2px));
   --pgn-spacing-grid-gutter-width: calc(1rem * 4);
   --pgn-spacing-dropdown-padding-y-item: calc(1rem * .75);
   --pgn-spacing-dropdown-padding-y-base: calc(1rem * .5);
   --pgn-spacing-card-spacer-y: 1rem;
   --pgn-spacing-card-spacer-x: calc(1rem * 1.5);
+  --pgn-size-btn-focus-border-radius-lg: calc(100px + calc(2px + 2px));
 }
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" }
+    }
   }
-}
+}