From e059f5063353f53e5a1d2a9d83d2533e60c8ea8a Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 6 Jun 2022 12:57:32 +0300 Subject: [PATCH] fix(themes): add missing typography styles (#392) Co-authored-by: Stamen Stoychev Co-authored-by: Simeon Simeonoff --- .../calendar/themes/bootstrap/calendar.bootstrap.scss | 4 ++++ src/components/card/card.header.ts | 2 ++ .../card/themes/light/card.header.bootstrap.scss | 2 ++ .../card/themes/light/card.header.fluent.scss | 10 ++++++++++ .../checkbox/themes/light/checkbox.bootstrap.scss | 2 ++ .../checkbox/themes/light/checkbox.fluent.scss | 4 ++++ .../checkbox/themes/light/checkbox.indigo.scss | 4 ++++ .../checkbox/themes/light/checkbox.material.scss | 4 ++++ src/components/checkbox/themes/light/switch.base.scss | 2 ++ .../checkbox/themes/light/switch.fluent.scss | 4 ++++ src/components/chip/themes/chip.base.scss | 1 + src/components/chip/themes/chip.fluent.scss | 2 ++ src/components/input/themes/light/input.bootstrap.scss | 2 ++ .../list/themes/light/list-item.bootstrap.scss | 8 ++++++++ src/components/list/themes/light/list-item.fluent.scss | 4 ++++ src/components/list/themes/light/list-item.indigo.scss | 2 ++ src/components/nav-drawer/nav-drawer-header-item.ts | 3 ++- src/components/nav-drawer/nav-drawer-item.ts | 3 ++- .../styles/fluent/nav-drawer-header-item.fluent.scss | 5 +++++ .../styles/fluent/nav-drawer-item.fluent.scss | 5 +++++ src/components/radio/themes/light/radio.base.scss | 4 ++++ src/components/radio/themes/light/radio.fluent.scss | 4 ++++ src/components/snackbar/themes/snackbar.base.scss | 1 + src/components/snackbar/themes/snackbar.fluent.scss | 4 ++++ src/components/toast/themes/toast.base.scss | 1 + 25 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 src/components/card/themes/light/card.header.fluent.scss create mode 100644 src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss create mode 100644 src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss diff --git a/src/components/calendar/themes/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/bootstrap/calendar.bootstrap.scss index 02e917d43..b0c65a33a 100644 --- a/src/components/calendar/themes/bootstrap/calendar.bootstrap.scss +++ b/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'); +} diff --git a/src/components/card/card.header.ts b/src/components/card/card.header.ts index 966d50da3..6d366812e 100644 --- a/src/components/card/card.header.ts +++ b/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 { diff --git a/src/components/card/themes/light/card.header.bootstrap.scss b/src/components/card/themes/light/card.header.bootstrap.scss index 7c34531aa..6a39e252d 100644 --- a/src/components/card/themes/light/card.header.bootstrap.scss +++ b/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; } diff --git a/src/components/card/themes/light/card.header.fluent.scss b/src/components/card/themes/light/card.header.fluent.scss new file mode 100644 index 000000000..9d5784264 --- /dev/null +++ b/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'); +} diff --git a/src/components/checkbox/themes/light/checkbox.bootstrap.scss b/src/components/checkbox/themes/light/checkbox.bootstrap.scss index ae4e8476d..a77bbf8c9 100644 --- a/src/components/checkbox/themes/light/checkbox.bootstrap.scss +++ b/src/components/checkbox/themes/light/checkbox.bootstrap.scss @@ -29,6 +29,8 @@ } [part~='label'] { + @include type-category('body-2'); + transition: none; } diff --git a/src/components/checkbox/themes/light/checkbox.fluent.scss b/src/components/checkbox/themes/light/checkbox.fluent.scss index 20560c6e1..6c0d2ea71 100644 --- a/src/components/checkbox/themes/light/checkbox.fluent.scss +++ b/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; diff --git a/src/components/checkbox/themes/light/checkbox.indigo.scss b/src/components/checkbox/themes/light/checkbox.indigo.scss index 6fe7ed7a5..ed8d0c388 100644 --- a/src/components/checkbox/themes/light/checkbox.indigo.scss +++ b/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); diff --git a/src/components/checkbox/themes/light/checkbox.material.scss b/src/components/checkbox/themes/light/checkbox.material.scss index b95753067..945c831fc 100644 --- a/src/components/checkbox/themes/light/checkbox.material.scss +++ b/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); } diff --git a/src/components/checkbox/themes/light/switch.base.scss b/src/components/checkbox/themes/light/switch.base.scss index 8f029e2ae..3bacd0056 100644 --- a/src/components/checkbox/themes/light/switch.base.scss +++ b/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; diff --git a/src/components/checkbox/themes/light/switch.fluent.scss b/src/components/checkbox/themes/light/switch.fluent.scss index 20f786a45..3332c2157 100644 --- a/src/components/checkbox/themes/light/switch.fluent.scss +++ b/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; } diff --git a/src/components/chip/themes/chip.base.scss b/src/components/chip/themes/chip.base.scss index b4aa902fe..eabd4e368 100644 --- a/src/components/chip/themes/chip.base.scss +++ b/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; diff --git a/src/components/chip/themes/chip.fluent.scss b/src/components/chip/themes/chip.fluent.scss index a5a670f39..03c0fcfae 100644 --- a/src/components/chip/themes/chip.fluent.scss +++ b/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); diff --git a/src/components/input/themes/light/input.bootstrap.scss b/src/components/input/themes/light/input.bootstrap.scss index 2ee6ffd01..3c916f8bd 100644 --- a/src/components/input/themes/light/input.bootstrap.scss +++ b/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); } diff --git a/src/components/list/themes/light/list-item.bootstrap.scss b/src/components/list/themes/light/list-item.bootstrap.scss index 6dba0c2e9..dc32643e2 100644 --- a/src/components/list/themes/light/list-item.bootstrap.scss +++ b/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'); +} diff --git a/src/components/list/themes/light/list-item.fluent.scss b/src/components/list/themes/light/list-item.fluent.scss index b146ba2dd..781c54e5c 100644 --- a/src/components/list/themes/light/list-item.fluent.scss +++ b/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; } diff --git a/src/components/list/themes/light/list-item.indigo.scss b/src/components/list/themes/light/list-item.indigo.scss index aa22c1849..2264bf475 100644 --- a/src/components/list/themes/light/list-item.indigo.scss +++ b/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; } } diff --git a/src/components/nav-drawer/nav-drawer-header-item.ts b/src/components/nav-drawer/nav-drawer-header-item.ts index 7880a19bb..5c2fcd8bc 100644 --- a/src/components/nav-drawer/nav-drawer-header-item.ts +++ b/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; diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts index 535f50d0a..668c86b25 100644 --- a/src/components/nav-drawer/nav-drawer-item.ts +++ b/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; diff --git a/src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss b/src/components/nav-drawer/styles/fluent/nav-drawer-header-item.fluent.scss new file mode 100644 index 000000000..8060013b7 --- /dev/null +++ b/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'); +} diff --git a/src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss b/src/components/nav-drawer/styles/fluent/nav-drawer-item.fluent.scss new file mode 100644 index 000000000..533d87949 --- /dev/null +++ b/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'); +} diff --git a/src/components/radio/themes/light/radio.base.scss b/src/components/radio/themes/light/radio.base.scss index ea0994b80..1ea07ca27 100644 --- a/src/components/radio/themes/light/radio.base.scss +++ b/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)); diff --git a/src/components/radio/themes/light/radio.fluent.scss b/src/components/radio/themes/light/radio.fluent.scss index 33c72ace1..c9c4c1375 100644 --- a/src/components/radio/themes/light/radio.fluent.scss +++ b/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'] { diff --git a/src/components/snackbar/themes/snackbar.base.scss b/src/components/snackbar/themes/snackbar.base.scss index 68b00ce34..be314f061 100644 --- a/src/components/snackbar/themes/snackbar.base.scss +++ b/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%; diff --git a/src/components/snackbar/themes/snackbar.fluent.scss b/src/components/snackbar/themes/snackbar.fluent.scss index 601c4c171..f12c16194 100644 --- a/src/components/snackbar/themes/snackbar.fluent.scss +++ b/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'); +} diff --git a/src/components/toast/themes/toast.base.scss b/src/components/toast/themes/toast.base.scss index 532d5798c..0c908916b 100644 --- a/src/components/toast/themes/toast.base.scss +++ b/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;