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

package/styles/scss/core/_typography.scss

@@ -1,11 +1,23 @@
 @import "~bootstrap/scss/type";
 
 @mixin mobile-type {
-  .display-1,
-  .display-2,
-  .display-3,
+  .display-1 {
+    font-size: $display1-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-2 {
+    font-size: $display2-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
+  .display-3 {
+    font-size: $display3-mobile-size;
+    line-height: $display-mobile-line-height;
+  }
+
   .display-4 {
-    font-size: $display-mobile-size;
+    font-size: $display4-mobile-size;
     line-height: $display-mobile-line-height;
   }
 

package/styles/scss/core/_utilities.scss

@@ -21,13 +21,17 @@
 $color-levels: 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 .x-small {
-  font-size: $x-small-font-size;
+  font-size: $x-small-font-size !important;
 }
 
 .micro {
-  font-size: $micro-font-size;
+  font-size: $micro-font-size !important;
   font-weight: normal;
-  line-height: $micro-line-height;
+  line-height: $micro-line-height !important;
+}
+
+.font-size-normal {
+  font-size: $font-size-base !important;
 }
 
 .mw-xs {

package/styles/scss/core/_variables.scss

@@ -652,7 +652,10 @@ $box-shadow-sides: (
 ) !default;
 
 $box-shadow-sm: var(--pgn-elevation-box-shadow-sm) !default;
-$box-shadow: var(--pgn-elevation-box-shadow-base) !default;
+$box-shadow: var(--pgn-elevation-box-shadow-base-offset-x)
+  var(--pgn-elevation-box-shadow-base-offset-y)
+  var(--pgn-elevation-box-shadow-base-blur)
+  var(--pgn-elevation-box-shadow-base-color) !default;
 $box-shadow-lg: var(--pgn-elevation-box-shadow-lg) !default;
 
 $component-active-color: var(--pgn-color-active) !default;
@@ -703,19 +706,19 @@ $font-weight-bolder: var(--pgn-typography-font-weight-bolder) !default;
 $font-weight-base: var(--pgn-typography-font-weight-base) !default;
 $line-height-base: var(--pgn-typography-line-height-base) !default;
 
-$h1-font-size: var(--pgn-typography-font-size-h1) !default;
-$h2-font-size: var(--pgn-typography-font-size-h2) !default;
-$h3-font-size: var(--pgn-typography-font-size-h3) !default;
-$h4-font-size: var(--pgn-typography-font-size-h4) !default;
-$h5-font-size: var(--pgn-typography-font-size-h5) !default;
-$h6-font-size: var(--pgn-typography-font-size-h6) !default;
+$h1-font-size: var(--pgn-typography-font-size-h1-base) !default;
+$h2-font-size: var(--pgn-typography-font-size-h2-base) !default;
+$h3-font-size: var(--pgn-typography-font-size-h3-base) !default;
+$h4-font-size: var(--pgn-typography-font-size-h4-base) !default;
+$h5-font-size: var(--pgn-typography-font-size-h5-base) !default;
+$h6-font-size: var(--pgn-typography-font-size-h6-base) !default;
 
-$h1-mobile-font-size: var(--pgn-typography-font-size-mobile-h1) !default;
-$h2-mobile-font-size: var(--pgn-typography-font-size-mobile-h2) !default;
-$h3-mobile-font-size: var(--pgn-typography-font-size-mobile-h3) !default;
-$h4-mobile-font-size: var(--pgn-typography-font-size-mobile-h4) !default;
-$h5-mobile-font-size: var(--pgn-typography-font-size-mobile-h5) !default;
-$h6-mobile-font-size: var(--pgn-typography-font-size-mobile-h6) !default;
+$h1-mobile-font-size: var(--pgn-typography-font-size-h1-mobile) !default;
+$h2-mobile-font-size: var(--pgn-typography-font-size-h2-mobile) !default;
+$h3-mobile-font-size: var(--pgn-typography-font-size-h3-mobile) !default;
+$h4-mobile-font-size: var(--pgn-typography-font-size-h4-mobile) !default;
+$h5-mobile-font-size: var(--pgn-typography-font-size-h5-mobile) !default;
+$h6-mobile-font-size: var(--pgn-typography-font-size-h6-mobile) !default;
 
 $headings-margin-bottom: var(--pgn-spacing-headings-margin-bottom) !default;
 $headings-font-family: var(--pgn-typography-headings-font-family) !default;
@@ -723,29 +726,35 @@ $headings-font-weight: var(--pgn-typography-headings-font-weight) !default;
 $headings-line-height: var(--pgn-typography-headings-line-height) !default;
 $headings-color: var(--pgn-color-headings-base) !default;
 
-$display1-size: var(--pgn-typography-display-1) !default;
-$display2-size: var(--pgn-typography-display-2) !default;
-$display3-size: var(--pgn-typography-display-3) !default;
-$display4-size: var(--pgn-typography-display-4) !default;
+$display1-size: var(--pgn-typography-font-size-display-1) !default;
+$display2-size: var(--pgn-typography-font-size-display-2) !default;
+$display3-size: var(--pgn-typography-font-size-display-3) !default;
+$display4-size: var(--pgn-typography-font-size-display-4) !default;
 
-$display-mobile-size: var(--pgn-typography-display-mobile) !default;
+// deprecated in favor of $display1-mobile-size
+$display-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
+$display1-mobile-size: var(--pgn-typography-font-size-display-mobile-1) !default;
+$display2-mobile-size: var(--pgn-typography-font-size-display-mobile-2) !default;
+$display3-mobile-size: var(--pgn-typography-font-size-display-mobile-3) !default;
+$display4-mobile-size: var(--pgn-typography-font-size-display-mobile-4) !default;
 
-$display1-weight: var(--pgn-typography-display-weight-1) !default;
-$display2-weight: var(--pgn-typography-display-weight-2) !default;
-$display3-weight: var(--pgn-typography-display-weight-3) !default;
-$display4-weight: var(--pgn-typography-display-weight-4) !default;
 
-$display-line-height: var(--pgn-typography-display-line-height-base) !default;
-$display-mobile-line-height: var(--pgn-typography-display-line-height-mobile) !default;
+$display1-weight: var(--pgn-typography-font-weight-display-1) !default;
+$display2-weight: var(--pgn-typography-font-weight-display-2) !default;
+$display3-weight: var(--pgn-typography-font-weight-display-3) !default;
+$display4-weight: var(--pgn-typography-font-weight-display-4) !default;
 
-$lead-font-size: var(--pgn-typography-font-size-lead) !default;
+$display-line-height: var(--pgn-typography-line-height-display-base) !default;
+$display-mobile-line-height: var(--pgn-typography-line-height-display-mobile) !default;
+
+$lead-font-size: var(--pgn-typography-font-size-lg) !default;
 $lead-font-weight: var(--pgn-typography-font-weight-lead) !default;
 
-$small-font-size: var(--pgn-typography-font-size-small-base) !default;
-$x-small-font-size: var(--pgn-typography-font-size-small-x) !default;
+$small-font-size: var(--pgn-typography-font-size-sm) !default;
+$x-small-font-size: var(--pgn-typography-font-size-xs) !default;
 
-$micro-font-size: var(--pgn-typography-font-size-micro);
-$micro-line-height: var(--pgn-typography-line-height-micro);
+$micro-font-size: var(--pgn-typography-font-size-micro) !default;
+$micro-line-height: var(--pgn-typography-line-height-micro) !default;
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
@@ -801,7 +810,11 @@ $input-btn-line-height: var(--pgn-typography-input-btn-line-height-base) !defaul
 
 $input-btn-focus-width: var(--pgn-size-input-btn-focus-width) !default;
 $input-btn-focus-color: var(--pgn-color-input-btn-focus) !default;
-$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow) !default;
+$input-btn-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow-offset-x)
+  var(--pgn-elevation-input-btn-focus-box-shadow-offset-y)
+  var(--pgn-elevation-input-btn-focus-box-shadow-spread)
+  var(--pgn-elevation-input-btn-focus-box-shadow-color)
+  var(--pgn-elevation-input-btn-focus-box-shadow-blur) !default;
 
 $input-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y) !default;
 $input-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x) !default;

