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

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

@@ -2,225 +2,178 @@
   "size": {
     "form": {
       "input": {
+        "$type": "dimension",
         "height": {
           "base": {
-            "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height"
+            "source": "$input-height",
+            "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})"
           },
           "sm": {
-            "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height-sm"
+            "source": "$input-height-sm",
+            "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})"
           },
           "lg": {
-            "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
-            "type": "dimension",
-            "source": "$input-height-lg"
+            "source": "$input-height-lg",
+            "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})"
           },
           "inner": {
             "base": {
-              "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
-              "type": "dimension",
-              "source": "$input-height-inner"
+              "source": "$input-height-inner",
+              "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)"
             },
             "half": {
-              "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
-              "type": "dimension",
-              "source": "$input-height-inner-half"
+              "source": "$input-height-inner-half",
+              "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})"
             },
             "quarter": {
-              "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
-              "type": "dimension",
-              "source": "$input-height-inner-quarter"
+              "source": "$input-height-inner-quarter",
+              "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))"
             }
           },
-          "border": {
-            "value": "calc({size.form.input.width.border} * 2)",
-            "type": "dimension",
-            "source": "$input-height-border"
-          }
+          "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" }
         },
         "width": {
-          "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" },
-          "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" },
-          "border": {
-            "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width"
-          }
+          "hover": { "source": "$input-hover-width", "$value": "0.063rem" },
+          "focus": { "source": "$input-focus-width", "$value": "0.063rem" },
+          "border": { "source": "$input-border-width", "$value": "{size.input.btn.border-width}" }
         },
         "radius": {
           "border": {
-            "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" },
-            "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" },
-            "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" }
+            "base": { "source": "$input-border-radius", "$value": "{size.border.radius.base}" },
+            "lg": { "source": "$input-border-radius-lg", "$value": "{size.border.radius.lg}" },
+            "sm": { "source": "$input-border-radius-sm", "$value": "{size.border.radius.sm}" }
           }
         }
       },
       "control": {
         "indicator": {
-          "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
-          "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
+          "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" },
+          "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" },
           "border": {
-            "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" }
+            "$type": "dimension",
+            "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" }
           }
         },
         "switch": {
-          "width": {
-            "value": "calc({size.form.control.indicator.base} * 1.75)",
-            "type": "dimension",
-            "source": "$custom-switch-width"
-          },
+          "$type": "dimension",
+          "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" },
           "indicator": {
             "base": {
-              "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
-              "type": "dimension",
-              "source": "$custom-switch-indicator-size"
+              "source": "$custom-switch-indicator-size",
+              "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)"
             },
             "border": {
               "radius": {
-                "value": "calc({size.form.control.indicator.base} / 2)",
-                "type": "dimension",
-                "source": "$custom-switch-indicator-border-radius"
+                "source": "$custom-switch-indicator-border-radius",
+                "$value": "calc({size.form.control.indicator.base} / 2)"
               }
             }
           }
         },
         "select": {
+          "$type": "dimension",
           "height": {
-            "base": {
-              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height"
-            },
-            "lg": {
-              "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg"
-            },
-            "sm": {
-              "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm"
-            }
+            "base": { "source": "$custom-select-height", "$value": "{size.form.input.height.base}" },
+            "lg": { "source": "$custom-select-height-lg", "$value": "{size.form.input.height.lg}" },
+            "sm": { "source": "$custom-select-height-sm", "$value": "{size.form.input.height.sm}" }
           },
           "feedback": {
             "icon": {
-              "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
-              "type": "dimension",
-              "source": "$custom-select-feedback-icon-size"
+              "source": "$custom-select-feedback-icon-size",
+              "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}"
             }
           },
           "border": {
             "width": {
-              "base": {
-                "value": "{size.form.input.width.border}",
-                "type": "dimension",
-                "source": "$custom-select-border-width"
-              }
+              "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" }
             },
-            "radius": {
-              "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius"
-            }
+            "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" }
           }
         },
         "range": {
           "track": {
-            "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" },
-            "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" },
+            "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" },
+            "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" },
             "border": {
-              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" }
+              "$type": "dimension",
+              "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" }
             }
           },
           "thumb": {
-            "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" },
-            "height": {
-              "value": "{size.form.control.range.thumb.width}",
-              "type": "dimension",
-              "source": "$custom-range-thumb-height"
-            },
+            "$type": "dimension",
+            "width": { "source": "$custom-range-thumb-width", "$value": "1rem" },
+            "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" },
             "border": {
-              "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" },
-              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" }
+              "base": { "source": "$custom-range-thumb-border", "$value": "0" },
+              "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" }
             },
             "focus": {
-              "width": {
-                "value": "{size.form.input.width.focus}",
-                "type": "dimension",
-                "source": "$custom-range-thumb-focus-box-shadow-width"
-              }
+              "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" }
             }
           }
         },
         "file": {
-          "width": {
-            "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width"
-          },
+          "$type": "dimension",
+          "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" },
           "height": {
-            "base": {
-              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height"
-            },
-            "inner": {
-              "value": "{size.form.input.height.inner.base}",
-              "type": "dimension",
-              "source": "$custom-file-height-inner"
-            }
+            "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" },
+            "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" }
           },
           "border": {
-            "radius": {
-              "value": "{size.form.input.radius.border.base}",
-              "type": "dimension",
-              "source": "$custom-file-border-radius"
-            }
+            "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" }
           }
         },
         "icon": {
-          "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" }
+          "$type": "dimension",
+          "width": { "source": "$form-control-icon-width", "$value": "2rem" }
         },
         "border": {
           "checkbox": {
+            "$type": "dimension",
             "indicator": {
-              "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" }
+              "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" }
             }
           },
           "radio": {
+            "$type": "percentage",
             "indicator": {
-              "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" }
+              "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" }
             }
           }
         }
       },
       "grid": {
-        "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" }
+        "$type": "dimension",
+        "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" }
       },
       "autosuggest": {
+        "$type": "dimension",
         "icon": {
-          "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" },
-          "height": {
-            "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height"
-          }
+          "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" },
+          "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" }
         },
         "spinner": {
-          "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" },
-          "height": {
-            "value": "{size.form.autosuggest.spinner.width}",
-            "type": "dimension",
-            "source": "$form-autosuggest-spinner-height"
-          }
+          "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" },
+          "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" }
         },
         "border": {
-          "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" }
+          "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" }
         }
       },
       "border": {
+        "$type": "dimension",
         "radius": {
           "check": {
-            "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" }
+            "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" }
           },
