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

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

@@ -1,95 +1,84 @@
 {
   "spacing": {
+    "$type": "dimension",
     "card": {
       "spacer": {
-        "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" },
-        "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" }
+        "x": { "source": "$card-spacer-x", "$value": "1.25rem" },
+        "y": { "source": "$card-spacer-y", "$value": ".75rem" }
       },
       "margin": {
-        "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
-        "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" },
-        "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" },
-        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" },
-        "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" }
+        "group": { "source": "$card-group-margin", "$value": "12px" },
+        "deck": { "source": "$card-deck-margin", "$value": "{spacing.card.margin.group}" },
+        "deck-bottom": { "source": "$card-deck-margin-bottom", "$value": "{spacing.spacer.3}" },
+        "grid": { "source": "$card-grid-margin", "$value": "{spacing.card.margin.group}" },
+        "grid-bottom": { "source": "$card-grid-margin-bottom", "$value": "{spacing.spacer.3}" }
       },
       "columns": {
-        "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
-        "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" },
-        "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" }
+        "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" },
+        "count": { "source": "$card-columns-count", "$value": "3", "$type": "number" },
+        "gap": { "source": "$card-columns-gap", "$value": "1.25rem" }
       },
       "footer": {
-        "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" }
+        "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" }
       },
       "loading-skeleton": {
-        "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" }
+        "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" }
       },
       "logo": {
         "left-offset": {
-          "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" },
-          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" }
+          "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" },
+          "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" }
         },
         "bottom-offset": {
-          "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
-          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
+          "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" },
+          "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" }
         }
       },
       "focus": {
-        "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" }
+        "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "card": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
+        "width": { "source": "$card-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
-          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" },
-          "inner": {
-            "value": "calc({size.card.border.radius.base} - {size.card.border.width})",
-            "type": "dimension",
-            "source": "$card-inner-border-radius"
-          }
+          "base": { "source": "$card-border-radius", "$value": "{size.border.radius.base}" },
+          "logo": { "source": "$card-logo-border-radius", "$value": ".25rem" },
+          "inner": { "source": "$card-inner-border-radius", "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" }
         }
       },
       "focus": {
         "border": {
-          "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" },
-          "radius": {
-            "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})",
-            "type": "dimension",
-            "source": "$card-focus-border-radius"
-          }
+          "width": { "source": "$card-focus-border-width", "$value": "2px" },
+          "radius": { "source": "$card-focus-border-radius", "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" }
         }
       },
       "image": {
         "horizontal": {
           "width": {
-            "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" },
-            "min": {
-              "value": "{size.card.image.horizontal.width.max}",
-              "type": "dimension",
-              "source": "$card-image-horizontal-min-width"
-            }
+            "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" },
+            "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" }
           }
         },
         "vertical": {
-          "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
+          "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" }
         },
-        "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
+        "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" }
       },
       "logo": {
-        "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },
-        "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" }
+        "width": { "source": "$card-logo-width", "$value": "7.25rem" },
+        "height": { "source": "$card-logo-height", "$value": "4.125rem" }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "footer": {
       "text": {
-        "font-size": {
-          "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size"
-        }
+        "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   }

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

@@ -3,35 +3,61 @@
     "carousel": {
       "control": {
         "width": {
-          "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
-          "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
+          "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" },
+          "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" }
         }
       },
       "indicator": {
-        "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
+        "$type": "dimension",
+        "width": { "source": "$carousel-indicator-width", "$value": "30px" },
         "height": {
-          "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
-          "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+          "base": { "source": "$carousel-indicator-height", "$value": "3px" },
+          "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" }
         }
       },
