refactor(themes): optimize CSS to reduce bundle size (#972)

scripts/build-styles.mjs

@@ -39,6 +39,7 @@ export async function buildThemes() {
   const startTime = new Date();
   const paths = await globby([
     'src/components/**/*.base.scss',
+    'src/components/**/*.common.scss',
     'src/components/**/*.material.scss',
     'src/components/**/*.bootstrap.scss',
     'src/components/**/*.indigo.scss',

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

@@ -6,23 +6,3 @@ $theme: $bootstrap;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
-
-[part='base'] {
-    color: var-get($theme, 'color');
-    background: var-get($theme, 'background');
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
-
-    [part='initials'] {
-        font-size: calc(var-get($theme, 'size') / 2);
-        line-height: calc(var-get($theme, 'size') / 2);
-    }
-}
-
-:host([shape='rounded']) [part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-}
-
-:host([shape='circle']) [part='base'] {
-    border-radius: calc(var-get($theme, 'size') / 2);
-}

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

@@ -6,23 +6,3 @@ $theme: $fluent;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
-
-[part='base'] {
-    color: var-get($theme, 'color');
-    background: var-get($theme, 'background');
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
-
-    [part='initials'] {
-        font-size: calc(var-get($theme, 'size') / 2);
-        line-height: calc(var-get($theme, 'size') / 2);
-    }
-}
-
-:host([shape='rounded']) [part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-}
-
-:host([shape='circle']) [part='base'] {
-    border-radius: calc(var-get($theme, 'size') / 2);
-}

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

@@ -6,23 +6,3 @@ $theme: $indigo;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
-
-[part='base'] {
-    color: var-get($theme, 'color');
-    background: var-get($theme, 'background');
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
-
-    [part='initials'] {
-        font-size: calc(var-get($theme, 'size') / 2);
-        line-height: calc(var-get($theme, 'size') / 2);
-    }
-}
-
-:host([shape='rounded']) [part='base'] {
-    border-radius: var-get($theme, 'border-radius');
-}
-
-:host([shape='circle']) [part='base'] {
-    border-radius: calc(var-get($theme, 'size') / 2);
-}

src/components/avatar/themes/themes.ts

@@ -12,38 +12,38 @@ import { styles as indigoLight } from './light/avatar.indigo.css.js';
 import { styles as materialLight } from './light/avatar.material.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/avatar.bootstrap.css.js';
+import { styles as shared } from './shared/avatar.common.css.js';
 import { styles as fluent } from './shared/avatar.fluent.css.js';
 import { styles as indigo } from './shared/avatar.indigo.css.js';
-import { styles as material } from './shared/avatar.material.css.js';
 import type { Themes } from '../../../theming/types.js';
 
 const light = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${shared} ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${shared} ${materialLight}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${shared} ${fluent} ${fluentLight}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${shared} ${indigo} ${indigoLight}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${shared} ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${shared} ${materialDark}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${shared} ${fluent} ${fluentDark}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${shared} ${indigo} ${indigoDark}
   `,
 };
 

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

@@ -3,20 +3,6 @@
 
 $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/themes.ts

@@ -12,38 +12,36 @@ import { styles as indigoLight } from './light/badge.indigo.css.js';
 import { styles as materialLight } from './light/badge.material.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/badge.bootstrap.css.js';
-import { styles as fluent } from './shared/badge.fluent.css.js';
-import { styles as indigo } from './shared/badge.indigo.css.js';
-import { styles as material } from './shared/badge.material.css.js';
+import { styles as shared } from './shared/badge.common.css.js';
 import { Themes } from '../../../theming/types.js';
 
 const light = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${shared} ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${shared} ${materialLight}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${shared} ${fluentLight}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${shared} ${indigoLight}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${shared} ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${shared} ${materialDark}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${shared} ${fluentDark}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${shared} ${indigoDark}
   `,
 };
 

src/components/button-group/themes/button.ts

@@ -2,38 +2,38 @@ import { css } from 'lit';
 
 // Shared Styles
 import { styles as bootstrap } from './shared/button/button.bootstrap.css.js';
+import { styles as shared } from './shared/button/button.common.css.js';
 import { styles as fluent } from './shared/button/button.fluent.css.js';
 import { styles as indigo } from './shared/button/button.indigo.css.js';
-import { styles as material } from './shared/button/button.material.css.js';
 import type { Themes } from '../../../theming/types';
 
 const light = {
   bootstrap: css`
-    ${bootstrap}
+    ${shared} ${bootstrap}
   `,
   material: css`
-    ${material}
+    ${shared}
   `,
   fluent: css`
-    ${fluent}
+    ${shared} ${fluent}
   `,
   indigo: css`
-    ${indigo}
+    ${shared} ${indigo}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap}
+    ${shared} ${bootstrap}
   `,
   material: css`
-    ${material}
+    ${shared}
   `,
   fluent: css`
-    ${fluent}
+    ${shared} ${fluent}
   `,
   indigo: css`
-    ${indigo}
+    ${shared} ${indigo}
   `,
 };
 

src/components/button-group/themes/group.ts

@@ -12,38 +12,38 @@ import { styles as indigoLight } from './light/button-group.indigo.css.js';
 import { styles as materialLight } from './light/button-group.material.css.js';
 // Shared Styles
 import { styles as bootstrap } from './shared/group/group.bootstrap.css.js';
+import { styles as shared } from './shared/group/group.common.css.js';
 import { styles as fluent } from './shared/group/group.fluent.css.js';
 import { styles as indigo } from './shared/group/group.indigo.css.js';
-import { styles as material } from './shared/group/group.material.css.js';
 import type { Themes } from '../../../theming/types';
 
 const light = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${shared} ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${shared} ${materialLight}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${shared} ${fluent} ${fluentLight}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${shared} ${indigo} ${indigoLight}
   `,
 };
 
 const dark = {
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${shared} ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${shared} ${materialDark}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${shared} ${fluent} ${fluentDark}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${shared} ${indigo} ${indigoDark}
   `,
 };
 

src/components/button-group/themes/shared/button/button.bootstrap.scss

@@ -8,16 +8,8 @@ $group-item-border-thickness: rem(1px);
     min-width: var(--button-min-width);
 
     [part~='toggle'] {
-        $icon-size: rem(18px);
-
-        --ig-icon-size: #{$icon-size};
-        --igx-icon-size: #{$icon-size};
-
         min-height: $bootstrap-flat-btn-size;
         border-width: $group-item-border-thickness;
-        border-color: var-get($theme, 'item-border-color');
-        color: var-get($theme, 'item-text-color');
-        background: var-get($theme, 'item-background');
         padding-inline: pad-inline(rem(8px), rem(10px), rem(12px));
         padding-block: pad-block(rem(2px), rem(4px), rem(7px));
         min-width: var(--button-min-width);
@@ -27,8 +19,6 @@ $group-item-border-thickness: rem(1px);
 :host(:hover),
 :host(:focus) {
     [part~='toggle'] {
-        color: var-get($theme, 'item-hover-text-color');
-        background: var-get($theme, 'item-hover-background');
         border-color: var-get($theme, 'item-border-color');
     }
 }
@@ -38,28 +28,3 @@ $group-item-border-thickness: rem(1px);
         box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');
     }
 }
-
-:host([selected]) {
-    [part~='toggle'] {
-        color: var-get($theme, 'item-selected-text-color');
-        background: var-get($theme, 'item-selected-background');
-        border-color: var-get($theme, 'item-selected-border-color');
-    }
-}
-
-:host([selected]:hover),
-:host([selected]:focus) {
-    [part~='toggle'] {
-        color: var-get($theme, 'item-selected-text-color');
-        background: var-get($theme, 'item-selected-hover-background');
-    }
-}
-
-:host([disabled]),
-:host(:disabled) {
-    [part~='toggle'] {
-        color: var-get($theme, 'disabled-text-color');
-        background: var-get($theme, 'disabled-background-color');
-        border-color: var-get($theme, 'item-disabled-border');
-    }
-}