@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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

@@ -0,0 +1,186 @@
+{
+  "color": {
+    "badge": {
+      "text": {
+        "primary": {
+          "value": "{color.primary.base}",
+          "type": "color",
+          "source": "$badge-primary-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "secondary": {
+          "value": "{color.secondary.base}",
+          "type": "color",
+          "source": "$badge-secondary-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "success": {
+          "value": "{color.success.base}",
+          "type": "color",
+          "source": "$badge-success-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "danger": {
+          "value": "{color.danger.base}",
+          "type": "color",
+          "source": "$badge-danger-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "warning": {
+          "value": "{color.warning.base}",
+          "type": "color",
+          "source": "$badge-warning-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "info": {
+          "value": "{color.info.base}",
+          "type": "color",
+          "source": "$badge-info-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "light": {
+          "value": "{color.light.base}",
+          "type": "color",
+          "source": "$badge-light-color",
+          "modify": [{ "type": "color-yiq" }]
+        },
+        "dark": {
+          "value": "{color.dark.base}",
+          "type": "color",
+          "source": "$badge-dark-color",
+          "modify": [{ "type": "color-yiq" }]
+        }
+      },
+      "bg": {
+        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" },
+        "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" },
+        "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" },
+        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" },
+        "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" },
+        "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" },
+        "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" },
+        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" }
+      },
+      "focus": {
+        "primary": {
+          "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color"
+        },
+        "secondary": {
+          "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color"
+        },
+        "success": {
+          "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color"
+        },
+        "warning": {
+          "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color"
+        },
+        "danger": {
+          "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color"
+        },
+        "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" },
+        "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" },
+        "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" },
+        "bg": {
+          "primary": {
+            "value": "{color.badge.bg.primary}",
+            "type": "color",
+            "source": "$badge-primary-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "secondary": {
+            "value": "{color.badge.bg.secondary}",
+            "type": "color",
+            "source": "$badge-secondary-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "success": {
+            "value": "{color.badge.bg.success}",
+            "type": "color",
+            "source": "$badge-success-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "danger": {
+            "value": "{color.badge.bg.danger}",
+            "type": "color",
+            "source": "$badge-danger-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "warning": {
+            "value": "{color.badge.bg.warning}",
+            "type": "color",
+            "source": "$badge-warning-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "info": {
+            "value": "{color.badge.bg.info}",
+            "type": "color",
+            "source": "$badge-info-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "light": {
+            "value": "{color.badge.bg.light}",
+            "type": "color",
+            "source": "$badge-light-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          },
+          "dark": {
+            "value": "{color.badge.bg.dark}",
+            "type": "color",
+            "source": "$badge-dark-focus-bg",
+            "modify": [{ "type": "darken", "amount": 0.1 }]
+          }
+        },
+        "box-shadow": {
+          "primary": {
+            "value": "{color.badge.bg.primary}",
+            "type": "color",
+            "source": "$badge-primary-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "secondary": {
+            "value": "{color.badge.bg.secondary}",
+            "type": "color",
+            "source": "$badge-secondary-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "success": {
+            "value": "{color.badge.bg.success}",
+            "type": "color",
+            "source": "$badge-success-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "danger": {
+            "value": "{color.badge.bg.danger}",
+            "type": "color",
+            "source": "$badge-danger-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "warning": {
+            "value": "{color.badge.bg.warning}",
+            "type": "color",
+            "source": "$badge-warning-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "info": {
+            "value": "{color.badge.bg.info}",
+            "type": "color",
+            "source": "$badge-info-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "light": {
+            "value": "{color.badge.bg.light}",
+            "type": "color",
+            "source": "$badge-light-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          },
+          "dark": {
+            "value": "{color.badge.bg.dark}",
+            "type": "color",
+            "source": "$badge-dark-focus-box-shadow-color",
+            "modify": [{ "type": "alpha", "amount": 0.05 }]
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "color": {
+    "breadcrumb": {
+      "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
+      "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
+      "inverse": {
+        "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
+        "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
+        "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+  "color": {
+    "bubble": {
+      "text": {
+        "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" },
+        "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" },
+        "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" },
+        "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" }
+      },
+      "bg": {
+        "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" },
+        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" },
+        "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" },
+        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+{
+  "color": {
+    "btn": {
+      "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" }
+    }
+  },
+  "elevation":  {
+    "btn": {
+      "box-shadow": {
+        "base": {
+          "value": "none",
+          "type": "shadow",
+          "source": "$btn-box-shadow"
+        },
+        "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" }
+      }
+    }
+  },
+  "other": {
+    "btn": {
+      "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" }
+    }
+  }
+}