@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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

@@ -0,0 +1,253 @@
+{
+  "color": {
+    "btn": {
+      "text": {
+        "success": {
+          "value": "{color.btn.bg.success}",
+          "type": "color",
+          "source": "$btn-success-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "outline-success": {
+          "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-color"
+        },
+        "inverse-success": {
+          "value": "{color.success.base}", "type": "color", "source": "$btn-success-inverse-color"
+        },
+        "inverse-outline-success": {
+          "value": "{color.white}", "type": "color", "source": "$btn-success-inverse-outline-color"
+        }
+      },
+      "bg": {
+        "success": { "value": "{color.success.base}", "type": "color", "source": "$btn-success-bg" },
+        "outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-outline-bg" },
+        "inverse-success": {
+          "value": "{color.btn.text.inverse-success}",
+          "type": "color",
+          "source": "$btn-success-inverse-bg",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "inverse-outline-success": { "value": "inherit", "type": "color", "source": "$btn-success-inverse-outline-bg" }
+      },
+      "border": {
+        "success": { "value": "{color.btn.bg.success}", "type": "color", "source": "$btn-success-border-color" },
+        "outline-success": {
+          "value": "{color.success.base}", "type": "color", "source": "$btn-success-outline-border-color"
+        },
+        "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"
+        }
+      },
+      "hover": {
+        "text": {
+          "success": {
+            "value": "{color.btn.hover.bg.success}",
+            "type": "color",
+            "source": "$btn-success-hover-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "outline-success": {
+            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-outline-hover-color"
+          },
+          "inverse-success": {
+            "value": "{color.btn.text.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }]
+          },
+          "inverse-outline-success": {
+            "value": "{color.theme.hover.success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-hover-color"
+          }
+        },
+        "bg": {
+          "success": {
+            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-bg"
+          },
+          "outline-success": {
+            "value": "{color.success.100}", "type": "color", "source": "$btn-success-outline-hover-bg"
+          },
+          "inverse-success": {
+            "value": "{color.btn.bg.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }]
+          },
+          "inverse-outline-success": {
+            "value": "{color.success.100}", "type": "color", "source": "$btn-success-inverse-outline-hover-bg"
+          }
+        },
+        "border": {
+          "success": {
+            "value": "{color.theme.hover.success}", "type": "color", "source": "$btn-success-hover-border-color"
+          },
+          "outline-success": {
+            "value": "{color.success.900}", "type": "color", "source": "$btn-success-outline-hover-border-color"
+          },
+          "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"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "success": {
+            "value": "{color.btn.active.bg.success}",
+            "type": "color",
+            "source": "$btn-success-active-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "outline-success": {
+            "value": "{color.btn.active.bg.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-active-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "inverse-success": {
+            "value": "{color.btn.text.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.active.bg.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }] }
+        },
+        "bg": {
+          "success": {
+            "value": "{color.theme.active.success}", "type": "color", "source": "$btn-success-active-bg"
+          },
+          "outline-success": {
+            "value": "{color.theme.bg.success}", "type": "color", "source": "$btn-success-outline-active-bg"
+          },
+          "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"
+          }
+        },
+        "border": {
+          "success": {
+            "value": "{color.theme.active.success}",
+            "type": "color",
+            "source": "$btn-success-active-border-color"
+          },
+          "outline-success": {
+            "value": "{color.theme.active.success}",
+            "type": "color",
+            "source": "$btn-success-outline-active-border-color"
+          },
+          "inverse-success": {
+            "value": "inherit",
+            "source": "$btn-success-inverse-active-border-color"
+          },
+          "inverse-outline-success": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-active-border-color"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-focus-color" },
+          "outline-success": {
+            "value": "{color.btn.text.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-focus-color"
+          },
+          "inverse-success": {
+            "value": "{color.btn.text.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-color"
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.text.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-color"
+          }
+        },
+        "border": {
+          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-focus-border-color" },
+          "outline-success": {
+            "value": "{color.btn.border.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-focus-border-color"
+          },
+          "inverse-success": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-border-color"
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.border.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-border-color"
+          }
+        },
+        "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" }
+        },
+        "outline": {
+          "success": { "value": "{color.theme.focus.success}", "type": "color", "source": "$btn-success-focus-outline-color" },
+          "outline-success": {
+            "value": "{color.theme.focus.success}",
+            "type": "color",
+            "source": "$btn-success-outline-focus-outline-color"
+          },
+          "inverse-success": {
+            "value": "{color.btn.focus.border.inverse-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-focus-outline-color"
+          },
+          "inverse-outline-success": {
+            "value": "{color.btn.focus.border.inverse-outline-success}",
+            "type": "color",
+            "source": "$btn-success-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "success": { "value": "{color.btn.text.success}", "type": "color", "source": "$btn-success-disabled-color" },
+          "outline-success": {
+            "value": "{color.btn.text.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-disabled-color"
+          },
+          "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"
+          }
+        },
+        "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" }
+        },
+        "border": {
+          "success": { "value": "{color.btn.border.success}", "type": "color", "source": "$btn-success-disabled-border-color" },
+          "outline-success": {
+            "value": "{color.btn.border.outline-success}",
+            "type": "color",
+            "source": "$btn-success-outline-disabled-border-color"
+          },
+          "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" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,109 @@
+{
+  "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"
+        }
+      },
+      "bg": {
+        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-bg" },
+        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-bg" }
+      },
+      "border": {
+        "tertiary": { "value": "transparent", "type": "color", "source": "$btn-tertiary-border-color" },
+        "inverse-tertiary": { "value": "transparent", "type": "color", "source": "$btn-inverse-tertiary-border-color" }
+      },
+      "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"
+          }
+        },
+        "bg": {
+          "tertiary": { "value": "{color.light.500}", "type": "color", "source": "$btn-tertiary-hover-bg" },
+          "inverse-tertiary": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-inverse-tertiary-hover-bg",
+            "modify": [{ "type": "alpha", "amount": 0.1 }]
+          }
+        },
+        "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"
+          }
+        }
+      },
+      "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"
+          }
+        },
+        "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"
+          }
+        },
+        "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"
+          }
+        }
+      },
+      "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"
+          }
+        },
+        "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" }
+        },
+        "bg": {
+          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-focus-bg" },
+          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-focus-bg" }
+        },
+        "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" }
+        }
+      },
+      "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"
+          }
+        },
+        "bg": {
+          "tertiary": { "value": "inherit", "type": "color", "source": "$btn-tertiary-disabled-bg" },
+          "inverse-tertiary": { "value": "inherit", "type": "color", "source": "$btn-inverse-tertiary-disabled-bg" }
+        },
+        "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"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,276 @@
+{
+  "color": {
+    "btn": {
+      "text": {
+        "warning": {
+          "value": "{color.btn.bg.warning}",
+          "type": "color",
+          "source": "$btn-warning-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "outline-warning": {
+          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-color"
+        },
+        "inverse-warning": {
+          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-inverse-color"
+        },
+        "inverse-outline-warning": {
+          "value": "{color.white}", "type": "color", "source": "$btn-warning-inverse-outline-color"
+        }
+      },
+      "bg": {
+        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-bg" },
+        "outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-outline-bg" },
+        "inverse-warning": {
+          "value": "{color.btn.text.inverse-warning}",
+          "type": "color",
+          "source": "$btn-warning-inverse-bg",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "inverse-outline-warning": { "value": "inherit", "type": "color", "source": "$btn-warning-inverse-outline-bg" }
+      },
+      "border": {
+        "warning": { "value": "{color.btn.bg.warning}", "type": "color", "source": "$btn-warning-border-color" },
+        "outline-warning": {
+          "value": "{color.warning.base}", "type": "color", "source": "$btn-warning-outline-border-color"
+        },
+        "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"
+        }
+      },
+      "hover": {
+        "text": {
+          "warning": {
+            "value": "{color.btn.hover.bg.warning}",
+            "type": "color",
+            "source": "$btn-warning-hover-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "outline-warning": {
+            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-outline-hover-color"
+          },
+          "inverse-warning": {
+            "value": "{color.btn.text.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.075 }]
+          },
+          "inverse-outline-warning": {
+            "value": "{color.theme.hover.warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-hover-color"
+          }
+        },
+        "bg": {
+          "warning": {
+            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-bg"
+          },
+          "outline-warning": {
+            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-outline-hover-bg"
+          },
+          "inverse-warning": {
+            "value": "{color.btn.bg.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-hover-bg",
+            "modify": [{ "type": "darken", "amount": 0.075 }]
+          },
+          "inverse-outline-warning": {
+            "value": "{color.warning.100}", "type": "color", "source": "$btn-warning-inverse-outline-hover-bg"
+          }
+        },
+        "border": {
+          "warning": {
+            "value": "{color.theme.hover.warning}", "type": "color", "source": "$btn-warning-hover-border-color"
+          },
+          "outline-warning": {
+            "value": "{color.warning.900}", "type": "color", "source": "$btn-warning-outline-hover-border-color"
+          },
+          "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"
+          }
+        }
+      },
+      "active": {
+        "text": {
+          "warning": {
+            "value": "{color.btn.active.bg.warning}",
+            "type": "color",
+            "source": "$btn-warning-active-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "outline-warning": {
+            "value": "{color.btn.active.bg.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-active-color",
+            "modify": [{ "type": "color-yiq" }]
+          },
+          "inverse-warning": {
+            "value": "{color.btn.text.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-active-color",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.active.bg.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-active-color",
+            "modify": [{ "type": "color-yiq" }] }
+        },
+        "bg": {
+          "warning": {
+            "value": "{color.theme.active.warning}", "type": "color", "source": "$btn-warning-active-bg"
+          },
+          "outline-warning": {
+            "value": "{color.theme.bg.warning}", "type": "color", "source": "$btn-warning-outline-active-bg"
+          },
+          "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"
+          }
+        },
+        "border": {
+          "warning": {
+            "value": "{color.theme.active.warning}",
+            "type": "color",
+            "source": "$btn-warning-active-border-color"
+          },
+          "inverse-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-active-border-color"
+          },
+          "outline-warning": {
+            "value": "{color.theme.active.warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-active-border-color"
+          },
+          "inverse-outline-warning": {
+            "value": "transparent", "type": "color", "source": "$btn-warning-inverse-outline-active-border-color"
+          }
+        }
+      },
+      "focus": {
+        "text": {
+          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-focus-color" },
+          "outline-warning": {
+            "value": "{color.btn.text.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-focus-color"
+          },
+          "inverse-warning": {
+            "value": "{color.btn.text.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-color"
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.text.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-color"
+          }
+        },
+        "border": {
+          "warning": {
+            "value": "{color.btn.border.warning}",
+            "type": "color",
+            "source": "$btn-warning-focus-border-color"
+          },
+          "outline-warning": {
+            "value": "{color.btn.border.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-focus-border-color"
+          },
+          "inverse-warning": {
+            "value": "{color.btn.border.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-border-color"
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.border.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-border-color"
+          }
+        },
+        "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" },
+          "inverse-warning": {
+            "value": "{color.btn.bg.inverse-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-bg"
+          },
+          "inverse-outline-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-bg"
+          }
+        },
+        "outline": {
+          "warning": {
+            "value": "{color.theme.focus.warning}",
+            "type": "color",
+            "source": "$btn-warning-focus-outline-color"
+          },
+          "outline-warning": {
+            "value": "{color.theme.focus.warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-focus-outline-color"
+          },
+          "inverse-warning": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$btn-warning-inverse-focus-outline-color"
+          },
+          "inverse-outline-warning": {
+            "value": "inherit",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-focus-bg"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "warning": { "value": "{color.btn.text.warning}", "type": "color", "source": "$btn-warning-disabled-color" },
+          "outline-warning": {
+            "value": "{color.btn.text.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-disabled-color"
+          },
+          "inverse-warning": {
+            "value": "{color.warning.base}",
+            "type": "color",
+            "source": "$btn-warning-inverse-disabled-color"
+          },
+          "inverse-outline-warning": {
+            "value": "{color.btn.text.inverse-outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-inverse-outline-disabled-color"
+          }
+        },
+        "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" }
+        },
+        "border": {
+          "warning": { "value": "{color.btn.border.warning}", "type": "color", "source": "$btn-warning-disabled-border-color" },
+          "outline-warning": {
+            "value": "{color.btn.border.outline-warning}",
+            "type": "color",
+            "source": "$btn-warning-outline-disabled-border-color"
+          },
+          "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"
+          }
+        }
+      }
+    }
+  }
+}