-      "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
+      "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "carousel": {
-      "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
+      "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" }
     }
   },
   "transition": {
+    "$type": "transition",
     "carousel": {
       "base": {
-        "value": "transform {transition.carousel.duration} ease-in-out",
-        "type": "transition",
-        "source": "$carousel-transition"
+        "source": "$carousel-transition",
+        "$value": {
+          "property": "transform",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease-in-out",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      },
+      "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
+      "indicator": {
+        "source": "$carousel-indicator-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": "{transition.carousel.duration}",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
       },
-      "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
-      "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
-      "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
+      "control": {
+        "source": "$carousel-control-transition",
+        "$value": {
+          "property": "opacity",
+          "duration": ".15s",
+          "timingFunction": "ease",
+          "delay": "0ms",
+          "behavior": "normal"
+        }
+      }
     }
   }
 }

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

@@ -1,41 +1,33 @@
 {
   "spacing": {
+    "$type": "dimension",
     "chip": {
       "margin": {
-        "base": {
-          "value": ".125rem", "type": "dimension", "source": "$chip-margin"
-        },
-        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
+        "base": { "source": "$chip-margin", "$value": ".125rem" },
+        "icon": { "source": "$chip-icon-margin", "$value": ".25rem" }
       },
       "padding": {
-        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
+        "y": { "source": "$chip-padding-y", "$value": "1px" },
+        "x": { "source": "$chip-padding-x", "$value": ".5rem" }
       },
       "outline": {
         "selected-distance": {
-          "light": {
-            "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance"
-          },
-          "dark": {
-            "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance"
-          }
+          "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" },
+          "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" }
         },
         "focus-distance": {
-          "light": {
-            "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance"
-          },
-          "dark": {
-            "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance"
-          }
+          "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" },
+          "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" }
         },
-        "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" }
+        "width": { "source": "$chip-outline-width", "$value": "3px" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "chip": {
-      "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" },
-      "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" }
+      "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" },
+      "icon": { "source": "$chip-icon-size", "$value": "1.5rem" }
     }
   }
 }

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

@@ -1,13 +1,12 @@
 {
   "spacing": {
+    "$type": "dimension",
     "chip-carousel": {
-      "controls-top-offset": {
-        "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset"
-      },
+      "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" },
       "container": {
         "padding": {
-          "x": { "value": ".625rem", "type": "dimension", "source": "$chip-carousel-container-padding-x" },
-          "y": { "value": ".313rem", "type": "dimension", "source": "$chip-carousel-container-padding-y" }
+          "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" },
+          "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" }
         }
       }
     }

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

@@ -2,12 +2,8 @@
   "typography": {
     "close-button": {
       "font": {
-        "size": {
-          "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size"
-        },
-        "weight": {
-          "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight"
-        }
+        "size": { "source": "$close-font-size", "$value": "calc({typography.font.size.base} * 1.5)", "$type": "dimension" },
+        "weight": { "source": "$close-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       }
     }
   }

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

@@ -1,32 +1,33 @@
 {
   "typography": {
     "code": {
-      "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
+      "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" },
       "kbd": {
-        "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" },
+        "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" },
         "nested": {
-          "font-weight": {
-            "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight"
-          }
+          "$type": "fontWeight",
+          "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "code": {
       "kbd": {
         "padding": {
-          "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" },
-          "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" }
+          "y": { "source": "$kbd-padding-y", "$value": ".2rem" },
+          "x": { "source": "$kbd-padding-x", "$value": ".4rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "code": {
       "pre": {
         "scrollable": {
-          "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" }
+          "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" }
         }
       }
     }

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

@@ -1,26 +1,23 @@
 {
   "spacing": {
+    "$type": "dimension",
     "collapsible": {
       "card": {
         "spacer": {
           "y": {
-            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" },
-            "lg": {
-              "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg"
-            }
+            "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" },
+            "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" }
           },
           "x": {
-            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" },
-            "lg": {
-              "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg"
-            }
+            "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" },
+            "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" }
           },
-          "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" },
-          "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" },
+          "left-body": { "source": "$collapsible-card-body-spacer-left", "$value": ".75rem" },
+          "icon": { "source": "$collapsible-card-spacer-icon", "$value": "2.5rem" },
           "basic": {
-            "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" },
-            "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" },
-            "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" }
+            "y": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" },
+            "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" },
+            "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" }
           }
         }
       }

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

@@ -1,8 +1,9 @@
 {
   "size": {
+    "$type": "dimension",
     "color-picker": {
-      "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
-      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
+      "sm": { "source": "$picker-size-sm", "$value": "2rem" },
+      "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" }
     }
   }
 }

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

