@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.4

package/tokens/src/core/components/Popover.json

@@ -1,47 +1,51 @@
 {
   "typography": {
+    "$type": "dimension",
     "popover": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
+      "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" }
     }
   },
   "size": {
+    "$type": "dimension",
     "popover": {
-      "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
+      "max-width": { "source": "$popover-max-width", "$value": "480px" },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" },
-        "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" }
+        "width": { "source": "$popover-border-width", "$value": "{size.border.width}" },
+        "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" }
       },
       "icon": {
-        "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
-        "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
+        "height": { "source": "$popover-icon-height", "$value": "1rem" },
+        "width": { "source": "$popover-icon-width", "$value": "1rem" }
       },
       "arrow": {
-        "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
-        "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
+        "width": { "source": "$popover-arrow-width", "$value": "1rem" },
+        "height": { "source": "$popover-arrow-height", "$value": ".5rem" }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "popover": {
-      "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
+      "zindex": { "source": "$zindex-popover", "$value": "1060" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "popover": {
       "header": {
         "padding": {
-          "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
+          "y": { "source": "$popover-header-padding-y", "$value": ".5rem" },
+          "x": { "source": "$popover-header-padding-x", "$value": "1rem" }
         }
       },
       "body": {
         "padding": {
-          "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" },
-          "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" }
+          "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" },
+          "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" }
         }
       },
       "icon": {
-        "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
+        "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" }
       }
     }
   }

package/tokens/src/core/components/ProductTour.json

@@ -1,31 +1,25 @@
 {
   "size": {
+    "$type": "dimension",
     "product-tour": {
       "checkpoint": {
         "width": {
-          "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" },
-          "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" },
-          "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" }
+          "border": { "source": "$checkpoint-border-width", "$value": "8px" },
+          "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" },
+          "max": { "source": "$checkpoint-max-width", "$value": "480px" }
         },
         "arrow": {
-          "top": {
-            "value": "{size.product-tour.checkpoint.width.arrow}",
-            "type": "dimension",
-            "source": "$checkpoint-arrow-border-top"
-          },
-          "transparent": {
-            "value": "{size.product-tour.checkpoint.width.arrow}",
-            "type": "dimension",
-            "source": "$checkpoint-arrow-border-transparent"
-          }
+          "top": { "source": "$checkpoint-arrow-border-top", "$value": "{size.product-tour.checkpoint.width.arrow}" },
+          "transparent": { "source": "$checkpoint-arrow-border-transparent", "$value": "{size.product-tour.checkpoint.width.arrow}" }
         }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "product-tour": {
       "checkpoint": {
-        "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" }
+        "zindex": { "source": "$checkpoint-z-index", "$value": "1060" }
       }
     }
   }

package/tokens/src/core/components/ProgressBar.json

@@ -1,38 +1,53 @@
 {
   "typography": {
+    "$type": "dimension",
     "progress-bar": {
-      "font-size": {
-        "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size"
-      }
+      "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" }
     }
   },
   "size": {
+    "$type": "dimension",
     "progress-bar": {
       "height": {
-        "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" },
-        "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" }
+        "base": { "source": "$progress-height", "$value": "1rem" },
+        "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" }
       },
       "border": {
-        "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" },
-        "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" }
+        "width": { "source": "$progress-bar-border-width", "$value": "1px" },
+        "radius": { "source": "$progress-border-radius", "$value": "0" }
       },
