fix: 🐛 implemented font-feature-settings for all components (#243)

--------- Co-authored-by: Dan Büschlen <danbueschlen@gmail.com>
statistikZH · Nov 25, 2024 · 4ce502f · 4ce502f
1 parent 11950f1
commit 4ce502f
Show file tree

Hide file tree

Showing 42 changed files with 36 additions and 84 deletions.
diff --git a/scripts/generate-component/templates/[Name].js b/scripts/generate-component/templates/[Name].js
@@ -8,7 +8,7 @@ import styles from "./[name].css"
  * @tagname [namespace]-[name]
  */
 export class Leu[Name] extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

diff --git a/scripts/generate-component/templates/[name].css b/scripts/generate-component/templates/[name].css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --[name]-font-regular: var(--leu-font-family-regular);
   --[name]-font-black: var(--leu-font-family-black);

diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
@@ -16,7 +16,7 @@ import styles from "./accordion.css"
  * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
 export class LeuAccordion extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

diff --git a/src/components/accordion/accordion.css b/src/components/accordion/accordion.css
@@ -1,10 +1,5 @@
 @import url("../../styles/custom-media.css");
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --accordion-font-regular: var(--leu-font-family-regular);
   --accordion-font-black: var(--leu-font-family-black);
@@ -19,7 +14,7 @@
 
   --transition: 0.1s ease;
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--accordion-font-regular);
 
   position: relative;
 }

diff --git a/src/components/breadcrumb/Breadcrumb.js b/src/components/breadcrumb/Breadcrumb.js
@@ -55,7 +55,7 @@ export class LeuBreadcrumb extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     items: { type: Array },

diff --git a/src/components/breadcrumb/breadcrumb.css b/src/components/breadcrumb/breadcrumb.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --breadcrumb-font-regular: var(--leu-font-family-regular);
   --breadcrumb-font-black: var(--leu-font-family-black);

diff --git a/src/components/button-group/ButtonGroup.js b/src/components/button-group/ButtonGroup.js
@@ -11,7 +11,7 @@ import styles from "./button-group.css"
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   constructor() {
     super()

diff --git a/src/components/button-group/button-group.css b/src/components/button-group/button-group.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 .group {
   display: flex;
   gap: 0.5rem;

diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -41,7 +41,7 @@ export class LeuButton extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
@@ -14,7 +14,7 @@ export class LeuCheckbox extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

diff --git a/src/components/checkbox/CheckboxGroup.js b/src/components/checkbox/CheckboxGroup.js
@@ -10,7 +10,7 @@ import styles from "./checkbox-group.css"
  * @tagname leu-checkbox-group
  */
 export class LeuCheckboxGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },

diff --git a/src/components/chip/Chip.js b/src/components/chip/Chip.js
@@ -6,7 +6,7 @@ import styles from "./chip.css"
 /* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
 
 export class LeuChipBase extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

diff --git a/src/components/chip/ChipGroup.js b/src/components/chip/ChipGroup.js
@@ -19,7 +19,7 @@ export const SELECTION_MODES = Object.freeze({
  * @tagname leu-chip-group
  */
 export class LeuChipGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     inverted: { type: Boolean, reflect: true },

diff --git a/src/components/chip/chip.css b/src/components/chip/chip.css
@@ -1,5 +1,3 @@
-:host,
-:host *,
 :host *::before,
 :host *::after {
   box-sizing: border-box;

diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
@@ -19,7 +19,7 @@ export class LeuDialog extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css
@@ -2,11 +2,6 @@
 
 /* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
 
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --dialog-font-regular: var(--leu-font-family-regular);
   --dialog-font-black: var(--leu-font-family-black);

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
@@ -23,7 +23,7 @@ export class LeuDropdown extends LeuElement {
     "leu-popup": LeuPopup,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     label: { type: String, reflect: true },

diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   position: relative;
 }

diff --git a/src/components/icon/Icon.js b/src/components/icon/Icon.js
@@ -17,7 +17,7 @@ import { paths } from "./paths.js"
  * @cssprop --leu-icon-size - The size of the icon.
  */
 export class LeuIcon extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     name: { type: String, reflect: true },

diff --git a/src/components/input/Input.js b/src/components/input/Input.js
@@ -70,7 +70,7 @@ export class LeuInput extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

diff --git a/src/components/input/input.css b/src/components/input/input.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --input-color: var(--leu-color-black-100);
   --input-color-disabled: var(--leu-color-black-20);

diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
@@ -16,7 +16,7 @@ import styles from "./menu.css"
  * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
 export class LeuMenu extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
@@ -27,7 +27,7 @@ export class LeuMenuItem extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

diff --git a/src/components/menu/menu-item.css b/src/components/menu/menu-item.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);

diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --menu-divider-color: var(--leu-color-black-transp-20);
 }