package/styles/scss/core/core.scss

@@ -15,6 +15,7 @@
 
 // Paragon core CSS
 @import "../../css/core/variables";
+@import "../../css/core/abstraction-variables";
 @import "../../css/core/custom-media-breakpoints";
 
 // Paragon components

package/tokens/src/core/alias/size.json

@@ -1,15 +1,16 @@
 {
   "size": {
+    "$type": "dimension",
     "border": {
-      "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." },
+      "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
       "radius": {
-        "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
-        "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
-        "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
+        "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." },
+        "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." },
+        "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." }
       }
     },
     "rounded": {
-      "pill": { "value": "50rem", "type": "dimension", "source": "$rounded-pill", "description": "Pill border radius." }
+      "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
     }
   }
 }

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

@@ -1,9 +1,10 @@
 {
   "spacing": {
+    "$type": "dimension",
     "action-row": {
       "gap": {
-        "x": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-x" },
-        "y": { "value": ".5rem", "type": "dimension", "source": "$action-row-gap-y" }
+        "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
+        "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
       }
     }
   }

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

@@ -1,29 +1,31 @@
 {
   "spacing": {
+    "$type": "dimension",
     "alert": {
       "padding": {
-        "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" },
-        "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" }
+        "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
+        "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
       },
-      "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" },
-      "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" },
-      "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" }
+      "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" },
+      "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" },
+      "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" }
     }
   },
   "typography": {
     "alert": {
       "font": {
-        "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" },
-        "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" }
+        "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
+        "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
       },
