@statistikzh/leu 0.14.4 → 0.15.1

package/src/docs/contributing.mdx

@@ -92,7 +92,7 @@ window.customElements.define("leu-input", LeuInput)
 ### Scoped styles
 
 All CSS declarations have to live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
-Styles that are shared between components should be defined as global custom properties inside the `styles/custom-properties.css`.
+Styles that are shared between components should be defined as global custom properties inside the `styles/theme.css`.
 When a global custom property is used inside a component it could be a good practice to assign them to a local custom property with a semantic naming.
 This only make a sense when the component has a certain complexity and the global custom property are used multiple times.
 

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/accordion/Accordion.js"
 export * from "./components/button/Button.js"
 export * from "./components/button-group/ButtonGroup.js"
+export * from "./components/chart-wrapper/ChartWrapper.js"
 export * from "./components/checkbox/Checkbox.js"
 export * from "./components/checkbox/CheckboxGroup.js"
 export * from "./components/chip/exports.js"

package/src/lib/a11y.ts

@@ -1,6 +1,6 @@
 /**
  * All roles that are associated with a aria-checked attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
  */
 export const ARIA_CHECKED_ROLES = [
   "checkbox",
@@ -13,7 +13,7 @@ export const ARIA_CHECKED_ROLES = [
 
 /**
  * All roles that are associated with a aria-selected attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
+ * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
  */
 export const ARIA_SELECTED_ROLES = [
   "gridcell",

package/src/styles/theme.css

@@ -1 +1,89 @@
-@import url("./custom-properties.css");
+@import url("./custom-media.css");
+
+:root,
+:host {
+  --leu-color-black-100: #000;
+  --leu-color-black-80: #333;
+  --leu-color-black-60: #666;
+  --leu-color-black-40: #949494;
+  --leu-color-black-20: #ccc;
+  --leu-color-black-10: #f0f0f0;
+  --leu-color-black-5: #f7f7f7;
+  --leu-color-black-0: #fffffe;
+
+  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
+  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
+  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
+  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
+  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
+  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
+
+  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
+  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
+  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
+  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
+
+  --leu-color-accent-blue: #0076bd;
+  --leu-color-accent-darkblue: #00407c;
+  --leu-color-accent-turquoise: #00797b;
+  --leu-color-accent-green: #1a7f1f;
+  --leu-color-accent-bordeaux: #b01657;
+  --leu-color-accent-magenta: #d40053;
+  --leu-color-accent-violet: #7f3da7;
+  --leu-color-accent-gray: var(--leu-color-black-60);
+
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
+  --leu-color-accent-gray-soft: var(--leu-color-black-10);
+
+  --leu-color-func-cyan: #009ee0;
+  --leu-color-func-red: #d93c1a;
+  --leu-color-func-green: #1a7f1f;
+
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular:
+    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
+  --leu-font-family-black:
+    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
+  /* stylelint-enable value-keyword-case */
+
+  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
+  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
+  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
+
+  --leu-z-index-popup: 100;
+
+  @leu-font-styles './font-definitions.json';
+  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
+
+  /*
+   * Grid system
+   *
+   * The design system uses a 6 columns system on smaller screens.
+   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
+   *
+   * The goal is to keep the css footprint small
+   * by not generating all classes for every cell width for every breakpoint.
+   * Most components don't need a grid and those who do probably have a very simple configuration.
+   * If we have enough use cases for a more complex grid system we can add it later.
+   */
+  --leu-grid-gap: 1rem;
+  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
+  --leu-grid-max-width: 73rem;
+
+  --leu-grid-columns-full: 1 / -1;
+  --leu-grid-columns-offset: 1 / -1;
+
+  @media (--viewport-regular) {
+    --leu-grid-columns-offset: 3 / -1;
+  }
+
+  @media (--viewport-medium) {
+    --leu-grid-gap: 2rem;
+  }
+}

package/src/styles/custom-properties.css

@@ -1,89 +0,0 @@
-@import url("./custom-media.css");
-
-:root,
-:host {
-  --leu-color-black-100: #000;
-  --leu-color-black-80: #333;
-  --leu-color-black-60: #666;
-  --leu-color-black-40: #949494;
-  --leu-color-black-20: #ccc;
-  --leu-color-black-10: #f0f0f0;
-  --leu-color-black-5: #f7f7f7;
-  --leu-color-black-0: #fffffe;
-
-  --leu-color-black-transp-80: rgb(0 0 0 / 80%);
-  --leu-color-black-transp-60: rgb(0 0 0 / 60%);
-  --leu-color-black-transp-40: rgb(0 0 0 / 40%);
-  --leu-color-black-transp-20: rgb(0 0 0 / 20%);
-  --leu-color-black-transp-10: rgb(0 0 0 / 10%);
-  --leu-color-black-transp-5: rgb(0 0 0 / 5%);
-
-  --leu-color-white-transp-90: rgb(255 255 255 / 90%);
-  --leu-color-white-transp-70: rgb(255 255 255 / 70%);
-  --leu-color-white-transp-40: rgb(255 255 255 / 40%);
-  --leu-color-white-transp-10: rgb(255 255 255 / 10%);
-
-  --leu-color-accent-blue: #0076bd;
-  --leu-color-accent-darkblue: #00407c;
-  --leu-color-accent-turquoise: #00797b;
-  --leu-color-accent-green: #1a7f1f;
-  --leu-color-accent-bordeaux: #b01657;
-  --leu-color-accent-magenta: #d40053;
-  --leu-color-accent-violet: #7f3da7;
-  --leu-color-accent-gray: var(--leu-color-black-60);
-
-  --leu-color-accent-blue-soft: #edf5fa;
-  --leu-color-accent-darkblue-soft: #e0e8ee;
-  --leu-color-accent-turquoise-soft: #e8f3f2;
-  --leu-color-accent-green-soft: #ebf6eb;
-  --leu-color-accent-bordeaux-soft: #f6e3ea;
-  --leu-color-accent-magenta-soft: #fcedf3;
-  --leu-color-accent-violet-soft: #ece2f1;
-  --leu-color-accent-gray-soft: var(--leu-color-black-10);
-
-  --leu-color-func-cyan: #009ee0;
-  --leu-color-func-red: #d93c1a;
-  --leu-color-func-green: #1a7f1f;
-
-  /* stylelint-disable value-keyword-case */
-  --leu-font-family-regular:
-    "InterRegular", "HelveticaNowRegular", "Helvetica", sans-serif;
-  --leu-font-family-black:
-    "InterBlack", "HelveticaNowBlack", "Arial Black", "Helvetica", sans-serif;
-  /* stylelint-enable value-keyword-case */
-
-  --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
-  --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);
-  --leu-box-shadow-long: 0px 0px 80px var(--leu-color-black-transp-20);
-
-  --leu-z-index-popup: 100;
-
-  @leu-font-styles './font-definitions.json';
-  --leu-t-font-feature-settings: "ss07", "ss08", "cv03", "cv04", "cv10";
-
-  /*
-   * Grid system
-   *
-   * The design system uses a 6 columns system on smaller screens.
-   * For simplicity we use a 12 column grid for all breakpoints (zh web implementation does the same).
-   *
-   * The goal is to keep the css footprint small
-   * by not generating all classes for every cell width for every breakpoint.
-   * Most components don't need a grid and those who do probably have a very simple configuration.
-   * If we have enough use cases for a more complex grid system we can add it later.
-   */
-  --leu-grid-gap: 1rem;
-  --leu-grid-template-columns: repeat(12, minmax(0, 4.25rem));
-  --leu-grid-max-width: 73rem;
-
-  --leu-grid-columns-full: 1 / -1;
-  --leu-grid-columns-offset: 1 / -1;
-
-  @media (--viewport-regular) {
-    --leu-grid-columns-offset: 3 / -1;
-  }
-
-  @media (--viewport-medium) {
-    --leu-grid-gap: 2rem;
-  }
-}