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

package/tokens/src/themes/light/components/Button/warning.json

@@ -1,273 +1,309 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
         "warning": {
-          "value": "{color.btn.bg.warning}",
-          "type": "color",
           "source": "$btn-warning-color",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.bg.warning}"
         },
         "outline-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color"
+          "source": "$btn-warning-outline-color",
+          "$value": "{color.warning.base}"
         },
         "inverse-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color"
+          "source": "$btn-warning-inverse-color",
+          "$value": "{color.warning.base}"
         },
         "inverse-outline-warning": {
-          "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color"
+          "source": "$btn-warning-inverse-outline-color",
+          "$value": "{color.white}"
         }
       },
       "bg": {
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" },
-        "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" },
+        "warning": {
+          "source": "$btn-warning-bg",
+          "$value": "{color.warning.base}"
+        },
+        "outline-warning": {
+          "source": "$btn-warning-outline-bg",
+          "$value": "inherit"
+        },
         "inverse-warning": {
-          "value": "{color.btn.text.inverse-warning}",
-          "type": "color",
           "source": "$btn-warning-inverse-bg",
-          "modify": [{ "type": "color-yiq" }]
+          "modify": [{ "type": "color-yiq" }],
+          "$value": "{color.btn.text.inverse-warning}"
         },
-        "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" }
+        "inverse-outline-warning": {
+          "source": "$btn-warning-inverse-outline-bg",
+          "$value": "inherit"
+        }
       },
       "border": {
-        "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" },
+        "warning": {
+          "source": "$btn-warning-border-color",
+          "$value": "{color.btn.bg.warning}"
+        },
         "outline-warning": {
-          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color"
+          "source": "$btn-warning-outline-border-color",
+          "$value": "{color.warning.base}"
+        },
+        "inverse-warning": {
+          "source": "$btn-warning-inverse-border-color",
+          "$value": "transparent"
         },
