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

package/tokens/src/themes/light/components/CloseButton.json

@@ -1,10 +1,20 @@
 {
   "color": {
-    "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" }
+    "$type": "color",
+    "close-button": { "source": "$close-color", "$value": "{color.black}" }
   },
   "elevation": {
+    "$type": "shadow",
     "close-button": {
-      "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" }
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
     }
   }
 }

package/tokens/src/themes/light/components/Code.json

@@ -1,22 +1,20 @@
 {
   "color": {
+    "$type": "color",
     "code": {
-      "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" },
+      "base": { "source": "$code-color", "$value": "#E83E8C" },
       "kbd": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" },
-        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" }
+        "base": { "source": "$kbd-color", "$value": "{color.white}" },
+        "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" }
       },
-      "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" }
+      "pre": { "source": "$pre-color", "$value": "{color.gray.900}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "code": {
       "kbd": {
-        "box-shadow": {
-          "value": "none",
-          "type": "shadow",
-          "source": "$kbd-box-shadow"
-        }
+        "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" }
       }
     }
   }

package/tokens/src/themes/light/components/DataTable.json

@@ -1,26 +1,22 @@
 {
   "color": {
+    "$type": "color",
     "data-table": {
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" },
+        "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" },
         "is-loading": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$data-table-is-loading-bg",
-          "modify": [
-            {
-              "type": "alpha",
-              "amount": 0.7
-            }
-          ]
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.white}"
         }
       },
-      "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
+      "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "data-table": {
-      "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" }
+      "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" }
     }
   }
 }

package/tokens/src/themes/light/components/Dropdown.json

@@ -1,41 +1,38 @@
 {
   "color": {
+    "$type": "color",
     "dropdown": {
-      "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" },
-      "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" },
+      "text": { "source": "$dropdown-color", "$value": "{color.body.base}" },
+      "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" },
+      "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$dropdown-border-color",
-        "modify": [{
-          "type": "alpha",
-          "amount": 0.15
-        }]
+        "modify": [{ "type": "alpha", "amount": 0.15 }],
+        "$value": "{color.black}"
       },
-      "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" },
+      "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" },
       "link": {
-        "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
+        "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" },
         "hover": {
-          "base": { 
-            "value": "{color.gray.900}", 
-            "type": "color", 
+          "base": {
             "source": "$dropdown-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.5 }]
+            "modify": [{ "type": "darken", "amount": 0.5 }],
+            "$value": "{color.gray.900}"
           },
-          "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
+          "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" }
         },
         "active": {
-          "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" },
-          "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" }
+          "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" },
+          "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" }
         },
-        "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" }
+        "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "dropdown": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$dropdown-box-shadow" }
+      "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" }
     }
   }
 }

package/tokens/src/themes/light/components/Dropzone.json

@@ -1,23 +1,61 @@
 {
   "color": {
+    "$type": "color",
     "dropzone": {
-      "error-wrapper": {
-        "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color"
-      },
-      "restriction-msg": {
-        "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color"
-      },
+      "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" },
+      "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" },
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }
+        "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "dropzone": {
-      "hover": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-hover" },
-      "focus": { "value": "inset 0 0 0 2px {color.info.300}", "type": "shadow", "source": "$dropzone-box-shadow-focus" },
-      "active": { "value": "inset 0 0 0 2px {color.primary.500}", "type": "shadow", "source": "$dropzone-box-shadow-active" },
-      "error": { "value": "inset 0 0 0 2px {color.danger.300}", "type": "shadow", "source": "$dropzone-box-shadow-error" }
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": "inset"
+        }
+      }
     }
   }
 }

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

@@ -2,266 +2,212 @@
   "color": {
     "form": {
       "input": {
-        "base": { "value": "{color.gray.700}", "type": "color", "source": "$input-color" },
-        "placeholder": { "value": "{color.gray.500}", "type": "color", "source": "$input-placeholder-color" },
-        "plaintext": { "value": "{color.body.base}", "type": "color", "source": "$input-plaintext-color" },
-        "border": { "value": "{color.gray.500}", "type": "color", "source": "$input-border-color" },
+        "$type": "color",
+        "base": { "source": "$input-color", "$value": "{color.gray.700}" },
+        "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" },
+        "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" },
+        "border": { "source": "$input-border-color", "$value": "{color.gray.500}" },
         "bg": {
-          "base": { "value": "{color.bg.base}", "type": "color", "source": "$input-bg" },
-          "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$input-disabled-bg" }
+          "base": { "source": "$input-bg", "$value": "{color.bg.base}" },
+          "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" }
         },
         "group": {
           "addon": {
-            "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-group-addon-color" },
-            "border": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$input-group-addon-border-color"
-            },
-            "bg": { "value": "{color.gray.100}", "type": "color", "source": "$input-group-addon-bg" }
+            "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" },
+            "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" },
+            "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" }
           }
         },
         "focus": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$input-focus-color" },
