From 2b08ef2ab349d2f4bb8481fff9f4d9b8d5ff1287 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 2 Jul 2024 11:16:43 +0300 Subject: [PATCH] Indigo Themes: Updates to Toast, Stepper, Rating (#1249) --- package-lock.json | 9 +++--- package.json | 2 +- .../rating/themes/rating-symbol.base.scss | 2 -- src/components/rating/themes/rating.base.scss | 2 ++ .../rating/themes/shared/rating.indigo.scss | 18 ++++++++--- .../themes/step/shared/step.common.scss | 31 +++++++++++++++++-- .../themes/step/shared/step.indigo.scss | 12 +++++++ .../themes/stepper/stepper.indigo.scss | 9 ++++-- .../toast/themes/shared/toast.bootstrap.scss | 2 +- .../toast/themes/shared/toast.common.scss | 5 ++- .../toast/themes/shared/toast.fluent.scss | 2 ++ src/components/toast/themes/toast.base.scss | 9 ++++++ stories/stepper.stories.ts | 7 +++-- 13 files changed, 90 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 40877e411..dd349381d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "globby": "^14.0.2", "husky": "^9.0.11", "ig-typedoc-theme": "^5.0.4", - "igniteui-theming": "^9.0.0", + "igniteui-theming": "^10.0.0", "keep-a-changelog": "^2.5.3", "lint-staged": "^15.2.7", "lit-analyzer": "^2.0.3", @@ -11081,11 +11081,10 @@ } }, "node_modules/igniteui-theming": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-9.0.0.tgz", - "integrity": "sha512-Y6teKh2jruvQFdwJUlDVRkGiMuLw7KTpT7PJ5gSiY8ZQOO/Fz1D/3upm+MWodMs/jY5a+ms9JAag1OBgh1x4Tg==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-10.0.0.tgz", + "integrity": "sha512-76usU65w0amIGDAmwrxfrPKz1W0Bzfe+24/q5fxyKCyKWzbLxCUyNHdfHY//tHBEKQF5Y3uSTFbY872J4cXxpw==", "dev": true, - "license": "MIT", "peerDependencies": { "sass": "^1.58.1" } diff --git a/package.json b/package.json index 83e22e21e..3ca1d7d80 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "globby": "^14.0.2", "husky": "^9.0.11", "ig-typedoc-theme": "^5.0.4", - "igniteui-theming": "^9.0.0", + "igniteui-theming": "^10.0.0", "keep-a-changelog": "^2.5.3", "lint-staged": "^15.2.7", "lit-analyzer": "^2.0.3", diff --git a/src/components/rating/themes/rating-symbol.base.scss b/src/components/rating/themes/rating-symbol.base.scss index ba84db47a..90af8846a 100644 --- a/src/components/rating/themes/rating-symbol.base.scss +++ b/src/components/rating/themes/rating-symbol.base.scss @@ -2,8 +2,6 @@ @use 'styles/utilities' as *; :host { - --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))}; - display: flex; justify-content: center; align-items: center; diff --git a/src/components/rating/themes/rating.base.scss b/src/components/rating/themes/rating.base.scss index 2a8bb2269..05c52d63f 100644 --- a/src/components/rating/themes/rating.base.scss +++ b/src/components/rating/themes/rating.base.scss @@ -17,6 +17,8 @@ } [part~='symbols'] { + --symbol-size: #{sizable(rem(18px), rem(24px), rem(36px))}; + position: relative; display: flex; justify-content: center; diff --git a/src/components/rating/themes/shared/rating.indigo.scss b/src/components/rating/themes/shared/rating.indigo.scss index 6017cba0d..792297704 100644 --- a/src/components/rating/themes/shared/rating.indigo.scss +++ b/src/components/rating/themes/shared/rating.indigo.scss @@ -4,16 +4,26 @@ $theme: $indigo; :host { - --component-size: var(--ig-size, #{var-get($theme, 'default-size')}); + --default-size: 2; + --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important; - gap: rem(5px); + gap: rem(4px); } [part='base'] { gap: rem(8px); } -[part~='label'], [part~='value-label'] { - @include type-style('body-1'); + @include type-style('caption'); +} + +[part~='label'] { + padding-inline-start: rem(2px); +} + +[part~='symbols'] { + --symbol-size: #{sizable(rem(18px), rem(24px), rem(30px))}; + + padding-inline-end: 0; } diff --git a/src/components/stepper/themes/step/shared/step.common.scss b/src/components/stepper/themes/step/shared/step.common.scss index 6c1083222..fea42f7a1 100644 --- a/src/components/stepper/themes/step/shared/step.common.scss +++ b/src/components/stepper/themes/step/shared/step.common.scss @@ -84,6 +84,18 @@ $theme: $material; } :host([complete]) { + [part~='header'] { + &:hover { + background: var-get($theme, 'complete-step-hover-background'); + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'complete-step-focus-background'); + } + } + [part~='body'] { &::before { border-inline-start-style: var-get($theme, 'complete-step-separator-style'); @@ -113,13 +125,28 @@ $theme: $material; box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); } - [part~='title'], - [part~='subtitle'] { + [part~='title'] { color: var-get($theme, 'invalid-title-color'); } + + [part~='subtitle'] { + color: var-get($theme, 'invalid-subtitle-color') + } } :host([active]) { + [part~='header'] { + &:hover { + background: var-get($theme, 'current-step-hover-background'); + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'current-step-focus-background'); + } + } + [part~='indicator'] { background: var-get($theme, 'current-indicator-background'); color: var-get($theme, 'current-indicator-color'); diff --git a/src/components/stepper/themes/step/shared/step.indigo.scss b/src/components/stepper/themes/step/shared/step.indigo.scss index 323451de7..82a64e29c 100644 --- a/src/components/stepper/themes/step/shared/step.indigo.scss +++ b/src/components/stepper/themes/step/shared/step.indigo.scss @@ -4,6 +4,8 @@ $theme: $indigo; [part~='indicator'] { + @include type-style('button'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); } @@ -14,11 +16,21 @@ $theme: $indigo; } :host([active]) { + [part~='title'] { + @include type-style('subtitle-2'); + } + [part~='indicator'] { box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); } } +[part~='content'] { + @include type-style('body-2'); + + color: var-get($theme, 'content-foreground'); +} + [part~='disabled'] { [part~='indicator'] { box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); diff --git a/src/components/stepper/themes/stepper/stepper.indigo.scss b/src/components/stepper/themes/stepper/stepper.indigo.scss index 99723edcc..d5b337217 100644 --- a/src/components/stepper/themes/stepper/stepper.indigo.scss +++ b/src/components/stepper/themes/stepper/stepper.indigo.scss @@ -3,6 +3,11 @@ // STEPPER :host { - --indicator-box-shadow-size: #{rem(2px)}; - --separator-size: #{rem(2px)}; + --indicator-box-shadow-size: #{rem(1px)}; + --separator-size: #{rem(1px)}; +} + +:host([orientation='horizontal']) { + --separator-min-width : #{rem(40px)}; + --horizontal-body-padding: #{rem(16px)}; } diff --git a/src/components/toast/themes/shared/toast.bootstrap.scss b/src/components/toast/themes/shared/toast.bootstrap.scss index c54d3d170..55018a2fa 100644 --- a/src/components/toast/themes/shared/toast.bootstrap.scss +++ b/src/components/toast/themes/shared/toast.bootstrap.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; :host { - padding: rem(11px); + padding: rem(12px); } diff --git a/src/components/toast/themes/shared/toast.common.scss b/src/components/toast/themes/shared/toast.common.scss index 421f7e3d0..75da5efbe 100644 --- a/src/components/toast/themes/shared/toast.common.scss +++ b/src/components/toast/themes/shared/toast.common.scss @@ -7,7 +7,10 @@ $theme: $material; padding: rem(10px) rem(16px); color: var-get($theme, 'text-color'); background: var-get($theme, 'background'); - border: #{rem(1px)} solid var-get($theme, 'border-color'); box-shadow: var-get($theme, 'elevation'); border-radius: var-get($theme, 'border-radius'); + + &::after { + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); + } } diff --git a/src/components/toast/themes/shared/toast.fluent.scss b/src/components/toast/themes/shared/toast.fluent.scss index b3f5b300a..beea27949 100644 --- a/src/components/toast/themes/shared/toast.fluent.scss +++ b/src/components/toast/themes/shared/toast.fluent.scss @@ -4,4 +4,6 @@ @include type-style('caption'); padding: rem(8px) rem(12px); + margin-block: rem(42px); + margin-inline: auto; } diff --git a/src/components/toast/themes/toast.base.scss b/src/components/toast/themes/toast.base.scss index 6fce6015f..50ec5fe3a 100644 --- a/src/components/toast/themes/toast.base.scss +++ b/src/components/toast/themes/toast.base.scss @@ -13,6 +13,15 @@ transform: translateX(calc(-50% + .5px)); margin: rem(42px) auto; min-width: rem(52px); + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + border-radius: inherit; + inset-inline: 0; + } } :host([position='bottom']) { diff --git a/stories/stepper.stories.ts b/stories/stepper.stories.ts index 302772704..a67493ad0 100644 --- a/stories/stepper.stories.ts +++ b/stories/stepper.stories.ts @@ -145,8 +145,9 @@ const BasicTemplate = ({ .verticalAnimation=${verticalAnimation} .horizontalAnimation=${horizontalAnimation} > - + Step1 + (completed)

@@ -155,6 +156,7 @@ const BasicTemplate = ({ Step 2 + (default)

@@ -174,8 +176,9 @@ const BasicTemplate = ({ Next - + Step 4 + (disabled)
Tabbable content