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

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

@@ -3,118 +3,54 @@
     "form": {
       "input": {
         "font": {
-          "family": {
-            "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family"
-          },
+          "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" },
           "size": {
-            "base": {
-              "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size"
-            },
-            "sm": {
-              "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm"
-            },
-            "lg": {
-              "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg"
-            }
+            "$type": "dimension",
+            "base": { "source": "$input-font-size", "$value": "{typography.input.btn.font.size.base}" },
+            "sm": { "source": "$input-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" },
+            "lg": { "source": "$input-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" }
           },
-          "weight": {
-            "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight"
-          }
+          "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" }
         },
         "line-height": {
-          "base": {
-            "value": "{typography.input.btn.line-height.base}",
-            "type": "dimension",
-            "source": "$input-line-height"
-          },
-          "sm": {
-            "value": "{typography.input.btn.line-height.sm}",
-            "type": "dimension",
-            "source": "$input-line-height-sm"
-          },
-          "lg": {
-            "value": "{typography.input.btn.line-height.lg}",
-            "type": "dimension",
-            "source": "$input-line-height-lg"
-          }
+          "$type": "number",
+          "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" },
+          "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" },
+          "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" }
         }
       },
       "control": {
         "select": {
           "font": {
-            "family": {
-              "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-select-font-family"
-            },
+            "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
             "size": {
-              "base": {
-                "value": "{typography.form.input.font.size.base}",
-                "type": "dimension",
-                "source": "$custom-select-font-size"
-              },
-              "sm": {
-                "value": "{typography.form.input.font.size.sm}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-sm"
-              },
-              "lg": {
-                "value": "{typography.form.input.font.size.lg}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-lg"
-              }
+              "$type": "dimension",
+              "base": { "source": "$custom-select-font-size", "$value": "{typography.form.input.font.size.base}" },
+              "sm": { "source": "$custom-select-font-size-sm", "$value": "{typography.form.input.font.size.sm}" },
+              "lg": { "source": "$custom-select-font-size-lg", "$value": "{typography.form.input.font.size.lg}" }
             },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-select-font-weight"
-            }
+            "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
           },
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-select-line-height"
-          }
+          "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }
         },
         "file": {
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-file-line-height"
-          },
+          "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" },
           "font": {
-            "family": { "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-file-font-family" },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-file-font-weight"
-            }
+            "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" },
+            "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" }
           }
         }
       },
       "feedback": {
+        "$type": "dimension",
         "font": {
-          "size": {
-            "value": "{typography.font.size.small.base}",
-            "type": "dimension",
-            "source": "$form-feedback-font-size"
-          }
+          "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" }
         },
         "tooltip": {
           "font": {
-            "size": {
-              "value": "{typography.font.size.sm}",
-              "type": "dimension",
-              "source": "$form-feedback-tooltip-font-size"
-            }
+            "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" }
           },
-          "line-height": {
-            "value": "{typography.line-height.base}",
-            "type": "dimension",
-            "source": "$form-feedback-tooltip-line-height"
-          }
+          "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" }
         }
       }
     }

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

@@ -1,11 +1,12 @@
 {
   "size": {
+    "$type": "dimension",
     "icon": {
-      "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" },
-      "xs": { "value": "1rem", "type": "dimension", "source": "$icon-xs" },
-      "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" },
-      "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" },
-      "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" }
+      "inline": { "source": "$icon-inline", "$value": ".8em" },
+      "xs": { "source": "$icon-xs", "$value": "1rem" },
+      "sm": { "source": "$icon-sm", "$value": "1.25rem" },
+      "md": { "source": "$icon-md", "$value": "1.5rem" },
+      "lg": { "source": "$icon-lg", "$value": "1.75rem" }
     }
   }
 }

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

