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

package/tokens/src/themes/light/components/Form/elevation.json

@@ -1,73 +1,69 @@
 {
   "elevation": {
+    "$type": "shadow",
     "form": {
       "input": {
-        "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
+        "base": { "source": "$input-box-shadow", "$value": "none" },
         "focus": {
-          "value": "0 0 0 1px {color.primary.500}",
-          "type": "shadow",
-          "source": "$input-focus-box-shadow"
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       },
       "control": {
         "indicator": {
-          "base": {
-            "value": "{elevation.form.input.base}",
-            "type": "shadow",
-            "source": "$custom-control-indicator-box-shadow"
-          },
+          "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
           "checked": {
-            "base": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-checked-box-shadow" },
+            "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
             "focus": {
-              "value": "0 0 0 4px rgba(0, 0, 0, .1)",
-              "type": "shadow",
-              "source": "$custom-control-indicator-focus-box-shadow"
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
             }
           },
-          "active": { "value": "none", "type": "shadow", "source": "$custom-control-indicator-active-box-shadow" }
+          "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
         },
         "checkbox": {
           "indicator": {
-            "indeterminate": {
-              "value": "none", "type": "shadow", "source": "$custom-checkbox-indicator-indeterminate-box-shadow"
-            }
+            "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" }
           }
         },
         "range": {
-          "track": {
-            "value": "none",
-            "type": "shadow",
-            "source": "$custom-range-track-box-shadow"
-          },
+          "track": { "source": "$custom-range-track-box-shadow", "$value": "none" },
           "thumb": {
-            "base": {
-              "value": "none", "type": "shadow", "source": "$custom-range-thumb-box-shadow"
-            },
+            "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
             "focus": {
-              "value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}",
-              "type": "shadow",
-              "source": "$custom-range-thumb-focus-box-shadow"
+              "source": "$custom-range-thumb-focus-box-shadow",
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "0",
+                  "offsetX": "0",
+                  "offsetY": ".1rem",
+                  "blur": ".25rem"
+                }
+              ]
             }
           }
         },
         "file": {
-          "base": {
-            "value": "{elevation.form.input.base}", "type": "shadow", "source": "$custom-file-box-shadow"
-          },
-          "focus": {
-            "value": "{elevation.form.input.focus}", "type": "shadow", "source": "$custom-file-focus-box-shadow"
-          }
+          "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" },
+          "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" }
         },
         "select": {
           "border": {
-            "base": {
-              "value": "none", "type": "shadow", "source": "$custom-select-box-shadow"
-            },
-            "focus": {
-              "value": "{elevation.input.btn-focus.box-shadow}",
-              "type": "shadow",
-              "source": "$custom-select-focus-box-shadow"
-            }
+            "base": { "source": "$custom-select-box-shadow", "$value": "none" },
+            "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
           }
         }
       }

package/tokens/src/themes/light/components/Form/other.json

@@ -1,127 +1,130 @@
 {
   "other": {
     "form": {
+      "$type": "number",
       "feedback": {
-        "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" }
+        "tooltip-opacity": {
+          "source": "$form-feedback-tooltip-opacity",
+          "$value": ".9"
+        }
       }
     },
     "content": {
       "form": {
         "control": {
           "checkbox": {
+            "$type": "file",
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.base}'/></svg>\")"
                 },
                 "valid": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.valid}'/></svg>\")"
                 },
                 "invalid": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='{color.form.control.indicator.checked.invalid}'/></svg>\")"
                 }
               },
               "indeterminate": {
                 "icon": {
-                  "value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")",
-                  "type": "file",
                   "source": "$custom-checkbox-indicator-icon-indeterminate",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='{color.form.control.checkbox.indicator.indeterminate.base}'/></svg>\")"
                 }
               }
             }
           },
           "radio": {
+            "$type": "file",
             "indicator": {
               "icon-checked": {
                 "base": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
                 },
                 "valid": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")"
                 },
                 "invalid": {
-                  "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
-                  "type": "file",
                   "source": "$custom-radio-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                  "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")"
                 }
               }
             }
           },
           "switch": {
+            "$type": "file",
             "indicator": {
               "icon-off": {
-                "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")",
-                "type": "file",
                 "source": "$custom-switch-indicator-icon-off",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")"
               },
               "icon-on": {
-                "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")",
-                "type": "file",
                 "source": "$custom-switch-indicator-icon-on",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")"
               }
             }
           },
           "select": {
             "indicator": {
+              "$type": "file",
               "icon": {
-                "value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')",
-                "type": "file",
                 "source": "$custom-select-indicator",
                 "outputReferences": false,
-                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+                "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+                "$value": "url('data:image/svg+xml,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z\" fill=\"{color.form.control.select.indicator.base}\"/></svg>')"
               }
             },
             "bg": {
-              "value": "{other.content.form.control.select.indicator.icon} no-repeat right {spacing.form.input.padding.y.base} center / {color.form.control.select.bg.base}",
-              "type": "background",
-              "source": "$custom-select-background"
+              "source": "$custom-select-background",
+              "$value": {
+                "color": "{color.form.control.select.bg.base}",
+                "image": "{other.content.form.control.select.indicator.icon}",
+                "repeat": "no-repeat",
+                "position-x": "right",
+                "offset-y": "{spacing.form.input.padding.y.base}",
+                "position-y": "center"
+              },
+              "$type": "background"
             }
           }
         },
         "feedback": {
+          "$type": "file",
           "icon": {
             "valid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")",
-              "type": "file",
               "source": "$form-feedback-icon-valid",
               "outputReferences": false,
-              "modify": [
-                { "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")"
             },
             "invalid": {
-              "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")",
-              "type": "file",
               "source": "$form-feedback-icon-invalid",
               "outputReferences": false,
-              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
+              "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+              "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")"
             }
           }
         }