-      "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
+      "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "progress-bar": {
       "hint": {
-        "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" }
+        "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" }
       }
     }
   },
   "transition": {
+    "$type": "transition",
     "progress-bar": {
-      "bar": {
-        "animation-timing": {
-          "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing"
-        },
-        "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" }
+      "animation-timing": {
+        "source": "$progress-bar-animation-timing",
+        "$value": {
+          "duration": "1s",
+          "timing-function": "linear",
+          "delay": "0s",
+          "iteration-count": "infinite"
+        }
+      },
+      "transition": {
+        "source": "$progress-bar-transition",
+        "$value": {
+          "property": "width",
+          "duration": ".6s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        }
       }
     }
   }

package/tokens/src/core/components/SearchField.json

@@ -1,23 +1,21 @@
 {
   "size": {
+    "$type": "dimension",
     "search-field": {
       "border": {
         "width": {
-          "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
-          "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
+          "base": { "source": "$search-border-width", "$value": ".0625rem" },
+          "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" }
         },
-        "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
+        "radius": { "source": "$search-border-radius", "$value": "0" }
       },
-      "search-input-height": {
-        "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
-        "type": "dimension",
-        "source": "$input-height-search"
-      }
+      "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "search-field": {
-      "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
+      "margin-button": { "source": "$search-button-margin", "$value": ".5rem" }
     }
   }
 }

package/tokens/src/core/components/SelectableBox.json

@@ -1,9 +1,10 @@
 {
   "spacing": {
+    "$type": "dimension",
     "selectable-box": {
-      "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" },
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" },
-      "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" }
+      "padding": { "source": "$selectable-box-padding", "$value": "1rem" },
+      "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" },
+      "box-space": { "source": "$selectable-box-space", "$value": ".75rem" }
     }
   }
 }

package/tokens/src/core/components/Sheet.json

@@ -1,9 +1,10 @@
 {
   "elevation": {
+    "$type": "number",
     "sheet": {
       "zindex": {
-        "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
-        "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
+        "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" },
+        "main": { "source": "$zindex-sheet", "$value": "1032" }
       }
     }
   }

package/tokens/src/core/components/Spinner.json

@@ -1,19 +1,21 @@
 {
   "size": {
+    "$type": "dimension",
     "spinner": {
       "base": {
-        "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" },
-        "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" },
-        "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" }
+        "width": { "source": "$spinner-width", "$value": "2rem" },
+        "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" },
+        "border-width": { "source": "$spinner-border-width", "$value": ".25em" }
       },
       "sm": {
-        "width": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" },
-        "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" },
-        "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" }
+        "width": { "source": "$spinner-width-sm", "$value": "1rem" },
+        "height": { "source": "$spinner-height-sm", "$value": "{size.spinner.sm.width}" },
+        "border-width": { "source": "$spinner-border-width-sm", "$value": ".2em" }
       }
     }
   },
   "spacing": {
-    "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" }
+    "$type": "dimension",
+    "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" }
   }
 }

package/tokens/src/core/components/Stack.json

@@ -1,7 +1,8 @@
 {
   "size": {
+    "$type": "dimension",
     "stack": {
-      "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" }
+      "gap": { "source": "$stack-gap", "$value": "0" }
     }
   }
 }

package/tokens/src/core/components/Stepper.json

@@ -1,42 +1,40 @@
 {
   "spacing": {
+    "$type": "dimension",
     "stepper": {
       "header": {
         "padding": {
-          "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" },
-          "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" }
+          "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" },
+          "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" }
         },
         "step": {
-          "padding": {
-            "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding"
-          },
+          "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" },
           "list": {
             "padding": {
-              "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" },
-              "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" }
+              "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" },
+              "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" }
             },
-            "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" }
+            "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "stepper": {
       "header": {
-        "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" }
+        "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" }
       },
       "step": {
-        "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" },
-        "bubble-error-shadow-width": {
-          "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width"
-        }
+        "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" },
+        "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" }
       }
     }
   },
   "typography": {
     "spacer": {
-      "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" }
+      "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" }
     }
   }
 }

package/tokens/src/core/components/Sticky.json

@@ -1,7 +1,8 @@
 {
   "spacing": {
+    "$type": "dimension",
     "sticky": {
-      "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
+      "offset": { "source": "$sticky-offset", "$value": "0" }
     }
   }
 }

package/tokens/src/core/components/Tab.json