-          "border": { "value": "{color.input.focus}", "type": "color", "source": "$input-focus-border-color" },
-          "bg": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$input-focus-bg" }
+          "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" },
+          "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" },
+          "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" }
         }
       },
       "control": {
         "indicator": {
-          "border": {
-            "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
-          },
+          "$type": "color",
+          "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" },
           "bg": {
-            "base": {
-              "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
-            },
-            "disabled": {
-              "value": "{color.form.input.bg.disabled}",
-              "type": "color",
-              "source": "$custom-control-indicator-disabled-bg"
-            }
+            "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
           },
           "checked": {
-            "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-color" },
-            "valid": { "value": "{color.success.base}", "type": "color", "source": "$custom-control-indicator-checked-valid-color" },
-            "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$custom-control-indicator-checked-invalid-color" },
+            "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" },
+            "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.success.base}" },
+            "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.danger.base}" },
             "bg": {
-              "base": {
-                "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
-              },
+              "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" },
               "disabled": {
-                "value": "{color.primary.base}",
-                "type": "color",
                 "source": "$custom-control-indicator-checked-disabled-bg",
-                "modify": [{ "type": "alpha", "amount": 0.5 }]
+                "modify": [{ "type": "alpha", "amount": 0.5 }],
+                "$value": "{color.primary.base}"
               }
             },
             "border": {
-              "base": {
-                "value": "{color.form.control.indicator.checked.base}",
-                "type": "color",
-                "source": "$custom-control-indicator-checked-border-color"
-              },
-              "focus": {
-                "value": "{color.form.input.focus.border}",
-                "type": "color",
-                "source": "$custom-control-indicator-focus-border-color"
-              }
+              "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" }
             }
           },
           "active": {
-            "base": {
-              "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
-            },
-            "bg": {
-              "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-active-bg"
-            },
-            "border": {
-              "value": "{color.form.control.indicator.active.bg}",
-              "type": "color",
-              "source": "$custom-control-indicator-active-border-color"
-            }
+            "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" },
+            "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" },
+            "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" }
           }
         },
         "label": {
-          "base": { "value": "inherit", "type": "color", "source": "$custom-control-label-color" },
-          "disabled": {
-            "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
-          },
+          "$type": "color",
+          "base": { "source": "$custom-control-label-color", "$value": "inherit" },
+          "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" },
           "floating": {
             "text": {
-              "value": "{color.form.input.bg.base}",
-              "type": "color",
               "source": "$form-control-floating-label-text-bg",
-              "modify": [{ "type": "alpha", "amount": 0.1 }]
+              "modify": [{ "type": "alpha", "amount": 0.1 }],
+              "$value": "{color.form.input.bg.base}"
             }
           }
         },
         "checkbox": {
+          "$type": "color",
           "indicator": {
             "indeterminate": {
-              "base": {
-                "value": "{color.form.control.indicator.checked.base}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-color"
-              },
-              "bg": {
-                "value": "{color.bg.active}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-bg"
-              },
-              "border": {
-                "value": "{color.form.control.checkbox.indicator.indeterminate.bg}",
-                "type": "color",
-                "source": "$custom-checkbox-indicator-indeterminate-border-color"
-              }
+              "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" },
+              "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" }
             }
           }
         },
         "switch": {
+          "$type": "color",
           "indicator": {
             "checked": {
-              "bg": {
-                "value": "{color.success.base}",
-                "type": "color",
-                "source": "$custom-switch-indicator-checked-bg"
-              }
+              "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" }
             }
           }
         },
         "select": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-select-color" },
-          "disabled": { "value": "{color.disabled}", "type": "color", "source": "$custom-select-disabled-color" },
+          "base": {
+            "source": "$custom-select-color",
+            "$value": "{color.form.input.base}",
+            "$type": "color"
+          },
+          "disabled": {
+            "source": "$custom-select-disabled-color",
+            "$value": "{color.disabled}",
+            "$type": "color"
+          },
           "indicator": {
-            "base": { "value": "{color.theme.hover.gray}", "type": "color", "source": "$custom-select-indicator-color" }
+            "$type": "color",
+            "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" }
           },
           "bg": {
-            "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-select-bg" },
-            "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$custom-select-disabled-bg" },
-            "size": { "value": "24px 24px", "type": "dimension", "source": "$custom-select-bg-size" }
-          },
-          "border": {
             "base": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$custom-select-border-color"
+              "source": "$custom-select-bg",
+              "$value": "{color.form.input.bg.base}",
+              "$type": "color"
             },
