fix(themes): add missing typography styles (#392)

Co-authored-by: Stamen Stoychev <sstoychev@infragistics.com>
Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

src/components/calendar/themes/bootstrap/calendar.bootstrap.scss

@@ -31,3 +31,7 @@
     background: $header-background;
     color: $header-color;
 }
+
+[part='header-title'] {
+    @include type-category('subtitle-1');
+}

src/components/card/card.header.ts

@@ -1,6 +1,7 @@
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import { styles as bootstrap } from './themes/light/card.header.bootstrap.css.js';
+import { styles as fluent } from './themes/light/card.header.fluent.css.js';
 import { styles as indigo } from './themes/light/card.header.indigo.css.js';
 import { styles } from './themes/light/card.header.material.css.js';
 
@@ -16,6 +17,7 @@ import { styles } from './themes/light/card.header.material.css.js';
  */
 @themes({
   bootstrap,
+  fluent,
   indigo,
 })
 export default class IgcCardHeaderComponent extends LitElement {

src/components/card/themes/light/card.header.bootstrap.scss

@@ -9,6 +9,8 @@
 }
 
 ::slotted([slot='subtitle']) {
+    @include type-category('body-1');
+
     color: color(gray, 800);
     opacity: 1;
 }

src/components/card/themes/light/card.header.fluent.scss

@@ -0,0 +1,10 @@
+@use './card.header.material.scss';
+@use '../../../../styles/utilities' as *;
+
+::slotted([slot='title']) {
+    @include type-category('subtitle-1');
+}
+
+::slotted([slot='subtitle']) {
+    @include type-category('body-2');
+}

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

@@ -29,6 +29,8 @@
 }
 
 [part~='label'] {
+    @include type-category('body-2');
+
     transition: none;
 }
 

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

@@ -19,6 +19,10 @@ $disabled-color: var(--disabled-color, color(gray, 400)) !default;
     }
 }
 
+[part~='label'] {
+    @include type-category('body-2');
+}
+
 [part~='indicator'] {
     stroke: color(surface, 500);
     stroke-width: 1.5;

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

@@ -21,6 +21,10 @@ $disabled-color: var(--disabled-color, color(gray, 300)) !default;
     }
 }
 
+[part~='label'] {
+    @include type-category('body-1');
+}
+
 [part~='indicator'] {
     stroke: color(surface, 500);
     transform: scale(.8);

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

@@ -10,6 +10,10 @@ label {
     }
 }
 
+[part~='label'] {
+    @include type-category('subtitle-1');
+}
+
 [part~='indicator'] {
     stroke: color(surface, 500);
 }

src/components/checkbox/themes/light/switch.base.scss

@@ -58,6 +58,8 @@ label {
 }
 
 [part~='label'] {
+    @include type-category('subtitle-1');
+
     display: inline-block;
     color: color(gray, 900);
     cursor: pointer;

src/components/checkbox/themes/light/switch.fluent.scss

@@ -23,6 +23,10 @@ $disabled-color: var(--disabled-color, color(gray, 400)) !default;
     background: transparent;
 }
 
+[part~='label'] {
+    @include type-category('body-2');
+}
+
 :host(:hover) [part~='control'] {
     box-shadow: inset 0 0 0 1px $hover-color;
 }

src/components/chip/themes/chip.base.scss

