refactor(input): bind dark themes to shadow root

package.json

@@ -20,10 +20,10 @@
     "build:typescript": "tsc",
     "build:styles": "node scripts/build-styles.mjs",
     "build:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\"",
-    "build:docs:md": "web-component-analyzer \"src/**/*.ts\" --outDir docs/md",
-    "build:docs:json": "web-component-analyzer \"src/**/*.ts\" --format json --outDir docs/json",
-    "build:docs:schema": "web-component-analyzer src --format json --outFile custom-elements.json",
-    "build:docs:vscode-schema": "web-component-analyzer src --format vscode --outFile vscode-html-custom-data.json",
+    "build:docs:md": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --outDir docs/md",
+    "build:docs:json": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format json --outDir docs/json",
+    "build:docs:schema": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format json --outFile custom-elements.json",
+    "build:docs:vscode-schema": "web-component-analyzer \"src/**/!(*.spec|*.css).ts\" --format vscode --outFile vscode-html-custom-data.json",
     "build:meta": "node scripts/build-stories.js",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
@@ -82,7 +82,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "globby": "^13.2.2",
     "husky": "^8.0.3",
-    "igniteui-theming": "^3.2.0",
+    "igniteui-theming": "^3.3.0-beta.2",
     "igniteui-typedoc-theme": "^3.1.0",
     "keep-a-changelog": "^2.4.1",
     "lint-staged": "^15.0.1",

scripts/build-styles.mjs