-        "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-border-color" },
         "inverse-outline-warning": {
-          "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-border-color"
+          "source": "$btn-warning-inverse-outline-border-color",
+          "$value": "{color.white}"
         }
       },
       "hover": {
         "text": {
           "warning": {
-            "value": "{color.btn.hover.bg.warning}",
-            "type": "color",
             "source": "$btn-warning-hover-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.hover.bg.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color"
+            "source": "$btn-warning-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.theme.hover.warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-hover-color"
+            "source": "$btn-warning-inverse-outline-hover-color",
+            "$value": "{color.theme.hover.warning}"
           }
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg"
+            "source": "$btn-warning-hover-bg",
+            "$value": "{color.theme.hover.warning}"
           },
           "outline-warning": {
-            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg"
+            "source": "$btn-warning-outline-hover-bg",
+            "$value": "{color.warning.100}"
           },
           "inverse-warning": {
-            "value": "{color.btn.bg.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-hover-bg",
-            "modify": [{ "type": "darken", "amount": 0.075 }]
+            "modify": [{ "type": "darken", "amount": 0.075 }],
+            "$value": "{color.btn.bg.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg"
+            "source": "$btn-warning-inverse-outline-hover-bg",
+            "$value": "{color.warning.100}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color"
+            "source": "$btn-warning-hover-border-color",
+            "$value": "{color.theme.hover.warning}"
           },
           "outline-warning": {
-            "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color"
+            "source": "$btn-warning-outline-hover-border-color",
+            "$value": "{color.warning.900}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-hover-border-color",
+            "$value": "transparent"
           },
-          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-hover-border-color" },
           "inverse-outline-warning": {
-            "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-hover-border-color"
+            "source": "$btn-warning-inverse-outline-hover-border-color",
+            "$value": "transparent"
           }
         }
       },
       "active": {
         "text": {
           "warning": {
-            "value": "{color.btn.active.bg.warning}",
-            "type": "color",
             "source": "$btn-warning-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.warning}"
           },
           "outline-warning": {
-            "value": "{color.btn.active.bg.outline-warning}",
-            "type": "color",
             "source": "$btn-warning-outline-active-color",
-            "modify": [{ "type": "color-yiq" }]
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-active-color",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.active.bg.inverse-outline-warning}",
-            "type": "color",
             "source": "$btn-warning-inverse-outline-active-color",
-            "modify": [{ "type": "color-yiq" }] }
+            "modify": [{ "type": "color-yiq" }],
+            "$value": "{color.btn.active.bg.inverse-outline-warning}"
+          }
         },
         "bg": {
           "warning": {
-            "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg"
+            "source": "$btn-warning-active-bg",
+            "$value": "{color.theme.active.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg"
+            "source": "$btn-warning-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-active-bg",
+            "$value": "{color.gray.100}"
           },
-          "inverse-warning": { "value": "{color.gray.100}", "type": "color", "source": "$btn-warning-inverse-active-bg" },
           "inverse-outline-warning": {
-            "value": "{color.theme.bg.warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-active-bg"
+            "source": "$btn-warning-inverse-outline-active-bg",
+            "$value": "{color.theme.bg.warning}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
-            "source": "$btn-warning-active-border-color"
+            "source": "$btn-warning-active-border-color",
+            "$value": "{color.theme.active.warning}"
           },
           "inverse-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-active-border-color"
+            "source": "$btn-warning-inverse-active-border-color",
+            "$value": "inherit"
           },
           "outline-warning": {
-            "value": "{color.theme.active.warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-active-border-color"
+            "source": "$btn-warning-outline-active-border-color",
+            "$value": "{color.theme.active.warning}"
           },
           "inverse-outline-warning": {
-            "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color"
+            "source": "$btn-warning-inverse-outline-active-border-color",
+            "$value": "transparent"
           }
         }
       },
       "focus": {
         "text": {
-          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" },
+          "warning": {
+            "source": "$btn-warning-focus-color",
+            "$value": "{color.btn.text.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.text.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-color"
+            "source": "$btn-warning-outline-focus-color",
+            "$value": "{color.btn.text.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.text.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-color"
+            "source": "$btn-warning-inverse-focus-color",
+            "$value": "{color.btn.text.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.text.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-color"
+            "source": "$btn-warning-inverse-outline-focus-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
           }
         },
         "border": {
           "warning": {
-            "value": "{color.btn.border.warning}",
-            "type": "color",
-            "source": "$btn-warning-focus-border-color"
+            "source": "$btn-warning-focus-border-color",
+            "$value": "{color.btn.border.warning}"
           },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-border-color"
+            "source": "$btn-warning-outline-focus-border-color",
+            "$value": "{color.btn.border.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.btn.border.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-border-color"
+            "source": "$btn-warning-inverse-focus-border-color",
+            "$value": "{color.btn.border.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.border.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-border-color"
+            "source": "$btn-warning-inverse-outline-focus-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
           }
         },
         "bg": {
-          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-focus-bg" },
-          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-focus-bg" },
+          "warning": {
+            "source": "$btn-warning-focus-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-focus-bg",
+            "$value": "inherit"
+          },
           "inverse-warning": {
-            "value": "{color.btn.bg.inverse-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-bg"
+            "source": "$btn-warning-inverse-focus-bg",
+            "$value": "{color.btn.bg.inverse-warning}"
           },
           "inverse-outline-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-bg"
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
           }
         },
         "outline": {
           "warning": {
-            "value": "{color.theme.focus.warning}",
-            "type": "color",
-            "source": "$btn-warning-focus-outline-color"
+            "source": "$btn-warning-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
           },
           "outline-warning": {
-            "value": "{color.theme.focus.warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-focus-outline-color"
+            "source": "$btn-warning-outline-focus-outline-color",
+            "$value": "{color.theme.focus.warning}"
           },
           "inverse-warning": {
-            "value": "{color.white}",
-            "type": "color",
-            "source": "$btn-warning-inverse-focus-outline-color"
+            "source": "$btn-warning-inverse-focus-outline-color",
+            "$value": "{color.white}"
           },
           "inverse-outline-warning": {
-            "value": "inherit",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-focus-bg"
+            "source": "$btn-warning-inverse-outline-focus-bg",
+            "$value": "inherit"
           }
         }
       },
       "disabled": {
         "text": {
-          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" },
+          "warning": {
+            "source": "$btn-warning-disabled-color",
+            "$value": "{color.btn.text.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.text.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-disabled-color"
+            "source": "$btn-warning-outline-disabled-color",
+            "$value": "{color.btn.text.outline-warning}"
           },
           "inverse-warning": {
-            "value": "{color.warning.base}",
-            "type": "color",
-            "source": "$btn-warning-inverse-disabled-color"
+            "source": "$btn-warning-inverse-disabled-color",
+            "$value": "{color.warning.base}"
           },
           "inverse-outline-warning": {
-            "value": "{color.btn.text.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-disabled-color"
+            "source": "$btn-warning-inverse-outline-disabled-color",
+            "$value": "{color.btn.text.inverse-outline-warning}"
           }
         },
         "bg": {
-          "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-disabled-bg" },
-          "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-disabled-bg" },
-          "inverse-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-disabled-bg" },
-          "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-disabled-bg" }
+          "warning": {
+            "source": "$btn-warning-disabled-bg",
+            "$value": "{color.btn.bg.warning}"
+          },
+          "outline-warning": {
+            "source": "$btn-warning-outline-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-bg",
+            "$value": "inherit"
+          },
+          "inverse-outline-warning": {
+            "source": "$btn-warning-inverse-outline-disabled-bg",
+            "$value": "inherit"
+          }
         },
         "border": {
-          "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" },
+          "warning": {
+            "source": "$btn-warning-disabled-border-color",
+            "$value": "{color.btn.border.warning}"
+          },
           "outline-warning": {
-            "value": "{color.btn.border.outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-outline-disabled-border-color"
+            "source": "$btn-warning-outline-disabled-border-color",
+            "$value": "{color.btn.border.outline-warning}"
+          },
+          "inverse-warning": {
+            "source": "$btn-warning-inverse-disabled-border-color",
+            "$value": "transparent"
           },