-      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" }
+      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "size": {
+    "$type": "dimension",
     "alert": {
       "border": {
-        "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" },
-        "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" }
+        "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
+        "width": { "source": "$alert-border-width", "$value": "0" }
       }
     }
   }

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

@@ -1,25 +1,27 @@
 {
   "spacing": {
+    "$type": "dimension",
     "annotation": {
-      "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" },
+      "padding": { "source": "$annotation-padding", "$value": ".5rem" },
       "arrow-side": {
-        "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" }
+        "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
       }
     }
   },
   "typography": {
     "annotation": {
-      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" },
-      "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" }
+      "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}", "$type": "dimension" },
+      "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "$type": "number" }
     }
   },
   "size": {
+    "$type": "dimension",
     "annotation": {
       "arrow-border": {
-        "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" }
+        "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
       },
-      "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" },
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" }
+      "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
+      "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
     }
   }
 }

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

@@ -1,16 +1,16 @@
 {
   "size": {
     "avatar": {
-      "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" },
-      "xs": { "value": "1.5rem", "type": "dimension", "source": "$avatar-size-xs" },
-      "sm": { "value": "2.25rem", "type": "dimension", "source": "$avatar-size-sm" },
-      "lg": { "value": "4rem", "type": "dimension", "source": "$avatar-size-lg" },
-      "xl": { "value": "6rem", "type": "dimension", "source": "$avatar-size-xl" },
-      "xxl": { "value": "11.5rem", "type": "dimension", "source": "$avatar-size-xxl" },
-      "huge": { "value": "18.75rem", "type": "dimension", "source": "$avatar-size-huge" },
+      "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" },
+      "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" },
+      "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" },
+      "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" },
+      "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" },
+      "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" },
+      "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" },
       "border": {
-        "base": { "value": "1px", "type": "dimension", "source": "$avatar-border" },
-        "radius": { "value": "100%", "type": "percentage", "source": "$avatar-border-radius" }
+        "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
+        "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
       }
     }
   }

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

@@ -1,10 +1,11 @@
 {
   "spacing": {
+    "$type": "dimension",
     "avatar-button": {
       "padding-left": {
-        "base": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left" },
-        "sm": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-sm" },
-        "lg": { "value": ".25em", "type": "dimension", "source": "$avatar-button-padding-left-lg" }
+        "base": { "source": "$avatar-button-padding-left", "$value": ".25em" },
+        "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" },
+        "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" }
       }
     }
   }

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

@@ -1,33 +1,36 @@
 {
   "spacing": {
+    "$type": "dimension",
     "badge": {
       "padding": {
         "x": {
-          "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" },
-          "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" }
+          "base": { "source": "$badge-padding-x", "$value": ".5rem" },
+          "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
         },
-        "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" }
+        "y": { "source": "$badge-padding-y", "$value": ".125rem" }
       }
     }
   },
   "typography": {
     "badge": {
       "font": {
-        "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" },
-        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" }
+        "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" },
+        "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "badge": {
       "border-radius": {
-        "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" },
-        "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" }
+        "base": { "source": "$badge-border-radius", "$value": ".25rem" },
+        "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
       },
