refactor(ui-library): change theming approach

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "runem.lit-plugin"
+    "runem.lit-plugin",
+    "bierner.comment-tagged-templates"
   ]
 }

packages/ui-library/src/components/button-group/index.css.ts

@@ -1,42 +1,46 @@
-import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
-
-const { ButtonGroup } = componentTokens.cmp;
-
-export const styleCustom = typeSafeNestedCss`
-  .blr-button-group {
-    display: flex;
-
-    &.left {
-      justify-content: flex-start;
-    }
-
-    &.center {
-      justify-content: center;
-    }
-
-    &.right {
-      justify-content: flex-end;
-    }
-
-    &.xs {
-      gap: ${ButtonGroup.Container.ItemSpacing.XS};
-    }
-
-    &.sm {
-      gap: ${ButtonGroup.Container.ItemSpacing.SM};
-    }
-
-    &.md {
-      gap: ${ButtonGroup.Container.ItemSpacing.MD};
-    }
-
-    &.lg {
-      gap: ${ButtonGroup.Container.ItemSpacing.LG};
-    }
-
-    &.xl {
-      gap: ${ButtonGroup.Container.ItemSpacing.XL};
-    }
-  }
+import { ComponentThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated";
+import { typeSafeNestedCss } from "../../utils/css-in-ts/nested-typesafe-css-literals";
+
+export const staticStyles = typeSafeNestedCss/* css */ `
+  ${ComponentThemeIterator((theme, cmp, typeSafeCss) => {
+    const { ButtonGroup } = cmp;
+
+    return typeSafeCss/* css */ `
+      .blr-button-group.${theme} {
+        display: flex;
+
+        &.left {
+          justify-content: flex-start;
+        }
+
+        &.center {
+          justify-content: center;
+        }
+
+        &.right {
+          justify-content: flex-end;
+        }
+
+        &.xs {
+          gap: ${ButtonGroup.Container.ItemSpacing.XS};
+        }
+
+        &.sm {
+          gap: ${ButtonGroup.Container.ItemSpacing.SM};
+        }
+
+        &.md {
+          gap: ${ButtonGroup.Container.ItemSpacing.MD};
+        }
+
+        &.lg {
+          gap: ${ButtonGroup.Container.ItemSpacing.LG};
+        }
+
+        &.xl {
+          gap: ${ButtonGroup.Container.ItemSpacing.XL};
+        }
+      }
+    `;
+  })}
 `;

packages/ui-library/src/components/button-group/index.ts

@@ -1,23 +1,26 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { styleCustom } from './index.css';
+import { staticStyles } from './index.css';
 import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
 import { LitElementCustom } from '../../utils/lit-element-custom';
+import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 
 export class BlrButtonGroup extends LitElementCustom {
-  static styles = [styleCustom];
+  static styles = [staticStyles];
 
   @property() sizeVariant: ButtonGroupSizesType = 'md';
   @property() alignment: ButtonGroupAlignmentType = 'center';
+  @property() theme: ThemeType = 'Light';
 
   protected render() {
     const classes = classMap({
       'blr-button-group': true,
       [this.alignment]: this.alignment,
       [this.sizeVariant]: this.sizeVariant,
+      [this.theme]: this.theme,
     });
 
     return html`

packages/ui-library/src/components/button-icon/index.css.ts

@@ -1,17 +1,10 @@
-import { componentTokens } from "../../foundation/_tokens-generated/__component-tokens.Light.generated.mjs";
-import { semanticTokens } from "../../foundation/_tokens-generated/__semantic-tokens.Light.generated.mjs";
-import { typeSafeNestedCss } from "../../utils/nested-typesafe-css-literals";
+import { typeSafeNestedCss } from "../../utils/css-in-ts/nested-typesafe-css-literals";
+import { ComponentThemeIterator, SemanticThemeIterator } from "../../foundation/_tokens-generated/index.pseudo.generated";
 
