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

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

@@ -3,48 +3,48 @@
     "input": {
       "btn": {
         "font": {
-          "family": { "value": "inherit", "type": "fontFamily", "source": "$input-btn-font-family" },
+          "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" },
           "size": {
-            "base": { "value": "1.125rem", "type": "dimension", "source": "$input-btn-font-size" },
-            "sm": { "value": ".875rem", "type": "dimension", "source": "$input-btn-font-size-sm" },
-            "lg": { "value": "1.325rem", "type": "dimension", "source": "$input-btn-font-size-lg" }
+            "$type": "dimension",
+            "base": { "source": "$input-btn-font-size", "$value": "1.125rem" },
+            "sm": { "source": "$input-btn-font-size-sm", "$value": ".875rem" },
+            "lg": { "source": "$input-btn-font-size-lg", "$value": "1.325rem" }
           }
         },
         "line-height": {
-          "base": { "value": "1.3333", "type": "dimension", "source": "$input-btn-line-height" },
-          "sm": { "value": "1.4286", "type": "dimension", "source": "$input-btn-line-height-sm" },
-          "lg": {
-            "value": "{typography.line-height.lg}", "type": "dimension", "source": "$input-btn-line-height-lg"
-          }
+          "$type": "number",
+          "base": { "source": "$input-btn-line-height", "$value": "1.3333" },
+          "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" },
+          "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" }
         }
       }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "input": {
       "btn": {
         "padding": {
-          "y": { "value": ".5625rem", "type": "dimension", "source": "$input-btn-padding-y" },
-          "x": { "value": "1rem", "type": "dimension", "source": "$input-btn-padding-x" },
+          "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" },
+          "x": { "source": "$input-btn-padding-x", "$value": "1rem" },
           "sm": {
-            "y": { "value": ".4375rem", "type": "dimension", "source": "$input-btn-padding-y-sm" },
-            "x": { "value": ".75rem", "type": "dimension", "source": "$input-btn-padding-x-sm" }
+            "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" },
+            "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" }
           },
           "lg": {
-            "y": { "value": ".6875rem", "type": "dimension", "source": "$input-btn-padding-y-lg" },
-            "x": { "value": "1.25rem", "type": "dimension", "source": "$input-btn-padding-x-lg" }
+            "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" },
+            "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" }
           }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "input": {
       "btn": {
-        "border-width": {
-          "value": "{size.border.width}", "type": "dimension", "source": "$input-btn-border-width"
-        },
-        "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" }
+        "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" },
+        "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" }
       }
     }
   }

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

@@ -2,26 +2,27 @@
   "typography": {
     "link": {
       "decoration": {
-        "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" },
-        "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" },
+        "$type": "textDecoration",
+        "base": { "source": "$link-decoration", "$value": "none" },
+        "hover": { "source": "$link-hover-decoration", "$value": "underline" },
         "inline": {
-          "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" }
+          "base": { "source": "$inline-link-decoration", "$value": "underline" },
+          "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" }
         },
         "muted": {
-          "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" },
+          "base": { "source": "$muted-link-decoration", "$value": "none" },
+          "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" },
           "inline": {
-            "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" },
-            "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" }
+            "base": { "source": "$muted-inline-link-decoration", "$value": "underline" },
+            "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" }
           }
         },
         "brand": {
-          "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" },
-          "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" },
+          "base": { "source": "$brand-link-decoration", "$value": "none" },
+          "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" },
           "inline": {
-            "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" },
-            "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" }
+            "base": { "source": "$brand-inline-link-decoration", "$value": "underline" },
+            "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" }
           }
         }
       }

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

@@ -1,25 +1,28 @@
 {
   "typography": {
+    "$type": "fontWeight",
     "dt": {
-      "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" }
+      "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" }
     }
   },
   "spacing": {
+    "$type": "dimension",
     "list": {
-      "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" },
+      "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" },
       "group-item": {
         "padding": {
-          "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" },
-          "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" }
+          "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" },
+          "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" }
         }
       }
     }
   },
   "size": {
+    "$type": "dimension",
     "list-group": {
       "border": {
-        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" },
-        "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" }
+        "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" },
+        "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" }
       }
     }
   }

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

@@ -1,24 +1,18 @@
 {
   "spacing": {
+    "$type": "dimension",
     "paragraph": {
-      "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" }
+      "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" }
     },
-    "mark-padding": { "value": ".2em", "type": "dimension", "source": "$mark-padding" }
+    "mark-padding": { "source": "$mark-padding", "$value": ".2em" }
   },
   "typography": {
+    "$type": "dimension",
     "blockquote": {
       "small": {
-        "font-size": {
-          "value": "{typography.font.size.small.base}",
-          "type": "dimension",
-          "source": "$blockquote-small-font-size"
-        }
+        "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" }
       },
-      "font-size": {
-        "value": "calc({typography.font.size.base} * 1.25)",
-        "type": "dimension",
-        "source": "$blockquote-font-size"
-      }
+      "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" }
     }
   }
 }