diff --git a/src/components/pagination/Pagination.js b/src/components/pagination/Pagination.js
@@ -21,7 +21,7 @@ export class LeuPagination extends LeuElement {
     "leu-visually-hidden": LeuVisuallyHidden,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /**
    * @internal

diff --git a/src/components/popup/Popup.js b/src/components/popup/Popup.js
@@ -20,7 +20,7 @@ import styles from "./popup.css"
  * @tagname leu-popup
  */
 export class LeuPopup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

diff --git a/src/components/popup/popup.css b/src/components/popup/popup.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --popup-font-regular: var(--leu-font-family-regular);
   --popup-font-black: var(--leu-font-family-black);

diff --git a/src/components/radio/Radio.js b/src/components/radio/Radio.js
@@ -9,7 +9,7 @@ import styles from "./radio.css"
  * @tagname leu-radio
  */
 export class LeuRadio extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   /** @internal */
   static shadowRootOptions = {

diff --git a/src/components/radio/RadioGroup.js b/src/components/radio/RadioGroup.js
@@ -10,7 +10,7 @@ import styles from "./radio-group.css"
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     orientation: { type: String, reflect: true },

diff --git a/src/components/range/Range.js b/src/components/range/Range.js
@@ -18,7 +18,7 @@ const RANGE_LABELS = ["Von", "Bis"]
  * @tagname leu-range
  */
 export class LeuRange extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,

diff --git a/src/components/range/range.css b/src/components/range/range.css
@@ -23,7 +23,6 @@
   --range-font-black: var(--leu-font-family-black);
 
   display: block;
-  box-sizing: border-box;
 
   font-family: var(--range-font-regular);
 }

diff --git a/src/components/scroll-top/ScrollTop.js b/src/components/scroll-top/ScrollTop.js
@@ -19,7 +19,7 @@ export class LeuScrollTop extends LeuElement {
     "leu-icon": LeuIcon,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     _showButton: { state: true },

diff --git a/src/components/select/Select.js b/src/components/select/Select.js
@@ -40,7 +40,7 @@ export class LeuSelect extends LeuElement {
     "leu-popup": LeuPopup,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static get properties() {
     return {

diff --git a/src/components/select/select.css b/src/components/select/select.css
@@ -1,8 +1,3 @@
-:host,
-:host * {
-  box-sizing: border-box;
-}
-
 :host {
   --select-color: var(--leu-color-black-100);
   --select-color-disabled: var(--leu-color-black-20);

diff --git a/src/components/spinner/Spinner.js b/src/components/spinner/Spinner.js
@@ -9,7 +9,7 @@ import styles from "./spinner.css"
  * @cssprop --leu-spinner-size - The size of the spinner.
  */
 export class LeuSpinner extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   render() {
     return html`

diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -19,7 +19,7 @@ export class LeuTable extends LeuElement {
     "leu-pagination": LeuPagination,
   }
 
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   static properties = {
     columns: { type: Array },

diff --git a/src/components/visually-hidden/VisuallyHidden.js b/src/components/visually-hidden/VisuallyHidden.js
@@ -9,7 +9,7 @@ import styles from "./visually-hidden.css"
  * @tagname leu-visually-hidden
  */
 export class LeuVisuallyHidden extends LeuElement {
-  static styles = styles
+  static styles = [LeuElement.styles, styles]
 
   render() {
     return html`<slot></slot>`

diff --git a/src/lib/LeuElement.js b/src/lib/LeuElement.js
@@ -1,10 +1,13 @@
 import { LitElement } from "lit"
+import commonStyles from "../styles/common-styles.css"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__
 
   static dependencies = {}
 
+  static styles = commonStyles
+
   static define(name, constructor = this, options = {}) {
     Object.entries(this.dependencies).forEach(([n, c]) => c.define(n))
 

diff --git a/src/styles/common-styles.css b/src/styles/common-styles.css
@@ -0,0 +1,5 @@
+:host,
+:host * {
+  box-sizing: border-box;
+  font-feature-settings: var(--leu-t-font-feature-settings);
+}
diff --git a/src/styles/style.stories.js b/src/styles/style.stories.js
@@ -17,6 +17,7 @@ function Template() {
 
         background-color: var(--leu-color-black-5);
         font-family: var(--leu-font-family-regular);
+        font-feature-settings: var(--leu-t-font-feature-settings);
       }
 
       .container div {

diff --git a/web-dev-server.config.mjs b/web-dev-server.config.mjs
@@ -13,6 +13,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   mimeTypes: {
     "**/custom-elements.json": "js",
     "src/components/**/*.css": "js",
+    "src/styles/common-styles.css": "js",
   },
   plugins: [...plugins, json()],
 })