@openedx/paragon 22.0.0-alpha.23 → 22.0.0

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

@@ -1,166 +0,0 @@
-{
-  "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

@@ -1,136 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,24 +0,0 @@
-{
-  "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

@@ -1,40 +0,0 @@
-{
-  "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" }
-      }
-    }
-  },
-  "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

@@ -1,55 +0,0 @@
-{
-  "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

@@ -1,35 +0,0 @@
-{
-  "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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,14 +0,0 @@
-{
-  "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

@@ -1,25 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
-{
-  "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 }]
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,34 +0,0 @@
-{
-  "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

@@ -1,18 +0,0 @@
-{
-  "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"
-        }
-      }
-    }
-  }
-}