package/tokens/src/core/global/breakpoints.json

@@ -1,12 +1,31 @@
 {
   "size": {
+    "$type": "dimension",
     "breakpoint": {
-      "xs": { "value": "0", "type": "dimension", "description": "Starting breakpoint for portrait phones." },
-      "sm": { "value": "576px", "type": "dimension", "description": "Starting breakpoint for landscape phones." },
-      "md": { "value": "768px", "type": "dimension", "description": "Starting breakpoint for tablets." },
-      "lg": { "value": "992px", "type": "dimension", "description": "Starting breakpoint for desktops." },
-      "xl": { "value": "1200px", "type": "dimension", "description": "Starting breakpoint for large desktops." },
-      "xxl": { "value": "1400px", "type": "dimension", "description": "Starting breakpoint for large desktops, more than 1400px." }
+      "xs": {
+        "$value": "0px",
+        "$description": "Starting breakpoint for portrait phones."
+      },
+      "sm": {
+        "$value": "576px",
+        "$description": "Starting breakpoint for landscape phones."
+      },
+      "md": {
+        "$value": "768px",
+        "$description": "Starting breakpoint for tablets."
+      },
+      "lg": {
+        "$value": "992px",
+        "$description": "Starting breakpoint for desktops."
+      },
+      "xl": {
+        "$value": "1200px",
+        "$description": "Starting breakpoint for large desktops."
+      },
+      "xxl": {
+        "$value": "1400px",
+        "$description": "Starting breakpoint for large desktops, more than 1400px."
+      }
     }
   }
 }

package/tokens/src/core/global/elevation.json

@@ -1,19 +1,61 @@
 {
   "elevation": {
+    "$type": "number",
     "zindex": {
-      "0": { "value": 0, "type": "ratio", "description": "z-index of level 0." },
-      "200": { "value": 200, "type": "ratio", "description": "z-index of level 200." },
-      "400": { "value": 400, "type": "ratio", "description": "z-index of level 400." },
-      "600": { "value": 600, "type": "ratio", "description": "z-index of level 600." },
-      "800": { "value": 800, "type": "ratio", "description": "z-index of level 800." },
-      "1000": { "value": 1000, "type": "ratio", "description": "z-index of level 1000." },
-      "1200": { "value": 1200, "type": "ratio", "description": "z-index of level 1200." },
-      "1400": { "value": 1400, "type": "ratio", "description": "z-index of level 1400." },
-      "1600": { "value": 1600, "type": "ratio", "description": "z-index of level 1600." },
-      "1800": { "value": 1800, "type": "ratio", "description": "z-index of level 1800." },
-      "2000": { "value": 2000, "type": "ratio", "description": "z-index of level 2000." },
-      "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio", "description": "z-index for sticky element." },
-      "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio", "description": "z-index of for fixed element." }
+      "0": {
+        "$value": 0,
+        "$description": "z-index of level 0."
+      },
+      "200": {
+        "$value": 200,
+        "$description": "z-index of level 200."
+      },
+      "400": {
+        "$value": 400,
+        "$description": "z-index of level 400."
+      },
+      "600": {
+        "$value": 600,
+        "$description": "z-index of level 600."
+      },
+      "800": {
+        "$value": 800,
+        "$description": "z-index of level 800."
+      },
+      "1000": {
+        "$value": 1000,
+        "$description": "z-index of level 1000."
+      },
+      "1200": {
+        "$value": 1200,
+        "$description": "z-index of level 1200."
+      },
+      "1400": {
+        "$value": 1400,
+        "$description": "z-index of level 1400."
+      },
+      "1600": {
+        "$value": 1600,
+        "$description": "z-index of level 1600."
+      },
+      "1800": {
+        "$value": 1800,
+        "$description": "z-index of level 1800."
+      },
+      "2000": {
+        "$value": 2000,
+        "$description": "z-index of level 2000."
+      },
+      "sticky": {
+        "source": "$zindex-sticky",
+        "$value": 1020,
+        "$description": "z-index for sticky element."
+      },
+      "fixed": {
+        "source": "$zindex-fixed",
+        "$value": 1030,
+        "$description": "z-index of for fixed element."
+      }
     }
   }
 }

package/tokens/src/core/global/other.json

@@ -1,4 +1,8 @@
 {
   "yiq-contrasted-threshold": 128,
-  "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" }
+  "theme-interval": {
+    "$type": "percentage",
+    "source": "$theme-color-interval",
+    "$value": "8%"
+  }
 }

