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

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

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

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

@@ -1,107 +1,81 @@
 {
   "color": {
+    "$type": "color",
     "btn": {
       "text": {
-        "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-color" },
-        "inverse-tertiary": {
-          "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-color"
-        }
+        "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" }
       },
       "bg": {
-        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" },
-        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" }
+        "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" }
       },
       "border": {
-        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" },
-        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" }
+        "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" },
+        "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" }
       },
       "hover": {
         "text": {
-          "tertiary": { "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-hover-color" },
-          "inverse-tertiary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-hover-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" }
         },
         "bg": {
-          "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" },
+          "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" },
           "inverse-tertiary": {
-            "value": "{color.white}",
-            "type": "color",
             "source": "$btn-inverse-tertiary-hover-bg",
-            "modify": [{ "type": "alpha", "amount": 0.1 }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
           }
         },
         "border": {
-          "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-hover-border-color" },
-          "inverse-tertiary": {
-            "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-hover-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" }
         }
       },
       "active": {
         "text": {
-          "tertiary": {
-            "value": "{color.gray.700}", "type": "color", "source": "$btn-tertiary-active-color"
-          },
-          "inverse-tertiary": {
-            "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-active-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" }
         },
         "bg": {
-          "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-active-bg" },
-          "inverse-tertiary":  {
-            "value": "{color.btn.hover.bg.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-active-bg"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.light.500}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" }
         },
         "border": {
-          "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-active-border-color" },
-          "inverse-tertiary": {
-            "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-active-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" }
         }
       },
       "focus": {
         "text": {
-          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-focus-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.text.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-focus-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" }
         },
         "border": {
-          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-focus-border-color" },
-          "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-focus-border-color" }
+          "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" }
         },
         "bg": {
-          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" },
-          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" }
+          "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" }
         },
         "outline": {
-          "tertiary": { "value": "{color.theme.focus.primary}", "type": "color", "source": "$btn-tertiary-focus-outline-color" },
-          "inverse-tertiary": { "value": "{color.white}", "type": "color", "source": "$btn-inverse-tertiary-focus-outline-color" }
+          "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" }
         }
       },
       "disabled": {
         "text": {
-          "tertiary": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.text.inverse-tertiary}",
-            "type": "color",
-            "source": "$btn-inverse-tertiary-disabled-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" }
         },
         "bg": {
-          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" },
-          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" }
+          "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" }
         },
         "border": {
-          "tertiary": { "value": "{color.btn.border.tertiary}", "type": "color", "source": "$btn-tertiary-disabled-border-color" },
-          "inverse-tertiary": {
-            "value": "{color.btn.border.inverse-tertiary}", "type": "color", "source": "$btn-inverse-tertiary-disabled-border-color"
-          }
+          "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" },
+          "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" }
         }
       }
     }