@@ -1,14 +1,11 @@
 {
   "size": {
+    "$type": "dimension",
     "icon-button": {
       "diameter": {
-        "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
-        "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
-        "inline": {
-          "value": "calc({typography.line-height.base} * 1em + .1em)",
-          "type": "dimension",
-          "source": "$btn-icon-diameter-inline"
-        }
+        "md": { "source": "$btn-icon-diameter-md", "$value": "2.75rem" },
+        "sm": { "source": "$btn-icon-diameter-sm", "$value": "2.25rem" },
+        "inline": { "source": "$btn-icon-diameter-inline", "$value": "calc({typography.line-height.base} * 1em + .1em)" }
       }
     }
   }

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

@@ -1,27 +1,28 @@
 {
   "typography": {
+    "$type": "percentage",
     "image": {
       "figure-caption": {
-        "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" }
+        "font-size": { "source": "$figure-caption-font-size", "$value": "90%" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "image": {
       "thumbnail": {
         "border": {
-          "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" },
-          "radius": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius"
-          }
+          "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" },
+          "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "image": {
       "thumbnail": {
-        "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" }
+        "padding": { "source": "$thumbnail-padding", "$value": ".25rem" }
       }
     }
   }

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

@@ -1,15 +1,16 @@
 {
   "spacing": {
+    "$type": "dimension",
     "menu": {
       "item": {
         "padding": {
-          "x": { "value": "{spacing.btn.padding.x.base}", "type": "dimension", "source": "$menu-item-padding-x" },
-          "y": { "value": "{spacing.btn.padding.y.base}", "type": "dimension", "source": "$menu-item-padding-y" }
+          "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" },
+          "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" }
         },
         "icon": {
           "margin": {
-            "left": { "value": ".25em", "type": "dimension", "source": "$menu-item-icon-margin-left" },
-            "right": { "value": "{spacing.menu.item.icon.margin.left}", "type": "dimension", "source": "$menu-item-icon-margin-right" }
+            "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" },
+            "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" }
           }
         }
       }
@@ -20,27 +21,28 @@
       "select": {
         "btn-link": {
           "text-decoration": {
-            "line": { "value": "underline", "type": "textDecoration", "source": "$menu-select-btn-link-text-decoration-line" },
-            "thickness": { "value": ".125rem", "type": "dimension", "source": "$menu-select-btn-link-text-decoration-thickness" }
+            "line": { "source": "$menu-select-btn-link-text-decoration-line", "$value": "underline", "$type": "textDecoration" },
+            "thickness": { "source": "$menu-select-btn-link-text-decoration-thickness", "$value": ".125rem", "$type": "dimension" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "menu": {
       "base": {
-        "border-radius": { "value": ".25em", "type": "dimension", "source": "$menu-border-radius" },
-        "max-height": { "value": "16.813rem", "type": "dimension", "source": "$menu-max-height" }
+        "border-radius": { "source": "$menu-border-radius", "$value": ".25em" },
+        "max-height": { "source": "$menu-max-height", "$value": "16.813rem" }
       },
       "item": {
-        "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" },
+        "height": { "source": "$menu-item-height", "$value": "3rem" },
         "width": {
-          "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" },
-          "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" }
+          "base": { "source": "$menu-item-width", "$value": "19rem" },
+          "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" }
         },
         "border": {
-          "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-border-width" }
+          "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" }
         }
       }
     }

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

@@ -1,47 +1,52 @@
 {
   "elevation": {
+    "$type": "number",
     "modal": {
-      "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" },
-      "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" }
+      "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" },
+      "zindex": { "source": "$zindex-modal", "$value": "1050" }
     }
   },
   "size": {
+    "$type": "dimension",
     "modal": {
-      "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" },
-      "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" },
-      "md": { "value": "500px", "type": "dimension", "source": "$modal-md" },
-      "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" },
+      "xl": { "source": "$modal-xl", "$value": "1140px" },
+      "lg": { "source": "$modal-lg", "$value": "800px" },
+      "md": { "source": "$modal-md", "$value": "500px" },
+      "sm": { "source": "$modal-sm", "$value": "400px" },
       "content-border": {
-        "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" },
-        "radius": {
-          "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius"
-        }
+        "width": { "source": "$modal-content-border-width", "$value": "0px" },
+        "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "modal": {
       "inner-padding": {
-        "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" },
-        "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" }
+        "base": { "source": "$modal-inner-padding", "$value": "1.5rem" },
+        "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" }
       },
       "footer-padding": {
         "base": {
-          "value": "{spacing.modal.footer-padding.y} 1.5rem",
-          "type": "dimension",
-          "source": "$modal-footer-padding"
+          "source": "$modal-footer-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.footer-padding.y}"
+          }
         },
-        "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" }
+        "y": { "source": "$modal-footer-padding-y", "$value": "1rem" }
       },
       "header-padding": {
         "base": {
-          "value": "{spacing.modal.header-padding.y} 1.5rem",
-          "type": "dimension",
-          "source": "$modal-header-padding"
+          "source": "$modal-header-padding",
+          "$value": {
+            "x": "1.5rem",
+            "y": "{spacing.modal.header-padding.y}"
+          }
         },
-        "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" }
+        "y": { "source": "$modal-header-padding-y", "$value": "1rem" }
       },