-          "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" }
+          "width": { "source": "$form-check-border-width", "$value": ".125rem" }
         }
       },
       "feedback": {
+        "$type": "dimension",
         "tooltip": {
           "border": {
-            "radius": {
-              "value": "{size.border.radius.base}",
-              "type": "dimension",
-              "source": "$form-feedback-tooltip-border-radius"
-            }
+            "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" }
           }
         }
       }

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

@@ -1,152 +1,108 @@
 {
   "spacing": {
+    "$type": "dimension",
     "form": {
       "input": {
         "padding": {
           "y": {
-            "base": {
-              "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y"
-            },
-            "sm": {
-              "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm"
-            },
-            "lg": {
-              "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg"
-            }
+            "base": { "source": "$input-padding-y", "$value": "{spacing.input.btn.padding.y}" },
+            "sm": { "source": "$input-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" },
+            "lg": { "source": "$input-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" }
           },
           "x": {
-            "base": {
-              "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x"
-            },
-            "sm": {
-              "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm"
-            },
-            "lg": {
-              "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg"
-            }
+            "base": { "source": "$input-padding-x", "$value": "{spacing.input.btn.padding.x}" },
+            "sm": { "source": "$input-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" },
+            "lg": { "source": "$input-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" }
           }
         },
         "check": {
-          "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" },
+          "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" },
           "margin": {
             "x": {
-              "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" },
-              "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" }
+              "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" },
+              "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" }
             },