-          "inverse-warning": { "value": "transparent", "type": "color", "source": "$btn-warning-inverse-disabled-border-color" },
           "inverse-outline-warning": {
-            "value": "{color.btn.border.inverse-outline-warning}",
-            "type": "color",
-            "source": "$btn-warning-inverse-outline-disabled-border-color"
+            "source": "$btn-warning-inverse-outline-disabled-border-color",
+            "$value": "{color.btn.border.inverse-outline-warning}"
           }
         }
       }

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

@@ -1,36 +1,25 @@
 {
   "color": {
+    "$type": "color",
     "card": {
-      "base": { "value": "inherit", "type": "color", "source": "$card-color" },
+      "base": { "source": "$card-color", "$value": "inherit" },
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" },
-        "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" },
-        "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
+        "base": { "source": "$card-bg", "$value": "{color.bg.base}" },
+        "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" },
+        "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" }
       },
       "border": {
         "base": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$card-border-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.125
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.125 }],
+          "$value": "{color.black}"
         },
         "focus": {
-          "base": {
-            "value": "{color.primary.500}",
-            "type": "color",
-            "source": "$card-border-focus-color"
-          },
-          "dark": {
-            "value": "{color.theme.focus.primary}",
-            "type": "color",
-            "source": "$card-border-focus-color-dark"
-          }
+          "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" },
+          "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" }
         }
       },
-      "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" }
+      "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" }
     }
   }
 }

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

@@ -1,43 +1,44 @@
 {
   "color": {
+    "$type": "color",
     "carousel": {
       "control": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$carousel-control-color" }
+        "base": { "source": "$carousel-control-color", "$value": "{color.white}" }
       },
       "indicator": {
-        "active-bg": { "value": "{color.white}", "type": "color", "source": "$carousel-indicator-active-bg" }
+        "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" }
       },
-      "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" }
+      "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" }
     }
   },
   "content": {
+    "$type": "file",
     "carousel": {
       "control": {
         "bg": {
           "prev-icon": {
-            "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$carousel-control-prev-icon-bg",
             "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.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")"
           },
           "next-icon": {
-            "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$carousel-control-next-icon-bg",
             "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.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")"
           }
         }
       }
     }
   },
   "other": {
+    "$type": "number",
     "carousel": {
       "control": {
         "opacity": {
-          "base": { "value": ".5", "type": "ratio", "source": "$carousel-control-opacity" },
-          "hover": { "value": ".9", "type": "ratio", "source": "$carousel-control-hover-opacity" }
+          "base": { "source": "$carousel-control-opacity", "$value": ".5" },
+          "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" }
         }
       }
     }

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

@@ -1,50 +1,38 @@
 {
   "color": {
+    "$type": "color",
     "chip": {
       "text": {
-        "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" },
-        "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" }
+        "light": { "source": "$chip-light-color", "$value": "{color.black}" },
+        "dark": { "source": "$chip-dark-color", "$value": "{color.white}" }
       },
       "bg": {
-        "light": { "value": "{color.white}", "type": "color", "source": "$chip-light-bg-color" },
-        "dark": { "value": "{color.primary.300}", "type": "color", "source": "$chip-dark-bg" }
+        "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" },
+        "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" }
       },
       "border": {
-        "base": {
-          "value": "{color.light.800}", "type": "color", "source": "$chip-border-color"
-        },
+        "base": { "source": "$chip-border-color", "$value": "{color.light.800}" },
         "focus": {
           "selected": {
-            "dark": {
-              "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-selected-focus-border-color"
-            },
-            "light": {
-              "value": "{color.dark.500}", "type": "color", "source": "$chip-light-selected-focus-border-color"
-            }
+            "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" },
+            "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" }
           }
         }
       },
       "label": {
-        "base": {
-          "value": "{color.primary.700}", "type": "color", "source": "$chip-label-color"
-        },
-        "dark": {
-          "value": "{color.chip.outline.dark}", "type": "color", "source": "$chip-dark-label-color"
-        }
+        "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" },
+        "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" }
       },
       "outline": {
-        "dark": {
-          "value": "{color.white}", "type": "color", "source": "$chip-dark-outline-color"
-        },
-        "light": {
-          "value": "{color.chip.label.base}", "type": "color", "source": "$chip-light-outline-color"
-        }
+        "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" },
+        "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" }
       }
     }
   },
   "other": {
+    "$type": "number",
     "chip": {
-      "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" }
+      "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" }
     }
   }
 }