@openedx/paragon 22.4.0 → 23.0.0-alpha.1

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

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

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

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