@@ -7,6 +7,7 @@
 }
 
 :host button {
+    @include type-category('body-2');
     @include border-radius(rem(16px));
 
     display: flex;

src/components/chip/themes/chip.fluent.scss

@@ -2,6 +2,8 @@
 @use '../../../styles/utilities' as *;
 
 :host button {
+    @include type-category('subtitle-2');
+
     background: color(gray, 200);
     color: color(gray, 700);
 

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

@@ -109,6 +109,8 @@ $input-background: var(--input-background, #fff) !default;
     }
 
     [part='helper-text'] {
+        @include utils.type-category('body-2');
+
         margin-top: rem(4px);
         color: utils.color(gray, 700);
     }

src/components/list/themes/light/list-item.bootstrap.scss

@@ -19,3 +19,11 @@ $item-hover-bg: color(gray, 100) !default;
 :host(:last-of-type) {
     border-bottom: none;
 }
+
+[part='title'] {
+    @include type-category('body-1');
+}
+
+[part='subtitle'] {
+    @include type-category('subtitle-1');
+}

src/components/list/themes/light/list-item.fluent.scss

@@ -3,6 +3,10 @@
 $separator-color: color(gray, 100) !default;
 $item-hover-bg: var(--item-hover-bg, color(gray, 200)) !default;
 
+[part='title'] {
+    @include type-category('caption');
+}
+
 :host {
     border-bottom: rem(1px) solid $separator-color;
 }

src/components/list/themes/light/list-item.indigo.scss

@@ -8,6 +8,8 @@ $subtitle-color: color(gray, 800) !default;
     color: $item-color;
 
     [part='subtitle'] {
+        @include type-category('body-2');
+
         color: $subtitle-color;
     }
 }

src/components/nav-drawer/nav-drawer-header-item.ts

@@ -1,5 +1,6 @@
 import { html, LitElement } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
+import { styles as fluent } from './styles/fluent/nav-drawer-header-item.fluent.css.js';
 import { styles as indigo } from './styles/indigo/nav-drawer-header-item.indigo.css.js';
 import { styles } from './styles/nav-drawer-header-item.base.css.js';
 
@@ -9,7 +10,7 @@ import { styles } from './styles/nav-drawer-header-item.base.css.js';
  *
  * @slot - Renders the header content
  */
-@themes({ indigo })
+@themes({ fluent, indigo })
 export default class IgcNavDrawerHeaderItemComponent extends LitElement {
   public static readonly tagName = 'igc-nav-drawer-header-item';
   public static override styles = styles;

src/components/nav-drawer/nav-drawer-item.ts

@@ -7,6 +7,7 @@ import {
 } from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
+import { styles as fluent } from './styles/fluent/nav-drawer-item.fluent.css.js';
 import { styles as indigo } from './styles/indigo/nav-drawer-item.indigo.css.js';
 import { styles } from './styles/nav-drawer-item.base.css.js';
 
@@ -22,7 +23,7 @@ import { styles } from './styles/nav-drawer-item.base.css.js';
  * @csspart icon - The icon container.
  * @csspart content - The content container.
  */
-@themes({ indigo })
+@themes({ fluent, indigo })
 export default class IgcNavDrawerItemComponent extends LitElement {
   public static readonly tagName = 'igc-nav-drawer-item';
   public static override styles = styles;

src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss

@@ -0,0 +1,5 @@
+@use '../../../../styles/utilities/index' as *;
+
+:host {
+    @include type-category('caption');
+}

src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss

@@ -0,0 +1,5 @@
+@use '../../../../styles/utilities/index' as *;
+
+[part='base'] {
+    @include type-category('body-2');
+}

src/components/radio/themes/light/radio.base.scss

@@ -22,6 +22,10 @@ input[type='radio'] {
     }
 }
 
+[part~='label'] {
+    @include type-category('subtitle-1');
+}
+
 [part~='control'] {
     @include border-radius(var(--size));
 

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

@@ -31,6 +31,10 @@ $disabled-color: var(--disabled-color, utils.color(gray, 400)) !default;
     }
 }
 
+:host [part~='label'] {
+    @include utils.type-category('body-2');
+}
+
 :host(:hover),
 :host(:focus-within) {
     [part='control'] {

src/components/snackbar/themes/snackbar.base.scss

@@ -25,6 +25,7 @@
 }
 
 [part~='message'] {
+    @include type-category('body-2');
     @include line-clamp(2, true, true);
 
     flex: 1 1 50%;

src/components/snackbar/themes/snackbar.fluent.scss

@@ -7,3 +7,7 @@
     min-width: rem(352px);
     padding: rem(9px) rem(12px);
 }
+
+[part~='message'] {
+    @include type-category('caption');
+}

src/components/toast/themes/toast.base.scss

@@ -1,6 +1,7 @@
 @use '../../../styles/utilities' as *;
 
 :host {
+    @include type-category('body-2');
     @include border-radius(rem(26px));
 
     display: inline-flex;