-      "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" }
+      "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
     }
   },
   "transition": {
-    "badge": { "value": "none", "type": "transition", "source": "$badge-transition" }
+    "$type": "transition",
+    "badge": { "source": "$badge-transition", "$value": "none" }
   }
 }

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

@@ -1,22 +1,24 @@
 {
   "spacing": {
+    "$type": "dimension",
     "breadcrumb": {
       "margin": {
-        "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" }
+        "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "breadcrumb": {
       "border": {
         "radius": {
-          "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" }
+          "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
         },
         "axis": {
-          "x-focus": { "value": ".25rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-x" },
-          "y-focus": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-border-focus-axis-y" }
+          "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
+          "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
         },
-        "width-focus": { "value": ".0625rem", "type": "dimension", "source": "$breadcrumb-border-focus-width" }
+        "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
       }
     }
   }

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

@@ -1,10 +1,11 @@
 {
   "spacing": {
+    "$type": "dimension",
     "bubble": {
       "expandable-padding": {
-        "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" },
-        "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" }
+        "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
+        "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" }
       }
-    } 
+    }
   }
 }

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

@@ -1,42 +1,31 @@
 {
   "spacing": {
+    "$type": "dimension",
     "btn": {
       "padding": {
         "y": {
-          "base": {
-            "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y"
-          },
-          "lg": {
-            "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg"
-          },
-          "sm": {
-            "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm"
-          }
+          "base": { "source": "$btn-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+          "lg": { "source": "$btn-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" },
+          "sm": { "source": "$btn-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" }
         },
         "x": {
-          "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" },
-          "lg": {
-            "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg"
-          },
-          "sm": {
-            "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm"
-          }
+          "base": { "source": "$btn-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+          "lg": { "source": "$btn-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" },
+          "sm": { "source": "$btn-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" }
         }
       },
       "block": {
-        "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
+        "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" }
       },
       "focus": {
-        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
+        "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" },
         "border-gap": {
-          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
-          "type": "dimension",
-          "source": "$btn-focus-border-gap"
+          "source": "$btn-focus-border-gap",
+          "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})"
         },
         "distance-to-border": {
-          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
-          "type": "dimension",
-          "source": "$btn-focus-distance-to-border"
+          "source": "$btn-focus-distance-to-border",
+          "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})"
         }
       }
     }
@@ -44,62 +33,49 @@
   "typography": {
     "btn": {
       "font": {
-        "family": {
-          "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family"
-        },
+        "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
         "size": {
-          "base": {
-            "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size"
-          },
-          "sm": {
-            "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm"
-          },
-          "lg": {
-            "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg"
-          }
+          "$type": "dimension",
+          "base": { "source": "$btn-font-size", "$value": "{typography.input.btn.font.size.base}" },
+          "sm": { "source": "$btn-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+          "lg": { "source": "$btn-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
         },
-        "weight": {
-          "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight"
-        }
+        "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }
       },
       "line-height": {
-        "base": {
-          "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height"
-        },
-        "sm": {
-          "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm"
-        },
-        "lg": {
-          "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg"
-        }
+        "$type": "number",
+        "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" },
+        "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+        "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "btn": {
       "border": {
-        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" },
+        "width": { "source": "$btn-border-width", "$value": "{size.input.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" }
+          "base": { "source": "$btn-border-radius", "$value": "{size.border.radius.base}" },
+          "lg": { "source": "$btn-border-radius-lg", "$value": "{size.border.radius.lg}" },
+          "sm": { "source": "$btn-border-radius-sm", "$value": "{size.border.radius.sm}" }
         }
       },
       "focus": {
-        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
+        "width": { "source": "$btn-focus-width", "$value": "2px" },
         "border-radius": {
           "base": {
-            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
-            "type": "dimension",
-            "source": "$btn-focus-border-radius"
+            "source": "$btn-focus-border-radius",
+            "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})"
           },
-          "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": { "source": "$btn-focus-border-radius-lg", "$value": "{size.btn.focus.border-radius.base}" },
+          "sm": { "source": "$btn-focus-border-radius-sm", "$value": "{size.btn.border.radius.base}" }
         }
       }
     }
   },
   "transition": {
-    "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
+    "$type": "transition",
+    "btn": { "source": "$btn-transition", "$value": "none" }
   }
 }