-            "focus": {
-              "value": "{color.form.input.focus.border}",
-              "type": "color",
-              "source": "$custom-select-focus-border-color"
+            "disabled": {
+              "source": "$custom-select-disabled-bg",
+              "$value": "{color.gray.100}",
+              "$type": "color"
+            },
+            "size": {
+              "source": "$custom-select-bg-size",
+              "$value": "{color.gray.100}",
+              "$type": "dimension"
             }
+          },
+          "border": {
+            "$type": "color",
+            "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" }
           }
         },
         "range": {
+          "$type": "color",
           "track": {
-            "bg": { "value": "{color.gray.300}", "type": "color", "source": "$custom-range-track-bg" }
+            "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" }
           },
           "thumb": {
             "bg": {
-              "base": { "value": "{color.bg.active}", "type": "color", "source": "$custom-range-thumb-bg" },
-              "disabled": {
-                "value": "{color.disabled}", "type": "color", "source": "$custom-range-thumb-disabled-bg"
-              },
+              "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" },
+              "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" },
               "active": {
-                "value": "{color.bg.active}",
-                "type": "color",
                 "source": "$custom-range-thumb-active-bg",
-                "modify": [{ "type": "lighten", "amount": "0.35" }]
+                "modify": [{ "type": "lighten", "amount": "0.35" }],
+                "$value": "{color.bg.active}"
               }
             }
           }
         },
         "file": {
-          "base": { "value": "{color.form.input.base}", "type": "color", "source": "$custom-file-color" },
+          "$type": "color",
+          "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" },
           "bg": {
-            "base": { "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-file-bg" },
-            "disabled": {
-              "value": "{color.form.input.bg.disabled}", "type": "color", "source": "$custom-file-disabled-bg"
-            }
+            "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" },
+            "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" }
           },
           "button": {
-            "base": {
-              "value": "{color.form.control.file.base}", "type": "color", "source": "$custom-file-button-color"
-            },
-            "bg": {
-              "value": "{color.form.input.group.addon.bg}", "type": "color", "source": "$custom-file-button-bg"
-            }
+            "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" },
+            "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" }
           },
           "border": {
-            "base": {
-              "value": "{color.form.input.border}", "type": "color", "source": "$custom-file-border-color"
-            },
-            "focus": {
-              "value": "{color.form.input.focus.border}",
-              "type": "color",
-              "source": "$custom-file-focus-border-color"
-            }
+            "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" },
+            "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" }
           }
         }
       },
       "feedback": {
-        "valid": { "value": "{color.success.base}", "type": "color", "source": "$form-feedback-valid-color" },
-        "invalid": { "value": "{color.danger.base}", "type": "color", "source": "$form-feedback-invalid-color" },
+        "$type": "color",
+        "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" },
+        "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" },
         "icon": {
-          "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
-            "source": "$form-feedback-icon-valid-color"
-          },
-          "invalid": {
-            "value": "{color.form.feedback.invalid}",
-            "type": "color",
-            "source": "$form-feedback-icon-invalid-color"
-          }
+          "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" },
+          "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" }
         },
         "tooltip": {
           "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
             "source": "$form-feedback-tooltip-valid-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.form.feedback.valid}"
           },
           "bg": {
             "valid": {
-              "value": "{color.form.feedback.valid}",
-              "type": "color",
               "source": "$form-feedback-tooltip-valid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }]
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.valid}"
             },
             "invalid": {
-              "value": "{color.form.feedback.invalid}",
-              "type": "color",
               "source": "$form-feedback-tooltip-invalid-bg",
-              "modify": [{ "type": "alpha", "amount": 0.9 }]
+              "modify": [{ "type": "alpha", "amount": 0.9 }],
+              "$value": "{color.form.feedback.invalid}"
             }
           },
           "box-shadow": {
             "focus": {
               "valid": {
-                "value": "{color.form.feedback.valid}",
-                "type": "color",
                 "source": "$form-feedback-focus-box-shadow-valid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }]
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.valid}"
               },
               "invalid": {
-                "value": "{color.form.feedback.invalid}",
-                "type": "color",
                 "source": "$form-feedback-focus-box-shadow-invalid-color",
-                "modify": [{ "type": "alpha", "amount": 0.25 }]
+                "modify": [{ "type": "alpha", "amount": 0.25 }],
+                "$value": "{color.form.feedback.invalid}"
               }
             }
           }
         },
         "checked": {
           "valid": {
-            "value": "{color.form.feedback.valid}",
-            "type": "color",
             "source": "$form-feedback-checked-valid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }]
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.valid}"
           },
           "invalid": {
-            "value": "{color.form.feedback.invalid}",
-            "type": "color",
             "source": "$form-feedback-checked-invalid-color",
-            "modify": [{ "type": "lighten", "amount": 0.1 }]
+            "modify": [{ "type": "lighten", "amount": 0.1 }],
+            "$value": "{color.form.feedback.invalid}"
           }
         }
       }