@@ -1,12 +1,13 @@
 {
   "size": {
+    "$type": "dimension",
     "container": {
       "max-width": {
-        "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
-        "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
-        "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
-        "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
-        "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
+        "xs": { "source": "$max-width-xs", "$value": "464px" },
+        "sm": { "source": "$max-width-sm", "$value": "708px" },
+        "md": { "source": "$max-width-md", "$value": "952px" },
+        "lg": { "source": "$max-width-lg", "$value": "1192px" },
+        "xl": { "source": "$max-width-xl", "$value": "1440px" }
       }
     }
   }

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

@@ -1,27 +1,35 @@
 {
   "size": {
+    "$type": "dimension",
     "data-table": {
-      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
+      "border": { "source": "$data-table-border", "$value": "2px" },
       "dropdown": {
         "pagination": {
-          "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
-          "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" }
+          "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" },
+          "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" }
         }
       },
       "layout": {
-        "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" }
+        "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" }
       }
     }
   },
   "spacing": {
     "data-table": {
       "padding": {
-        "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
-        "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
-        "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
-        "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+        "$type": "dimension",
+        "x": { "source": "$data-table-padding-x", "$value": ".75rem" },
+        "y": { "source": "$data-table-padding-y", "$value": ".75rem" },
+        "small": { "source": "$data-table-padding-small", "$value": ".5rem" },
+        "cell": {
+          "source": "$data-table-cell-padding",
+          "$value": {
+            "x": ".5rem",
+            "y": ".75rem"
+          }
+        }
       },
-      "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
+      "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" }
     }
   }
 }

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

@@ -1,67 +1,62 @@
 {
   "typography": {
     "dropdown": {
-      "font-size": {
-        "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size"
-      },
+      "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" },
       "item": {
-        "text-decoration": {
-          "value": "none", "type": "textDecoration"
-        }
+        "$type": "textDecoration",
+        "text-decoration": { "$value": "none" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "dropdown": {
-      "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" },
+      "min-width": { "source": "$dropdown-min-width", "$value": "18rem" },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" },
+        "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "base": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius"
-          },
+          "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" },
           "inner": {
-            "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
-            "type": "dimension",
-            "source": "$dropdown-inner-border-radius"
+            "source": "$dropdown-inner-border-radius",
+            "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})"
           }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "dropdown": {
-      "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" },
+      "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" },
       "padding": {
         "x": {
-          "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" },
-          "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" }
+          "base": { "source": "$dropdown-padding-x", "$value": "0" },
+          "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" }
         },
         "y": {
-          "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" },
-          "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" }
+          "base": { "source": "$dropdown-padding-y", "$value": ".5rem" },
+          "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" }
         },
         "header": {
-          "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}",
-          "type": "dimension",
-          "source": "$dropdown-header-padding"
+          "source": "$dropdown-header-padding",
+          "$value": {
+            "x": "{spacing.dropdown.padding.x.item}",
+            "y": ".5rem"
+          }
         }
       },
       "divider": {
-        "margin-y": {
-          "value": "calc({spacing.spacer.base} / 2)",
-          "type": "dimension",
-          "source": "$dropdown-divider-margin-y"
-        }
+        "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" }
       },
       "close-container": {
-        "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" }
+        "top": { "source": "$modal-close-container-top", "$value": ".625rem" }
       }
     }
   },
   "elevation": {
+    "$type": "number",
     "dropdown": {
-      "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" }
+      "zindex": { "source": "$zindex-dropdown", "$value": "1000" }
     }
   }
 }

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

@@ -1,20 +1,18 @@
 {
   "typography": {
+    "$type": "dimension",
     "dropzone": {
       "restriction-msg": {
-        "font-size": {
-          "value": "{typography.font.size.small.x}",
-          "type": "dimension",
-          "source": "$dropzone-restriction-msg-font-size"
-        }
+        "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "dropzone": {
-      "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
+      "padding": { "source": "$dropzone-padding", "$value": "1.5rem" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" }
+        "base": { "source": "$dropzone-border-default", "$value": "1px" }
       }
     }
   }

package/tokens/src/core/components/Form/other.json

@@ -2,11 +2,12 @@
   "other": {
     "form": {
       "control": {
-        "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
-        "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" },
+        "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" },
+        "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" },
         "custom-file": {
-          "lang": { "value": "en", "type": "text" },
-          "content": { "value": "Browse", "type": "text" }
+          "$type": "text",
+          "lang": { "$value": "en" },
+          "content": { "$value": "Browse" }
         }
       }
     }