@openedx/paragon 22.3.2 → 23.0.0-alpha.1

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

@@ -0,0 +1,34 @@
+{
+  "color": {
+    "stepper": {
+      "header": {
+        "bg": { 
+          "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" },
+          "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" }
+        },
+        "step": {
+          "base": {
+            "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color"
+          },
+          "bg": {
+            "base": {
+              "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg"
+            },
+            "active": {
+              "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg"
+            }
+          },
+          "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" },
+          "bubble-error": {
+            "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color"
+          },
+          "description-error": {
+            "value": "{color.stepper.header.step.bubble-error}", 
+            "type": "color", 
+            "source": "$stepper-header-step-error-description-color"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+  "elevation": {
+    "sticky": {
+      "shadow": {
+        "top": {
+          "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+          "type": "shadow",
+          "source": "$sticky-shadow-top"
+        },
+        "bottom": {
+          "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+          "type": "shadow",
+          "source": "$sticky-shadow-bottom"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+{
+  "color": {
+    "tab": {
+      "more-link-dropdown-toggle": {
+        "btn": {
+          "text": {
+            "focus": {
+              "value": "{color.tab.more-link-dropdown-toggle.text.focus}",
+              "type": "color",
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-color"
+            }
+          },
+          "border": {
+            "focus": {
+              "value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
+              "type": "color",
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color"
+            }
+          }
+        },
+        "text": {
+          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-color" },
+          "active": { "value": "{color.tab.more-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-active-color" },
+          "hover": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-hover-color" }
+        },
+        "bg": {
+          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" }
+        },
+        "border": {
+          "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" }
+        }
+      },
+      "inverse-pills-link-dropdown-toggle": {
+        "text": {
+          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" },
+          "active": { "value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" },
+          "active-hover": {
+            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+            "type": "color",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color"
+          }
+        },
+        "bg": {
+          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" },
+          "hover": { "value": "transparent", "type": "color", "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" },
+          "active-hover": {
+            "value": "{color.primary.300}",
+            "type": "color",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
+          }
+        },
+        "border": {
+          "focus": {
+            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
+            "type": "color",
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "color": {
+    "toast": {
+      "base": { "value": "inherit", "type": "color", "source": "$toast-color" },
+      "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" },
+      "border": {
+        "value": "{color.black}",
+        "type": "color",
+        "source": "$toast-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.1 }]
+      },
+      "header": {
+        "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" },
+        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" },
+        "border": { 
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$toast-header-border-color",
+          "modify": [{ "type": "alpha", "amount": 0.5 }]
+        }
+      }
+    }
+  },
+  "elevation": {
+    "toast": {
+      "box-shadow": {
+        "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)",
+        "type": "shadow",
+        "source": "$toast-box-shadow"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "color": {
+    "tooltip": {
+      "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
+      "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
+      "bg": {
+        "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
+        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
+      },
+      "arrow": {
+        "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
+        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
+      }
+    }
+  },
+  "elevation": {
+    "tooltip": {
+      "box-shadow": {
+        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+        "type": "shadow",
+        "source": "$tooltip-box-shadow"
+      }
+    }
+  },
+  "other": {
+    "tooltip": {
+      "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/body.json

@@ -0,0 +1,8 @@
+{
+  "color": {
+    "body": {
+      "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" },
+      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/headings.json

@@ -0,0 +1,7 @@
+{
+  "color": {
+    "headings": {
+      "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/hr.json

@@ -0,0 +1,15 @@
+{
+  "color": {
+    "hr": {
+      "border": {
+        "value": "{color.black}",
+        "type": "color",
+        "source": "$hr-border-color",
+        "modify": [{
+          "type": "alpha",
+          "amount": 0.1
+        }]
+      }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/input.json

@@ -0,0 +1,18 @@
+{
+  "color": {
+    "input": {
+      "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
+    }
+  },
+  "elevation": {
+    "input": {
+      "btn-focus": {
+        "box-shadow": {
+          "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
+          "type": "shadow",
+          "source": "$input-btn-focus-box-shadow"
+        }
+      }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/link.json

@@ -0,0 +1,109 @@
+{
+  "color": {
+    "link": {
+      "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" },
+      "hover": {
+        "value": "{color.link.base}",
+        "type": "color",
+        "source": "$link-hover-color",
+        "modify": [{ "type": "darken", "amount": 0.15 }]
+      },
+      "inline": {
+        "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" },
+        "decoration": {
+          "value": "{color.link.inline.base}",
+          "type": "color",
+          "source": "$inline-link-decoration-color",
+          "modify": [{ "type": "alpha", "amount": 0.3 }]
+        },
+        "hover": {
+          "base": {
+            "value": "{color.link.inline.base}",
+            "type": "color",
+            "source": "$inline-link-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.15 }]
+          },
+          "decoration": {
+            "value": "{color.link.inline.hover.base}",
+            "type": "color",
+            "source": "$inline-link-hover-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 1 }]
+          }
+        }
+      },
+      "muted": {
+        "base": { "value": "{color.primary.500}", "type": "color",  "source": "$muted-link-color" },
+        "hover": {
+          "value": "{color.link.muted.base}",
+          "type": "color",
+          "source": "$muted-link-hover-color",
+          "modify": [{ "type": "darken", "amount": 0.15}]
+        },
+        "inline": {
+          "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },
+          "decoration": {
+            "value": "{color.link.muted.inline.base}",
+            "type": "color",
+            "source": "$muted-inline-link-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 0.3 }]
+          },
+          "hover": {
+            "base": {
+              "value": "{color.link.muted.inline.base}",
+              "type": "color",
+              "source": "$muted-inline-link-hover-color",
+              "modify": [{ "type": "darken", "amount": 0.15 }]
+            },
+            "decoration": {
+              "value": "{color.link.muted.inline.hover.base}",
+              "type": "color",
+              "source": "$muted-inline-link-hover-decoration-color",
+              "modify": [{ "type": "alpha", "amount": 1 }]
+            }
+          }
+        }
+      },
+      "brand": {
+        "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" },
+        "hover": {
+          "value": "{color.link.brand.base}",
+          "type": "color",
+          "source": "$brand-link-hover-color",
+          "modify": [{ "type": "darken", "amount": 0.15 }]
+        },
+        "inline": {
+          "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" },
+          "decoration": {
+            "value": "{color.link.brand.inline.base}",
+            "type": "color",
+            "source": "$brand-inline-link-decoration-color",
+            "modify": [{ "type": "alpha", "amount": 0.3 }]
+          },
+          "hover": {
+            "base": {
+              "value": "{color.link.brand.inline.base}",
+              "type": "color",
+              "source": "$brand-inline-link-hover-color",
+              "modify": [{ "type": "darken", "amount": 0.15 }]
+            },
+            "decoration": {
+              "value": "{color.link.brand.inline.hover.base}",
+              "type": "color",
+              "source": "$brand-inline-link-hover-decoration-color",
+              "modify": [{ "type": "alpha", "amount": 1 }]
+            }
+          }
+        }
+      }
+    }
+  },
+  "other": {
+    "link": {
+      "emphasized-hover": {
+        "darken-percentage": {
+          "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage"
+        }
+      }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/list.json

@@ -0,0 +1,38 @@
+{
+  "color": {
+    "list-group": {
+      "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
+      "bg": {
+        "base": { "value": "{color.bg.base}", "type": "color", "source": "$list-group-bg" },
+        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
+      },
+      "border": {
+        "value": "{color.black}",
+        "type": "color",
+        "source": "$list-group-border-color",
+        "modify": [{ "type": "alpha", "amount": 0.125 }]
+      },
+      "active": {
+        "base": { "value": "{color.active}", "type": "color",  "source": "$list-group-active-color" },
+        "border": {
+          "value": "{color.list-group.active.bg}", "type": "color",  "source": "$list-group-active-border-color"
+        },
+        "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" }
+      },
+      "disabled": {
+        "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" },
+        "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" }
+      },
+      "action": {
+        "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" },
+        "hover": {
+          "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color"
+        },
+        "active": {
+          "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" },
+          "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" }
+        }
+      }
+    }
+  }
+}

package/tokens/src/themes/light/components/general/text.json

@@ -0,0 +1,6 @@
+{
+  "color": {
+    "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
+    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
+  }
+}