-            "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" }
+            "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" }
           }
         }
       },
       "text": {
         "margin": {
-          "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" }
+          "top": { "source": "$form-text-margin-top", "$value": ".25rem" }
         }
       },
       "check": {
         "inline": {
           "margin": {
-            "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" }
+            "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" }
           }
         },
         "position": {
-          "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" }
+          "axis": { "source": "$form-check-position-axis", "$value": ".375rem" }
         }
       },
       "group": {
         "margin": {
-          "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" }
+          "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" }
         }
       },
       "control": {
-        "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" },
+        "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" },
         "spacer": {
-          "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" }
+          "x": { "source": "$custom-control-spacer-x", "$value": "1rem" }
         },
         "select": {
           "padding": {
             "y": {
-              "base": {
-                "value": "{spacing.form.input.padding.y.base}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y"
-              },
-              "sm": {
-                "value": "{spacing.form.input.padding.y.sm}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y-sm"
-              },
-              "lg": {
-                "value": "{spacing.form.input.padding.y.lg}",
-                "type": "dimension",
-                "source": "$custom-select-padding-y-lg"
-              }
+              "base": { "source": "$custom-select-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+              "sm": { "source": "$custom-select-padding-y-sm", "$value": "{spacing.form.input.padding.y.sm}" },
+              "lg": { "source": "$custom-select-padding-y-lg", "$value": "{spacing.form.input.padding.y.lg}" }
             },
             "x": {
-              "base": {
-                "value": "{spacing.form.input.padding.x.base}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x"
-              },
-              "sm": {
-                "value": "{spacing.form.input.padding.x.sm}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x-sm"
-              },
-              "lg": {
-                "value": "{spacing.form.input.padding.x.lg}",
-                "type": "dimension",
-                "source": "$custom-select-padding-x-lg"
-              }
+              "base": { "source": "$custom-select-padding-x", "$value": "{spacing.form.input.padding.x.base}" },
+              "sm": { "source": "$custom-select-padding-x-sm", "$value": "{spacing.form.input.padding.x.sm}" },
+              "lg": { "source": "$custom-select-padding-x-lg", "$value": "{spacing.form.input.padding.x.lg}" }
             }
           },
           "indicator": {
-            "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" }
+            "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" }
           },
           "feedback": {
             "icon": {
               "padding": {
                 "right": {
-                  "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
-                  "type": "dimension",
-                  "source": "$custom-select-feedback-icon-padding-right"
+                  "source": "$custom-select-feedback-icon-padding-right",
+                  "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})"
                 }
               },
               "position": {
-                "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
-                "type": "dimension",
-                "source": "$custom-select-feedback-icon-position"
+                "source": "$custom-select-feedback-icon-position",
+                "$value": {
+                  "position-y": "center",
+                  "position-x": "right",
+                  "offset-x": "calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+                  "offset-y": "0"
+                }
               }
             },
             "margin": {
-              "top": {
-                "value": "{spacing.form.text.margin.top}",
-                "type": "dimension",
-                "source": "$form-feedback-margin-top"
-              }
+              "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" }
             },
             "tooltip": {
               "padding": {
-                "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" },
-                "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" }
+                "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" },
+                "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" }
               }
             }
           },
           "icon": {
-            "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" }
+            "padding": { "source": "$select-icon-padding", "$value": ".5625rem" }
           }
         },
         "file": {
           "padding": {
-            "y": {
-              "value": "{spacing.form.input.padding.y.base}",
-              "type": "dimension",
-              "source": "$custom-file-padding-y"
-            },
-            "x": {
-              "value": "{spacing.form.input.padding.x.base}",
-              "type": "dimension",
-              "source": "$custom-file-padding-x"
-            }
+            "y": { "source": "$custom-file-padding-y", "$value": "{spacing.form.input.padding.y.base}" },
+            "x": { "source": "$custom-file-padding-x", "$value": "{spacing.form.input.padding.x.base}" }
           }
         }
       }

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

@@ -1,15 +1,51 @@
 {
   "transition": {
+    "$type": "transition",
     "form": {
       "input": {
-        "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$input-transition"
+        "source": "$input-transition",
+        "$value": [
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       },
-      "control": { 
-        "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$custom-forms-transition" 
+      "control": {
+        "source": "$custom-forms-transition",
+        "$value": [
+          {
+            "property": "background-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "border-color",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          },
+          {
+            "property": "box-shadow",
+            "duration": ".15s",
+            "timing-function": "ease-in-out",
+            "delay": "0s",
+            "behavior": "normal"
+          }
+        ]
       }
     }
   }