-      "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" }
+      "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" }
     }
   }
 }

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

@@ -2,50 +2,48 @@
   "typography": {
     "nav": {
       "link": {
-        "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" },
-        "text-decoration": { "value": "none", "type": "textDecoration" }
+        "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" },
+        "text-decoration": { "$value": "none", "$type": "textDecoration" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "nav": {
       "pills": {
-        "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" },
+        "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" },
         "link": {
-          "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" }
+          "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" }
         },
         "inverse-link": {
-          "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-pills-link-border-width" }
+          "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" }
         }
       },
       "tabs": {
         "link": {
           "border-bottom": {
-            "width": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" }
+            "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" }
           }
         },
         "inverse-link": {
-          "active-border-bottom-width": {
-            "value": "{size.nav.tabs.link.border-bottom.width}",
-            "type": "dimension",
-            "source": "$nav-inverse-tabs-link-active-border-bottom-width"
-          }
+          "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" }
         },
         "border": {
-          "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
-          "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
+          "width": { "source": "$nav-tabs-border-width", "$value": "2px" },
+          "radius": { "source": "$nav-tabs-border-radius", "$value": "0" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "nav": {
       "link": {
         "padding": {
-          "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
+          "y": { "source": "$nav-link-padding-y", "$value": ".5rem" },
+          "x": { "source": "$nav-link-padding-x", "$value": "1rem" }
         },
-        "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+        "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" }
       }
     }
   }

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

@@ -1,69 +1,54 @@
 {
   "spacing": {
+    "$type": "dimension",
     "navbar": {
       "padding": {
-        "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
+        "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" },
         "x": {
-          "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
-          "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
+          "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" },
+          "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" }
         }
       },
       "brand": {
         "padding": {
-          "y": {
-            "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
-            "type": "dimension",
-            "source": "$navbar-brand-padding-y"
-          }
+          "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" }
         }
       },
       "toggler": {
         "padding": {
-          "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
-          "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
+          "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" },
+          "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" }
         }
       }
     }
   },
   "typography": {
+    "$type": "dimension",
     "navbar": {
       "brand": {
-        "font-size": {
-          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
-        }
+        "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" }
       },
       "nav-link": {
-        "height": {
-          "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
-          "type": "dimension",
-          "source": "$nav-link-height"
-        }
+        "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" }
       },
       "toggler": {
-        "font-size": {
-          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
-        }
+        "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "navbar": {
       "nav": {
         "scroll": {
-          "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
+          "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" }
         }
       },
       "brand": {
-        "height": {
-          "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
-          "type": "dimension",
-          "source": "$navbar-brand-height"
-        }
+        "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" }
       },
       "toggler": {
-        "border-radius": {
-          "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
-        }
+        "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" }
       }
     }
   }

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

@@ -2,64 +2,63 @@
   "typography": {
     "pagination": {
       "font-size": {
-        "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" }
+        "$type": "dimension",
+        "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" }
       },
-      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" }
+      "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "pagination": {
       "padding": {
         "y": {
-          "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" },
-          "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" },
-          "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" }
+          "base": { "source": "$pagination-padding-y", "$value": ".625rem" },
+          "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" },
+          "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" }
         },
         "x": {
-          "base": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" },
-          "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
-          "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
+          "base": { "source": "$pagination-padding-x", "$value": "1rem" },
+          "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" },
+          "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "pagination": {
       "icon": {
-        "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" },
-        "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" }
+        "width": { "source": "$pagination-icon-width", "$value": "2.25rem" },
+        "height": { "source": "$pagination-icon-height", "$value": "2.25rem" }
       },
       "secondary": {
         "height": {
-          "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" },
-          "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" }
+          "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" },
+          "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" }
         }
       },
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" },
+        "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" },
         "radius": {
-          "sm": {
-            "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm"
-          },
-          "lg": {
-            "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg"
-          }
+          "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" },
+          "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" }
         }
       },
       "reduced": {
         "dropdown": {
-          "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" },
-          "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" }
+          "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" },
+          "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" }
         }
       },
       "toggle": {
         "border": {
-          "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" },
-          "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" }
+          "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" },
+          "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" }
         }
       },
       "focus": {
-        "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
+        "outline": { "source": "$pagination-focus-outline", "$value": "0" }
       }
     }
   }