package/tokens/src/core/global/spacing.json

@@ -1,36 +1,89 @@
 {
   "spacing": {
+    "$type": "dimension",
     "spacer": {
-      "base": { "value": "1rem", "type": "dimension", "source": "$spacer", "description": "Basic space value" },
-      "0": { "value": "0", "type": "dimension", "description": "Space value of level 0" },
-      "1": { "value": "calc({spacing.spacer.base} * .25)", "type": "dimension", "description": "Space value of level 1" },
-      "1,5": { "value": "calc({spacing.spacer.base} * .375)", "type": "dimension", "description": "Space value of level 1.5" },
-      "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
-      "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
-      "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" },
-      "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
-      "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
-      "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" },
-      "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
+      "0": {
+        "$value": "0",
+        "$description": "Space value of level 0"
+      },
+      "1": {
+        "$value": "calc({spacing.spacer.base} * .25)",
+        "$description": "Space value of level 1"
+      },
+      "2": {
+        "$value": "calc({spacing.spacer.base} * .5)",
+        "$description": "Space value of level 2"
+      },
+      "3": {
+        "$value": "{spacing.spacer.base}",
+        "$description": "Space value of level 3"
+      },
+      "4": {
+        "$value": "calc({spacing.spacer.base} * 1.5)",
+        "$description": "Space value of level 4"
+      },
+      "5": {
+        "$value": "calc({spacing.spacer.base} * 3)",
+        "$description": "Space value of level 5"
+      },
+      "6": {
+        "$value": "calc({spacing.spacer.base} * 5)",
+        "$description": "Space value of level 6"
+      },
+      "base": {
+        "source": "$spacer",
+        "$value": "1rem",
+        "$description": "Basic space value"
+      },
+      "1.5": {
+        "$value": "calc({spacing.spacer.base} * .375)",
+        "$description": "Space value of level 1.5"
+      },
+      "2.5": {
+        "$value": "calc({spacing.spacer.base} * .75)",
+        "$description": "Space value of level 2.5"
+      },
+      "3.5": {
+        "$value": "calc({spacing.spacer.base} * 1.25)",
+        "$description": "Space value of level 3.5"
+      },
+      "4.5": {
+        "$value": "calc({spacing.spacer.base} * 2)",
+        "$description": "Space value of level 4.5"
+      },
+      "5.5": {
+        "$value": "calc({spacing.spacer.base} * 4)",
+        "$description": "Space value of level 5.5"
+      }
     },
     "label": {
       "margin-bottom": {
-        "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label."
+        "source": "$label-margin-bottom",
+        "$value": ".5rem",
+        "$description": "Margin bottom for label."
       }
     },
     "table": {
       "cell": {
         "padding": {
-          "base": { "value": ".75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." },
-          "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." }
+          "base": {
+            "source": "$table-cell-padding",
+            "$value": ".75rem",
+            "$description": "Padding for tables."
+          },
+          "sm": {
+            "source": "$table-cell-padding-sm",
+            "$value": ".3rem",
+            "$description": "Padding sm for tables."
+          }
         }
       }
     },
     "grid": {
       "gutter-width": {
-        "value": "24px", "type": "dimension", "source": "$grid-gutter-width", "description": "Grid gutter width value."
+        "source": "$grid-gutter-width",
+        "$value": "24px",
+        "$description": "Grid gutter width value."
       }
     }
   }

package/tokens/src/core/global/transition.json

@@ -1,13 +1,50 @@
 {
   "transition": {
-    "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" },
-    "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" },
+    "$type": "transition",
+    "base": {
+      "source": "$transition-base",
+      "$value": {
+        "property": "all",
+        "duration": ".2s",
+        "timing-function": "ease-in-out",
+        "delay": "0s",
+        "behavior": "normal"
+      },
+      "$description": "Generic transition for any property change"
+    },
+    "fade": {
+      "source": "$transition-fade",
+      "$value": {
+        "property": "opacity",
+        "duration": ".15s",
+        "timing-function": "linear",
+        "delay": "0s",
+        "behavior": "normal"
+      },
+      "$description": "Opacity transition that takes 150ms"
+    },
     "collapse": {
       "height": {
-        "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms"
+        "source": "$transition-collapse",
+        "$value": {
+          "property": "height",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
+        "$description": "Collapse transition for height that takes 350ms"
       },
       "width": {
-        "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms"
+        "source": "$transition-collapse-width",
+        "$value": {
+          "property": "width",
+          "duration": ".35s",
+          "timing-function": "ease",
+          "delay": "0s",
+          "behavior": "normal"
+        },
+        "$description": "Collapse transition for width that takes 350ms"
       }
     }
   }