@@ -1,18 +1,19 @@
 {
   "spacing": {
+    "$type": "dimension",
     "tab": {
       "more-link-dropdown-toggle": {
-        "padding-x": { "value": ".7rem", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-y" }
+        "padding-x": { "source": "$tab-more-link-dropdown-toggle-padding-x", "$value": ".7rem" },
+        "padding-y": { "source": "$tab-more-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
       },
       "inverse-pills-link-dropdown-toggle": {
-        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" }
+        "padding-x": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+        "padding-y": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }
       },
       "inverse-tabs-link-dropdown-toggle": {
-        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
-        "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
+        "padding-x": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", "$value": ".625rem" },
+        "padding-y": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" },
+        "distance": { "source": "$tab-inverse-pills-link-dropdown-distance", "$value": "5px" }
       }
     }
   }

package/tokens/src/core/components/Tabs.json

@@ -1,18 +1,18 @@
 {
   "size": {
+    "$type": "dimension",
     "tabs": {
       "notification": {
-        "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" },
-        "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" }
+        "height": { "source": "$tab-notification-height", "$value": "1rem" },
+        "width": { "source": "$tab-notification-width", "$value": "1rem" }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "tabs": {
       "notification": {
-        "font-size": {
-          "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size"
-        }
+        "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   }

package/tokens/src/core/components/Toast.json

@@ -1,28 +1,31 @@
 {
   "typography": {
+    "$type": "dimension",
     "toast": {
-      "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
+      "font-size": { "source": "$toast-font-size", "$value": ".875rem" }
     }
   },
   "size": {
+    "$type": "dimension",
     "toast": {
-      "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
+      "max-width": { "source": "$toast-max-width", "$value": "400px" },
       "border": {
-        "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
-        "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
+        "width": { "source": "$toast-border-width", "$value": "1px" },
+        "radius": { "source": "$toast-border-radius", "$value": ".25rem" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "toast": {
       "padding": {
-        "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
-        "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
+        "x": { "source": "$toast-padding-x", "$value": ".75rem" },
+        "y": { "source": "$toast-padding-y", "$value": ".25rem" }
       },
       "container": {
         "gutter": {
-          "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
-          "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
+          "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" },
+          "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" }
         }
       }
     }

package/tokens/src/core/components/Tooltip.json

@@ -1,33 +1,35 @@
 {
   "typography": {
+    "$type": "dimension",
     "tooltip": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" }
+      "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "tooltip": {
       "padding": {
-        "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" }
+        "y": { "source": "$tooltip-padding-y", "$value": ".5rem" },
+        "x": { "source": "$tooltip-padding-x", "$value": ".5rem" }
       },
-      "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" }
+      "margin": { "source": "$tooltip-margin", "$value": "0" }
     }
   },
   "elevation": {
+    "$type": "number",
     "tooltip": {
-      "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" }
+      "zindex": { "source": "$zindex-tooltip", "$value": "1070" }
     }
   },
   "size": {
+    "$type": "dimension",
     "tooltip": {
-      "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" },
+      "max-width": { "source": "$tooltip-max-width", "$value": "200px" },
       "arrow": {
-        "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" },
-        "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" }
+        "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" },
+        "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" }
       },
-      "border-radius": {
-        "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius"
-      }
+      "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" }
     }
   }
 }

package/tokens/src/core/components/general/caret.json

@@ -1,13 +1,15 @@
 {
   "size": {
+    "$type": "dimension",
     "caret": {
-      "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" }
+      "width": { "source": "$caret-width", "$value": ".3em" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "caret": {
-      "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" },
-      "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" }
+      "base": { "source": "$caret-spacing", "$value": ".255em" },
+      "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" }
     }
   }
 }

package/tokens/src/core/components/general/headings.json

@@ -2,15 +2,16 @@
   "typography": {
     "headings": {
       "font": {
-        "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" },
-        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" }
+        "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" },
+        "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       },
-      "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" }
+      "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "headings": {
-      "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" }
+      "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" }
     }
   }
 }

package/tokens/src/core/components/general/hr.json

@@ -1,9 +1,10 @@
 {
   "size": {
+    "$type": "dimension",
     "hr": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" },
-        "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" }
+        "width": { "source": "$hr-border-width", "$value": "{size.border.width}" },
+        "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" }
       }
     }
   }