Merge pull request #7 from edx/bseverino/WS-4609-spacing

add spacing tokens
edx · Apr 23, 2024 · cfc2520 · cfc2520
2 parents 166ff2d + bd52f22
commit cfc2520
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 13 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, 04 Apr 2024 21:47:25 GMT
+ * Generated on Mon, 22 Apr 2024 21:11:50 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, 04 Apr 2024 21:47:25 GMT
+ * Generated on Mon, 22 Apr 2024 21:11:50 GMT
  */
 
 :root {
@@ -69,11 +69,8 @@
   --pgn-typography-badge-font-size: 0.75rem;
   --pgn-typography-headings-font-weight: 700;
   --pgn-typography-btn-font-weight: 500;
-  --pgn-spacing-grid-gutter-width: 64px;
-  --pgn-spacing-dropdown-padding-y-item: .625rem;
-  --pgn-spacing-dropdown-padding-y-base: .5rem;
-  --pgn-spacing-card-spacer-y: 1rem;
-  --pgn-spacing-card-spacer-x: 1.5rem;
+  --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;
@@ -94,6 +91,22 @@
   --pgn-typography-font-weight-base: 400;
   --pgn-typography-font-size-lg: calc(1.125rem * 1.25);
   --pgn-typography-font-family-serif: "Inter", "Helvetica Neue", Arial, sans-serif;
+  --pgn-spacing-spacer-5-5: calc(1rem * 4);
+  --pgn-spacing-spacer-4-5: calc(1rem * 2);
+  --pgn-spacing-spacer-3-5: calc(1rem * 1.25);
+  --pgn-spacing-spacer-2-5: calc(1rem * .75);
+  --pgn-spacing-spacer-1-5: calc(1rem * .375);
+  --pgn-spacing-spacer-6: calc(1rem * 5);
+  --pgn-spacing-spacer-5: calc(1rem * 3);
+  --pgn-spacing-spacer-4: calc(1rem * 1.5);
+  --pgn-spacing-spacer-3: 1rem;
+  --pgn-spacing-spacer-2: calc(1rem * .5);
+  --pgn-spacing-spacer-1: calc(1rem * .25);
   --pgn-spacing-caret-vertical-align: calc(.3em * .67);
   --pgn-spacing-caret-base: calc(.3em * 1);
+  --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);
 }
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, 04 Apr 2024 21:47:26 GMT
+ * Generated on Mon, 22 Apr 2024 21:11:50 GMT
  */
 
 :root {

diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json
@@ -2,8 +2,8 @@
   "spacing": {
     "card": {
       "spacer": {
-        "x": { "value": "1.5rem" },
-        "y": { "value": "1rem" }
+        "x": { "value": "{spacing.spacer.4}" },
+        "y": { "value": "{spacing.spacer.3}" }
       }
     }
   }

diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json
@@ -10,8 +10,8 @@
     "dropdown": {
       "padding": {
         "y": {
-          "base": { "value": ".5rem" },
-          "item": { "value": ".625rem" }
+          "base": { "value": "{spacing.spacer.2}" },
+          "item": { "value": "{spacing.spacer.2,5}" }
         }
       }
     }

diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
@@ -1,7 +1,75 @@
 {
   "spacing": {
+    "spacer": {
+      "base": {
+        "value": "1rem",
+        "type": "dimension",
+        "source": "$spacer",
+        "description": "Basic space value"
+      },
+      "0": {
+        "value": "0",
+        "type": "dimension",
+        "description": "Space value of level 0"
+      },
+      "1": {
+        "value": "calc({spacing.spacer.base} * .25)",
+        "type": "dimension",
+        "description": "Space value of level 1"
+      },
+      "1,5": {
+        "value": "calc({spacing.spacer.base} * .375)",
+        "type": "dimension",
+        "description": "Space value of level 1.5"
+      },
+      "2": {
+        "value": "calc({spacing.spacer.base} * .5)",
+        "type": "dimension",
+        "description": "Space value of level 2"
+      },
+      "2,5": {
+        "value": "calc({spacing.spacer.base} * .75)",
+        "type": "dimension",
+        "description": "Space value of level 2.5"
+      },
+      "3": {
+        "value": "{spacing.spacer.base}",
+        "type": "dimension",
+        "description": "Space value of level 3"
+      },
+      "3,5": {
+        "value": "calc({spacing.spacer.base} * 1.25)",
+        "type": "dimension",
+        "description": "Space value of level 3.5"
+      },
+      "4": {
+        "value": "calc({spacing.spacer.base} * 1.5)",
+        "type": "dimension",
+        "description": "Space value of level 4"
+      },
+      "4,5": {
+        "value": "calc({spacing.spacer.base} * 2)",
+        "type": "dimension",
+        "description": "Space value of level 4.5"
+      },
+      "5": {
+        "value": "calc({spacing.spacer.base} * 3)",
+        "type": "dimension",
+        "description": "Space value of level 5"
+      },
+      "5,5": {
+        "value": "calc({spacing.spacer.base} * 4)",
+        "type": "dimension",
+        "description": "Space value of level 5.5"
+      },
+      "6": {
+        "value": "calc({spacing.spacer.base} * 5)",
+        "type": "dimension",
+        "description": "Space value of level 6"
+      }
+    },
     "grid": {
-      "gutter-width": { "value": "64px" }
+      "gutter-width": { "value": "{spacing.spacer.5,5}" }
     }
   }
 }