-const { ButtonIcon } = componentTokens.cmp;
-const { global, buttons } = semanticTokens.sem;
-
-export const styleCustom = typeSafeNestedCss`
+export const styleCustom = typeSafeNestedCss/* css */ `
   .focus-layer {
     position: absolute;
     inset: 0;
-    outline-color: ${global.focusring.border.color};
-    outline-style: ${global.focusring.border.style};
-    outline-width: ${global.focusring.border.width};
   }
 
   .blr-button-icon {
@@ -21,80 +14,109 @@ export const styleCustom = typeSafeNestedCss`
     display: inline-flex;
     cursor: pointer;
     position: relative;
+  }
 
-    &.xs {
-      padding: ${ButtonIcon.Container.Padding.XS};
-      border-radius: ${ButtonIcon.Container.BorderRadius.XS};
+  .loading {
+    &.blr-button-icon:hover, &.blr-button-icon:focus {
+      cursor: auto;
+      text-decoration: none;
+    }
 
-      & > .focus-layer {
-        border-radius: ${ButtonIcon.Container.BorderRadius.XS};
-      }
+    & > .icon {
+      visibility: hidden;
     }
+  }
 
-    &.sm {
-      padding: ${ButtonIcon.Container.Padding.SM};
-      border-radius: ${ButtonIcon.Container.BorderRadius.SM};
+  ${ComponentThemeIterator((theme, cmp, typeSafeCss) => {
+    const { ButtonIcon } = cmp;
 
-      & > .focus-layer {
-        border-radius: ${ButtonIcon.Container.BorderRadius.SM};
-      }
-    }
+    return typeSafeCss/*css*/ `
+      .blr-button-icon.${theme} {
+        &.xs {
+          padding: ${ButtonIcon.Container.Padding.XS};
+          border-radius: ${ButtonIcon.Container.BorderRadius.XS};
 
-    &.md {
-      padding: ${ButtonIcon.Container.Padding.MD};
-      border-radius: ${ButtonIcon.Container.BorderRadius.MD};
+          & > .focus-layer {
+            border-radius: ${ButtonIcon.Container.BorderRadius.XS};
+          }
+        }
 
-      & > .focus-layer {
-        border-radius: ${ButtonIcon.Container.BorderRadius.MD};
-      }
-    }
+        &.sm {
+          padding: ${ButtonIcon.Container.Padding.SM};
+          border-radius: ${ButtonIcon.Container.BorderRadius.SM};
 
-    &.lg {
-      padding: ${ButtonIcon.Container.Padding.LG};
-      border-radius: ${ButtonIcon.Container.BorderRadius.LG};
+          & > .focus-layer {
+            border-radius: ${ButtonIcon.Container.BorderRadius.SM};
+          }
+        }
 
-      & > .focus-layer {
-        border-radius: ${ButtonIcon.Container.BorderRadius.LG};
-      }
-    }
+        &.md {
+          padding: ${ButtonIcon.Container.Padding.MD};
+          border-radius: ${ButtonIcon.Container.BorderRadius.MD};
 
-    &.xl {
-      padding: ${ButtonIcon.Container.Padding.XL};
-      border-radius: ${ButtonIcon.Container.BorderRadius.XL};
+          & > .focus-layer {
+            border-radius: ${ButtonIcon.Container.BorderRadius.MD};
+          }
+        }
 
-      & > .focus-layer {
-        border-radius: ${ButtonIcon.Container.BorderRadius.XL};
-      }
-    }
-  }
-
-  .loading {
+        &.lg {
+          padding: ${ButtonIcon.Container.Padding.LG};
+          border-radius: ${ButtonIcon.Container.BorderRadius.LG};
 
-   &.blr-button-icon:hover, &.blr-button-icon:focus{
-      cursor: auto;
-      text-decoration: none;
-      &.cta{
-        background-color: ${buttons.container.bgcolor.cta.loading}
-      }
-      &.primary{
-        background-color: ${buttons.container.bgcolor.primary.loading}
-      }
-      &.secondary{
-        background-color: ${buttons.container.bgcolor.secondary.loading}
-      }
-      &.silent{
-        background-color: ${buttons.container.bgcolor.silent.loading}
-      }
-      &.destructive{
-        background-color: ${buttons.container.bgcolor.destructive.loading}
+          & > .focus-layer {
+            border-radius: ${ButtonIcon.Container.BorderRadius.LG};
+          }
+        }
+
+        &.xl {
+          padding: ${ButtonIcon.Container.Padding.XL};
+          border-radius: ${ButtonIcon.Container.BorderRadius.XL};
+
+          & > .focus-layer {
+            border-radius: ${ButtonIcon.Container.BorderRadius.XL};
+          }
+        }
       }
-      &.encourage{
-        background-color: ${buttons.container.bgcolor.encourage.loading}
+    `;
+  })}
+
+  ${SemanticThemeIterator((theme, sem, typeSafeCss) => {
+    const { global, buttons } = sem;
+
+    return typeSafeCss/*css*/ `
+      .focus-layer.${theme} {
+        outline-color: ${global.focusring.border.color};
+        outline-style: ${global.focusring.border.style};
+        outline-width: ${global.focusring.border.width};
       }
-    }
 
-    & > .icon {
-      visibility: hidden;
-    }
-  }
+      .loading.${theme} {
+        &.blr-button-icon:hover, &.blr-button-icon:focus {
+          &.cta {
+            background-color: ${buttons.container.bgcolor.cta.loading}
+          }
+
+          &.primary {
+            background-color: ${buttons.container.bgcolor.primary.loading}
+          }
+
+          &.secondary {
+            background-color: ${buttons.container.bgcolor.secondary.loading}
+          }
+
+          &.silent {
+            background-color: ${buttons.container.bgcolor.silent.loading}
+          }
+
+          &.destructive {
+            background-color: ${buttons.container.bgcolor.destructive.loading}
+          }
+
+          &.encourage {
+            background-color: ${buttons.container.bgcolor.encourage.loading}
+          }
+        }
+      }
+    `;
+  })}
 `;

packages/ui-library/src/components/button-icon/index.ts

@@ -6,7 +6,7 @@ import { SizelessIconType } from '@boiler/icons';
 import { styleCustom } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
-import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
+import { staticActionStyles } from '../../foundation/semantic-tokens/action.css';
 import { ActionVariantType, ActionSizesType, FormSizesType, SizesType } from '../../globals/types';
 import { calculateIconName } from '../../utils/calculate-icon-name';
 import { determineLoaderVariant } from '../../utils/determine-loader-variant';
@@ -35,7 +35,7 @@ export type BlrButtonIconEventHandlers = {
  * @fires blrClick Button was clicked
  */
 export class BlrButtonIcon extends LitElementCustom {
-  static styles = [styleCustom];
+  static styles = [styleCustom, staticActionStyles];
 
   @property() arialabel!: string;
   @property() icon?: SizelessIconType;
@@ -71,13 +71,14 @@ export class BlrButtonIcon extends LitElementCustom {
 
   protected render() {
     if (this.sizeVariant) {
-      const dynamicStyles = this.theme === 'Light' ? [actionLight] : [actionDark];
-
       const classes = classMap({
+        'blr-semantic-action': true,
+        'blr-button-icon': true,
         [this.variant]: this.variant,
         [this.sizeVariant]: this.sizeVariant,
-        disabled: this.disabled,
-        loading: this.loading || false,
+        'disabled': this.disabled,
+        'loading': this.loading || false,
+        [this.theme]: this.theme,
       });
 
       const iconClasses = classMap({
@@ -103,12 +104,9 @@ export class BlrButtonIcon extends LitElementCustom {
       ]).toLowerCase() as SizesType;
 
       return html`
-        <style>
-          ${dynamicStyles}
-        </style>
         <span
           aria-label=${this.arialabel || nothing}
-          class="blr-semantic-action blr-button-icon ${classes}"
+          class="${classes}"
           aria-disabled=${this.disabled ? 'true' : nothing}
           @click=${this.handleClick}
           id=${this.buttonIconId || nothing}
@@ -122,7 +120,7 @@ export class BlrButtonIcon extends LitElementCustom {
             }
           }}
         >
-          ${this.focused && !this.loading ? html`<span class="focus-layer"></span>` : nothing}
+          ${this.focused && !this.loading ? html`<span class="focus-layer ${this.theme}"></span>` : nothing}
           ${this.loading
             ? BlrLoaderRenderFunction({
                 sizeVariant: loaderSizeVariant,