@@ -18,7 +18,7 @@ export async function buildThemes() {
 
   for (const sassFile of paths) {
     const result = renderSass(sassFile, {
-      outputStyle: 'compressed',
+      style: 'compressed',
       loadPaths: ['node_modules', 'src']
     });
 

scripts/sass.mjs

@@ -22,7 +22,7 @@ const renderSass = sass.compileAsync;
 
 async function sassToCss(sassFile) {
   const result = await renderSass(sassFile, {
-    outputStyle: 'compressed',
+    style: 'compressed',
     loadPaths: ['node_modules', 'src']
   });
 

src/components/accordion/themes/accordion.base.scss

@@ -1,4 +1,4 @@
-@use 'styles/utilities/index' as *;
+@use 'styles/utilities' as *;
 
 :host {
     ::slotted(igc-expansion-panel) {

src/components/avatar/themes/dark/_themes.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/avatar' as *;
 

src/components/avatar/themes/dark/avatar.bootstrap.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/dark/avatar.fluent.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/dark/avatar.indigo.scss

@@ -1,5 +1,4 @@
-@use 'sass:map';
-@use '../../../../styles/utilities' as *;
+@use 'styles/utilities' as *;
 @use 'themes' as *;
 
 $theme: $indigo;

src/components/avatar/themes/dark/avatar.material.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/light/_themes.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/avatar' as *;
 

src/components/avatar/themes/light/avatar.bootstrap.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/light/avatar.fluent.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/light/avatar.indigo.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/light/avatar.material.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use 'themes' as *;
 

src/components/avatar/themes/shared/avatar.bootstrap.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 
@@ -23,4 +22,3 @@ $theme: $bootstrap;
 :host([shape='circle']) [part='base'] {
     border-radius: calc(var-get($theme, 'size') / 2);
 }
-

src/components/avatar/themes/shared/avatar.fluent.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 
@@ -23,4 +22,3 @@ $theme: $fluent;
 :host([shape='circle']) [part='base'] {
     border-radius: calc(var-get($theme, 'size') / 2);
 }
-

src/components/avatar/themes/shared/avatar.indigo.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 
@@ -23,4 +22,3 @@ $theme: $indigo;
 :host([shape='circle']) [part='base'] {
     border-radius: calc(var-get($theme, 'size') / 2);
 }
-

src/components/avatar/themes/shared/avatar.material.scss

@@ -1,4 +1,3 @@
-@use 'sass:map';
 @use 'styles/utilities' as *;
 @use '../light/themes' as *;
 

src/components/badge/badge.ts

@@ -1,8 +1,8 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { styles } from './themes/light/badge.base.css.js';
-import { styles as bootstrap } from './themes/light/badge.bootstrap.css.js';
+import { styles } from './themes/badge.base.css.js';
+import { all } from './themes/themes.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { registerComponent } from '../common/definitions/register.js';
 
@@ -16,7 +16,7 @@ import { registerComponent } from '../common/definitions/register.js';
  *
  * @csspart base - The base wrapper of the badge.
  */
-@themes({ light: { bootstrap }, dark: { bootstrap } })
+@themes(all)
 export default class IgcBadgeComponent extends LitElement {
   public static readonly tagName = 'igc-badge';
   public static override styles = styles;

src/components/badge/themes/light/badge.base.scss → src/components/badge/themes/badge.base.scss

@@ -1,12 +1,7 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
-@use 'themes' as *;
-
-$theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-badge');
-
     --size: #{rem(22px)};
     --_badge-size: var(--size);
 
@@ -30,10 +25,6 @@ $theme: $material;
     font-weight: inherit;
 }
 
-::slotted(igc-icon) {
-    color: var-get($theme, 'icon-color');
-}
-
 ::slotted(*) {
     --size: calc(var(--_badge-size) / 2) !important;
 
@@ -44,11 +35,6 @@ $theme: $material;
     padding: calc(var(--size) / 8) calc(var(--size) / 5.5);
 }
 
-:host([variant='primary']) {
-    background: var-get($theme, 'background-color');
-    color: var-get($theme, 'text-color');
-}
-
 :host([variant='info']) {
     background: color(info, 500);
     color: contrast-color(info, 500);
@@ -73,12 +59,3 @@ $theme: $material;
 :host([outlined][shape='rounded']) [part='base'] {
     border-radius: calc(var(--size) * 2);
 }
-
-:host([shape='square']),
-:host([outlined][shape='square']) [part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-}
-
-:host([outlined]) [part='base'] {
-    box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
-}

src/components/badge/themes/dark/badge.bootstrap.scss

@@ -3,8 +3,6 @@
 
 $theme: $bootstrap;
 
-@mixin theme() {
-    igc-badge {
-        @include css-vars-from-theme($theme, 'ig-badge');
-    }
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
 }

src/components/badge/themes/dark/badge.fluent.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/dark/badge.indigo.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/dark/badge.material.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/light/badge.bootstrap.scss

@@ -6,16 +6,3 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme($theme, 'ig-badge');
 }
-
-::slotted(igc-icon) {
-    color: var-get($theme, 'icon-color');
-}
-
-:host([shape='square']),
-:host([outlined][shape='square']) [part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-}
-
-:host([outlined]) [part='base'] {
-    box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
-}

src/components/badge/themes/light/badge.fluent.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/light/badge.indigo.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/light/badge.material.scss

@@ -0,0 +1,8 @@
+@use 'styles/utilities' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+:host {
+    @include css-vars-from-theme($theme, 'ig-badge');
+}

src/components/badge/themes/shared/badge.bootstrap.scss

@@ -0,0 +1,22 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $bootstrap;
+
+::slotted(igc-icon) {
+    color: var-get($theme, 'icon-color');
+}
+
+:host([variant='primary']) {
+    background: var-get($theme, 'background-color');
+    color: var-get($theme, 'text-color');
+}
+
+:host([shape='square']),
+:host([outlined][shape='square']) [part='base'] {
+    border-radius: var-get($theme, 'border-radius');
+}
+
+:host([outlined]) [part='base'] {
+    box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+}

src/components/badge/themes/shared/badge.fluent.scss

@@ -0,0 +1,22 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $fluent;
+
+::slotted(igc-icon) {
+    color: var-get($theme, 'icon-color');
+}
+
+:host([variant='primary']) {
+    background: var-get($theme, 'background-color');
+    color: var-get($theme, 'text-color');
+}
+
+:host([shape='square']),
+:host([outlined][shape='square']) [part='base'] {
+    border-radius: var-get($theme, 'border-radius');
+}
+
+:host([outlined]) [part='base'] {
+    box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
+}

src/components/badge/themes/shared/badge.indigo.scss

@@ -0,0 +1,22 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $indigo;
+
+::slotted(igc-icon) {
+    color: var-get($theme, 'icon-color');
+}
+
+:host([variant='primary']) {
+    background: var-get($theme, 'background-color');
+    color: var-get($theme, 'text-color');
+}
+
+:host([shape='square']),
+:host([outlined][shape='square']) [part='base'] {
+    border-radius: var-get($theme, 'border-radius');
+}
+
+:host([outlined]) [part='base'] {
+    box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
+}

src/components/badge/themes/shared/badge.material.scss

@@ -0,0 +1,22 @@
+@use 'styles/utilities' as *;
+@use '../light/themes' as *;
+
+$theme: $material;
+
+::slotted(igc-icon) {
+    color: var-get($theme, 'icon-color');
+}
+
+:host([variant='primary']) {
+    background: var-get($theme, 'background-color');
+    color: var-get($theme, 'text-color');
+}
+
+:host([shape='square']),
+:host([outlined][shape='square']) [part='base'] {
+    border-radius: var-get($theme, 'border-radius');
+}
+
+:host([outlined]) [part='base'] {
+    box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
+}