fix: adopt upstream Paragon changes; fix color scales and other bugs

edx · Sep 7, 2024 · 1019652 · 1019652
1 parent 9c93550
commit 1019652
Show file tree

Hide file tree

Showing 53 changed files with 4,187 additions and 2,734 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,9 +19,11 @@
     "build-tokens": "paragon build-tokens --source ./tokens/src --build-dir ./paragon/css --source-tokens-only",
     "build-scss": "paragon build-scss --corePath ./paragon/core.scss --themesPath ./paragon/css/themes --defaultThemeVariants light",
     "build": "make build",
+    "build:watch": "nodemon --ignore dist -x \"make build\"",
     "paragon:help": "paragon help"
   },
   "devDependencies": {
-    "@openedx/paragon": "22.0.0-alpha.25"
+    "@openedx/paragon": "file:../paragon/openedx-paragon-20.18.1.tgz",
+    "nodemon": "^3.1.4"
   }
 }
diff --git a/paragon/css/core/custom-media-breakpoints.css b/paragon/css/core/custom-media-breakpoints.css
@@ -1,6 +1,5 @@
 /**
- * IMPORTANT: This file is the result of assembling design tokens
- * Do not edit directly
- * Generated on Fri, 24 May 2024 22:53:44 GMT
+ * Do not edit directly, this file was auto-generated. while transforming design tokens.
+ * See <root>/tokens/README.md for more details.
  */
 
diff --git a/paragon/css/core/variables.css b/paragon/css/core/variables.css
diff --git a/paragon/css/themes/light/index.css b/paragon/css/themes/light/index.css
@@ -1,2 +1 @@
 @import "variables.css";
-@import "utility-classes.css";
diff --git a/paragon/css/themes/light/utility-classes.css b/paragon/css/themes/light/utility-classes.css
diff --git a/paragon/css/themes/light/variables.css b/paragon/css/themes/light/variables.css
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
@@ -2,9 +2,9 @@
   "size": {
     "border": {
       "radius": {
-        "base": { "value": ".375rem" },
-        "lg": { "value": ".375rem" },
-        "sm": { "value": ".375rem" }
+        "base": { "$value": ".375rem" },
+        "lg": { "$value": ".375rem" },
+        "sm": { "$value": ".375rem" }
       }
     }
   }

diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
@@ -2,8 +2,8 @@
   "typography": {
     "badge": {
       "font": {
-        "size": { "value": "0.75rem" },
-        "weight": { "value": "400" }
+        "size": { "$value": "0.75rem" },
+        "weight": { "$value": "400" }
       }
     }
   }

diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json
@@ -2,35 +2,35 @@
   "spacing": {
     "btn": {
       "focus": {
-        "gap": { "value": "2px" }
+        "gap": { "$value": "2px" }
       }
     }
   },
   "typography": {
     "btn": {
       "font": {
-        "weight": { "value": "500" }
+        "weight": { "$value": "500" }
       }
     }
   },
   "size": {
     "btn": {
       "border": {
         "radius": {
-          "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" }
+          "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": {
           "base": {
-            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-            "type": "dimension",
+            "$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" }
+          "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/core/components/Card.json b/tokens/src/core/components/Card.json
@@ -2,8 +2,8 @@
   "spacing": {
     "card": {
       "spacer": {
-        "x": { "value": "{spacing.spacer.4}" },
-        "y": { "value": "{spacing.spacer.3}" }
+        "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
@@ -2,16 +2,16 @@
   "size": {
     "dropdown": {
       "border": {
-        "width": { "value": "0" }
+        "width": { "$value": "0" }
       }
     }
   },
   "spacing": {
     "dropdown": {
       "padding": {
         "y": {
-          "base": { "value": "{spacing.spacer.2}" },
-          "item": { "value": "{spacing.spacer.2,5}" }
+          "base": { "$value": "{spacing.spacer.2}" },
+          "item": { "$value": "{spacing.spacer.2,5}" }
         }
       }
     }

diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json
@@ -4,9 +4,9 @@
       "input": {
         "radius": {
           "border": {
-            "base": { "value": "0" },
-            "lg": { "value": "0" },
-            "sm": { "value": "0" }
+            "base": { "$value": "0" },
+            "lg": { "$value": "0" },
+            "sm": { "$value": "0" }
           }
         }
       }

diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json
@@ -3,7 +3,7 @@
     "image": {
       "thumbnail": {
         "border": {
-          "radius": { "value": "0" }
+          "radius": { "$value": "0" }
         }
       }
     }

diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json
@@ -2,7 +2,7 @@
   "size": {
     "nav": {
       "pills": {
-        "border-radius": { "value": "0" }
+        "border-radius": { "$value": "0" }
       }
     }
   }

diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json
@@ -2,7 +2,7 @@
   "size": {
     "popover": {
       "border": {
-        "width": { "value": "0px", "_comment": "A pixel next to zero is necessary for correct display Popover arrow." }
+        "width": { "$value": "0px", "_comment": "A pixel next to zero is necessary for correct display Popover arrow." }
       }
     }
   }

diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json
@@ -1,8 +1,8 @@
 {
   "spacing": {
     "caret": {
-      "base": { "value": "calc({size.caret.width} * 1)" },
-      "vertical-align": { "value": "calc({size.caret.width} * .67)" }
+      "base": { "$value": "calc({size.caret.width} * 1)" },
+      "vertical-align": { "$value": "calc({size.caret.width} * .67)" }
     }
   }
 }
diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json
@@ -2,7 +2,7 @@
   "typography": {
     "headings": {
       "font": {
-        "weight": { "value": "700" }
+        "weight": { "$value": "700" }
       }
     }
   }

diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json
@@ -2,7 +2,7 @@
   "size": {
     "input": {
       "btn": {
-        "border-width": { "value": "1px" }
+        "border-width": { "$value": "1px" }
       }
     }
   }

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