@openedx/paragon 22.4.0 → 23.0.0-alpha.1

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

@@ -0,0 +1,30 @@
+{
+  "elevation": {
+    "menu": {
+      "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" }
+    }
+  },
+  "color": {
+    "menu": {
+      "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" },
+      "item": {
+        "color": { "value": "{color.body.base}", "type": "color", "source": "$menu-item-color" },
+        "bg": { "value": "transparent", "type": "color", "source": "$menu-item-bg" },
+        "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-border-color" },
+        "hover": {
+          "color": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$menu-item-hover-color" },
+          "bg": { "value": "{color.btn.hover.bg.tertiary}", "type": "color", "source": "$menu-item-hover-bg" },
+          "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-hover-border-color" }
+        },
+        "focus": {
+          "bg": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" }
+        }
+      },
+      "select": {
+        "btn-link": {
+          "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+{
+  "color": {
+    "modal": {
+      "content": {
+        "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
+        "border": {
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$modal-content-border-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.2
+          }]
+        }
+      },
+      "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
+    }
+  },
+  "elevation": {
+    "modal": {
+      "content": {
+        "box-shadow": {
+          "sm-up": {
+            "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
+            "type": "shadow",
+            "source": "$modal-content-box-shadow-sm-up"
+          }
+        }
+      }
+    }
+  },
+  "other": {
+    "modal": {
+      "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" }
+    }
+  }
+}

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

@@ -0,0 +1,166 @@
+{
+  "border-color": {
+    "nav": {
+      "tabs-link": {
+        "border": {
+          "active": {
+            "value": "{color.primary.500}",
+            "type": "color",
+            "source": "$nav-tabs-link-active-border-color"
+          },
+          "hover": {
+            "value": "transparent transparent {color.nav.tabs.base.border.base}",
+            "type": "color",
+            "source": "$nav-tabs-link-hover-border-color"
+          },
+          "focus": {
+            "value": "{color.nav.tabs.base.link.active.text}",
+            "type": "color",
+            "source": "$nav-tabs-link-focus-border-color"
+          }
+        }
+      }
+    }
+  },
+  "color": {
+    "nav": {
+      "link": {
+        "text": {
+          "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" },
+          "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" }
+        },
+        "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" }
+      },
+      "tabs": {
+        "base": {
+          "text": {
+            "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
+          },
+          "bg": {
+            "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+          },
+          "border": {
+            "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+            "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+          },
+          "link": {
+            "hover": {
+              "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
+            },
+            "active": {
+              "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
+              "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+            },
+            "disabled": {
+              "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
+            }
+          }
+        },
+        "inverse": {
+          "link": {
+            "text": {
+              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" }
+            },
+            "border": {
+              "bottom": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-tabs-link-border-bottom-color" },
+              "active": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-active-border-color" }
+            },
+            "bg": {
+              "hover": { "value": "{color.nav.tabs.inverse.link.border.bottom}", "type": "color", "source": "$nav-inverse-tabs-link-hover-bg" },
+              "active": { "value": "{color.nav.tabs.inverse.link.bg.hover}", "type": "color", "source": "$nav-inverse-tabs-link-active-bg" },
+              "focus": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-focus-bg" },
+              "active-hover": {
+                "value": "transparent",
+                "type": "color",
+                "source": "$nav-inverse-tabs-link-active-hover-bg"
+              }
+            },
+          "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+          },
+          "dropdown": {
+            "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
+          }
+        }
+      },
+      "pills": {
+        "base": {
+          "link": {
+            "active": {
+              "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
+              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
+              "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
+            },
+            "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
+          }
+        },
+        "inverse": {
+          "link": {
+            "text": {
+              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-pills-link-color" },
+              "focus": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-focus-color" },
+              "active": { "value": "{color.primary.500}", "type": "color", "source": "$nav-inverse-pills-link-active-color" },
+              "hover": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-color" },
+              "active-focus": {
+                "value": "{color.nav.pills.inverse.link.text.active}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-color"
+              },
+              "active-hover": {
+                "value": "{color.nav.pills.inverse.link.text.base}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-hover-color"
+              }
+            },
+            "border": {
+              "base": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-pills-link-border-color" },
+              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-border-color" },
+              "active-hover": {
+                "value": "{color.nav.pills.inverse.link.border.base}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-hover-border-color"
+              },
+              "active-focus": {
+                "value": "{color.primary.base}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-border-color"
+              },
+              "focus-hover": {
+                "value": "{color.nav.pills.inverse.link.border.active-focus}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
+              }
+            },
+            "bg": {
+              "hover": { "value": "{color.nav.pills.inverse.link.border.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-bg" },
+              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-bg" },
+              "active-hover": {
+                "value": "{color.nav.pills.inverse.link.border.base}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-hover-bg"
+              },
+              "active-focus-hover": {
+                "value": "{color.nav.pills.inverse.link.text.base}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-hover-bg"
+              }
+            }
+          },
+          "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" }
+        }
+      },
+      "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" },
+      "dark": {
+        "value": "{color.white}",
+        "type": "color",
+        "source": "$navbar-dark-color",
+        "modify": [{ "type": "alpha", "amount": 0.5 }]
+      },
+      "light": {
+        "value": "{color.black}",
+        "type": "color",
+        "source": "$navbar-light-color",
+        "modify": [{ "type": "alpha", "amount": 0.5 }]
+      }
+    }
+  }
+}

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

@@ -0,0 +1,136 @@
+{
+  "color": {
+    "navbar": {
+      "dark": {
+        "text": {
+          "value": "{color.white}",
+          "type": "color",
+          "source": "$navbar-dark-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.5
+          }]
+        },
+        "hover": {
+          "value": "{color.white}",
+          "type": "color",
+          "source": "$navbar-dark-hover-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.75
+          }]
+        },
+        "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" },
+        "disabled": {
+          "value": "{color.white}",
+          "type": "color",
+          "source": "$navbar-dark-disabled-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.25
+          }]
+        },
+        "toggler": {
+          "border": {
+            "value": "{color.white}",
+            "type": "color",
+            "source": "$navbar-dark-toggler-border-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 0.1
+            }]
+          }
+        },
+        "brand": {
+          "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" },
+          "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" }
+        }
+      },
+      "light": {
+        "text": {
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$navbar-light-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.5
+          }]
+        },
+        "hover": { 
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$navbar-light-hover-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.7
+          }]
+        },
+        "active": { 
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$navbar-light-active-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.9
+          }]
+        },
+        "disabled": { 
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$navbar-light-disabled-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        },
+        "toggler": {
+          "border": {
+            "value": "{color.black}",
+            "type": "color",
+            "source": "$navbar-light-toggler-border-color",
+            "modify": [{
+              "type": "alpha",
+              "amount": 0.1
+            }]
+          }
+        },
+        "brand": {
+          "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" },
+          "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" }
+        }
+      }
+    }
+  },
+  "content": {
+    "navbar": {
+      "toggler": {
+        "dark": {
+          "icon-bg": {
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
+            "type": "file",
+            "source": "$navbar-dark-toggler-icon-bg",
+            "outputReferences": false,
+            "modify": [{
+              "type": "str-replace",
+              "toReplace": "#",
+              "replaceWith": "%23"
+            }]
+          }
+        },
+        "light": {
+          "icon-bg": {
+            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
+            "type": "file",
+            "source": "$navbar-light-toggler-icon-bg",
+            "outputReferences": false,
+            "modify": [{
+              "type": "str-replace",
+              "toReplace": "#",
+              "replaceWith": "%23"
+            }]
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "color": {
+    "overflow-scroll": {
+      "opacity-mask-transparent": {
+        "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+{
+  "color": {
+    "page-banner": {
+      "bg": {
+        "dark": { "value": "{color.dark.500}", "type": "color" },
+        "light": { "value": "{color.light.400}", "type": "color" },
+        "accent": {
+          "a": { "value": "{color.accent.a}", "type": "color" },
+          "b": { "value": "{color.accent.b}", "type": "color" }
+        },
+        "warning": { "value": "{color.warning.100}", "type": "color" }
+      },
+      "text": {
+        "dark": { "value": "{color.white}", "type": "color" },
+        "light": { "value": "{color.black}", "type": "color" },
+        "accent": {
+          "a": { "value": "{color.black}", "type": "color" },
+          "b": { "value": "{color.black}", "type": "color" }
+        },
+        "warning": { "value": "{color.black}", "type": "color" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+{
+  "color": {
+    "pagination": {
+      "text": {
+        "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
+        "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
+        "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
+        "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
+        "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
+      },
+      "bg": {
+        "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
+        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
+        "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
+        "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
+      },
+      "border": {
+        "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
+        "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
+        "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" },
+        "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" }
+      },
+      "focus": {
+        "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
+        "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
+      },
+      "dropdown": {
+        "text-inverse": {
+          "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse"
+        }
+      }
+    }
+  },
+  "elevation": {
+    "pagination": {
+      "focus": {
+        "box-shadow": {
+          "value": "{elevation.input.btn-focus.box-shadow}",
+          "type": "shadow",
+          "source": "$pagination-focus-box-shadow"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+{
+  "color": {
+    "popover": {
+      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" },
+      "border": { "value": "rgba(0, 0, 0, .2)", "type": "color",  "source": "$popover-border-color" },
+      "header": {
+        "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" },
+        "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" },
+        "bg-dark": {
+          "value": "{color.white}",
+          "type": "color",
+          "source": "$popover-header-bg-dark",
+          "modify": [{ "type": "darken", "amount": 0.5 }]
+        },
+        "border-bottom-dark": {
+          "value": "{color.white}",
+          "type": "color",
+          "source": "$popover-header-border-bottom-darken",
+          "modify": [{ "type": "darken", "amount": 0.05 }]
+        }
+      },
+      "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" },
+      "arrow": { 
+        "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" },
+        "outer": {
+          "value": "{color.popover.border}",
+          "type": "color",
+          "source": "$popover-arrow-outer-color",
+          "modify": [{ "type": "alpha", "amount": 0.05 }]
+        }
+      },
+      "success": {
+        "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" },
+        "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" }
+      },
+      "warning": {
+        "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" },
+        "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" }
+      },
+      "danger": {
+        "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
+        "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
+      }
+    }
+  },
+  "elevation": {
+    "popover": {
+      "box-shadow": {
+        "value": "none",
+        "type": "shadow",
+        "source": "$popover-box-shadow"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+{
+  "color": {
+    "product-tour": {
+      "checkpoint": {
+        "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
+        "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
+        "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" },
+        "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+        "box-shadow": {
+          "value": "{color.black}",
+          "type": "color",
+          "source": "$checkpoint-box-shadow-color",
+          "modify": [{
+            "type": "alpha",
+            "amount": 0.3
+          }]
+        },
+        "arrow": {
+          "border": {
+            "top": {
+              "value": "{color.product-tour.checkpoint.bg}",
+              "type": "color",
+              "source": "$checkpoint-arrow-border-top-color"
+            },
+            "transparent": {
+              "value": "transparent",
+              "type": "color",
+              "source": "$checkpoint-arrow-border-color-transparent"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+{
+  "color": {
+    "progress-bar": {
+      "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
+      "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
+      "bar": {
+        "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
+        "bg": {
+          "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
+          "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
+        }
+      }
+    }
+  },
+  "elevation": {
+    "progress-bar": {
+      "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "elevation": {
+    "scrollable": {
+      "body": {
+        "box-shadow": {
+          "value": "{color.black}",
+          "type": "shadow",
+          "source": "$scrollable-body-box-shadow",
+          "modify": [{ "type": "alpha", "amount": 0.55 }]
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+{
+  "color": {
+    "search-field": {
+      "border": {
+        "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" },
+        "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" },
+        "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" }
+      },
+      "button": {
+        "bg": {
+          "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" },
+          "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" }
+        }
+      },
+      "form-bg": {
+        "value": "{color.white}", "type": "color", "source": "$search-form-background-color"
+      }
+    }
+  },
+  "other": {
+    "search-field": {
+      "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+{
+  "color": {
+    "sheet": {
+      "skrim": {
+        "bg": { 
+          "value": "{color.gray.300}",
+          "type": "color",
+          "source": "$sheet-skrim-bg",
+          "modify": [{ "type": "alpha", "amount": 0.5 }]
+        },
+        "component": {
+          "box-shadow": {
+            "value": "{color.black}",
+            "type": "color",
+            "source": "$sheet-skrim-component-box-shadow",
+            "modify": [{ "type": "alpha", "amount": 0.15 }]
+          }
+        }
+      }
+    }
+  }
+}