diff --git a/package-lock.json b/package-lock.json index 077cffc9c..d65624c57 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,7 +39,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", "igniteui-typedoc-theme": "^3.1.0", "keep-a-changelog": "^2.4.1", "lint-staged": "^15.0.1", @@ -14209,9 +14209,9 @@ ] }, "node_modules/igniteui-theming": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.2.0.tgz", - "integrity": "sha512-0nqXKvcHbsOfGRoJnj9eQZSiqrgEy49tPxruFvODg2Avj7CLO02qfW+p9LPvxiQome8E2iv3EbgULHh/bHVgVw==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.3.0.tgz", + "integrity": "sha512-0kJMYl9i05Acz5MTzURZdNzsM6mNNRDlCRzY3x+t0TRlh+mLXHd+gsmN4bvavU/IovN8/YVGYO54N0Zfd88PJA==", "dev": true, "peerDependencies": { "sass": "^1.58.1" diff --git a/package.json b/package.json index a61235a3f..cec70ba79 100644 --- a/package.json +++ b/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", "igniteui-typedoc-theme": "^3.1.0", "keep-a-changelog": "^2.4.1", "lint-staged": "^15.0.1", diff --git a/scripts/build-styles.mjs b/scripts/build-styles.mjs index 68b9a1c56..d01b6f7eb 100644 --- a/scripts/build-styles.mjs +++ b/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'] }); diff --git a/scripts/sass.mjs b/scripts/sass.mjs index 8d2f42600..0b30b5fb0 100644 --- a/scripts/sass.mjs +++ b/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'] }); diff --git a/src/components/accordion/themes/accordion.base.scss b/src/components/accordion/themes/accordion.base.scss index dbead6328..c311253d7 100644 --- a/src/components/accordion/themes/accordion.base.scss +++ b/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) { diff --git a/src/components/avatar/themes/dark/_themes.scss b/src/components/avatar/themes/dark/_themes.scss index b9cfea0f4..a601e472a 100644 --- a/src/components/avatar/themes/dark/_themes.scss +++ b/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 *; diff --git a/src/components/avatar/themes/dark/avatar.bootstrap.scss b/src/components/avatar/themes/dark/avatar.bootstrap.scss index 15190f814..014512583 100644 --- a/src/components/avatar/themes/dark/avatar.bootstrap.scss +++ b/src/components/avatar/themes/dark/avatar.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/dark/avatar.fluent.scss b/src/components/avatar/themes/dark/avatar.fluent.scss index 41745b685..212ee6de0 100644 --- a/src/components/avatar/themes/dark/avatar.fluent.scss +++ b/src/components/avatar/themes/dark/avatar.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/dark/avatar.indigo.scss b/src/components/avatar/themes/dark/avatar.indigo.scss index 4c1757625..8a7344807 100644 --- a/src/components/avatar/themes/dark/avatar.indigo.scss +++ b/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; diff --git a/src/components/avatar/themes/dark/avatar.material.scss b/src/components/avatar/themes/dark/avatar.material.scss index 01f7f8806..fd492c8ea 100644 --- a/src/components/avatar/themes/dark/avatar.material.scss +++ b/src/components/avatar/themes/dark/avatar.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/light/_themes.scss b/src/components/avatar/themes/light/_themes.scss index 1cedb47c7..50388a4d2 100644 --- a/src/components/avatar/themes/light/_themes.scss +++ b/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 *; diff --git a/src/components/avatar/themes/light/avatar.bootstrap.scss b/src/components/avatar/themes/light/avatar.bootstrap.scss index 15190f814..014512583 100644 --- a/src/components/avatar/themes/light/avatar.bootstrap.scss +++ b/src/components/avatar/themes/light/avatar.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/light/avatar.fluent.scss b/src/components/avatar/themes/light/avatar.fluent.scss index 41745b685..212ee6de0 100644 --- a/src/components/avatar/themes/light/avatar.fluent.scss +++ b/src/components/avatar/themes/light/avatar.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/light/avatar.indigo.scss b/src/components/avatar/themes/light/avatar.indigo.scss index 6426e5ed5..8a7344807 100644 --- a/src/components/avatar/themes/light/avatar.indigo.scss +++ b/src/components/avatar/themes/light/avatar.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/light/avatar.material.scss b/src/components/avatar/themes/light/avatar.material.scss index 01f7f8806..fd492c8ea 100644 --- a/src/components/avatar/themes/light/avatar.material.scss +++ b/src/components/avatar/themes/light/avatar.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/avatar/themes/shared/avatar.bootstrap.scss b/src/components/avatar/themes/shared/avatar.bootstrap.scss index 2863bd08f..cfcd0cfea 100644 --- a/src/components/avatar/themes/shared/avatar.bootstrap.scss +++ b/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); } - diff --git a/src/components/avatar/themes/shared/avatar.fluent.scss b/src/components/avatar/themes/shared/avatar.fluent.scss index d51f59349..44d82430d 100644 --- a/src/components/avatar/themes/shared/avatar.fluent.scss +++ b/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); } - diff --git a/src/components/avatar/themes/shared/avatar.indigo.scss b/src/components/avatar/themes/shared/avatar.indigo.scss index d372bf8e8..0fe4a3880 100644 --- a/src/components/avatar/themes/shared/avatar.indigo.scss +++ b/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); } - diff --git a/src/components/avatar/themes/shared/avatar.material.scss b/src/components/avatar/themes/shared/avatar.material.scss index 06bb96473..644dd0e01 100644 --- a/src/components/avatar/themes/shared/avatar.material.scss +++ b/src/components/avatar/themes/shared/avatar.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../light/themes' as *; diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts index 943d32a52..1ec822e34 100644 --- a/src/components/badge/badge.ts +++ b/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; diff --git a/src/components/badge/themes/light/badge.base.scss b/src/components/badge/themes/badge.base.scss similarity index 71% rename from src/components/badge/themes/light/badge.base.scss rename to src/components/badge/themes/badge.base.scss index 7ca894ba9..a7e750a62 100644 --- a/src/components/badge/themes/light/badge.base.scss +++ b/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'); -} diff --git a/src/components/badge/themes/dark/badge.bootstrap.scss b/src/components/badge/themes/dark/badge.bootstrap.scss index 1df67f844..55d87ec40 100644 --- a/src/components/badge/themes/dark/badge.bootstrap.scss +++ b/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'); } diff --git a/src/components/badge/themes/dark/badge.fluent.scss b/src/components/badge/themes/dark/badge.fluent.scss new file mode 100644 index 000000000..5a15c1e6d --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/dark/badge.indigo.scss b/src/components/badge/themes/dark/badge.indigo.scss new file mode 100644 index 000000000..4da7ba27e --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/dark/badge.material.scss b/src/components/badge/themes/dark/badge.material.scss new file mode 100644 index 000000000..63b681105 --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/light/badge.bootstrap.scss b/src/components/badge/themes/light/badge.bootstrap.scss index cb361d49b..55d87ec40 100644 --- a/src/components/badge/themes/light/badge.bootstrap.scss +++ b/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'); -} diff --git a/src/components/badge/themes/light/badge.fluent.scss b/src/components/badge/themes/light/badge.fluent.scss new file mode 100644 index 000000000..5a15c1e6d --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/light/badge.indigo.scss b/src/components/badge/themes/light/badge.indigo.scss new file mode 100644 index 000000000..4da7ba27e --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/light/badge.material.scss b/src/components/badge/themes/light/badge.material.scss new file mode 100644 index 000000000..63b681105 --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/shared/badge.bootstrap.scss b/src/components/badge/themes/shared/badge.bootstrap.scss new file mode 100644 index 000000000..a1a5a208d --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/shared/badge.fluent.scss b/src/components/badge/themes/shared/badge.fluent.scss new file mode 100644 index 000000000..a5d86b522 --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/shared/badge.indigo.scss b/src/components/badge/themes/shared/badge.indigo.scss new file mode 100644 index 000000000..dba481113 --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/shared/badge.material.scss b/src/components/badge/themes/shared/badge.material.scss new file mode 100644 index 000000000..77a2dc6ec --- /dev/null +++ b/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'); +} diff --git a/src/components/badge/themes/themes.ts b/src/components/badge/themes/themes.ts new file mode 100644 index 000000000..1249d147c --- /dev/null +++ b/src/components/badge/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/badge.bootstrap.css.js'; +import { styles as fluentDark } from './dark/badge.fluent.css.js'; +import { styles as indigoDark } from './dark/badge.indigo.css.js'; +import { styles as materialDark } from './dark/badge.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/badge.bootstrap.css.js'; +import { styles as fluentLight } from './light/badge.fluent.css.js'; +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 { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index 21fe4adb9..20cf5a9d6 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -1,13 +1,10 @@ import { LitElement, html } from 'lit'; import { property, queryAssignedElements } from 'lit/decorators.js'; +import { styles } from './themes/group.base.css.js'; +import { all } from './themes/group.js'; import IgcToggleButtonComponent from './toggle-button.js'; import { themes } from '../../theming/theming-decorator.js'; -import { styles } from '../button-group/themes/light/button-group.base.css.js'; -import { styles as bootstrap } from '../button-group/themes/light/button-group.bootstrap.css.js'; -import { styles as fluent } from '../button-group/themes/light/button-group.fluent.css.js'; -import { styles as indigo } from '../button-group/themes/light/button-group.indigo.css.js'; -import { styles as material } from '../button-group/themes/light/button-group.material.css.js'; import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; import type { Constructor } from '../common/mixins/constructor.js'; @@ -30,10 +27,7 @@ export interface IgcButtonGroupComponentEventMap { * * @csspart group - The button group container. */ -@themes({ - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, -}) +@themes(all, true) export default class IgcButtonGroupComponent extends EventEmitterMixin< IgcButtonGroupComponentEventMap, Constructor diff --git a/src/components/button-group/themes/light/toggle-button/toggle-button.base.scss b/src/components/button-group/themes/button.base.scss similarity index 99% rename from src/components/button-group/themes/light/toggle-button/toggle-button.base.scss rename to src/components/button-group/themes/button.base.scss index 499f54d09..17878d0ab 100644 --- a/src/components/button-group/themes/light/toggle-button/toggle-button.base.scss +++ b/src/components/button-group/themes/button.base.scss @@ -1,7 +1,6 @@ @use 'styles/common/component'; @use 'styles/utilities' as *; - $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955); :host { diff --git a/src/components/button-group/themes/button.ts b/src/components/button-group/themes/button.ts new file mode 100644 index 000000000..537006404 --- /dev/null +++ b/src/components/button-group/themes/button.ts @@ -0,0 +1,40 @@ +import { css } from 'lit'; + +// Shared Styles +import { styles as bootstrap } from './shared/button/button.bootstrap.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 { Themes } from '../../../theming/types'; + +const light = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/button-group/themes/dark/_themes.scss b/src/components/button-group/themes/dark/_themes.scss index 86f33211d..406f58934 100644 --- a/src/components/button-group/themes/dark/_themes.scss +++ b/src/components/button-group/themes/dark/_themes.scss @@ -1,5 +1,4 @@ @use 'sass:map'; -@use 'sass:list'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/button-group' as *; @use '../../../button/themes/button/dark/themes' as *; @@ -12,3 +11,4 @@ $material: digest-schema($dark-button-group); $bootstrap: digest-schema($dark-bootstrap-button-group); $fluent: digest-schema($dark-fluent-button-group); $indigo: digest-schema($dark-indigo-button-group); + diff --git a/src/components/button-group/themes/dark/button-group-bootstrap.scss b/src/components/button-group/themes/dark/button-group-bootstrap.scss deleted file mode 100644 index f1bfd5827..000000000 --- a/src/components/button-group/themes/dark/button-group-bootstrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-button-group { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/button-group-fluent.scss b/src/components/button-group/themes/dark/button-group-fluent.scss deleted file mode 100644 index 1db1fea8f..000000000 --- a/src/components/button-group/themes/dark/button-group-fluent.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $fluent; - -@mixin theme() { - igc-button-group { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/button-group-indigo.scss b/src/components/button-group/themes/dark/button-group-indigo.scss deleted file mode 100644 index 7133be8f5..000000000 --- a/src/components/button-group/themes/dark/button-group-indigo.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-button-group { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/button-group-material.scss b/src/components/button-group/themes/dark/button-group-material.scss deleted file mode 100644 index 064d3346e..000000000 --- a/src/components/button-group/themes/dark/button-group-material.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $material; - -@mixin theme() { - igc-button-group { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/button-group.bootstrap.scss b/src/components/button-group/themes/dark/button-group.bootstrap.scss new file mode 100644 index 000000000..514660b2c --- /dev/null +++ b/src/components/button-group/themes/dark/button-group.bootstrap.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($bootstrap, 'ig-button-group'); +} diff --git a/src/components/button-group/themes/dark/button-group.fluent.scss b/src/components/button-group/themes/dark/button-group.fluent.scss new file mode 100644 index 000000000..0149d7230 --- /dev/null +++ b/src/components/button-group/themes/dark/button-group.fluent.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($fluent, 'ig-button-group'); +} + diff --git a/src/components/button-group/themes/dark/button-group.indigo.scss b/src/components/button-group/themes/dark/button-group.indigo.scss new file mode 100644 index 000000000..7e0c714d4 --- /dev/null +++ b/src/components/button-group/themes/dark/button-group.indigo.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($indigo, 'ig-button-group'); +} diff --git a/src/components/button-group/themes/dark/button-group.material.scss b/src/components/button-group/themes/dark/button-group.material.scss new file mode 100644 index 000000000..5ab000b4e --- /dev/null +++ b/src/components/button-group/themes/dark/button-group.material.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($material, 'ig-button-group'); +} diff --git a/src/components/button-group/themes/dark/toggle-button/toggle-button-bootstrap.scss b/src/components/button-group/themes/dark/toggle-button/toggle-button-bootstrap.scss deleted file mode 100644 index 39f8b2d9f..000000000 --- a/src/components/button-group/themes/dark/toggle-button/toggle-button-bootstrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-toggle-button { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/toggle-button/toggle-button-fluent.scss b/src/components/button-group/themes/dark/toggle-button/toggle-button-fluent.scss deleted file mode 100644 index 1f964461e..000000000 --- a/src/components/button-group/themes/dark/toggle-button/toggle-button-fluent.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../themes' as *; - -$theme: $fluent; - -@mixin theme() { - igc-toggle-button { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} - diff --git a/src/components/button-group/themes/dark/toggle-button/toggle-button-indigo.scss b/src/components/button-group/themes/dark/toggle-button/toggle-button-indigo.scss deleted file mode 100644 index ce89bb4de..000000000 --- a/src/components/button-group/themes/dark/toggle-button/toggle-button-indigo.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-toggle-button { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/dark/toggle-button/toggle-button-material.scss b/src/components/button-group/themes/dark/toggle-button/toggle-button-material.scss deleted file mode 100644 index f44aef7b2..000000000 --- a/src/components/button-group/themes/dark/toggle-button/toggle-button-material.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../themes' as *; - -$theme: $material; - -@mixin theme() { - igc-toggle-button { - @include css-vars-from-theme($theme, 'ig-button-group'); - } -} diff --git a/src/components/button-group/themes/light/button-group.base.scss b/src/components/button-group/themes/group.base.scss similarity index 99% rename from src/components/button-group/themes/light/button-group.base.scss rename to src/components/button-group/themes/group.base.scss index 22fc4c9ad..780b792a4 100644 --- a/src/components/button-group/themes/light/button-group.base.scss +++ b/src/components/button-group/themes/group.base.scss @@ -28,4 +28,3 @@ grid-auto-flow: row; } } - diff --git a/src/components/button-group/themes/group.ts b/src/components/button-group/themes/group.ts new file mode 100644 index 000000000..a56194f46 --- /dev/null +++ b/src/components/button-group/themes/group.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/button-group.bootstrap.css.js'; +import { styles as fluentDark } from './dark/button-group.fluent.css.js'; +import { styles as indigoDark } from './dark/button-group.indigo.css.js'; +import { styles as materialDark } from './dark/button-group.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/button-group.bootstrap.css.js'; +import { styles as fluentLight } from './light/button-group.fluent.css.js'; +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 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 { Themes } from '../../../theming/types'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/button-group/themes/light/_themes.scss b/src/components/button-group/themes/light/_themes.scss index 05dc05e17..85bce3efa 100644 --- a/src/components/button-group/themes/light/_themes.scss +++ b/src/components/button-group/themes/light/_themes.scss @@ -1,8 +1,6 @@ @use 'sass:map'; -@use 'sass:list'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/button-group' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/button' as *; @use '../../../button/themes/button/light/themes' as *; $material-flat-btn-size: map.get($material-flat, 'size'); diff --git a/src/components/button-group/themes/light/button-group.bootstrap.scss b/src/components/button-group/themes/light/button-group.bootstrap.scss index a8895fc21..514660b2c 100644 --- a/src/components/button-group/themes/light/button-group.bootstrap.scss +++ b/src/components/button-group/themes/light/button-group.bootstrap.scss @@ -1,23 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $bootstrap; - :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - - --button-min-width: #{rem(42px)}; -} - -[part~='group'] { - box-shadow: var-get($theme, 'elevation'); - border-radius: var-get($theme, 'border-radius'); -} - -:host([alignment='horizontal']) { - --horizontal-radius: #{var-get($theme, 'border-radius')} -} - -:host([alignment='vertical']) { - --vertical-radius: #{var-get($theme, 'border-radius')} + @include css-vars-from-theme($bootstrap, 'ig-button-group'); } diff --git a/src/components/button-group/themes/light/button-group.fluent.scss b/src/components/button-group/themes/light/button-group.fluent.scss index b8a2037a3..0149d7230 100644 --- a/src/components/button-group/themes/light/button-group.fluent.scss +++ b/src/components/button-group/themes/light/button-group.fluent.scss @@ -1,24 +1,7 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $fluent; - :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - - --button-min-width: #{rem(50px)}; -} - -[part~='group'] { - box-shadow: var-get($theme, 'elevation'); - border-radius: var-get($theme, 'border-radius'); + @include css-vars-from-theme($fluent, 'ig-button-group'); } - -:host([alignment='horizontal']) { - --horizontal-radius: #{var-get($theme, 'border-radius')} -} - -:host([alignment='vertical']) { - --vertical-radius: #{var-get($theme, 'border-radius')} -} diff --git a/src/components/button-group/themes/light/button-group.indigo.scss b/src/components/button-group/themes/light/button-group.indigo.scss index f8a7e6ad5..7e0c714d4 100644 --- a/src/components/button-group/themes/light/button-group.indigo.scss +++ b/src/components/button-group/themes/light/button-group.indigo.scss @@ -1,24 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $indigo; - :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - - --button-min-width: #{rem(50px)}; -} - -[part~='group'] { - box-shadow: var-get($theme, 'elevation'); - border-radius: var-get($theme, 'border-radius'); -} - - -:host([alignment='horizontal']) { - --horizontal-radius: #{var-get($theme, 'border-radius')} -} - -:host([alignment='vertical']) { - --vertical-radius: #{var-get($theme, 'border-radius')} + @include css-vars-from-theme($indigo, 'ig-button-group'); } diff --git a/src/components/button-group/themes/light/button-group.material.scss b/src/components/button-group/themes/light/button-group.material.scss index c189fbf85..5ab000b4e 100644 --- a/src/components/button-group/themes/light/button-group.material.scss +++ b/src/components/button-group/themes/light/button-group.material.scss @@ -1,24 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $material; - :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - - --button-min-width: #{rem(50px)}; -} - -[part~='group'] { - box-shadow: var-get($theme, 'elevation'); - border-radius: var-get($theme, 'border-radius'); -} - - -:host([alignment='horizontal']) { - --horizontal-radius: #{var-get($theme, 'border-radius')} -} - -:host([alignment='vertical']) { - --vertical-radius: #{var-get($theme, 'border-radius')} + @include css-vars-from-theme($material, 'ig-button-group'); } diff --git a/src/components/button-group/themes/light/toggle-button/toggle-button.bootstrap.scss b/src/components/button-group/themes/shared/button/button.bootstrap.scss similarity index 94% rename from src/components/button-group/themes/light/toggle-button/toggle-button.bootstrap.scss rename to src/components/button-group/themes/shared/button/button.bootstrap.scss index 97bf5643a..80c7a8bd5 100644 --- a/src/components/button-group/themes/light/toggle-button/toggle-button.bootstrap.scss +++ b/src/components/button-group/themes/shared/button/button.bootstrap.scss @@ -1,13 +1,10 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; $group-item-border-thickness: rem(1px); :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - min-width: var(--button-min-width); [part~='toggle'] { diff --git a/src/components/button-group/themes/light/toggle-button/toggle-button.fluent.scss b/src/components/button-group/themes/shared/button/button.fluent.scss similarity index 93% rename from src/components/button-group/themes/light/toggle-button/toggle-button.fluent.scss rename to src/components/button-group/themes/shared/button/button.fluent.scss index 44e6f1f7f..0bedd4278 100644 --- a/src/components/button-group/themes/light/toggle-button/toggle-button.fluent.scss +++ b/src/components/button-group/themes/shared/button/button.fluent.scss @@ -1,13 +1,10 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; $group-item-border-thickness: rem(1px); :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - [part~='toggle'] { $icon-size: rem(16px); @@ -56,4 +53,3 @@ $group-item-border-thickness: rem(1px); border-color: var-get($theme, 'item-disabled-border'); } } - diff --git a/src/components/button-group/themes/light/toggle-button/toggle-button.indigo.scss b/src/components/button-group/themes/shared/button/button.indigo.scss similarity index 94% rename from src/components/button-group/themes/light/toggle-button/toggle-button.indigo.scss rename to src/components/button-group/themes/shared/button/button.indigo.scss index 1c6f892aa..8922c005b 100644 --- a/src/components/button-group/themes/light/toggle-button/toggle-button.indigo.scss +++ b/src/components/button-group/themes/shared/button/button.indigo.scss @@ -1,13 +1,10 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $indigo; $group-item-border-thickness: rem(1px); :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - [part~='toggle'] { $icon-size: rem(18px); @@ -70,6 +67,3 @@ $group-item-border-thickness: rem(1px); border-color: var-get($theme, 'item-disabled-border'); } } - - - diff --git a/src/components/button-group/themes/light/toggle-button/toggle-button.material.scss b/src/components/button-group/themes/shared/button/button.material.scss similarity index 93% rename from src/components/button-group/themes/light/toggle-button/toggle-button.material.scss rename to src/components/button-group/themes/shared/button/button.material.scss index 1bed30db2..08ac47380 100644 --- a/src/components/button-group/themes/light/toggle-button/toggle-button.material.scss +++ b/src/components/button-group/themes/shared/button/button.material.scss @@ -1,12 +1,9 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-button-group'); - [part~='toggle'] { $icon-size: rem(18px); diff --git a/src/components/button-group/themes/shared/group/group.bootstrap.scss b/src/components/button-group/themes/shared/group/group.bootstrap.scss new file mode 100644 index 000000000..554c3f9cc --- /dev/null +++ b/src/components/button-group/themes/shared/group/group.bootstrap.scss @@ -0,0 +1,21 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $bootstrap; + +:host { + --button-min-width: #{rem(42px)}; +} + +[part~='group'] { + box-shadow: var-get($theme, 'elevation'); + border-radius: var-get($theme, 'border-radius'); +} + +:host([alignment='horizontal']) { + --horizontal-radius: #{var-get($theme, 'border-radius')}; +} + +:host([alignment='vertical']) { + --vertical-radius: #{var-get($theme, 'border-radius')}; +} diff --git a/src/components/button-group/themes/shared/group/group.fluent.scss b/src/components/button-group/themes/shared/group/group.fluent.scss new file mode 100644 index 000000000..83148bbc4 --- /dev/null +++ b/src/components/button-group/themes/shared/group/group.fluent.scss @@ -0,0 +1,21 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + --button-min-width: #{rem(50px)}; +} + +[part~='group'] { + box-shadow: var-get($theme, 'elevation'); + border-radius: var-get($theme, 'border-radius'); +} + +:host([alignment='horizontal']) { + --horizontal-radius: #{var-get($theme, 'border-radius')}; +} + +:host([alignment='vertical']) { + --vertical-radius: #{var-get($theme, 'border-radius')}; +} diff --git a/src/components/button-group/themes/shared/group/group.indigo.scss b/src/components/button-group/themes/shared/group/group.indigo.scss new file mode 100644 index 000000000..56e50a806 --- /dev/null +++ b/src/components/button-group/themes/shared/group/group.indigo.scss @@ -0,0 +1,21 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + --button-min-width: #{rem(50px)}; +} + +[part~='group'] { + box-shadow: var-get($theme, 'elevation'); + border-radius: var-get($theme, 'border-radius'); +} + +:host([alignment='horizontal']) { + --horizontal-radius: #{var-get($theme, 'border-radius')}; +} + +:host([alignment='vertical']) { + --vertical-radius: #{var-get($theme, 'border-radius')}; +} diff --git a/src/components/button-group/themes/shared/group/group.material.scss b/src/components/button-group/themes/shared/group/group.material.scss new file mode 100644 index 000000000..c7b081de8 --- /dev/null +++ b/src/components/button-group/themes/shared/group/group.material.scss @@ -0,0 +1,21 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + --button-min-width: #{rem(50px)}; +} + +[part~='group'] { + box-shadow: var-get($theme, 'elevation'); + border-radius: var-get($theme, 'border-radius'); +} + +:host([alignment='horizontal']) { + --horizontal-radius: #{var-get($theme, 'border-radius')}; +} + +:host([alignment='vertical']) { + --vertical-radius: #{var-get($theme, 'border-radius')}; +} diff --git a/src/components/button-group/toggle-button.ts b/src/components/button-group/toggle-button.ts index 92517187c..2df79ca5a 100644 --- a/src/components/button-group/toggle-button.ts +++ b/src/components/button-group/toggle-button.ts @@ -1,12 +1,9 @@ import { LitElement, html } from 'lit'; import { property, query } from 'lit/decorators.js'; +import { all } from './themes/button'; +import { styles } from './themes/button.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; -import { styles } from '../button-group/themes/light/toggle-button/toggle-button.base.css.js'; -import { styles as bootstrap } from '../button-group/themes/light/toggle-button/toggle-button.bootstrap.css.js'; -import { styles as fluent } from '../button-group/themes/light/toggle-button/toggle-button.fluent.css.js'; -import { styles as indigo } from '../button-group/themes/light/toggle-button/toggle-button.indigo.css.js'; -import { styles as material } from '../button-group/themes/light/toggle-button/toggle-button.material.css.js'; import { alternateName } from '../common/decorators/alternateName.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -20,10 +17,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @csspart toggle - The native button element. */ -@themes({ - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, -}) +@themes(all, true) export default class IgcToggleButtonComponent extends LitElement { public static override styles = styles; diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 8c1205fae..53015a62f 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -2,11 +2,8 @@ import { html } from 'lit'; import { property } from 'lit/decorators.js'; import { IgcButtonBaseComponent } from './button-base.js'; -import { styles } from './themes/button/light/button.base.css.js'; -import { styles as bootstrap } from './themes/button/light/button.bootstrap.css.js'; -import { styles as fluent } from './themes/button/light/button.fluent.css.js'; -import { styles as indigo } from './themes/button/light/button.indigo.css.js'; -import { styles as material } from './themes/button/light/button.material.css.js'; +import { styles } from './themes/button/button.base.css.js'; +import { all } from './themes/button/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -27,10 +24,7 @@ import { registerComponent } from '../common/definitions/register.js'; * @csspart prefix - The prefix container. * @csspart suffix - The suffix container. */ -@themes({ - light: { bootstrap, indigo, fluent, material }, - dark: { bootstrap, indigo, fluent, material }, -}) +@themes(all) export default class IgcButtonComponent extends IgcButtonBaseComponent { public static readonly tagName = 'igc-button'; protected static styles = styles; diff --git a/src/components/button/icon-button.ts b/src/components/button/icon-button.ts index 4770bd9cc..4e5413f91 100644 --- a/src/components/button/icon-button.ts +++ b/src/components/button/icon-button.ts @@ -3,11 +3,8 @@ import { property } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { IgcButtonBaseComponent } from './button-base.js'; -import { styles } from './themes/icon-button/light/icon-button.base.css.js'; -import { styles as bootstrap } from './themes/icon-button/light/icon-button.bootstrap.css.js'; -import { styles as fluent } from './themes/icon-button/light/icon-button.fluent.css.js'; -import { styles as indigo } from './themes/icon-button/light/icon-button.indigo.css.js'; -import { styles as material } from './themes/icon-button/light/icon-button.material.css.js'; +import { styles } from './themes/icon-button/icon-button.base.css.js'; +import { all } from './themes/icon-button/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { alternateName } from '../common/decorators/alternateName.js'; import { blazorInclude } from '../common/decorators/blazorInclude.js'; @@ -24,10 +21,7 @@ import { * @csspart base - The wrapping element. * @csspart icon - The icon element. */ -@themes({ - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, -}) +@themes(all) export default class IgcIconButtonComponent extends IgcButtonBaseComponent { public static readonly tagName = 'igc-icon-button'; protected static styles = styles; diff --git a/src/components/button/themes/button/light/button.base.scss b/src/components/button/themes/button/button.base.scss similarity index 98% rename from src/components/button/themes/button/light/button.base.scss rename to src/components/button/themes/button/button.base.scss index 6fc819809..0c62093fb 100644 --- a/src/components/button/themes/button/light/button.base.scss +++ b/src/components/button/themes/button/button.base.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/common/component'; @use 'styles/utilities' as *; diff --git a/src/components/button/themes/button/dark/button.bootstrap.scss b/src/components/button/themes/button/dark/button.bootstrap.scss index 8643de1e3..09fb04b1b 100644 --- a/src/components/button/themes/button/dark/button.bootstrap.scss +++ b/src/components/button/themes/button/dark/button.bootstrap.scss @@ -1,26 +1,23 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - $flat-theme: $bootstrap-flat; - $contained-theme: $bootstrap-contained; - $fab-theme: $bootstrap-fab; - $outlined-theme: $bootstrap-outlined; +$flat-theme: $bootstrap-flat; +$contained-theme: $bootstrap-contained; +$fab-theme: $bootstrap-fab; +$outlined-theme: $bootstrap-outlined; - igc-button[variant='flat'] { - @include css-vars-from-theme($flat-theme, 'ig-button'); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-button'); +} - igc-button[variant='outlined'] { - @include css-vars-from-theme($outlined-theme, 'ig-button'); - } +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-button'); +} - igc-button[variant='contained'] { - @include css-vars-from-theme($contained-theme, 'ig-button'); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-button'); +} - igc-button[variant='fab'] { - @include css-vars-from-theme($fab-theme, 'ig-button'); - } +:host([variant='fab']) { + @include css-vars-from-theme($fab-theme, 'ig-button'); } diff --git a/src/components/button/themes/button/dark/button.fluent.scss b/src/components/button/themes/button/dark/button.fluent.scss index 4592094dc..4cd663493 100644 --- a/src/components/button/themes/button/dark/button.fluent.scss +++ b/src/components/button/themes/button/dark/button.fluent.scss @@ -1,26 +1,23 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - $flat-theme: $fluent-flat; - $contained-theme: $fluent-contained; - $fab-theme: $fluent-fab; - $outlined-theme: $fluent-outlined; +$flat-theme: $fluent-flat; +$contained-theme: $fluent-contained; +$fab-theme: $fluent-fab; +$outlined-theme: $fluent-outlined; - igc-button[variant='flat'] { - @include css-vars-from-theme($flat-theme, 'ig-button'); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-button'); +} - igc-button[variant='outlined'] { - @include css-vars-from-theme($outlined-theme, 'ig-button'); - } +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-button'); +} - igc-button[variant='contained'] { - @include css-vars-from-theme($contained-theme, 'ig-button'); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-button'); +} - igc-button[variant='fab'] { - @include css-vars-from-theme($fab-theme, 'ig-button'); - } +:host([variant='fab']) { + @include css-vars-from-theme($fab-theme, 'ig-button'); } diff --git a/src/components/button/themes/button/dark/button.indigo.scss b/src/components/button/themes/button/dark/button.indigo.scss index 2cd353cd4..6ebe66075 100644 --- a/src/components/button/themes/button/dark/button.indigo.scss +++ b/src/components/button/themes/button/dark/button.indigo.scss @@ -1,26 +1,23 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - $flat-theme: $indigo-flat; - $contained-theme: $indigo-contained; - $fab-theme: $indigo-fab; - $outlined-theme: $indigo-outlined; +$flat-theme: $indigo-flat; +$contained-theme: $indigo-contained; +$fab-theme: $indigo-fab; +$outlined-theme: $indigo-outlined; - igc-button[variant='flat'] { - @include css-vars-from-theme($flat-theme, 'ig-button'); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-button'); +} - igc-button[variant='outlined'] { - @include css-vars-from-theme($outlined-theme, 'ig-button'); - } +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-button'); +} - igc-button[variant='contained'] { - @include css-vars-from-theme($contained-theme, 'ig-button'); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-button'); +} - igc-button[variant='fab'] { - @include css-vars-from-theme($fab-theme, 'ig-button'); - } +:host([variant='fab']) { + @include css-vars-from-theme($fab-theme, 'ig-button'); } diff --git a/src/components/button/themes/button/dark/button.material.scss b/src/components/button/themes/button/dark/button.material.scss index b36fd9b41..daec16994 100644 --- a/src/components/button/themes/button/dark/button.material.scss +++ b/src/components/button/themes/button/dark/button.material.scss @@ -1,26 +1,23 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - $flat-theme: $material-flat; - $contained-theme: $material-contained; - $fab-theme: $material-fab; - $outlined-theme: $material-outlined; +$flat-theme: $material-flat; +$contained-theme: $material-contained; +$fab-theme: $material-fab; +$outlined-theme: $material-outlined; - igc-button[variant='flat'] { - @include css-vars-from-theme($flat-theme, 'ig-button'); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-button'); +} - igc-button[variant='outlined'] { - @include css-vars-from-theme($outlined-theme, 'ig-button'); - } +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-button'); +} - igc-button[variant='contained'] { - @include css-vars-from-theme($contained-theme, 'ig-button'); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-button'); +} - igc-button[variant='fab'] { - @include css-vars-from-theme($fab-theme, 'ig-button'); - } +:host([variant='fab']) { + @include css-vars-from-theme($fab-theme, 'ig-button'); } diff --git a/src/components/button/themes/button/light/_themes.scss b/src/components/button/themes/button/light/_themes.scss index 1aface783..d2809bb78 100644 --- a/src/components/button/themes/button/light/_themes.scss +++ b/src/components/button/themes/button/light/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/button' as *; diff --git a/src/components/button/themes/button/light/button.bootstrap.scss b/src/components/button/themes/button/light/button.bootstrap.scss index 1af4add21..09fb04b1b 100644 --- a/src/components/button/themes/button/light/button.bootstrap.scss +++ b/src/components/button/themes/button/light/button.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -9,190 +8,16 @@ $outlined-theme: $bootstrap-outlined; :host([variant='flat']) { @include css-vars-from-theme($flat-theme, 'ig-button'); - - [part='base'] { - height: var-get($flat-theme, 'size'); - border-radius: var-get($flat-theme, 'border-radius'); - } -} - -:host([variant='contained']) { - @include css-vars-from-theme($contained-theme, 'ig-button'); - - [part='base'] { - height: var-get($contained-theme, 'size'); - border-radius: var-get($contained-theme, 'border-radius'); - } } :host([variant='outlined']) { @include css-vars-from-theme($outlined-theme, 'ig-button'); +} - [part='base'] { - height: var-get($outlined-theme, 'size'); - border: rem(1px) solid var-get($outlined-theme, 'border-color'); - border-radius: var-get($outlined-theme, 'border-radius'); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-button'); } :host([variant='fab']) { @include css-vars-from-theme($fab-theme, 'ig-button'); - - [part='base'] { - height: var-get($fab-theme, 'size'); - border-radius: var-get($fab-theme, 'border-radius'); - } -} - -:host [part='base'] { - transition: all .15s ease-in-out; -} - -:host(:not([disabled])[variant='flat']) [part='base'], -:host(:not(:disabled)[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'foreground'); - background: var-get($flat-theme, 'background'); - - &:hover { - color: var-get($flat-theme, 'hover-foreground'); - background: var-get($flat-theme, 'hover-background'); - } - - &:focus { - color: var-get($flat-theme, 'focus-foreground'); - background: var-get($flat-theme, 'focus-background'); - } - - &:focus-visible { - color: var-get($flat-theme, 'focus-visible-foreground'); - background: var-get($flat-theme, 'focus-visible-background'); - } - - &:active { - color: var-get($flat-theme, 'active-foreground'); - background: var-get($flat-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color'); - } -} - -:host(:not([disabled])[variant='contained']) [part='base'], -:host(:not(:disabled)[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'foreground'); - background: var-get($contained-theme, 'background'); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - } - - &:focus { - color: var-get($contained-theme, 'focus-foreground'); - background: var-get($contained-theme, 'focus-background'); - } - - &:focus-visible { - color: var-get($contained-theme, 'focus-visible-foreground'); - background: var-get($contained-theme, 'focus-visible-background'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'); - } -} - -:host(:not([disabled])[variant='outlined']) [part='base'], -:host(:not(:disabled)[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'foreground'); - background: var-get($outlined-theme, 'background'); - - &:focus { - color: var-get($outlined-theme, 'focus-foreground'); - background: var-get($outlined-theme, 'focus-background'); - } - - &:focus-visible { - color: var-get($outlined-theme, 'focus-visible-foreground'); - background: var-get($outlined-theme, 'focus-visible-background'); - } - - &:hover { - color: var-get($outlined-theme, 'hover-foreground'); - background: var-get($outlined-theme, 'hover-background'); - } - - &:active { - color: var-get($outlined-theme, 'active-foreground'); - background: var-get($outlined-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color'); - } -} - -:host(:not([disabled])[variant='fab']) [part='base'], -:host(:not(:disabled)[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'foreground'); - background: var-get($fab-theme, 'background'); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - } - - &:focus { - color: var-get($fab-theme, 'focus-foreground'); - background: var-get($fab-theme, 'focus-background'); - } - - &:focus-visible { - color: var-get($fab-theme, 'focus-visible-foreground'); - background: var-get($fab-theme, 'focus-visible-background'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'); - } -} - -:host([disabled][variant='flat']) [part='base'], -:host(:disabled[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'disabled-foreground'); - background: var-get($flat-theme, 'disabled-background'); -} - -:host([disabled][variant='contained']) [part='base'], -:host(:disabled[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'disabled-foreground'); - background: var-get($contained-theme, 'disabled-background'); -} - -:host([disabled][variant='outlined']) [part='base'], -:host(:disabled[variant='outlined']) [part='base'] { - color: var-get($contained-theme, 'disabled-foreground'); - background: var-get($contained-theme, 'disabled-background'); - border-color: var-get($contained-theme, 'disabled-border-color'); -} - -:host([disabled][variant='fab']) [part='base'], -:host(:disabled[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'disabled-foreground'); - background: var-get($fab-theme, 'disabled-background'); } diff --git a/src/components/button/themes/button/light/button.fluent.scss b/src/components/button/themes/button/light/button.fluent.scss index b8deee957..4cd663493 100644 --- a/src/components/button/themes/button/light/button.fluent.scss +++ b/src/components/button/themes/button/light/button.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,286 +5,19 @@ $flat-theme: $fluent-flat; $contained-theme: $fluent-contained; $fab-theme: $fluent-fab; $outlined-theme: $fluent-outlined; -$outline-btn-indent: rem(2px); :host([variant='flat']) { @include css-vars-from-theme($flat-theme, 'ig-button'); - - [part='base'] { - height: var-get($flat-theme, 'size'); - border-radius: var-get($flat-theme, 'border-radius'); - } } :host([variant='outlined']) { @include css-vars-from-theme($outlined-theme, 'ig-button'); - - [part='base'] { - height: var-get($outlined-theme, 'size'); - border-radius: var-get($outlined-theme, 'border-radius'); - - &::after { - border-radius: calc(#{var-get($outlined-theme, 'border-radius')} - #{$outline-btn-indent * 2}); - } - } } :host([variant='contained']) { @include css-vars-from-theme($contained-theme, 'ig-button'); - - [part='base'] { - height: var-get($contained-theme, 'size'); - border-radius: var-get($contained-theme, 'border-radius'); - - &::after { - border-radius: calc(#{var-get($contained-theme, 'border-radius')} - #{$outline-btn-indent * 2}); - } - } } :host([variant='fab']) { @include css-vars-from-theme($fab-theme, 'ig-button'); - - [part='base'] { - height: var-get($fab-theme, 'size'); - border-radius: var-get($fab-theme, 'border-radius'); - - &::after { - border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$outline-btn-indent * 2}); - } - } -} - -[part='base'] { - padding: 0 pad(8px, 16px, 16px); - transition: all .1s ease-in-out; -} - -:host(:not([disabled])[variant='flat']) [part='base'], -:host(:not(:disabled)[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'foreground'); - background: var-get($flat-theme, 'background'); - border: 1px solid var-get($flat-theme, 'border-color'); - - &:hover { - color: var-get($flat-theme, 'hover-foreground'); - background: var-get($flat-theme, 'hover-background'); - border-color: var-get($flat-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($flat-theme, 'focus-foreground'); - background: var-get($flat-theme, 'focus-background'); - border-color: var-get($flat-theme, 'focus-border-color'); - } - - &:active { - color: var-get($flat-theme, 'active-foreground'); - background: var-get($flat-theme, 'active-background'); - border-color: var-get($flat-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($flat-theme, 'focus-visible-foreground'); - background: var-get($flat-theme, 'focus-visible-background'); - border-color: var-get($flat-theme, 'focus-visible-border-color'); - } -} - -:host(:not([disabled])[variant='outlined']) [part='base'], -:host(:not(:disabled)[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'foreground'); - background: var-get($outlined-theme, 'background'); - border: rem(1px) solid var-get($outlined-theme, 'border-color'); - - &:hover { - color: var-get($outlined-theme, 'hover-foreground'); - background: var-get($outlined-theme, 'hover-background'); - border-color: var-get($outlined-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($outlined-theme, 'focus-foreground'); - background: var-get($outlined-theme, 'focus-background'); - border-color: var-get($outlined-theme, 'focus-border-color'); - } - - &:active { - color: var-get($outlined-theme, 'active-foreground'); - background: var-get($outlined-theme, 'active-background'); - border-color: var-get($outlined-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($outlined-theme, 'focus-visible-foreground'); - background: var-get($outlined-theme, 'focus-visible-background'); - border-color: var-get($outlined-theme, 'focus-visible-border-color'); - - &::after { - content: ''; - position: absolute; - inset-block-start: $outline-btn-indent; - inset-inline-start: $outline-btn-indent; - pointer-events: none; - width: calc(100% - (#{$outline-btn-indent} * 2)); - height: calc(100% - (#{$outline-btn-indent} * 2)); - box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground'); - } - - &:hover { - color: var-get($outlined-theme, 'hover-foreground'); - background: var-get($outlined-theme, 'hover-background'); - border-color: var-get($outlined-theme, 'hover-border-color'); - - &::after { - box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground'); - } - } - - &:active { - color: var-get($outlined-theme, 'active-foreground'); - background: var-get($outlined-theme, 'active-background'); - border-color: var-get($outlined-theme, 'active-border-color'); - - &::after { - box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground'); - } - } - } -} - -:host(:not([disabled])[variant='contained']) [part='base'], -:host(:not(:disabled)[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'foreground'); - background: var-get($contained-theme, 'background'); - border: rem(1px) solid var-get($contained-theme, 'border-color'); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - border-color: var-get($contained-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($contained-theme, 'focus-foreground'); - background: var-get($contained-theme, 'focus-background'); - border-color: var-get($contained-theme, 'focus-border-color'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - border-color: var-get($contained-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($contained-theme, 'focus-visible-foreground'); - background: var-get($contained-theme, 'focus-visible-background'); - border-color: var-get($contained-theme, 'focus-visible-border-color'); - position: relative; - - &::after { - content: ''; - box-shadow: 0 0 0 1px #{contrast-color(primary, 600)}; - position: absolute; - inset-block-start: 3px; - inset-inline-start: 3px; - pointer-events: none; - width: calc(100% - 6px); - height: calc(100% - 6px); - } - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - border-color: var-get($contained-theme, 'hover-border-color'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - border-color: var-get($contained-theme, 'active-border-color'); - } - } -} - -:host(:not([disabled])[variant='fab']) [part='base'], -:host(:not(:disabled)[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'foreground'); - background: var-get($fab-theme, 'background'); - border: rem(1px) solid var-get($fab-theme, 'border-color'); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - border-color: var-get($fab-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($fab-theme, 'focus-foreground'); - background: var-get($fab-theme, 'focus-background'); - border-color: var-get($fab-theme, 'focus-border-color'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - border-color: var-get($fab-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($fab-theme, 'focus-visible-foreground'); - background: var-get($fab-theme, 'focus-visible-background'); - border-color: var-get($fab-theme, 'focus-visible-border-color'); - position: relative; - - &::after { - content: ''; - box-shadow: 0 0 0 1px #{contrast-color(primary, 600)}; - position: absolute; - inset-block-start: 3px; - inset-inline-start: 3px; - pointer-events: none; - width: calc(100% - 6px); - height: calc(100% - 6px); - } - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - border-color: var-get($fab-theme, 'hover-border-color'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - border-color: var-get($fab-theme, 'active-border-color'); - } - } -} - -:host([disabled][variant='flat']) [part='base'], -:host(:disabled[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'disabled-foreground'); - background: var-get($flat-theme, 'disabled-background'); -} - -:host([disabled][variant='outlined']) [part='base'], -:host(:disabled[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'disabled-foreground'); - background: var-get($outlined-theme, 'disabled-background'); - border-color: var-get($outlined-theme, 'disabled-border-color'); -} - -:host([disabled][variant='contained']) [part='base'], -:host(:disabled[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'disabled-foreground'); - background: var-get($contained-theme, 'disabled-background'); - border: rem(1px) solid var-get($contained-theme, 'disabled-border-color'); -} - -:host([disabled][variant='fab']) [part='base'], -:host(:disabled[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'disabled-foreground'); - background: var-get($fab-theme, 'disabled-background'); } diff --git a/src/components/button/themes/button/light/button.indigo.scss b/src/components/button/themes/button/light/button.indigo.scss index 400acad5e..6ebe66075 100644 --- a/src/components/button/themes/button/light/button.indigo.scss +++ b/src/components/button/themes/button/light/button.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -9,257 +8,16 @@ $outlined-theme: $indigo-outlined; :host([variant='flat']) { @include css-vars-from-theme($flat-theme, 'ig-button'); - - [part='base'] { - height: var-get($flat-theme, 'size') - } } :host([variant='outlined']) { @include css-vars-from-theme($outlined-theme, 'ig-button'); - - [part='base'] { - height: var-get($outlined-theme, 'size') - } } :host([variant='contained']) { @include css-vars-from-theme($contained-theme, 'ig-button'); - - [part='base'] { - height: var-get($contained-theme, 'size') - } } :host([variant='fab']) { @include css-vars-from-theme($fab-theme, 'ig-button'); - - [part='base'] { - height: var-get($fab-theme, 'size') - } -} - -[part='base'] { - transition: all .15s ease-in-out; -} - -/* stylelint-disable */ -:host([variant='flat']) [part='base'] { - border-radius: var-get($flat-theme, 'border-radius'); -} - -:host([variant='outlined']) [part='base'] { - border-radius: var-get($outlined-theme, 'border-radius'); -} - -:host([variant='contained']) [part='base'] { - border-radius: var-get($contained-theme, 'border-radius'); -} - -:host([variant='fab']) [part='base'] { - border-radius: var-get($fab-theme, 'border-radius'); -} -/* stylelint-enable */ - -:host(:not([disabled])[variant='flat']) [part='base'], -:host(:not(:disabled)[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'foreground'); - background: var-get($flat-theme, 'background'); - - &:hover { - color: var-get($flat-theme, 'hover-foreground'); - background: var-get($flat-theme, 'hover-background'); - } - - &:focus { - color: var-get($flat-theme, 'focus-foreground'); - background: var-get($flat-theme, 'focus-background'); - } - - &:active { - color: var-get($flat-theme, 'active-foreground'); - background: var-get($flat-theme, 'active-background'); - } - - &:focus-visible { - color: var-get($flat-theme, 'focus-visible-foreground'); - background: var-get($flat-theme, 'focus-visible-background'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'); - } -} - -:host(:not([disabled])[variant='outlined']) [part='base'], -:host(:not(:disabled)[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'foreground'); - background: var-get($outlined-theme, 'background'); - border-style: solid; - border-color: var-get($outlined-theme, 'border-color'); - border-width: rem(2px); - - &:hover { - background: var-get($outlined-theme, 'hover-background'); - color: var-get($outlined-theme, 'hover-foreground'); - border-color: var-get($outlined-theme, 'hover-border-color'); - } - - &:focus { - background: var-get($outlined-theme, 'focus-background'); - color: var-get($outlined-theme, 'focus-foreground'); - border-color: var-get($outlined-theme, 'focus-border-color'); - } - - &:active { - background: var-get($outlined-theme, 'active-background'); - color: var-get($outlined-theme, 'active-foreground'); - border-color: var-get($outlined-theme, 'active-border-color'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color'); - } - - &:focus-visible { - background: var-get($outlined-theme, 'focus-visible-background'); - color: var-get($outlined-theme, 'focus-visible-foreground'); - border-color: var-get($outlined-theme, 'focus-visible-border-color'); - - &:hover { - background: var-get($outlined-theme, 'hover-background'); - color: var-get($outlined-theme, 'hover-foreground'); - border-color: var-get($outlined-theme, 'hover-border-color'); - } - - &:active { - background: var-get($outlined-theme, 'active-background'); - color: var-get($outlined-theme, 'active-foreground'); - border-color: var-get($outlined-theme, 'active-border-color'); - } - } -} - -:host(:not([disabled])[variant='contained']) [part='base'], -:host(:not(:disabled)[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'foreground'); - background: var-get($contained-theme, 'background'); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - border-color: var-get($contained-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($contained-theme, 'focus-foreground'); - background: var-get($contained-theme, 'focus-background'); - border-color: var-get($contained-theme, 'focus-border-color'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - border-color: var-get($contained-theme, 'active-border-color'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'); - } - - &:focus-visible { - background: var-get($contained-theme, 'focus-visible-background'); - color: var-get($contained-theme, 'focus-visible-foreground'); - border-color: var-get($contained-theme, 'focus-visible-border-color'); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - border-color: var-get($contained-theme, 'hover-border-color'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - border-color: var-get($contained-theme, 'active-border-color'); - } - } -} - -:host(:not([disabled])[variant='fab']) [part='base'], -:host(:not(:disabled)[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'foreground'); - background: var-get($fab-theme, 'background'); - border-color: var-get($flat-theme, 'border-color'); - min-width: var(--size); - min-height: var(--size); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - border-color: var-get($flat-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($fab-theme, 'focus-foreground'); - background: var-get($fab-theme, 'focus-background'); - border-color: var-get($flat-theme, 'focus-border-color'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - border-color: var-get($flat-theme, 'active-border-color'); - } - - &:focus, - &:active { - box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); - } - - &:focus-visible { - background: var-get($fab-theme, 'focus-visible-background'); - color: var-get($fab-theme, 'focus-visible-foreground'); - border-color: var-get($fab-theme, 'focus-visible-border-color'); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - border-color: var-get($fab-theme, 'hover-border-color'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - border-color: var-get($fab-theme, 'active-border-color'); - } - } -} - -:host([disabled][variant='flat']) [part='base'], -:host(:disabled[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'disabled-foreground'); - background: var-get($flat-theme, 'disabled-background'); -} - -:host([disabled][variant='outlined']) [part='base'], -:host(:disabled[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'disabled-foreground'); - background: var-get($outlined-theme, 'disabled-background'); - border-color: var-get($outlined-theme, 'disabled-border-color'); -} - -:host([disabled][variant='contained']) [part='base'], -:host(:disabled[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'disabled-foreground'); - background: var-get($contained-theme, 'disabled-background'); -} - -:host([disabled][variant='fab']) [part='base'], -:host(:disabled[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'disabled-foreground'); - background: var-get($fab-theme, 'disabled-background'); } diff --git a/src/components/button/themes/button/light/button.material.scss b/src/components/button/themes/button/light/button.material.scss index b38b39054..daec16994 100644 --- a/src/components/button/themes/button/light/button.material.scss +++ b/src/components/button/themes/button/light/button.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -9,255 +8,16 @@ $outlined-theme: $material-outlined; :host([variant='flat']) { @include css-vars-from-theme($flat-theme, 'ig-button'); - - [part='base'] { - height: var-get($flat-theme, 'size'); - } } :host([variant='outlined']) { @include css-vars-from-theme($outlined-theme, 'ig-button'); - - [part='base'] { - height: var-get($outlined-theme, 'size'); - } } :host([variant='contained']) { @include css-vars-from-theme($contained-theme, 'ig-button'); - - [part='base'] { - height: var-get($contained-theme, 'size'); - } } :host([variant='fab']) { @include css-vars-from-theme($fab-theme, 'ig-button'); - - [part='base'] { - height: var-get($fab-theme, 'size'); - } -} - -[part='base'] { - transition: all .1s ease-in-out; -} - -:host(:not([disabled])[variant='flat']) [part='base'], -:host(:not(:disabled)[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'foreground'); - background: var-get($flat-theme, 'background'); - - &:hover { - color: var-get($flat-theme, 'hover-foreground'); - background: var-get($flat-theme, 'hover-background'); - } - - &:focus { - color: var-get($flat-theme, 'focus-foreground'); - background: var-get($flat-theme, 'focus-background'); - } - - &:active { - color: var-get($flat-theme, 'active-foreground'); - background: var-get($flat-theme, 'active-background'); - } - - &:focus-visible { - color: var-get($flat-theme, 'focus-visible-foreground'); - background: var-get($flat-theme, 'focus-visible-background'); - - &:hover { - color: var-get($flat-theme, 'hover-foreground'); - background: var-get($flat-theme, 'hover-foreground'); - } - - &:active { - color: var-get($flat-theme, 'active-foreground'); - background: var-get($flat-theme, 'active-background'); - } - } -} - -:host(:not([disabled])[variant='outlined']) [part='base'], -:host(:not(:disabled)[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'foreground'); - background: var-get($outlined-theme, 'background'); - border: rem(1px) solid var-get($outlined-theme, 'border-color'); - - &:hover { - color: var-get($outlined-theme, 'hover-foreground'); - background: var-get($outlined-theme, 'hover-background'); - border-color: var-get($outlined-theme, 'hover-border-color'); - } - - &:focus { - color: var-get($outlined-theme, 'focus-foreground'); - background: var-get($outlined-theme, 'focus-background'); - border-color: var-get($outlined-theme, 'focus-border-color'); - } - - &:active { - color: var-get($outlined-theme, 'active-foreground'); - background: var-get($outlined-theme, 'active-background'); - border-color: var-get($outlined-theme, 'active-border-color'); - } - - &:focus-visible { - color: var-get($outlined-theme, 'focus-visible-foreground'); - background: var-get($outlined-theme, 'focus-visible-background'); - border-color: var-get($outlined-theme, 'focus-visible-border-color'); - - &:hover { - color: var-get($outlined-theme, 'hover-foreground'); - background: var-get($outlined-theme, 'hover-foreground'); - border-color: var-get($outlined-theme, 'hover-border-color'); - } - - &:active { - color: var-get($outlined-theme, 'active-foreground'); - background: var-get($outlined-theme, 'active-background'); - border-color: var-get($outlined-theme, 'active-border-color'); - } - } -} - -:host(:not([disabled])[variant='contained']) [part='base'], -:host(:not(:disabled)[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'foreground'); - background: var-get($contained-theme, 'background'); - box-shadow: var(--ig-elevation-2); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - box-shadow: var(--ig-elevation-4); - } - - &:focus { - color: var-get($contained-theme, 'focus-foreground'); - background: var-get($contained-theme, 'focus-background'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: var(--ig-elevation-8); - } - - &:focus-visible { - color: var-get($contained-theme, 'focus-foreground'); - background: var-get($contained-theme, 'focus-background'); - - &:hover { - color: var-get($contained-theme, 'hover-foreground'); - background: var-get($contained-theme, 'hover-background'); - } - - &:active { - color: var-get($contained-theme, 'active-foreground'); - background: var-get($contained-theme, 'active-background'); - } - } -} - -:host(:not([disabled])[variant='fab']) [part='base'], -:host(:not(:disabled)[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'foreground'); - background: var-get($fab-theme, 'background'); - box-shadow: var(--ig-elevation-6); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - box-shadow: var(--ig-elevation-4); - } - - &:focus { - color: var-get($fab-theme, 'focus-foreground'); - background: var-get($fab-theme, 'focus-background'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - } - - &:focus, - &:active { - box-shadow: var(--ig-elevation-8); - } - - &:focus-visible { - color: var-get($fab-theme, 'focus-foreground'); - background: var-get($fab-theme, 'focus-background'); - - &:hover { - color: var-get($fab-theme, 'hover-foreground'); - background: var-get($fab-theme, 'hover-background'); - } - - &:active { - color: var-get($fab-theme, 'active-foreground'); - background: var-get($fab-theme, 'active-background'); - } - } - - &:hover, - &:focus, - &:focus-visible, - &:active { - box-shadow: var(--ig-elevation-12); - } -} - -/* stylelint-disable */ -:host([variant='flat']) [part='base'] { - border-radius: var-get($flat-theme, 'border-radius'); -} - -:host([variant='outlined']) [part='base'] { - border-radius: var-get($outlined-theme, 'border-radius'); -} - -:host([variant='contained']) [part='base'] { - border-radius: var-get($contained-theme, 'border-radius'); -} - -:host([variant='fab']) [part='base'] { - border-radius: var-get($fab-theme, 'border-radius'); -} -/* stylelint-enable */ - -:host([disabled][variant='flat']) [part='base'], -:host(:disabled[variant='flat']) [part='base'] { - color: var-get($flat-theme, 'disabled-foreground'); - background: var-get($flat-theme, 'disabled-background'); - box-shadow: inset 0 0 0 rem(1px) var-get($flat-theme, 'disabled-border-color'); -} - -:host([disabled][variant='outlined']) [part='base'], -:host(:disabled[variant='outlined']) [part='base'] { - color: var-get($outlined-theme, 'disabled-foreground'); - background: var-get($outlined-theme, 'disabled-background'); - box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color'); - border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color'); -} - -:host([disabled][variant='contained']) [part='base'], -:host(:disabled[variant='contained']) [part='base'] { - color: var-get($contained-theme, 'disabled-foreground'); - background: var-get($contained-theme, 'disabled-background'); - box-shadow: inset 0 0 0 rem(1px) var-get($contained-theme, 'disabled-border-color'); -} - -:host([disabled][variant='fab']) [part='base'], -:host(:disabled[variant='fab']) [part='base'] { - color: var-get($fab-theme, 'disabled-foreground'); - background: var-get($fab-theme, 'disabled-background'); - box-shadow: inset 0 0 0 rem(1px) var-get($fab-theme, 'disabled-border-color'); } diff --git a/src/components/button/themes/button/shared/button.bootstrap.scss b/src/components/button/themes/button/shared/button.bootstrap.scss new file mode 100644 index 000000000..bc83b17af --- /dev/null +++ b/src/components/button/themes/button/shared/button.bootstrap.scss @@ -0,0 +1,189 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $bootstrap-flat; +$contained-theme: $bootstrap-contained; +$fab-theme: $bootstrap-fab; +$outlined-theme: $bootstrap-outlined; + +:host([variant='flat']) { + [part='base'] { + height: var-get($flat-theme, 'size'); + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='contained']) { + [part='base'] { + height: var-get($contained-theme, 'size'); + border-radius: var-get($contained-theme, 'border-radius'); + } +} + +:host([variant='outlined']) { + [part='base'] { + height: var-get($outlined-theme, 'size'); + border: rem(1px) solid var-get($outlined-theme, 'border-color'); + border-radius: var-get($outlined-theme, 'border-radius'); + } +} + +:host([variant='fab']) { + [part='base'] { + height: var-get($fab-theme, 'size'); + border-radius: var-get($fab-theme, 'border-radius'); + } +} + +:host [part='base'] { + transition: all .15s ease-in-out; +} + +:host(:not([disabled])[variant='flat']) [part='base'], +:host(:not(:disabled)[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'background'); + + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-background'); + } + + &:focus { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + } + + &:focus-visible { + color: var-get($flat-theme, 'focus-visible-foreground'); + background: var-get($flat-theme, 'focus-visible-background'); + } + + &:active { + color: var-get($flat-theme, 'active-foreground'); + background: var-get($flat-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(4px) var-get($flat-theme, 'shadow-color'); + } +} + +:host(:not([disabled])[variant='contained']) [part='base'], +:host(:not(:disabled)[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + } + + &:focus { + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + } + + &:focus-visible { + color: var-get($contained-theme, 'focus-visible-foreground'); + background: var-get($contained-theme, 'focus-visible-background'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'); + } +} + +:host(:not([disabled])[variant='outlined']) [part='base'], +:host(:not(:disabled)[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'foreground'); + background: var-get($outlined-theme, 'background'); + + &:focus { + color: var-get($outlined-theme, 'focus-foreground'); + background: var-get($outlined-theme, 'focus-background'); + } + + &:focus-visible { + color: var-get($outlined-theme, 'focus-visible-foreground'); + background: var-get($outlined-theme, 'focus-visible-background'); + } + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-background'); + } + + &:active { + color: var-get($outlined-theme, 'active-foreground'); + background: var-get($outlined-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'shadow-color'); + } +} + +:host(:not([disabled])[variant='fab']) [part='base'], +:host(:not(:disabled)[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'foreground'); + background: var-get($fab-theme, 'background'); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + } + + &:focus { + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); + } + + &:focus-visible { + color: var-get($fab-theme, 'focus-visible-foreground'); + background: var-get($fab-theme, 'focus-visible-background'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'); + } +} + +:host([disabled][variant='flat']) [part='base'], +:host(:disabled[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); +} + +:host([disabled][variant='contained']) [part='base'], +:host(:disabled[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'disabled-foreground'); + background: var-get($contained-theme, 'disabled-background'); +} + +:host([disabled][variant='outlined']) [part='base'], +:host(:disabled[variant='outlined']) [part='base'] { + color: var-get($contained-theme, 'disabled-foreground'); + background: var-get($contained-theme, 'disabled-background'); + border-color: var-get($contained-theme, 'disabled-border-color'); +} + +:host([disabled][variant='fab']) [part='base'], +:host(:disabled[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'disabled-foreground'); + background: var-get($fab-theme, 'disabled-background'); +} diff --git a/src/components/button/themes/button/shared/button.fluent.scss b/src/components/button/themes/button/shared/button.fluent.scss new file mode 100644 index 000000000..aefff7632 --- /dev/null +++ b/src/components/button/themes/button/shared/button.fluent.scss @@ -0,0 +1,282 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $fluent-flat; +$contained-theme: $fluent-contained; +$fab-theme: $fluent-fab; +$outlined-theme: $fluent-outlined; +$outline-btn-indent: rem(2px); + +:host([variant='flat']) { + [part='base'] { + height: var-get($flat-theme, 'size'); + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='outlined']) { + [part='base'] { + height: var-get($outlined-theme, 'size'); + border-radius: var-get($outlined-theme, 'border-radius'); + + &::after { + border-radius: calc(#{var-get($outlined-theme, 'border-radius')} - #{$outline-btn-indent * 2}); + } + } +} + +:host([variant='contained']) { + [part='base'] { + height: var-get($contained-theme, 'size'); + border-radius: var-get($contained-theme, 'border-radius'); + + &::after { + border-radius: calc(#{var-get($contained-theme, 'border-radius')} - #{$outline-btn-indent * 2}); + } + } +} + +:host([variant='fab']) { + [part='base'] { + height: var-get($fab-theme, 'size'); + border-radius: var-get($fab-theme, 'border-radius'); + + &::after { + border-radius: calc(#{var-get($fab-theme, 'border-radius')} - #{$outline-btn-indent * 2}); + } + } +} + +[part='base'] { + padding: 0 pad(8px, 16px, 16px); + transition: all .1s ease-in-out; +} + +:host(:not([disabled])[variant='flat']) [part='base'], +:host(:not(:disabled)[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'background'); + border: 1px solid var-get($flat-theme, 'border-color'); + + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-background'); + border-color: var-get($flat-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + border-color: var-get($flat-theme, 'focus-border-color'); + } + + &:active { + color: var-get($flat-theme, 'active-foreground'); + background: var-get($flat-theme, 'active-background'); + border-color: var-get($flat-theme, 'active-border-color'); + } + + &:focus-visible { + color: var-get($flat-theme, 'focus-visible-foreground'); + background: var-get($flat-theme, 'focus-visible-background'); + border-color: var-get($flat-theme, 'focus-visible-border-color'); + } +} + +:host(:not([disabled])[variant='outlined']) [part='base'], +:host(:not(:disabled)[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'foreground'); + background: var-get($outlined-theme, 'background'); + border: rem(1px) solid var-get($outlined-theme, 'border-color'); + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-background'); + border-color: var-get($outlined-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($outlined-theme, 'focus-foreground'); + background: var-get($outlined-theme, 'focus-background'); + border-color: var-get($outlined-theme, 'focus-border-color'); + } + + &:active { + color: var-get($outlined-theme, 'active-foreground'); + background: var-get($outlined-theme, 'active-background'); + border-color: var-get($outlined-theme, 'active-border-color'); + } + + &:focus-visible { + color: var-get($outlined-theme, 'focus-visible-foreground'); + background: var-get($outlined-theme, 'focus-visible-background'); + border-color: var-get($outlined-theme, 'focus-visible-border-color'); + + &::after { + content: ''; + position: absolute; + inset-block-start: $outline-btn-indent; + inset-inline-start: $outline-btn-indent; + pointer-events: none; + width: calc(100% - (#{$outline-btn-indent} * 2)); + height: calc(100% - (#{$outline-btn-indent} * 2)); + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground'); + } + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-background'); + border-color: var-get($outlined-theme, 'hover-border-color'); + + &::after { + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground'); + } + } + + &:active { + color: var-get($outlined-theme, 'active-foreground'); + background: var-get($outlined-theme, 'active-background'); + border-color: var-get($outlined-theme, 'active-border-color'); + + &::after { + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground'); + } + } + } +} + +:host(:not([disabled])[variant='contained']) [part='base'], +:host(:not(:disabled)[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + border: rem(1px) solid var-get($contained-theme, 'border-color'); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + border-color: var-get($contained-theme, 'focus-border-color'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); + } + + &:focus-visible { + color: var-get($contained-theme, 'focus-visible-foreground'); + background: var-get($contained-theme, 'focus-visible-background'); + border-color: var-get($contained-theme, 'focus-visible-border-color'); + position: relative; + + &::after { + content: ''; + box-shadow: 0 0 0 1px var-get($contained-theme, 'focus-visible-foreground'); + position: absolute; + inset-block-start: 3px; + inset-inline-start: 3px; + pointer-events: none; + width: calc(100% - 6px); + height: calc(100% - 6px); + } + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); + } + } +} + +:host(:not([disabled])[variant='fab']) [part='base'], +:host(:not(:disabled)[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'foreground'); + background: var-get($fab-theme, 'background'); + border: rem(1px) solid var-get($fab-theme, 'border-color'); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + border-color: var-get($fab-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); + border-color: var-get($fab-theme, 'focus-border-color'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + border-color: var-get($fab-theme, 'active-border-color'); + } + + &:focus-visible { + color: var-get($fab-theme, 'focus-visible-foreground'); + background: var-get($fab-theme, 'focus-visible-background'); + border-color: var-get($fab-theme, 'focus-visible-border-color'); + position: relative; + + &::after { + content: ''; + box-shadow: 0 0 0 1px var-get($fab-theme, 'focus-visible-foreground'); + position: absolute; + inset-block-start: 3px; + inset-inline-start: 3px; + pointer-events: none; + width: calc(100% - 6px); + height: calc(100% - 6px); + } + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + border-color: var-get($fab-theme, 'hover-border-color'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + border-color: var-get($fab-theme, 'active-border-color'); + } + } +} + +:host([disabled][variant='flat']) [part='base'], +:host(:disabled[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); +} + +:host([disabled][variant='outlined']) [part='base'], +:host(:disabled[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'disabled-foreground'); + background: var-get($outlined-theme, 'disabled-background'); + border-color: var-get($outlined-theme, 'disabled-border-color'); +} + +:host([disabled][variant='contained']) [part='base'], +:host(:disabled[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'disabled-foreground'); + background: var-get($contained-theme, 'disabled-background'); + border: rem(1px) solid var-get($contained-theme, 'disabled-border-color'); +} + +:host([disabled][variant='fab']) [part='base'], +:host(:disabled[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'disabled-foreground'); + background: var-get($fab-theme, 'disabled-background'); +} diff --git a/src/components/button/themes/button/shared/button.indigo.scss b/src/components/button/themes/button/shared/button.indigo.scss new file mode 100644 index 000000000..5bc264a64 --- /dev/null +++ b/src/components/button/themes/button/shared/button.indigo.scss @@ -0,0 +1,256 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $indigo-flat; +$contained-theme: $indigo-contained; +$fab-theme: $indigo-fab; +$outlined-theme: $indigo-outlined; + +:host([variant='flat']) { + [part='base'] { + height: var-get($flat-theme, 'size') + } +} + +:host([variant='outlined']) { + [part='base'] { + height: var-get($outlined-theme, 'size') + } +} + +:host([variant='contained']) { + [part='base'] { + height: var-get($contained-theme, 'size') + } +} + +:host([variant='fab']) { + [part='base'] { + height: var-get($fab-theme, 'size') + } +} + +[part='base'] { + transition: all .15s ease-in-out; +} + +/* stylelint-disable */ +:host([variant='flat']) [part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); +} + +:host([variant='outlined']) [part='base'] { + border-radius: var-get($outlined-theme, 'border-radius'); +} + +:host([variant='contained']) [part='base'] { + border-radius: var-get($contained-theme, 'border-radius'); +} + +:host([variant='fab']) [part='base'] { + border-radius: var-get($fab-theme, 'border-radius'); +} +/* stylelint-enable */ + +:host(:not([disabled])[variant='flat']) [part='base'], +:host(:not(:disabled)[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'background'); + + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-background'); + } + + &:focus { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + } + + &:active { + color: var-get($flat-theme, 'active-foreground'); + background: var-get($flat-theme, 'active-background'); + } + + &:focus-visible { + color: var-get($flat-theme, 'focus-visible-foreground'); + background: var-get($flat-theme, 'focus-visible-background'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'); + } +} + +:host(:not([disabled])[variant='outlined']) [part='base'], +:host(:not(:disabled)[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'foreground'); + background: var-get($outlined-theme, 'background'); + border-style: solid; + border-color: var-get($outlined-theme, 'border-color'); + border-width: rem(2px); + + &:hover { + background: var-get($outlined-theme, 'hover-background'); + color: var-get($outlined-theme, 'hover-foreground'); + border-color: var-get($outlined-theme, 'hover-border-color'); + } + + &:focus { + background: var-get($outlined-theme, 'focus-background'); + color: var-get($outlined-theme, 'focus-foreground'); + border-color: var-get($outlined-theme, 'focus-border-color'); + } + + &:active { + background: var-get($outlined-theme, 'active-background'); + color: var-get($outlined-theme, 'active-foreground'); + border-color: var-get($outlined-theme, 'active-border-color'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color'); + } + + &:focus-visible { + background: var-get($outlined-theme, 'focus-visible-background'); + color: var-get($outlined-theme, 'focus-visible-foreground'); + border-color: var-get($outlined-theme, 'focus-visible-border-color'); + + &:hover { + background: var-get($outlined-theme, 'hover-background'); + color: var-get($outlined-theme, 'hover-foreground'); + border-color: var-get($outlined-theme, 'hover-border-color'); + } + + &:active { + background: var-get($outlined-theme, 'active-background'); + color: var-get($outlined-theme, 'active-foreground'); + border-color: var-get($outlined-theme, 'active-border-color'); + } + } +} + +:host(:not([disabled])[variant='contained']) [part='base'], +:host(:not(:disabled)[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + border-color: var-get($contained-theme, 'focus-border-color'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'); + } + + &:focus-visible { + background: var-get($contained-theme, 'focus-visible-background'); + color: var-get($contained-theme, 'focus-visible-foreground'); + border-color: var-get($contained-theme, 'focus-visible-border-color'); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + border-color: var-get($contained-theme, 'hover-border-color'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + border-color: var-get($contained-theme, 'active-border-color'); + } + } +} + +:host(:not([disabled])[variant='fab']) [part='base'], +:host(:not(:disabled)[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'foreground'); + background: var-get($fab-theme, 'background'); + border-color: var-get($flat-theme, 'border-color'); + min-width: var(--size); + min-height: var(--size); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + border-color: var-get($flat-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); + border-color: var-get($flat-theme, 'focus-border-color'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + border-color: var-get($flat-theme, 'active-border-color'); + } + + &:focus, + &:active { + box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color'); + } + + &:focus-visible { + background: var-get($fab-theme, 'focus-visible-background'); + color: var-get($fab-theme, 'focus-visible-foreground'); + border-color: var-get($fab-theme, 'focus-visible-border-color'); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + border-color: var-get($fab-theme, 'hover-border-color'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + border-color: var-get($fab-theme, 'active-border-color'); + } + } +} + +:host([disabled][variant='flat']) [part='base'], +:host(:disabled[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); +} + +:host([disabled][variant='outlined']) [part='base'], +:host(:disabled[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'disabled-foreground'); + background: var-get($outlined-theme, 'disabled-background'); + border-color: var-get($outlined-theme, 'disabled-border-color'); +} + +:host([disabled][variant='contained']) [part='base'], +:host(:disabled[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'disabled-foreground'); + background: var-get($contained-theme, 'disabled-background'); +} + +:host([disabled][variant='fab']) [part='base'], +:host(:disabled[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'disabled-foreground'); + background: var-get($fab-theme, 'disabled-background'); +} diff --git a/src/components/button/themes/button/shared/button.material.scss b/src/components/button/themes/button/shared/button.material.scss new file mode 100644 index 000000000..201e1f1cb --- /dev/null +++ b/src/components/button/themes/button/shared/button.material.scss @@ -0,0 +1,254 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $material-flat; +$contained-theme: $material-contained; +$fab-theme: $material-fab; +$outlined-theme: $material-outlined; + +:host([variant='flat']) { + [part='base'] { + height: var-get($flat-theme, 'size'); + } +} + +:host([variant='outlined']) { + [part='base'] { + height: var-get($outlined-theme, 'size'); + } +} + +:host([variant='contained']) { + [part='base'] { + height: var-get($contained-theme, 'size'); + } +} + +:host([variant='fab']) { + [part='base'] { + height: var-get($fab-theme, 'size'); + } +} + +[part='base'] { + transition: all .1s ease-in-out; +} + +:host(:not([disabled])[variant='flat']) [part='base'], +:host(:not(:disabled)[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'background'); + + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-background'); + } + + &:focus { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + } + + &:active { + color: var-get($flat-theme, 'active-foreground'); + background: var-get($flat-theme, 'active-background'); + } + + &:focus-visible { + color: var-get($flat-theme, 'focus-visible-foreground'); + background: var-get($flat-theme, 'focus-visible-background'); + + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + background: var-get($flat-theme, 'hover-foreground'); + } + + &:active { + color: var-get($flat-theme, 'active-foreground'); + background: var-get($flat-theme, 'active-background'); + } + } +} + +:host(:not([disabled])[variant='outlined']) [part='base'], +:host(:not(:disabled)[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'foreground'); + background: var-get($outlined-theme, 'background'); + border: rem(1px) solid var-get($outlined-theme, 'border-color'); + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-background'); + border-color: var-get($outlined-theme, 'hover-border-color'); + } + + &:focus { + color: var-get($outlined-theme, 'focus-foreground'); + background: var-get($outlined-theme, 'focus-background'); + border-color: var-get($outlined-theme, 'focus-border-color'); + } + + &:active { + color: var-get($outlined-theme, 'active-foreground'); + background: var-get($outlined-theme, 'active-background'); + border-color: var-get($outlined-theme, 'active-border-color'); + } + + &:focus-visible { + color: var-get($outlined-theme, 'focus-visible-foreground'); + background: var-get($outlined-theme, 'focus-visible-background'); + border-color: var-get($outlined-theme, 'focus-visible-border-color'); + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'hover-foreground'); + border-color: var-get($outlined-theme, 'hover-border-color'); + } + + &:active { + color: var-get($outlined-theme, 'active-foreground'); + background: var-get($outlined-theme, 'active-background'); + border-color: var-get($outlined-theme, 'active-border-color'); + } + } +} + +:host(:not([disabled])[variant='contained']) [part='base'], +:host(:not(:disabled)[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + box-shadow: var(--ig-elevation-2); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + box-shadow: var(--ig-elevation-4); + } + + &:focus { + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: var(--ig-elevation-8); + } + + &:focus-visible { + color: var-get($contained-theme, 'focus-foreground'); + background: var-get($contained-theme, 'focus-background'); + + &:hover { + color: var-get($contained-theme, 'hover-foreground'); + background: var-get($contained-theme, 'hover-background'); + } + + &:active { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + } + } +} + +:host(:not([disabled])[variant='fab']) [part='base'], +:host(:not(:disabled)[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'foreground'); + background: var-get($fab-theme, 'background'); + box-shadow: var(--ig-elevation-6); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + box-shadow: var(--ig-elevation-4); + } + + &:focus { + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + } + + &:focus, + &:active { + box-shadow: var(--ig-elevation-8); + } + + &:focus-visible { + color: var-get($fab-theme, 'focus-foreground'); + background: var-get($fab-theme, 'focus-background'); + + &:hover { + color: var-get($fab-theme, 'hover-foreground'); + background: var-get($fab-theme, 'hover-background'); + } + + &:active { + color: var-get($fab-theme, 'active-foreground'); + background: var-get($fab-theme, 'active-background'); + } + } + + &:hover, + &:focus, + &:focus-visible, + &:active { + box-shadow: var(--ig-elevation-12); + } +} + +/* stylelint-disable */ +:host([variant='flat']) [part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); +} + +:host([variant='outlined']) [part='base'] { + border-radius: var-get($outlined-theme, 'border-radius'); +} + +:host([variant='contained']) [part='base'] { + border-radius: var-get($contained-theme, 'border-radius'); +} + +:host([variant='fab']) [part='base'] { + border-radius: var-get($fab-theme, 'border-radius'); +} +/* stylelint-enable */ + +:host([disabled][variant='flat']) [part='base'], +:host(:disabled[variant='flat']) [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); + box-shadow: inset 0 0 0 rem(1px) var-get($flat-theme, 'disabled-border-color'); +} + +:host([disabled][variant='outlined']) [part='base'], +:host(:disabled[variant='outlined']) [part='base'] { + color: var-get($outlined-theme, 'disabled-foreground'); + background: var-get($outlined-theme, 'disabled-background'); + box-shadow: inset 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color'); + border: rem(1px) solid var-get($outlined-theme, 'disabled-border-color'); +} + +:host([disabled][variant='contained']) [part='base'], +:host(:disabled[variant='contained']) [part='base'] { + color: var-get($contained-theme, 'disabled-foreground'); + background: var-get($contained-theme, 'disabled-background'); + box-shadow: inset 0 0 0 rem(1px) var-get($contained-theme, 'disabled-border-color'); +} + +:host([disabled][variant='fab']) [part='base'], +:host(:disabled[variant='fab']) [part='base'] { + color: var-get($fab-theme, 'disabled-foreground'); + background: var-get($fab-theme, 'disabled-background'); + box-shadow: inset 0 0 0 rem(1px) var-get($fab-theme, 'disabled-border-color'); +} diff --git a/src/components/button/themes/button/themes.ts b/src/components/button/themes/button/themes.ts new file mode 100644 index 000000000..2eea7d486 --- /dev/null +++ b/src/components/button/themes/button/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/button.bootstrap.css.js'; +import { styles as fluentDark } from './dark/button.fluent.css.js'; +import { styles as indigoDark } from './dark/button.indigo.css.js'; +import { styles as materialDark } from './dark/button.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/button.bootstrap.css.js'; +import { styles as fluentLight } from './light/button.fluent.css.js'; +import { styles as indigoLight } from './light/button.indigo.css.js'; +import { styles as materialLight } from './light/button.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/button.bootstrap.css.js'; +import { styles as fluent } from './shared/button.fluent.css.js'; +import { styles as indigo } from './shared/button.indigo.css.js'; +import { styles as material } from './shared/button.material.css.js'; +import { Themes } from '../../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/button/themes/icon-button/dark/_themes.scss b/src/components/button/themes/icon-button/dark/_themes.scss new file mode 100644 index 000000000..ce63f50c8 --- /dev/null +++ b/src/components/button/themes/icon-button/dark/_themes.scss @@ -0,0 +1,23 @@ +@use 'sass:map'; +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/icon-button' as *; + +// Material Themes +$material-flat: digest-schema(map.get($dark-icon-button, 'flat')); +$material-contained: digest-schema(map.get($dark-icon-button, 'contained')); +$material-outlined: digest-schema(map.get($dark-icon-button, 'outlined')); + +// Bootstrap Themes +$bootstrap-flat: digest-schema(map.get($dark-bootstrap-icon-button, 'flat')); +$bootstrap-contained: digest-schema(map.get($dark-bootstrap-icon-button, 'contained')); +$bootstrap-outlined: digest-schema(map.get($dark-bootstrap-icon-button, 'outlined')); + +// Fluent Themes +$fluent-flat: digest-schema(map.get($dark-fluent-icon-button, 'flat')); +$fluent-contained: digest-schema(map.get($dark-fluent-icon-button, 'contained')); +$fluent-outlined: digest-schema(map.get($dark-fluent-icon-button, 'outlined')); + +// Indigo Themes +$indigo-flat: digest-schema(map.get($dark-indigo-icon-button, 'flat')); +$indigo-contained: digest-schema(map.get($dark-indigo-icon-button, 'contained')); +$indigo-outlined: digest-schema(map.get($dark-indigo-icon-button, 'outlined')); diff --git a/src/components/button/themes/icon-button/dark/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/dark/icon-button.bootstrap.scss new file mode 100644 index 000000000..eeaebfd3e --- /dev/null +++ b/src/components/button/themes/icon-button/dark/icon-button.bootstrap.scss @@ -0,0 +1,18 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$flat-theme: $bootstrap-flat; +$contained-theme: $bootstrap-contained; +$outlined-theme: $bootstrap-outlined; + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); +} diff --git a/src/components/button/themes/icon-button/dark/icon-button.fluent.scss b/src/components/button/themes/icon-button/dark/icon-button.fluent.scss index 6c6a6b7d9..3e258ffb6 100644 --- a/src/components/button/themes/icon-button/dark/icon-button.fluent.scss +++ b/src/components/button/themes/icon-button/dark/icon-button.fluent.scss @@ -1,8 +1,18 @@ -@use 'styles/utilities' as utils; +@use 'styles/utilities' as *; +@use 'themes' as *; -@mixin theme() { - igc-icon-button { - --text-color: #{utils.color(surface, 500)}; - --hover-contained-background: #{utils.color(primary, 300)}; - } +$flat-theme: $fluent-flat; +$contained-theme: $fluent-contained; +$outlined-theme: $fluent-outlined; + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); } diff --git a/src/components/button/themes/icon-button/dark/icon-button.indigo.scss b/src/components/button/themes/icon-button/dark/icon-button.indigo.scss new file mode 100644 index 000000000..6a8e8431e --- /dev/null +++ b/src/components/button/themes/icon-button/dark/icon-button.indigo.scss @@ -0,0 +1,18 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$flat-theme: $indigo-flat; +$contained-theme: $indigo-contained; +$outlined-theme: $indigo-outlined; + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); +} diff --git a/src/components/button/themes/icon-button/dark/icon-button.material.scss b/src/components/button/themes/icon-button/dark/icon-button.material.scss new file mode 100644 index 000000000..8e0a55e94 --- /dev/null +++ b/src/components/button/themes/icon-button/dark/icon-button.material.scss @@ -0,0 +1,18 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$flat-theme: $material-flat; +$contained-theme: $material-contained; +$outlined-theme: $material-outlined; + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); +} diff --git a/src/components/button/themes/icon-button/light/icon-button.base.scss b/src/components/button/themes/icon-button/icon-button.base.scss similarity index 100% rename from src/components/button/themes/icon-button/light/icon-button.base.scss rename to src/components/button/themes/icon-button/icon-button.base.scss diff --git a/src/components/button/themes/icon-button/light/_themes.scss b/src/components/button/themes/icon-button/light/_themes.scss new file mode 100644 index 000000000..3b3072aa4 --- /dev/null +++ b/src/components/button/themes/icon-button/light/_themes.scss @@ -0,0 +1,22 @@ +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/icon-button' as *; + +// Material Themes +$material-flat: digest-schema($material-flat-icon-button); +$material-contained: digest-schema($material-contained-icon-button); +$material-outlined: digest-schema($material-outlined-icon-button); + +// Fluent Themes +$fluent-flat: digest-schema($fluent-flat-icon-button); +$fluent-contained: digest-schema($fluent-contained-icon-button); +$fluent-outlined: digest-schema($fluent-outlined-icon-button); + +// Bootstrap Themes +$bootstrap-flat: digest-schema($bootstrap-flat-icon-button); +$bootstrap-contained: digest-schema($bootstrap-contained-icon-button); +$bootstrap-outlined: digest-schema($bootstrap-outlined-icon-button); + +// Indigo Themes +$indigo-flat: digest-schema($indigo-flat-icon-button); +$indigo-contained: digest-schema($indigo-contained-icon-button); +$indigo-outlined: digest-schema($indigo-outlined-icon-button); diff --git a/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss index 73b1f235b..eeaebfd3e 100644 --- a/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss +++ b/src/components/button/themes/icon-button/light/icon-button.bootstrap.scss @@ -1,124 +1,18 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../button/light/themes' as *; +@use 'themes' as *; -$theme: $bootstrap-icon; +$flat-theme: $bootstrap-flat; +$contained-theme: $bootstrap-contained; +$outlined-theme: $bootstrap-outlined; -:host { - @include css-vars-from-theme($theme, 'ig-button'); - - ::slotted(igc-ripple) { - border-radius: var-get($theme, 'border-radius'); - } -} - -[part='base'] { - border-radius: var-get($theme, 'border-radius'); - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out; - color: #{color(primary, 500)}; - padding: pad(7.5px, 9px, 12px); - - &:hover { - color: #{color(primary, 800)}; - } - - &:focus, - &:active { - color: #{color(primary, 600)}; - background: #{color(gray, 100)}; - box-shadow: none; - } - - igc-icon { - color: color(primary, 500); - } -} - -:host([variant='contained']) { - [part='base'] { - color: #{contrast-color(primary, 600)}; - background: #{color(primary, 500)}; - - &:hover { - background: #{color(primary, 600)}; - } - - &:focus, - &:active { - background: #{color(primary, 600)}; - box-shadow: 0 0 0 rem(4px) color(primary, 200, .5); - } - - igc-icon { - color: contrast-color(primary, 600); - } - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); } :host([variant='outlined']) { - [part='base'] { - box-shadow: 0 0 0 rem(1px) color(primary, 500); - - &:hover { - color: #{contrast-color(primary, 600)}; - background: #{color(primary, 600)}; - - igc-icon { - color: contrast-color(primary, 600); - } - } - - &:focus, - &:active { - color: #{contrast-color(primary, 600)}; - background: #{color(primary, 600)}; - box-shadow: 0 0 0 rem(4px) color(primary, 200, .5); - - igc-icon { - color: contrast-color(primary, 600); - } - } - } - - igc-icon { - color: color(primary, 500); - } -} - -:host([disabled]), -:host(:disabled) { - [part='base'] { - color: #{color(primary, 100)}; - background: transparent; - } - - igc-icon { - color: color(primary, 100); - } -} - -:host([disabled][variant='contained']), -:host(:disabled[variant='contained']) { - [part='base'] { - background: #{color(primary, 100)}; - color: #{color(primary, 300)}; - } - - igc-icon { - color: color(primary, 300); - } + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); } -:host([disabled][variant='outlined']), -:host(:disabled[variant='outlined']) { - [part='base'] { - color: #{color(primary, 100)}; - box-shadow: 0 0 0 rem(1px) color(primary, 100); - } - - igc-icon { - color: color(primary, 100); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); } diff --git a/src/components/button/themes/icon-button/light/icon-button.fluent.scss b/src/components/button/themes/icon-button/light/icon-button.fluent.scss index 92ab29200..3e258ffb6 100644 --- a/src/components/button/themes/icon-button/light/icon-button.fluent.scss +++ b/src/components/button/themes/icon-button/light/icon-button.fluent.scss @@ -1,119 +1,18 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../button/light/themes' as *; +@use 'themes' as *; -$theme: $fluent-icon; -$text-color: var(--text-color, #{contrast-color(primary, 600)}) !default; -$hover-contained-background: var(--hover-contained-background, color(primary, 600)) !default; -$outline-btn-indent: rem(2px); +$flat-theme: $fluent-flat; +$contained-theme: $fluent-contained; +$outlined-theme: $fluent-outlined; -:host { - @include css-vars-from-theme($theme, 'ig-button'); - - ::slotted(igc-ripple) { - border-radius: var-get($theme, 'border-radius'); - } -} - -[part='base'] { - border-radius: var-get($theme, 'border-radius'); - background: transparent; - color: color(primary, 500); - transition: color .15s ease-out, background .15s ease-out; - box-shadow: none; - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - padding: pad(4px, 6px, 7px); - - &::after { - position: absolute; - content: ''; - pointer-events: none; - top: 2px; - left: 2px; - width: calc(100% - (#{$outline-btn-indent} * 2)); - height: calc(100% - (#{$outline-btn-indent} * 2)); - border-radius: calc(#{var-get($theme, 'border-radius')} - #{$outline-btn-indent * 2}); - } - - &:hover { - color: color(primary, 500); - background: color(gray, 200); - } - - &:active { - color: color(primary, 500); - background: color(gray, 300); - } - - &:focus-visible::after { - box-shadow: 0 0 0 rem(1px) color(gray, 500); - } - - igc-icon { - color: color(primary, 500); - } -} - -:host([variant='contained']) { - [part='base'] { - color: $text-color; - background: color(primary, 500); - - &:hover, - &:focus, - &:focus-visible { - background: $hover-contained-background; - } - - &:active { - color: contrast-color(primary, 800); - background: color(primary, 800); - } - - &:focus-visible::after { - box-shadow: 0 0 0 rem(1px) contrast-color(primary, 600); - } - } - - igc-icon { - color: $text-color; - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); } :host([variant='outlined']) { - [part='base'] { - color: color(gray, 900); - box-shadow: 0 0 0 1px color(gray, 700); - - &:focus { - background: transparent; - } - - &:hover, - &:focus:hover, - &:focus:active { - background: color(gray, 200); - } - - &:focus-visible::after { - box-shadow: 0 0 0 rem(1px) color(gray, 900); - } - } - - igc-icon { - color: color(gray, 900); - } + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); } -:host([disabled]), -:host(:disabled) { - [part='base'] { - color: color(gray, 400); - background: color(gray, 100); - } - - igc-icon { - color: color(gray, 400); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); } diff --git a/src/components/button/themes/icon-button/light/icon-button.indigo.scss b/src/components/button/themes/icon-button/light/icon-button.indigo.scss index 377e9b54b..6a8e8431e 100644 --- a/src/components/button/themes/icon-button/light/icon-button.indigo.scss +++ b/src/components/button/themes/icon-button/light/icon-button.indigo.scss @@ -1,106 +1,18 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../button/light/themes' as *; +@use 'themes' as *; -$theme: $indigo-icon; +$flat-theme: $indigo-flat; +$contained-theme: $indigo-contained; +$outlined-theme: $indigo-outlined; -:host { - @include css-vars-from-theme($theme, 'ig-button'); - - ::slotted(igc-ripple) { - border-radius: var-get($theme, 'border-radius'); - } -} - -[part='base'] { - border-radius: var-get($theme, 'border-radius'); - transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out; - color: color(gray, 700); - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - padding: pad(6px); - - &:hover { - color: color(gray, 900); - background: transparent; - } - - &:focus, - &:active { - color: color(gray, 900); - background: transparent; - box-shadow: 0 0 0 rem(3px) color(gray, 300); - } - - igc-icon { - color: color(gray, 700); - } -} - -:host([variant='contained']) { - [part='base'] { - color: contrast-color(primary, 600); - background: color(primary, 500); - - &:hover { - background: #{color(primary, 400)}; - } - - &:focus, - &:active { - background: #{color(primary, 400)}; - box-shadow: 0 0 0 rem(3px) color(primary, 200); - } - } - - igc-icon { - color: contrast-color(primary, 600); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); } :host([variant='outlined']) { - [part='base'] { - box-shadow: none; - - &::after { - position: absolute; - content: ''; - box-shadow: inset 0 0 0 rem(2px) color(gray, 500); - width: 100%; - height: 100%; - border-radius: inherit; - } - - &:hover { - color: color(gray, 900); - background: color(gray, 100); - } - - &:focus, - &:active { - color: color(gray, 900); - box-shadow: 0 0 0 rem(3px) color(gray, 300); - } - } + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); } -:host([disabled]), -:host(:disabled) { - [part='base'] { - color: color(gray, 400); - background: transparent; - box-shadow: none; - } - - igc-icon { - color: color(gray, 400); - } -} - -:host([disabled][variant='contained']), -:host(:disabled[variant='contained']) { - [part='base'] { - background: color(gray, 100); - color: color(gray, 400); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); } diff --git a/src/components/button/themes/icon-button/light/icon-button.material.scss b/src/components/button/themes/icon-button/light/icon-button.material.scss index 36170800b..8e0a55e94 100644 --- a/src/components/button/themes/icon-button/light/icon-button.material.scss +++ b/src/components/button/themes/icon-button/light/icon-button.material.scss @@ -1,77 +1,18 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../button/light/themes' as *; +@use 'themes' as *; -$theme: $material-icon; +$flat-theme: $material-flat; +$contained-theme: $material-contained; +$outlined-theme: $material-outlined; -:host { - @include css-vars-from-theme($theme, 'ig-button'); - - ::slotted(igc-ripple) { - border-radius: var-get($theme, 'border-radius'); - } -} - -[part='base'] { - border-radius: var-get($theme, 'border-radius'); - width: var-get($theme, 'size'); - height: var-get($theme, 'size'); - padding: pad(6px); - color: color(gray, 900); - - igc-icon { - color: color(gray, 900); - } -} - -:host([variant='contained']) { - [part='base'] { - background: color(gray, 200); - } +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); } :host([variant='outlined']) { - [part='base'] { - box-shadow: inset 0 0 0 1px color(gray, 300); - } -} - -:host(:focus-within) { - [part='base'] { - transition: none; - background: color(gray, 200); - box-shadow: inset 0 0 0 1px color(gray, 400); - } + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); } -:host([variant='contained']:focus-within) { - [part='base'] { - background: color(gray, 300); - } -} - -:host([disabled]), -:host(:disabled) { - [part='base'] { - color: color(gray, 500); - } - - igc-icon { - color: color(gray, 500); - } -} - -:host([disabled][variant='contained']), -:host(:disabled[variant='contained']) { - [part='base'] { - background: color(gray, 100); - } -} - -:host(:disabled[variant='outlined']), -:host([disabled][variant='outlined']) { - [part='base'] { - background: color(gray, 100); - box-shadow: inset 0 0 0 1px color(gray, 100); - } +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); } diff --git a/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss new file mode 100644 index 000000000..ea520806f --- /dev/null +++ b/src/components/button/themes/icon-button/shared/icon-button.bootstrap.scss @@ -0,0 +1,139 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $bootstrap-flat; +$contained-theme: $bootstrap-contained; +$outlined-theme: $bootstrap-outlined; + +[part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); + width: var-get($flat-theme, 'size'); + height: var-get($flat-theme, 'size'); + transition: box-shadow .15s ease-out, color .15s ease-out, background .15s ease-out; + color: var-get($flat-theme, 'foreground'); + padding: pad(7.5px, 9px, 12px); + + igc-icon { + color: var-get($flat-theme, 'foreground'); + } +} + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); + + [part='base'] { + &:hover { + color: var-get($flat-theme, 'hover-foreground'); + } + + &:focus, + &:active { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + box-shadow: none; + } + } + + ::slotted(igc-ripple) { + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); + + [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + + &:hover { + background: var-get($contained-theme, 'focus-background'); + } + + &:focus, + &:active { + background: var-get($contained-theme, 'focus-background'); + box-shadow: 0 0 0 rem(4px) var-get($contained-theme, 'focus-border-color'); + } + + igc-icon { + color: var-get($contained-theme, 'foreground'); + } + } + + ::slotted(igc-ripple) { + border-radius: var-get($contained-theme, 'border-radius'); + } +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); + + [part='base'] { + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'border-color'); + + &:hover { + color: var-get($outlined-theme, 'hover-foreground'); + background: var-get($outlined-theme, 'focus-background'); + + igc-icon { + color: var-get($outlined-theme, 'hover-foreground'); + } + } + + &:focus, + &:active { + color: var-get($outlined-theme, 'focus-foreground'); + background: var-get($outlined-theme, 'focus-background'); + box-shadow: 0 0 0 rem(4px) var-get($outlined-theme, 'focus-border-color'); + + igc-icon { + color: var-get($outlined-theme, 'focus-foreground'); + } + } + } + + igc-icon { + color: var-get($outlined-theme, 'foreground'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($outlined-theme, 'border-radius'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); + } + + igc-icon { + color: var-get($flat-theme, 'disabled-foreground'); + } +} + +:host([disabled][variant='contained']), +:host(:disabled[variant='contained']) { + [part='base'] { + background: var-get($contained-theme, 'disabled-background'); + color: var-get($contained-theme, 'disabled-foreground'); + } + + igc-icon { + color: var-get($contained-theme, 'disabled-foreground'); + } +} + +:host([disabled][variant='outlined']), +:host(:disabled[variant='outlined']) { + [part='base'] { + color: var-get($outlined-theme, 'disabled-foreground'); + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'disabled-border-color'); + } + + igc-icon { + color: var-get($outlined-theme, 'disabled-foreground'); + } +} diff --git a/src/components/button/themes/icon-button/shared/icon-button.fluent.scss b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss new file mode 100644 index 000000000..53baad405 --- /dev/null +++ b/src/components/button/themes/icon-button/shared/icon-button.fluent.scss @@ -0,0 +1,138 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $fluent-flat; +$contained-theme: $fluent-contained; +$outlined-theme: $fluent-outlined; +$outline-btn-indent: rem(2px); + +[part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); + background: var-get($flat-theme, 'background'); + color: var-get($flat-theme, 'foreground'); + transition: color .15s ease-out, background .15s ease-out; + box-shadow: none; + width: var-get($flat-theme, 'size'); + height: var-get($flat-theme, 'size'); + padding: pad(4px, 6px, 7px); + + &::after { + position: absolute; + content: ''; + pointer-events: none; + top: 2px; + left: 2px; + width: calc(100% - (#{$outline-btn-indent} * 2)); + height: calc(100% - (#{$outline-btn-indent} * 2)); + border-radius: calc(#{var-get($flat-theme, 'border-radius')} - #{$outline-btn-indent * 2}); + } + + &:hover { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'hover-background'); + } + + &:focus { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'focus-background'); + } + + &:active { + color: var-get($flat-theme, 'foreground'); + background: var-get($flat-theme, 'active-background'); + } + + &:focus-visible::after { + box-shadow: 0 0 0 rem(1px) var-get($flat-theme, 'focus-border-color'); + } + + igc-icon { + color: var-get($flat-theme, 'foreground'); + } +} + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); + + ::slotted(igc-ripple) { + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); + + [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + + &:focus { + background: var-get($contained-theme, 'focus-background'); + } + + &:hover { + background: var-get($contained-theme, 'hover-background'); + } + + &:active, + &:focus-visible { + color: var-get($contained-theme, 'active-foreground'); + background: var-get($contained-theme, 'active-background'); + } + + &:focus-visible::after { + box-shadow: 0 0 0 rem(1px) var-get($contained-theme, 'focus-border-color'); + } + } + + igc-icon { + color: var-get($contained-theme, 'foreground'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($contained-theme, 'border-radius'); + } +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); + + [part='base'] { + color: var-get($outlined-theme, 'foreground'); + box-shadow: 0 0 0 1px var-get($outlined-theme, 'border-color'); + + &:focus { + background: var-get($outlined-theme, 'focus-background'); + } + + &:hover, + &:focus:hover, + &:focus:active { + background: var-get($outlined-theme, 'active-background'); + } + + &:focus-visible::after { + box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-border-color'); + } + } + + igc-icon { + color: var-get($outlined-theme, 'foreground'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($outlined-theme, 'border-radius'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); + } + + igc-icon { + color: var-get($flat-theme, 'disabled-foreground'); + } +} diff --git a/src/components/button/themes/icon-button/shared/icon-button.indigo.scss b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss new file mode 100644 index 000000000..a99dc4638 --- /dev/null +++ b/src/components/button/themes/icon-button/shared/icon-button.indigo.scss @@ -0,0 +1,121 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $indigo-flat; +$contained-theme: $indigo-contained; +$outlined-theme: $indigo-outlined; + +[part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); + transition: color .15s ease-in-out, box-shadow .15s ease-in-out, background .15s ease-in-out; + color: var-get($flat-theme, 'foreground'); + width: var-get($flat-theme, 'size'); + height: var-get($flat-theme, 'size'); + padding: pad(6px); + + &:hover { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + } + + &:focus, + &:active { + color: var-get($flat-theme, 'focus-foreground'); + background: var-get($flat-theme, 'focus-background'); + box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'focus-border-color'); + } + + igc-icon { + color: var-get($flat-theme, 'foreground'); + } +} + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); + + ::slotted(igc-ripple) { + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); + + [part='base'] { + color: var-get($contained-theme, 'foreground'); + background: var-get($contained-theme, 'background'); + + &:hover { + background: var-get($contained-theme, 'focus-background'); + } + + &:focus, + &:active { + background: var-get($contained-theme, 'focus-background'); + box-shadow: 0 0 0 rem(3px) var-get($contained-theme, 'focus-border-color'); + } + } + + igc-icon { + color: var-get($contained-theme, 'foreground'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($contained-theme, 'border-radius'); + } +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); + + [part='base'] { + box-shadow: none; + + &::after { + position: absolute; + content: ''; + box-shadow: inset 0 0 0 rem(2px) var-get($outlined-theme, 'border-color'); + width: 100%; + height: 100%; + border-radius: inherit; + } + + &:hover, + &:focus:hover { + color: var-get($outlined-theme, 'focus-foreground'); + background: var-get($outlined-theme, 'focus-background'); + } + + &:focus, + &:active { + background: var-get($outlined-theme, 'background'); + color: var-get($outlined-theme, 'focus-foreground'); + box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'focus-border-color'); + } + } + + ::slotted(igc-ripple) { + border-radius: var-get($outlined-theme, 'border-radius'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + background: var-get($flat-theme, 'disabled-background'); + box-shadow: none; + } + + igc-icon { + color: var-get($flat-theme, 'disabled-foreground'); + } +} + +:host([disabled][variant='contained']), +:host(:disabled[variant='contained']) { + [part='base'] { + background: var-get($contained-theme, 'disabled-background'); + color: var-get($contained-theme, 'disabled-foreground'); + } +} diff --git a/src/components/button/themes/icon-button/shared/icon-button.material.scss b/src/components/button/themes/icon-button/shared/icon-button.material.scss new file mode 100644 index 000000000..84051482e --- /dev/null +++ b/src/components/button/themes/icon-button/shared/icon-button.material.scss @@ -0,0 +1,96 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$flat-theme: $material-flat; +$contained-theme: $material-contained; +$outlined-theme: $material-outlined; + +[part='base'] { + border-radius: var-get($flat-theme, 'border-radius'); + width: var-get($flat-theme, 'size'); + height: var-get($flat-theme, 'size'); + padding: pad(6px); + color: var-get($flat-theme, 'foreground'); + + igc-icon { + color: var-get($flat-theme, 'foreground'); + } +} + +:host(:focus-within) { + [part='base'] { + transition: none; + background: var-get($flat-theme, 'focus-background'); + box-shadow: inset 0 0 0 1px var-get($flat-theme, 'focus-border-color'); + } +} + +:host([variant='flat']) { + @include css-vars-from-theme($flat-theme, 'ig-icon-button'); + + ::slotted(igc-ripple) { + border-radius: var-get($flat-theme, 'border-radius'); + } +} + +:host([variant='contained']) { + @include css-vars-from-theme($contained-theme, 'ig-icon-button'); + + [part='base'] { + background: var-get($contained-theme, 'background'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($contained-theme, 'border-radius'); + } +} + +:host([variant='contained']:focus-within) { + [part='base'] { + background: var-get($contained-theme, 'focus-background'); + } +} + +:host([variant='outlined']) { + @include css-vars-from-theme($outlined-theme, 'ig-icon-button'); + + [part='base'] { + box-shadow: inset 0 0 0 1px var-get($outlined-theme, 'border-color'); + } + + ::slotted(igc-ripple) { + border-radius: var-get($outlined-theme, 'border-radius'); + } +} + +:host([variant='outlined']:focus-within) { + [part='base'] { + box-shadow: inset 0 0 0 1px var-get($flat-theme, 'focus-border-color'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='base'] { + color: var-get($flat-theme, 'disabled-foreground'); + } + + igc-icon { + color: var-get($flat-theme, 'disabled-foreground'); + } +} + +:host([disabled][variant='contained']), +:host(:disabled[variant='contained']) { + [part='base'] { + background: var-get($contained-theme, 'disabled-background'); + } +} + +:host(:disabled[variant='outlined']), +:host([disabled][variant='outlined']) { + [part='base'] { + background: var-get($outlined-theme, 'disabled-background'); + box-shadow: inset 0 0 0 1px var-get($outlined-theme, 'disabled-border-color'); + } +} diff --git a/src/components/button/themes/icon-button/themes.ts b/src/components/button/themes/icon-button/themes.ts new file mode 100644 index 000000000..1e7bc0949 --- /dev/null +++ b/src/components/button/themes/icon-button/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/icon-button.bootstrap.css.js'; +import { styles as fluentDark } from './dark/icon-button.fluent.css.js'; +import { styles as indigoDark } from './dark/icon-button.indigo.css.js'; +import { styles as materialDark } from './dark/icon-button.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/icon-button.bootstrap.css.js'; +import { styles as fluentLight } from './light/icon-button.fluent.css.js'; +import { styles as indigoLight } from './light/icon-button.indigo.css.js'; +import { styles as materialLight } from './light/icon-button.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/icon-button.bootstrap.css.js'; +import { styles as fluent } from './shared/icon-button.fluent.css.js'; +import { styles as indigo } from './shared/icon-button.indigo.css.js'; +import { styles as material } from './shared/icon-button.material.css.js'; +import { Themes } from '../../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index c7cf2dfcb..157146880 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -13,10 +13,7 @@ import { calculateYearsRangeStart, setDateSafe } from './common/utils.js'; import IgcDaysViewComponent from './days-view/days-view.js'; import IgcMonthsViewComponent from './months-view/months-view.js'; import { styles } from './themes/calendar.base.css.js'; -import { styles as bootstrap } from './themes/light/bootstrap/calendar.bootstrap.css.js'; -import { styles as fluent } from './themes/light/fluent/calendar.fluent.css.js'; -import { styles as indigo } from './themes/light/indigo/calendar.indigo.css.js'; -import { styles as material } from './themes/light/material/calendar.material.css.js'; +import { all } from './themes/calendar.js'; import IgcYearsViewComponent from './years-view/years-view.js'; import { themeSymbol, themes } from '../../theming/theming-decorator.js'; import type { Theme } from '../../theming/types.js'; @@ -60,23 +57,7 @@ import IgcIconComponent from '../icon/icon.js'; * when calendar orientation is vertical. * @csspart days-view-container - The days view container. */ -@themes( - { - light: { - bootstrap, - fluent, - indigo, - material, - }, - dark: { - bootstrap, - fluent, - indigo, - material, - }, - }, - true -) +@themes(all) export default class IgcCalendarComponent extends SizableMixin( EventEmitterMixin< IgcCalendarBaseEventMap, diff --git a/src/components/calendar/days-view/days-view.ts b/src/components/calendar/days-view/days-view.ts index 4df90500f..f4a65d5cb 100644 --- a/src/components/calendar/days-view/days-view.ts +++ b/src/components/calendar/days-view/days-view.ts @@ -24,11 +24,8 @@ import { isDateInRanges, } from '../common/calendar.model.js'; import { areEqualDates, getDateOnly, isEqual } from '../common/utils.js'; +import { all } from '../themes/days'; import { styles } from '../themes/days-view.base.css.js'; -import { styles as bootstrap } from '../themes/light/bootstrap/days-view.bootstrap.css.js'; -import { styles as fluent } from '../themes/light/fluent/days-view.fluent.css.js'; -import { styles as indigo } from '../themes/light/indigo/days-view.indigo.css.js'; -import { styles as material } from '../themes/light/material/days-view.material.css.js'; export interface IgcDaysViewEventMap extends IgcCalendarBaseEventMap { igcActiveDateChange: CustomEvent; @@ -51,20 +48,7 @@ export interface IgcDaysViewEventMap extends IgcCalendarBaseEventMap { */ @blazorSuppressComponent @blazorIndirectRender -@themes({ - light: { - bootstrap, - fluent, - material, - indigo, - }, - dark: { - bootstrap, - fluent, - material, - indigo, - }, -}) +@themes(all) export default class IgcDaysViewComponent extends EventEmitterMixin< IgcDaysViewEventMap, Constructor diff --git a/src/components/calendar/months-view/months-view.ts b/src/components/calendar/months-view/months-view.ts index bbfdd7ab5..7e99e5053 100644 --- a/src/components/calendar/months-view/months-view.ts +++ b/src/components/calendar/months-view/months-view.ts @@ -15,10 +15,7 @@ import { } from '../common/calendar-base.js'; import { Calendar, TimeDeltaInterval } from '../common/calendar.model.js'; import { setDateSafe } from '../common/utils.js'; -import { styles as bootstrap } from '../themes/light/bootstrap/year-month-view.bootstrap.css.js'; -import { styles as fluent } from '../themes/light/fluent/year-month-view.fluent.css.js'; -import { styles as indigo } from '../themes/light/indigo/year-month-view.indigo.css.js'; -import { styles as material } from '../themes/light/material/year-month-view.material.css.js'; +import { all } from '../themes/year-month'; import { styles } from '../themes/year-month-view.base.css.js'; /** @@ -32,20 +29,7 @@ import { styles } from '../themes/year-month-view.base.css.js'; */ @blazorIndirectRender @blazorSuppressComponent -@themes({ - light: { - bootstrap, - fluent, - material, - indigo, - }, - dark: { - bootstrap, - fluent, - material, - indigo, - }, -}) +@themes(all) export default class IgcMonthsViewComponent extends EventEmitterMixin< IgcCalendarBaseEventMap, Constructor diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss index a9006e028..603f3b36f 100644 --- a/src/components/calendar/themes/calendar.base.scss +++ b/src/components/calendar/themes/calendar.base.scss @@ -1,5 +1,3 @@ -@use 'sass:math'; -@use 'sass:map'; @use 'styles/common/component'; @use 'styles/utilities' as *; diff --git a/src/components/calendar/themes/calendar.ts b/src/components/calendar/themes/calendar.ts new file mode 100644 index 000000000..81fbd35f6 --- /dev/null +++ b/src/components/calendar/themes/calendar.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js'; +import { styles as fluentDark } from './dark/calendar.fluent.css.js'; +import { styles as indigoDark } from './dark/calendar.indigo.css.js'; +import { styles as materialDark } from './dark/calendar.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js'; +import { styles as fluentLight } from './light/calendar.fluent.css.js'; +import { styles as indigoLight } from './light/calendar.indigo.css.js'; +import { styles as materialLight } from './light/calendar.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/bootstrap/calendar.bootstrap.css.js'; +import { styles as fluent } from './shared/fluent/calendar.fluent.css.js'; +import { styles as indigo } from './shared/indigo/calendar.indigo.css.js'; +import { styles as material } from './shared/material/calendar.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/calendar/themes/dark/calendar.bootstrap.scss b/src/components/calendar/themes/dark/calendar.bootstrap.scss new file mode 100644 index 000000000..b7decb540 --- /dev/null +++ b/src/components/calendar/themes/dark/calendar.bootstrap.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($bootstrap, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/dark/calendar.fluent.scss b/src/components/calendar/themes/dark/calendar.fluent.scss new file mode 100644 index 000000000..461fce5e1 --- /dev/null +++ b/src/components/calendar/themes/dark/calendar.fluent.scss @@ -0,0 +1,28 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($fluent, 'ig-calendar'); + + // TODO remove this variables after calendar consume its colors from the schema + &::part(header) { + --header-color: #{contrast-color(primary, 500)}; + } + + &::part(days-view) { + --date-current-color: #{contrast-color(secondary, 500)}; + --date-color-hover: #{contrast-color(gray, 100)}; + } + + &::part(months-view), + &::part(years-view) { + --current-month-year-bg: #{color(gray, 100)}; + --current-month-year-color: #{contrast-color(gray, 100)}; + --current-month-year-bg-hover: #{color(gray, 200)}; + --current-month-year-color-hover: #{contrast-color(gray, 200)}; + --selected-month-year-bg: #{color(primary, 900)}; + --selected-month-year-color: #{contrast-color(primary, 900)}; + --selected-month-year-bg-hover: #{color(primary, 800)}; + --selected-month-year-color-hover: #{contrast-color(primary, 800)}; + } +} diff --git a/src/components/calendar/themes/dark/calendar.indigo.scss b/src/components/calendar/themes/dark/calendar.indigo.scss new file mode 100644 index 000000000..c0fceb144 --- /dev/null +++ b/src/components/calendar/themes/dark/calendar.indigo.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($indigo, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/dark/calendar.material.scss b/src/components/calendar/themes/dark/calendar.material.scss new file mode 100644 index 000000000..3ec8771b0 --- /dev/null +++ b/src/components/calendar/themes/dark/calendar.material.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($material, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/dark/fluent/index.scss b/src/components/calendar/themes/dark/fluent/index.scss deleted file mode 100644 index 2b583066d..000000000 --- a/src/components/calendar/themes/dark/fluent/index.scss +++ /dev/null @@ -1,26 +0,0 @@ -@use '../../../../../styles/utilities' as *; - -@mixin theme() { - igc-calendar { - &::part(header) { - --header-color: #{contrast-color(primary, 500)}; - } - - &::part(days-view) { - --date-current-color: #{contrast-color(secondary, 500)}; - --date-color-hover: #{contrast-color(gray, 100)}; - } - - &::part(months-view), - &::part(years-view) { - --current-month-year-bg: #{color(gray, 100)}; - --current-month-year-color: #{contrast-color(gray, 100)}; - --current-month-year-bg-hover: #{color(gray, 200)}; - --current-month-year-color-hover: #{contrast-color(gray, 200)}; - --selected-month-year-bg: #{color(primary, 900)}; - --selected-month-year-color: #{contrast-color(primary, 900)}; - --selected-month-year-bg-hover: #{color(primary, 800)}; - --selected-month-year-color-hover: #{contrast-color(primary, 800)}; - } - } -} diff --git a/src/components/calendar/themes/days.ts b/src/components/calendar/themes/days.ts new file mode 100644 index 000000000..86dd26dd5 --- /dev/null +++ b/src/components/calendar/themes/days.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js'; +import { styles as fluentDark } from './dark/calendar.fluent.css.js'; +import { styles as indigoDark } from './dark/calendar.indigo.css.js'; +import { styles as materialDark } from './dark/calendar.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js'; +import { styles as fluentLight } from './light/calendar.fluent.css.js'; +import { styles as indigoLight } from './light/calendar.indigo.css.js'; +import { styles as materialLight } from './light/calendar.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/bootstrap/days-view.bootstrap.css.js'; +import { styles as fluent } from './shared/fluent/days-view.fluent.css.js'; +import { styles as indigo } from './shared/indigo/days-view.indigo.css.js'; +import { styles as material } from './shared/material/days-view.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/calendar/themes/light/calendar.bootstrap.scss b/src/components/calendar/themes/light/calendar.bootstrap.scss new file mode 100644 index 000000000..b7decb540 --- /dev/null +++ b/src/components/calendar/themes/light/calendar.bootstrap.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($bootstrap, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/light/calendar.fluent.scss b/src/components/calendar/themes/light/calendar.fluent.scss new file mode 100644 index 000000000..4943820fd --- /dev/null +++ b/src/components/calendar/themes/light/calendar.fluent.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($fluent, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/light/calendar.indigo.scss b/src/components/calendar/themes/light/calendar.indigo.scss new file mode 100644 index 000000000..c0fceb144 --- /dev/null +++ b/src/components/calendar/themes/light/calendar.indigo.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($indigo, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/light/calendar.material.scss b/src/components/calendar/themes/light/calendar.material.scss new file mode 100644 index 000000000..3ec8771b0 --- /dev/null +++ b/src/components/calendar/themes/light/calendar.material.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +:host { + @include css-vars-from-theme($material, 'ig-calendar'); +} diff --git a/src/components/calendar/themes/light/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss similarity index 97% rename from src/components/calendar/themes/light/bootstrap/calendar.bootstrap.scss rename to src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss index 822f339d3..a92a8ddbc 100644 --- a/src/components/calendar/themes/light/bootstrap/calendar.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss @@ -1,6 +1,6 @@ @use 'vars' as *; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; diff --git a/src/components/calendar/themes/light/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss similarity index 99% rename from src/components/calendar/themes/light/bootstrap/days-view.bootstrap.scss rename to src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 95d7d1f91..2c9ec35ed 100644 --- a/src/components/calendar/themes/light/bootstrap/days-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss @@ -1,6 +1,6 @@ @use 'vars' as *; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; $border-width: rem(1px); diff --git a/src/components/calendar/themes/light/bootstrap/vars.scss b/src/components/calendar/themes/shared/bootstrap/vars.scss similarity index 94% rename from src/components/calendar/themes/light/bootstrap/vars.scss rename to src/components/calendar/themes/shared/bootstrap/vars.scss index e594cb447..0448631a9 100644 --- a/src/components/calendar/themes/light/bootstrap/vars.scss +++ b/src/components/calendar/themes/shared/bootstrap/vars.scss @@ -1,4 +1,4 @@ -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; $border-radius: border-radius(rem(4px)); $special-background: color(primary, 300); diff --git a/src/components/calendar/themes/light/bootstrap/year-month-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss similarity index 97% rename from src/components/calendar/themes/light/bootstrap/year-month-view.bootstrap.scss rename to src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss index a6a404146..c93566051 100644 --- a/src/components/calendar/themes/light/bootstrap/year-month-view.bootstrap.scss +++ b/src/components/calendar/themes/shared/bootstrap/year-month-view.bootstrap.scss @@ -1,6 +1,6 @@ @use 'vars' as *; @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; diff --git a/src/components/calendar/themes/light/fluent/calendar.fluent.scss b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss similarity index 97% rename from src/components/calendar/themes/light/fluent/calendar.fluent.scss rename to src/components/calendar/themes/shared/fluent/calendar.fluent.scss index ee2b554a5..7440676c8 100644 --- a/src/components/calendar/themes/light/fluent/calendar.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/calendar.fluent.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; $header-bg: var(--header-bg, #{color(primary, 500)}); diff --git a/src/components/calendar/themes/light/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss similarity index 99% rename from src/components/calendar/themes/light/fluent/days-view.fluent.scss rename to src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 61325a863..5b84cdccf 100644 --- a/src/components/calendar/themes/light/fluent/days-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'vars' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; $border-width: rem(1px); diff --git a/src/components/calendar/themes/light/fluent/vars.scss b/src/components/calendar/themes/shared/fluent/vars.scss similarity index 100% rename from src/components/calendar/themes/light/fluent/vars.scss rename to src/components/calendar/themes/shared/fluent/vars.scss diff --git a/src/components/calendar/themes/light/fluent/year-month-view.fluent.scss b/src/components/calendar/themes/shared/fluent/year-month-view.fluent.scss similarity index 98% rename from src/components/calendar/themes/light/fluent/year-month-view.fluent.scss rename to src/components/calendar/themes/shared/fluent/year-month-view.fluent.scss index 3436b650a..9f896fa3c 100644 --- a/src/components/calendar/themes/light/fluent/year-month-view.fluent.scss +++ b/src/components/calendar/themes/shared/fluent/year-month-view.fluent.scss @@ -1,5 +1,5 @@ @use 'styles/utilities/index' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; $current-bg: var(--current-month-year-bg, #{color(gray, 200)}); diff --git a/src/components/calendar/themes/light/indigo/calendar.indigo.scss b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss similarity index 97% rename from src/components/calendar/themes/light/indigo/calendar.indigo.scss rename to src/components/calendar/themes/shared/indigo/calendar.indigo.scss index ea4847510..2e3f72db0 100644 --- a/src/components/calendar/themes/light/indigo/calendar.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $indigo; diff --git a/src/components/calendar/themes/light/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss similarity index 99% rename from src/components/calendar/themes/light/indigo/days-view.indigo.scss rename to src/components/calendar/themes/shared/indigo/days-view.indigo.scss index f8f5c4ea1..f6f212139 100644 --- a/src/components/calendar/themes/light/indigo/days-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; $border-width: rem(1px); diff --git a/src/components/calendar/themes/light/indigo/year-month-view.indigo.scss b/src/components/calendar/themes/shared/indigo/year-month-view.indigo.scss similarity index 96% rename from src/components/calendar/themes/light/indigo/year-month-view.indigo.scss rename to src/components/calendar/themes/shared/indigo/year-month-view.indigo.scss index 3b6e1ddfd..b31dc8d90 100644 --- a/src/components/calendar/themes/light/indigo/year-month-view.indigo.scss +++ b/src/components/calendar/themes/shared/indigo/year-month-view.indigo.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; [part~='month-inner'], [part~='year-inner'] { diff --git a/src/components/calendar/themes/light/material/calendar.material.scss b/src/components/calendar/themes/shared/material/calendar.material.scss similarity index 96% rename from src/components/calendar/themes/light/material/calendar.material.scss rename to src/components/calendar/themes/shared/material/calendar.material.scss index e124eba38..1a8eaf5f5 100644 --- a/src/components/calendar/themes/light/material/calendar.material.scss +++ b/src/components/calendar/themes/shared/material/calendar.material.scss @@ -1,6 +1,6 @@ // TODO consume colors from schemas @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; diff --git a/src/components/calendar/themes/light/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss similarity index 99% rename from src/components/calendar/themes/light/material/days-view.material.scss rename to src/components/calendar/themes/shared/material/days-view.material.scss index f8f5c4ea1..f6f212139 100644 --- a/src/components/calendar/themes/light/material/days-view.material.scss +++ b/src/components/calendar/themes/shared/material/days-view.material.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; $border-width: rem(1px); diff --git a/src/components/calendar/themes/light/material/year-month-view.material.scss b/src/components/calendar/themes/shared/material/year-month-view.material.scss similarity index 96% rename from src/components/calendar/themes/light/material/year-month-view.material.scss rename to src/components/calendar/themes/shared/material/year-month-view.material.scss index 3b6e1ddfd..b31dc8d90 100644 --- a/src/components/calendar/themes/light/material/year-month-view.material.scss +++ b/src/components/calendar/themes/shared/material/year-month-view.material.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; [part~='month-inner'], [part~='year-inner'] { diff --git a/src/components/calendar/themes/year-month-view.base.scss b/src/components/calendar/themes/year-month-view.base.scss index 88181950c..7f0556d93 100644 --- a/src/components/calendar/themes/year-month-view.base.scss +++ b/src/components/calendar/themes/year-month-view.base.scss @@ -1,4 +1,3 @@ -@use 'sass:math'; @use 'styles/utilities' as *; :host { diff --git a/src/components/calendar/themes/year-month.ts b/src/components/calendar/themes/year-month.ts new file mode 100644 index 000000000..d32aa1615 --- /dev/null +++ b/src/components/calendar/themes/year-month.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js'; +import { styles as fluentDark } from './dark/calendar.fluent.css.js'; +import { styles as indigoDark } from './dark/calendar.indigo.css.js'; +import { styles as materialDark } from './dark/calendar.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js'; +import { styles as fluentLight } from './light/calendar.fluent.css.js'; +import { styles as indigoLight } from './light/calendar.indigo.css.js'; +import { styles as materialLight } from './light/calendar.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/bootstrap/year-month-view.bootstrap.css.js'; +import { styles as fluent } from './shared/fluent/year-month-view.fluent.css.js'; +import { styles as indigo } from './shared/indigo/year-month-view.indigo.css.js'; +import { styles as material } from './shared/material/year-month-view.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/calendar/years-view/years-view.ts b/src/components/calendar/years-view/years-view.ts index e0a56b312..5067d0b1d 100644 --- a/src/components/calendar/years-view/years-view.ts +++ b/src/components/calendar/years-view/years-view.ts @@ -14,10 +14,7 @@ import { YEARS_PER_ROW, } from '../common/calendar-base.js'; import { calculateYearsRangeStart, setDateSafe } from '../common/utils.js'; -import { styles as bootstrap } from '../themes/light/bootstrap/year-month-view.bootstrap.css.js'; -import { styles as fluent } from '../themes/light/fluent/year-month-view.fluent.css.js'; -import { styles as indigo } from '../themes/light/indigo/year-month-view.indigo.css.js'; -import { styles as material } from '../themes/light/material/year-month-view.material.css.js'; +import { all } from '../themes/year-month'; import { styles } from '../themes/year-month-view.base.css.js'; /** @@ -31,20 +28,7 @@ import { styles } from '../themes/year-month-view.base.css.js'; */ @blazorIndirectRender @blazorSuppressComponent -@themes({ - light: { - bootstrap, - fluent, - material, - indigo, - }, - dark: { - bootstrap, - fluent, - material, - indigo, - }, -}) +@themes(all) export default class IgcYearsViewComponent extends EventEmitterMixin< IgcCalendarBaseEventMap, Constructor diff --git a/src/components/card/card.actions.ts b/src/components/card/card.actions.ts index fd01c20a6..086325699 100644 --- a/src/components/card/card.actions.ts +++ b/src/components/card/card.actions.ts @@ -1,8 +1,8 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/card.actions.base.css.js'; -import { styles as bootstrap } from './themes/light/card.actions.bootstrap.css.js'; +import { all } from './themes/actions.js'; +import { styles } from './themes/card.actions.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -13,7 +13,7 @@ import { registerComponent } from '../common/definitions/register.js'; * @slot - Renders items at the middle of actions area * @slot end - Renders items at the end of actions area */ -@themes({ light: { bootstrap }, dark: { bootstrap } }) +@themes(all) export default class IgcCardActionsComponent extends LitElement { public static readonly tagName = 'igc-card-actions'; public static override styles = styles; diff --git a/src/components/card/card.content.ts b/src/components/card/card.content.ts index e3c265b1e..41d10c3cd 100644 --- a/src/components/card/card.content.ts +++ b/src/components/card/card.content.ts @@ -1,10 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/card.content.base.css.js'; -import { styles as bootstrap } from './themes/light/card.content.bootstrap.css.js'; -import { styles as fluent } from './themes/light/card.content.fluent.css.js'; -import { styles as indigo } from './themes/light/card.content.indigo.css.js'; -import { styles as material } from './themes/light/card.content.material.css.js'; +import { styles } from './themes/card.content.base.css.js'; +import { all } from './themes/content.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -13,20 +10,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @slot - Renders the card text content */ -@themes({ - light: { - material, - bootstrap, - fluent, - indigo, - }, - dark: { - material, - bootstrap, - fluent, - indigo, - }, -}) +@themes(all) export default class IgcCardContentComponent extends LitElement { public static readonly tagName = 'igc-card-content'; public static override styles = styles; diff --git a/src/components/card/card.header.ts b/src/components/card/card.header.ts index 5a2b781bd..dfe60398d 100644 --- a/src/components/card/card.header.ts +++ b/src/components/card/card.header.ts @@ -1,10 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/card.header.base.css.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 as material } from './themes/light/card.header.material.css.js'; +import { styles } from './themes/card.header.base.css.js'; +import { all } from './themes/header.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -18,20 +15,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @csspart header - The card header container */ -@themes({ - light: { - material, - bootstrap, - fluent, - indigo, - }, - dark: { - material, - bootstrap, - fluent, - indigo, - }, -}) +@themes(all) export default class IgcCardHeaderComponent extends LitElement { public static readonly tagName = 'igc-card-header'; public static override styles = styles; diff --git a/src/components/card/card.media.ts b/src/components/card/card.media.ts index 554b0ffad..d9a962cb7 100644 --- a/src/components/card/card.media.ts +++ b/src/components/card/card.media.ts @@ -1,6 +1,6 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/card.media.base.css.js'; +import { styles } from './themes/card.media.base.css.js'; import { registerComponent } from '../common/definitions/register.js'; /** A container for card's media - could be an image, gif, video diff --git a/src/components/card/card.ts b/src/components/card/card.ts index c4ae90318..225419c07 100644 --- a/src/components/card/card.ts +++ b/src/components/card/card.ts @@ -5,11 +5,8 @@ import IgcCardActionsComponent from './card.actions.js'; import IgcCardContentComponent from './card.content.js'; import IgcCardHeaderComponent from './card.header.js'; import IgcCardMediaComponent from './card.media.js'; -import { styles } from './themes/light/card.base.css.js'; -import { styles as bootstrap } from './themes/light/card.bootstrap.css.js'; -import { styles as fluent } from './themes/light/card.fluent.css.js'; -import { styles as indigo } from './themes/light/card.indigo.css.js'; -import { styles as material } from './themes/light/card.material.css.js'; +import { styles } from './themes/container.base.css.js'; +import { all } from './themes/container.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -18,20 +15,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @slot - Renders card content */ -@themes({ - light: { - material, - bootstrap, - fluent, - indigo, - }, - dark: { - material, - bootstrap, - fluent, - indigo, - }, -}) +@themes(all) export default class IgcCardComponent extends LitElement { public static readonly tagName = 'igc-card'; public static override styles = styles; diff --git a/src/components/card/themes/actions.ts b/src/components/card/themes/actions.ts new file mode 100644 index 000000000..5c2e46b53 --- /dev/null +++ b/src/components/card/themes/actions.ts @@ -0,0 +1,19 @@ +import { css } from 'lit'; + +// Shared Styles +import { styles as bootstrap } from './shared/actions/card.actions.bootstrap.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/card/themes/light/card.actions.base.scss b/src/components/card/themes/card.actions.base.scss similarity index 100% rename from src/components/card/themes/light/card.actions.base.scss rename to src/components/card/themes/card.actions.base.scss diff --git a/src/components/card/themes/light/card.content.base.scss b/src/components/card/themes/card.content.base.scss similarity index 100% rename from src/components/card/themes/light/card.content.base.scss rename to src/components/card/themes/card.content.base.scss diff --git a/src/components/card/themes/light/card.header.base.scss b/src/components/card/themes/card.header.base.scss similarity index 100% rename from src/components/card/themes/light/card.header.base.scss rename to src/components/card/themes/card.header.base.scss diff --git a/src/components/card/themes/light/card.media.base.scss b/src/components/card/themes/card.media.base.scss similarity index 100% rename from src/components/card/themes/light/card.media.base.scss rename to src/components/card/themes/card.media.base.scss diff --git a/src/components/card/themes/light/card.base.scss b/src/components/card/themes/container.base.scss similarity index 100% rename from src/components/card/themes/light/card.base.scss rename to src/components/card/themes/container.base.scss diff --git a/src/components/card/themes/container.ts b/src/components/card/themes/container.ts new file mode 100644 index 000000000..6d79db8be --- /dev/null +++ b/src/components/card/themes/container.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/card.bootstrap.css.js'; +import { styles as fluentDark } from './dark/card.fluent.css.js'; +import { styles as indigoDark } from './dark/card.indigo.css.js'; +import { styles as materialDark } from './dark/card.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/container/card.bootstrap.css.js'; +import { styles as fluentLight } from './light/container/card.fluent.css.js'; +import { styles as indigoLight } from './light/container/card.indigo.css.js'; +import { styles as materialLight } from './light/container/card.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/container/card.bootstrap.css.js'; +import { styles as fluent } from './shared/container/card.fluent.css.js'; +import { styles as indigo } from './shared/container/card.indigo.css.js'; +import { styles as material } from './shared/container/card.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/card/themes/content.ts b/src/components/card/themes/content.ts new file mode 100644 index 000000000..7f9e0d8bc --- /dev/null +++ b/src/components/card/themes/content.ts @@ -0,0 +1,45 @@ +import { css } from 'lit'; + +// Light Overrides +import { styles as bootstrapLight } from './light/content/card.content.bootstrap.css.js'; +import { styles as fluentLight } from './light/content/card.content.fluent.css.js'; +import { styles as indigoLight } from './light/content/card.content.indigo.css.js'; +import { styles as materialLight } from './light/content/card.content.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/content/card.content.bootstrap.css.js'; +import { styles as fluent } from './shared/content/card.content.fluent.css.js'; +import { styles as indigo } from './shared/content/card.content.indigo.css.js'; +import { styles as material } from './shared/content/card.content.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/card/themes/dark/card.bootstrap.scss b/src/components/card/themes/dark/card.bootstrap.scss index 8291508fc..6a3559805 100644 --- a/src/components/card/themes/dark/card.bootstrap.scss +++ b/src/components/card/themes/dark/card.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-card { - @include css-vars-from-theme($theme, 'ig-card'); - } +:host { + @include css-vars-from-theme($theme, 'ig-card'); } diff --git a/src/components/card/themes/dark/card.fluent.scss b/src/components/card/themes/dark/card.fluent.scss index 08621ef15..d04f53dac 100644 --- a/src/components/card/themes/dark/card.fluent.scss +++ b/src/components/card/themes/dark/card.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-card { - @include css-vars-from-theme($theme, 'ig-card'); - } +:host { + @include css-vars-from-theme($theme, 'ig-card'); } diff --git a/src/components/card/themes/dark/card.indigo.scss b/src/components/card/themes/dark/card.indigo.scss index 1c1299be2..bc8367368 100644 --- a/src/components/card/themes/dark/card.indigo.scss +++ b/src/components/card/themes/dark/card.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-card { - @include css-vars-from-theme($theme, 'ig-card'); - } +:host { + @include css-vars-from-theme($theme, 'ig-card'); } diff --git a/src/components/card/themes/dark/card.material.scss b/src/components/card/themes/dark/card.material.scss index 1711ece16..4a9e4203a 100644 --- a/src/components/card/themes/dark/card.material.scss +++ b/src/components/card/themes/dark/card.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-card { - @include css-vars-from-theme($theme, 'ig-card'); - } +:host { + @include css-vars-from-theme($theme, 'ig-card'); } diff --git a/src/components/card/themes/header.ts b/src/components/card/themes/header.ts new file mode 100644 index 000000000..57f11d79b --- /dev/null +++ b/src/components/card/themes/header.ts @@ -0,0 +1,45 @@ +import { css } from 'lit'; + +// Light Overrides +import { styles as bootstrapLight } from './light/header/card.header.bootstrap.css.js'; +import { styles as fluentLight } from './light/header/card.header.fluent.css.js'; +import { styles as indigoLight } from './light/header/card.header.indigo.css.js'; +import { styles as materialLight } from './light/header/card.header.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/header/card.header.bootstrap.css.js'; +import { styles as fluent } from './shared/header/card.header.fluent.css.js'; +import { styles as indigo } from './shared/header/card.header.indigo.css.js'; +import { styles as material } from './shared/header/card.header.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/card/themes/light/_themes.scss b/src/components/card/themes/light/_themes.scss index 2b63e0f65..5cf09adb3 100644 --- a/src/components/card/themes/light/_themes.scss +++ b/src/components/card/themes/light/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/card' as *; diff --git a/src/components/card/themes/light/container/card.bootstrap.scss b/src/components/card/themes/light/container/card.bootstrap.scss new file mode 100644 index 000000000..19500c53d --- /dev/null +++ b/src/components/card/themes/light/container/card.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/container/card.fluent.scss b/src/components/card/themes/light/container/card.fluent.scss new file mode 100644 index 000000000..f51953804 --- /dev/null +++ b/src/components/card/themes/light/container/card.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/container/card.indigo.scss b/src/components/card/themes/light/container/card.indigo.scss new file mode 100644 index 000000000..b0c156b5f --- /dev/null +++ b/src/components/card/themes/light/container/card.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/container/card.material.scss b/src/components/card/themes/light/container/card.material.scss new file mode 100644 index 000000000..7ba54c022 --- /dev/null +++ b/src/components/card/themes/light/container/card.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/content/card.content.bootstrap.scss b/src/components/card/themes/light/content/card.content.bootstrap.scss new file mode 100644 index 000000000..19500c53d --- /dev/null +++ b/src/components/card/themes/light/content/card.content.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/card.content.fluent.scss b/src/components/card/themes/light/content/card.content.fluent.scss similarity index 61% rename from src/components/card/themes/light/card.content.fluent.scss rename to src/components/card/themes/light/content/card.content.fluent.scss index 2465aaffb..f51953804 100644 --- a/src/components/card/themes/light/card.content.fluent.scss +++ b/src/components/card/themes/light/content/card.content.fluent.scss @@ -1,10 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../themes' as *; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-card'); - - color: var-get($theme, 'content-text-color'); } diff --git a/src/components/card/themes/light/card.content.indigo.scss b/src/components/card/themes/light/content/card.content.indigo.scss similarity index 61% rename from src/components/card/themes/light/card.content.indigo.scss rename to src/components/card/themes/light/content/card.content.indigo.scss index a8e53a8ab..b0c156b5f 100644 --- a/src/components/card/themes/light/card.content.indigo.scss +++ b/src/components/card/themes/light/content/card.content.indigo.scss @@ -1,10 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../themes' as *; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-card'); - - color: var-get($theme, 'content-text-color'); } diff --git a/src/components/card/themes/light/card.content.material.scss b/src/components/card/themes/light/content/card.content.material.scss similarity index 61% rename from src/components/card/themes/light/card.content.material.scss rename to src/components/card/themes/light/content/card.content.material.scss index 373c1eb8b..7ba54c022 100644 --- a/src/components/card/themes/light/card.content.material.scss +++ b/src/components/card/themes/light/content/card.content.material.scss @@ -1,10 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../themes' as *; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-card'); - - color: var-get($theme, 'content-text-color'); } diff --git a/src/components/card/themes/light/header/card.header.bootstrap.scss b/src/components/card/themes/light/header/card.header.bootstrap.scss new file mode 100644 index 000000000..19500c53d --- /dev/null +++ b/src/components/card/themes/light/header/card.header.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/header/card.header.fluent.scss b/src/components/card/themes/light/header/card.header.fluent.scss new file mode 100644 index 000000000..f51953804 --- /dev/null +++ b/src/components/card/themes/light/header/card.header.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/header/card.header.indigo.scss b/src/components/card/themes/light/header/card.header.indigo.scss new file mode 100644 index 000000000..b0c156b5f --- /dev/null +++ b/src/components/card/themes/light/header/card.header.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/header/card.header.material.scss b/src/components/card/themes/light/header/card.header.material.scss new file mode 100644 index 000000000..7ba54c022 --- /dev/null +++ b/src/components/card/themes/light/header/card.header.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-card'); +} diff --git a/src/components/card/themes/light/card.actions.bootstrap.scss b/src/components/card/themes/shared/actions/card.actions.bootstrap.scss similarity index 100% rename from src/components/card/themes/light/card.actions.bootstrap.scss rename to src/components/card/themes/shared/actions/card.actions.bootstrap.scss diff --git a/src/components/card/themes/light/card.bootstrap.scss b/src/components/card/themes/shared/container/card.bootstrap.scss similarity index 84% rename from src/components/card/themes/light/card.bootstrap.scss rename to src/components/card/themes/shared/container/card.bootstrap.scss index 63275da8c..127f679cc 100644 --- a/src/components/card/themes/light/card.bootstrap.scss +++ b/src/components/card/themes/shared/container/card.bootstrap.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-card'); - border: rem(1px) solid var-get($theme, 'outline-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); diff --git a/src/components/card/themes/light/card.fluent.scss b/src/components/card/themes/shared/container/card.fluent.scss similarity index 90% rename from src/components/card/themes/light/card.fluent.scss rename to src/components/card/themes/shared/container/card.fluent.scss index b12c83476..8e83db366 100644 --- a/src/components/card/themes/light/card.fluent.scss +++ b/src/components/card/themes/shared/container/card.fluent.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $fluent; :host { - @include css-vars-from-theme($theme, 'ig-card'); - border: rem(1px) solid var-get($theme, 'outline-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); diff --git a/src/components/card/themes/light/card.indigo.scss b/src/components/card/themes/shared/container/card.indigo.scss similarity index 84% rename from src/components/card/themes/light/card.indigo.scss rename to src/components/card/themes/shared/container/card.indigo.scss index 298d4f6f6..ef2a064c8 100644 --- a/src/components/card/themes/light/card.indigo.scss +++ b/src/components/card/themes/shared/container/card.indigo.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; :host { - @include css-vars-from-theme($theme, 'ig-card'); - border: rem(1px) solid var-get($theme, 'outline-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); diff --git a/src/components/card/themes/light/card.material.scss b/src/components/card/themes/shared/container/card.material.scss similarity index 84% rename from src/components/card/themes/light/card.material.scss rename to src/components/card/themes/shared/container/card.material.scss index b4896b7d4..c91932ef9 100644 --- a/src/components/card/themes/light/card.material.scss +++ b/src/components/card/themes/shared/container/card.material.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-card'); - border: rem(1px) solid var-get($theme, 'outline-color'); background: var-get($theme, 'background'); border-radius: var-get($theme, 'border-radius'); diff --git a/src/components/card/themes/light/card.content.bootstrap.scss b/src/components/card/themes/shared/content/card.content.bootstrap.scss similarity index 73% rename from src/components/card/themes/light/card.content.bootstrap.scss rename to src/components/card/themes/shared/content/card.content.bootstrap.scss index b1c2f3c66..c572983f9 100644 --- a/src/components/card/themes/light/card.content.bootstrap.scss +++ b/src/components/card/themes/shared/content/card.content.bootstrap.scss @@ -1,10 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-card'); @include type-style('body-1'); color: var-get($theme, 'content-text-color'); diff --git a/src/components/card/themes/shared/content/card.content.fluent.scss b/src/components/card/themes/shared/content/card.content.fluent.scss new file mode 100644 index 000000000..caa15bfbe --- /dev/null +++ b/src/components/card/themes/shared/content/card.content.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + color: var-get($theme, 'content-text-color'); +} diff --git a/src/components/card/themes/shared/content/card.content.indigo.scss b/src/components/card/themes/shared/content/card.content.indigo.scss new file mode 100644 index 000000000..bdc415bd2 --- /dev/null +++ b/src/components/card/themes/shared/content/card.content.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + color: var-get($theme, 'content-text-color'); +} diff --git a/src/components/card/themes/shared/content/card.content.material.scss b/src/components/card/themes/shared/content/card.content.material.scss new file mode 100644 index 000000000..bd5876b55 --- /dev/null +++ b/src/components/card/themes/shared/content/card.content.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + color: var-get($theme, 'content-text-color'); +} diff --git a/src/components/card/themes/light/card.header.bootstrap.scss b/src/components/card/themes/shared/header/card.header.bootstrap.scss similarity index 79% rename from src/components/card/themes/light/card.header.bootstrap.scss rename to src/components/card/themes/shared/header/card.header.bootstrap.scss index 51f4a2bfb..f0cdbba59 100644 --- a/src/components/card/themes/light/card.header.bootstrap.scss +++ b/src/components/card/themes/shared/header/card.header.bootstrap.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-card'); - color: var-get($theme, 'header-text-color'); } diff --git a/src/components/card/themes/light/card.header.fluent.scss b/src/components/card/themes/shared/header/card.header.fluent.scss similarity index 80% rename from src/components/card/themes/light/card.header.fluent.scss rename to src/components/card/themes/shared/header/card.header.fluent.scss index 4dcee055e..c9b01c831 100644 --- a/src/components/card/themes/light/card.header.fluent.scss +++ b/src/components/card/themes/shared/header/card.header.fluent.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $fluent; :host { - @include css-vars-from-theme($theme, 'ig-card'); - color: var-get($theme, 'header-text-color'); } diff --git a/src/components/card/themes/light/card.header.indigo.scss b/src/components/card/themes/shared/header/card.header.indigo.scss similarity index 72% rename from src/components/card/themes/light/card.header.indigo.scss rename to src/components/card/themes/shared/header/card.header.indigo.scss index 1c0501673..83e1e8898 100644 --- a/src/components/card/themes/light/card.header.indigo.scss +++ b/src/components/card/themes/shared/header/card.header.indigo.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; :host { - @include css-vars-from-theme($theme, 'ig-card'); - color: var-get($theme, 'header-text-color'); } diff --git a/src/components/card/themes/light/card.header.material.scss b/src/components/card/themes/shared/header/card.header.material.scss similarity index 72% rename from src/components/card/themes/light/card.header.material.scss rename to src/components/card/themes/shared/header/card.header.material.scss index 2c297f0df..ad3b8f2e7 100644 --- a/src/components/card/themes/light/card.header.material.scss +++ b/src/components/card/themes/shared/header/card.header.material.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-card'); - color: var-get($theme, 'header-text-color'); } diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index dd080b87e..4f113f0e4 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -4,11 +4,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { IgcCheckboxBaseComponent } from './checkbox-base.js'; -import { styles } from './themes/light/checkbox.base.css.js'; -import { styles as bootstrap } from './themes/light/checkbox.bootstrap.css.js'; -import { styles as fluent } from './themes/light/checkbox.fluent.css.js'; -import { styles as indigo } from './themes/light/checkbox.indigo.css.js'; -import { styles as material } from './themes/light/checkbox.material.css.js'; +import { all } from './themes/checkbox-themes.js'; +import { styles } from './themes/checkbox.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { createCounter, partNameMap } from '../common/util.js'; @@ -29,10 +26,7 @@ import { createCounter, partNameMap } from '../common/util.js'; * @csspart label - The checkbox label. * @csspart indicator - The checkbox icon. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcCheckboxComponent extends IgcCheckboxBaseComponent { public static readonly tagName = 'igc-checkbox'; protected static styles = styles; diff --git a/src/components/checkbox/switch.ts b/src/components/checkbox/switch.ts index 7cd10112d..38f2bd023 100644 --- a/src/components/checkbox/switch.ts +++ b/src/components/checkbox/switch.ts @@ -3,11 +3,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { IgcCheckboxBaseComponent } from './checkbox-base.js'; -import { styles } from './themes/light/switch.base.css.js'; -import { styles as bootstrap } from './themes/light/switch.bootstrap.css.js'; -import { styles as fluent } from './themes/light/switch.fluent.css.js'; -import { styles as indigo } from './themes/light/switch.indigo.css.js'; -import { styles as material } from './themes/light/switch.material.css.js'; +import { all } from './themes/switch-themes.js'; +import { styles } from './themes/switch.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { createCounter, partNameMap } from '../common/util.js'; @@ -28,10 +25,7 @@ import { createCounter, partNameMap } from '../common/util.js'; * @csspart thumb - The position indicator of the switch. * @csspart label - The switch label. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcSwitchComponent extends IgcCheckboxBaseComponent { public static readonly tagName = 'igc-switch'; public static styles = styles; diff --git a/src/components/checkbox/themes/checkbox-themes.ts b/src/components/checkbox/themes/checkbox-themes.ts new file mode 100644 index 000000000..672405300 --- /dev/null +++ b/src/components/checkbox/themes/checkbox-themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/checkbox/checkbox.bootstrap.css.js'; +import { styles as fluentDark } from './dark/checkbox/checkbox.fluent.css.js'; +import { styles as indigoDark } from './dark/checkbox/checkbox.indigo.css.js'; +import { styles as materialDark } from './dark/checkbox/checkbox.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/checkbox/checkbox.bootstrap.css.js'; +import { styles as fluentLight } from './light/checkbox/checkbox.fluent.css.js'; +import { styles as indigoLight } from './light/checkbox/checkbox.indigo.css.js'; +import { styles as materialLight } from './light/checkbox/checkbox.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/checkbox/checkbox.bootstrap.css.js'; +import { styles as fluent } from './shared/checkbox/checkbox.fluent.css.js'; +import { styles as indigo } from './shared/checkbox/checkbox.indigo.css.js'; +import { styles as material } from './shared/checkbox/checkbox.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/checkbox/themes/light/checkbox.base.scss b/src/components/checkbox/themes/checkbox.base.scss similarity index 100% rename from src/components/checkbox/themes/light/checkbox.base.scss rename to src/components/checkbox/themes/checkbox.base.scss diff --git a/src/components/checkbox/themes/dark/checkbox.bootstrap.scss b/src/components/checkbox/themes/dark/checkbox.bootstrap.scss deleted file mode 100644 index eefae39c2..000000000 --- a/src/components/checkbox/themes/dark/checkbox.bootstrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'checkbox-themes' as *; - -@mixin theme() { - $theme: $bootstrap; - - igc-checkbox { - @include css-vars-from-theme($theme, 'ig-checkbox'); - } -} diff --git a/src/components/checkbox/themes/dark/checkbox.fluent.scss b/src/components/checkbox/themes/dark/checkbox.fluent.scss deleted file mode 100644 index f920c972b..000000000 --- a/src/components/checkbox/themes/dark/checkbox.fluent.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'checkbox-themes' as *; - -@mixin theme() { - $theme: $fluent; - - igc-checkbox { - @include css-vars-from-theme($theme, 'ig-checkbox'); - } -} diff --git a/src/components/checkbox/themes/dark/checkbox.indigo.scss b/src/components/checkbox/themes/dark/checkbox.indigo.scss deleted file mode 100644 index 111741d08..000000000 --- a/src/components/checkbox/themes/dark/checkbox.indigo.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'checkbox-themes' as *; - -@mixin theme() { - $theme: $indigo; - - igc-checkbox { - @include css-vars-from-theme($theme, 'ig-checkbox'); - } -} diff --git a/src/components/checkbox/themes/dark/checkbox.material.scss b/src/components/checkbox/themes/dark/checkbox.material.scss deleted file mode 100644 index 2dbebe52e..000000000 --- a/src/components/checkbox/themes/dark/checkbox.material.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'checkbox-themes' as *; - -@mixin theme() { - $theme: $material; - - igc-checkbox { - @include css-vars-from-theme($theme, 'ig-checkbox'); - } -} diff --git a/src/components/checkbox/themes/dark/_checkbox-themes.scss b/src/components/checkbox/themes/dark/checkbox/_themes.scss similarity index 94% rename from src/components/checkbox/themes/dark/_checkbox-themes.scss rename to src/components/checkbox/themes/dark/checkbox/_themes.scss index dc7b916e0..feead0e34 100644 --- a/src/components/checkbox/themes/dark/_checkbox-themes.scss +++ b/src/components/checkbox/themes/dark/checkbox/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/checkbox' as *; diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss new file mode 100644 index 000000000..1ffd00bbd --- /dev/null +++ b/src/components/checkbox/themes/dark/checkbox/checkbox.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss new file mode 100644 index 000000000..a060e237c --- /dev/null +++ b/src/components/checkbox/themes/dark/checkbox/checkbox.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss new file mode 100644 index 000000000..cfb633ac8 --- /dev/null +++ b/src/components/checkbox/themes/dark/checkbox/checkbox.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss new file mode 100644 index 000000000..219d7dde1 --- /dev/null +++ b/src/components/checkbox/themes/dark/checkbox/checkbox.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/dark/switch.bootstrap.scss b/src/components/checkbox/themes/dark/switch.bootstrap.scss deleted file mode 100644 index 2ce66f133..000000000 --- a/src/components/checkbox/themes/dark/switch.bootstrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'switch-themes' as *; - -@mixin theme() { - $theme: $bootstrap; - - igc-switch { - @include css-vars-from-theme($theme, 'ig-switch'); - } -} diff --git a/src/components/checkbox/themes/dark/switch.fluent.scss b/src/components/checkbox/themes/dark/switch.fluent.scss deleted file mode 100644 index 7370edd4e..000000000 --- a/src/components/checkbox/themes/dark/switch.fluent.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'switch-themes' as *; - -@mixin theme() { - $theme: $fluent; - - igc-switch { - @include css-vars-from-theme($theme, 'ig-switch'); - } -} diff --git a/src/components/checkbox/themes/dark/switch.indigo.scss b/src/components/checkbox/themes/dark/switch.indigo.scss deleted file mode 100644 index 79892dc69..000000000 --- a/src/components/checkbox/themes/dark/switch.indigo.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'switch-themes' as *; - -@mixin theme() { - $theme: $indigo; - - igc-switch { - @include css-vars-from-theme($theme, 'ig-switch'); - } -} diff --git a/src/components/checkbox/themes/dark/switch.material.scss b/src/components/checkbox/themes/dark/switch.material.scss deleted file mode 100644 index c65b8102d..000000000 --- a/src/components/checkbox/themes/dark/switch.material.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'switch-themes' as *; - -@mixin theme() { - $theme: $material; - - igc-switch { - @include css-vars-from-theme($theme, 'ig-switch'); - - &:hover { - &::part(thumb) { - &::after { - opacity: .12; - } - } - - &::part(thumb checked) { - &::after { - opacity: .12; - } - } - } - - &:focus-within { - &::part(thumb) { - &::after { - opacity: .24; - } - } - - &::part(thumb checked) { - &::after { - opacity: .24; - } - } - } - } -} diff --git a/src/components/checkbox/themes/dark/_switch-themes.scss b/src/components/checkbox/themes/dark/switch/_themes.scss similarity index 94% rename from src/components/checkbox/themes/dark/_switch-themes.scss rename to src/components/checkbox/themes/dark/switch/_themes.scss index 1ba3d4e62..caaa684fc 100644 --- a/src/components/checkbox/themes/dark/_switch-themes.scss +++ b/src/components/checkbox/themes/dark/switch/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/switch' as *; diff --git a/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss new file mode 100644 index 000000000..4819ffe91 --- /dev/null +++ b/src/components/checkbox/themes/dark/switch/switch.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/dark/switch/switch.fluent.scss b/src/components/checkbox/themes/dark/switch/switch.fluent.scss new file mode 100644 index 000000000..a8ce65da0 --- /dev/null +++ b/src/components/checkbox/themes/dark/switch/switch.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/dark/switch/switch.indigo.scss b/src/components/checkbox/themes/dark/switch/switch.indigo.scss new file mode 100644 index 000000000..ab80c0e53 --- /dev/null +++ b/src/components/checkbox/themes/dark/switch/switch.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/dark/switch/switch.material.scss b/src/components/checkbox/themes/dark/switch/switch.material.scss new file mode 100644 index 000000000..8a740fdd6 --- /dev/null +++ b/src/components/checkbox/themes/dark/switch/switch.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/light/_checkbox-themes.scss b/src/components/checkbox/themes/light/checkbox/_themes.scss similarity index 94% rename from src/components/checkbox/themes/light/_checkbox-themes.scss rename to src/components/checkbox/themes/light/checkbox/_themes.scss index 1e8c0615a..1c0f50f14 100644 --- a/src/components/checkbox/themes/light/_checkbox-themes.scss +++ b/src/components/checkbox/themes/light/checkbox/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/checkbox' as *; diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss new file mode 100644 index 000000000..1ffd00bbd --- /dev/null +++ b/src/components/checkbox/themes/light/checkbox/checkbox.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss new file mode 100644 index 000000000..a060e237c --- /dev/null +++ b/src/components/checkbox/themes/light/checkbox/checkbox.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss new file mode 100644 index 000000000..cfb633ac8 --- /dev/null +++ b/src/components/checkbox/themes/light/checkbox/checkbox.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/light/checkbox/checkbox.material.scss b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss new file mode 100644 index 000000000..219d7dde1 --- /dev/null +++ b/src/components/checkbox/themes/light/checkbox/checkbox.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-checkbox'); +} diff --git a/src/components/checkbox/themes/light/_switch-themes.scss b/src/components/checkbox/themes/light/switch/_themes.scss similarity index 94% rename from src/components/checkbox/themes/light/_switch-themes.scss rename to src/components/checkbox/themes/light/switch/_themes.scss index e06035c2e..fcc692efb 100644 --- a/src/components/checkbox/themes/light/_switch-themes.scss +++ b/src/components/checkbox/themes/light/switch/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/switch' as *; diff --git a/src/components/checkbox/themes/light/switch/switch.bootstrap.scss b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss new file mode 100644 index 000000000..4819ffe91 --- /dev/null +++ b/src/components/checkbox/themes/light/switch/switch.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/light/switch/switch.fluent.scss b/src/components/checkbox/themes/light/switch/switch.fluent.scss new file mode 100644 index 000000000..a8ce65da0 --- /dev/null +++ b/src/components/checkbox/themes/light/switch/switch.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/light/switch/switch.indigo.scss b/src/components/checkbox/themes/light/switch/switch.indigo.scss new file mode 100644 index 000000000..ab80c0e53 --- /dev/null +++ b/src/components/checkbox/themes/light/switch/switch.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/light/switch/switch.material.scss b/src/components/checkbox/themes/light/switch/switch.material.scss new file mode 100644 index 000000000..8a740fdd6 --- /dev/null +++ b/src/components/checkbox/themes/light/switch/switch.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-switch'); +} diff --git a/src/components/checkbox/themes/light/checkbox.bootstrap.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss similarity index 96% rename from src/components/checkbox/themes/light/checkbox.bootstrap.scss rename to src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss index 0793e73d1..e864b40f7 100644 --- a/src/components/checkbox/themes/light/checkbox.bootstrap.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss @@ -1,14 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'checkbox-themes' as *; +@use '../../light/checkbox/themes' as *; $theme: $bootstrap; -:host { - @include css-vars-from-theme($theme, 'ig-checkbox'); -} - [part~='control'] { --size: #{rem(16px)}; diff --git a/src/components/checkbox/themes/light/checkbox.fluent.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss similarity index 97% rename from src/components/checkbox/themes/light/checkbox.fluent.scss rename to src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss index fea5b00a8..d025bd011 100644 --- a/src/components/checkbox/themes/light/checkbox.fluent.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss @@ -1,7 +1,5 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'checkbox-themes' as *; +@use '../../light/checkbox/themes' as *; $theme: $fluent; $border-color: var-get($theme, 'empty-color'); @@ -11,10 +9,6 @@ $invalid-color: var-get($theme, 'error-color'); $invalid-hover-color: var-get($theme, 'error-color-hover'); $disabled-color: var-get($theme, 'disabled-color'); -:host { - @include css-vars-from-theme($theme, 'ig-checkbox'); -} - [part~='control'] { width: var(--size, rem(20px)); height: var(--size, rem(20px)); diff --git a/src/components/checkbox/themes/light/checkbox.indigo.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss similarity index 96% rename from src/components/checkbox/themes/light/checkbox.indigo.scss rename to src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss index ffd4ec1c5..d9613475a 100644 --- a/src/components/checkbox/themes/light/checkbox.indigo.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.indigo.scss @@ -1,7 +1,5 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'checkbox-themes' as *; +@use '../../light/checkbox/themes' as *; $theme: $indigo; $fill-color: var-get($theme, 'fill-color'); @@ -14,8 +12,6 @@ $error-color: var-get($theme, 'error-color'); $error-color-hover: var-get($theme, 'error-color-hover'); :host { - @include css-vars-from-theme($theme, 'ig-checkbox'); - font-weight: 600; } diff --git a/src/components/checkbox/themes/light/checkbox.material.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss similarity index 96% rename from src/components/checkbox/themes/light/checkbox.material.scss rename to src/components/checkbox/themes/shared/checkbox/checkbox.material.scss index b00b75dc2..887751084 100644 --- a/src/components/checkbox/themes/light/checkbox.material.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.material.scss @@ -1,14 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'checkbox-themes' as *; +@use '../../light/checkbox/themes' as *; $theme: $material; -:host { - @include css-vars-from-theme($theme, 'ig-checkbox'); -} - [part~='label'] { @include type-style('subtitle-1'); diff --git a/src/components/checkbox/themes/light/switch.bootstrap.scss b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss similarity index 95% rename from src/components/checkbox/themes/light/switch.bootstrap.scss rename to src/components/checkbox/themes/shared/switch/switch.bootstrap.scss index e7f05bfa1..65cbb7542 100644 --- a/src/components/checkbox/themes/light/switch.bootstrap.scss +++ b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss @@ -1,7 +1,5 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'switch-themes' as *; +@use '../../light/switch/themes' as *; $theme: $bootstrap; @@ -11,8 +9,6 @@ $theme: $bootstrap; --border-size: #{rem(1px)}; --thumb-offset: #{rem(2px)}; --label-gap: #{rem(8px)}; - - @include css-vars-from-theme($theme, 'ig-switch'); } [part~='focused'] { diff --git a/src/components/checkbox/themes/light/switch.fluent.scss b/src/components/checkbox/themes/shared/switch/switch.fluent.scss similarity index 96% rename from src/components/checkbox/themes/light/switch.fluent.scss rename to src/components/checkbox/themes/shared/switch/switch.fluent.scss index 7fbd078ab..ec52bfb46 100644 --- a/src/components/checkbox/themes/light/switch.fluent.scss +++ b/src/components/checkbox/themes/shared/switch/switch.fluent.scss @@ -1,7 +1,5 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'switch-themes' as *; +@use '../../light/switch/themes' as *; $theme: $fluent; @@ -11,8 +9,6 @@ $theme: $fluent; --border-size: #{rem(2px)}; --thumb-offset: calc(var(--thumb-size) / 2 - #{rem(2px)}); --label-gap: #{rem(8px)}; - - @include css-vars-from-theme($theme, 'ig-switch'); } [part~='control'] { diff --git a/src/components/checkbox/themes/light/switch.indigo.scss b/src/components/checkbox/themes/shared/switch/switch.indigo.scss similarity index 95% rename from src/components/checkbox/themes/light/switch.indigo.scss rename to src/components/checkbox/themes/shared/switch/switch.indigo.scss index 5f11da474..97be76357 100644 --- a/src/components/checkbox/themes/light/switch.indigo.scss +++ b/src/components/checkbox/themes/shared/switch/switch.indigo.scss @@ -1,7 +1,5 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'switch-themes' as *; +@use '../../light/switch/themes' as *; $theme: $indigo; $checked-color: var-get($theme, 'track-on-color') !default; @@ -14,8 +12,6 @@ $border-width: rem(1px); --thumb-offset: #{rem(2px)}; --label-gap: #{rem(8px)}; - @include css-vars-from-theme($theme, 'ig-switch'); - font-weight: 600; } diff --git a/src/components/checkbox/themes/light/switch.material.scss b/src/components/checkbox/themes/shared/switch/switch.material.scss similarity index 97% rename from src/components/checkbox/themes/light/switch.material.scss rename to src/components/checkbox/themes/shared/switch/switch.material.scss index 696f2e41c..73ba2e757 100644 --- a/src/components/checkbox/themes/light/switch.material.scss +++ b/src/components/checkbox/themes/shared/switch/switch.material.scss @@ -1,8 +1,6 @@ @use 'sass:math'; -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'switch-themes' as *; +@use '../../light/switch/themes' as *; $theme: $material; $ripple-size: rem(40px); @@ -13,8 +11,6 @@ $ripple-radius: calc(#{$ripple-size} / 2); --thumb-size: #{rem(20px)}; --thumb-offset: #{rem(-1px)}; --label-gap: #{rem(8px)}; - - @include css-vars-from-theme($theme, 'ig-switch'); } [part~='base'] { diff --git a/src/components/checkbox/themes/switch-themes.ts b/src/components/checkbox/themes/switch-themes.ts new file mode 100644 index 000000000..3e1b81b1f --- /dev/null +++ b/src/components/checkbox/themes/switch-themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/switch/switch.bootstrap.css.js'; +import { styles as fluentDark } from './dark/switch/switch.fluent.css.js'; +import { styles as indigoDark } from './dark/switch/switch.indigo.css.js'; +import { styles as materialDark } from './dark/switch/switch.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/switch/switch.bootstrap.css.js'; +import { styles as fluentLight } from './light/switch/switch.fluent.css.js'; +import { styles as indigoLight } from './light/switch/switch.indigo.css.js'; +import { styles as materialLight } from './light/switch/switch.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/switch/switch.bootstrap.css.js'; +import { styles as fluent } from './shared/switch/switch.fluent.css.js'; +import { styles as indigo } from './shared/switch/switch.indigo.css.js'; +import { styles as material } from './shared/switch/switch.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/checkbox/themes/light/switch.base.scss b/src/components/checkbox/themes/switch.base.scss similarity index 98% rename from src/components/checkbox/themes/light/switch.base.scss rename to src/components/checkbox/themes/switch.base.scss index 5ffba185f..218b17cb5 100644 --- a/src/components/checkbox/themes/light/switch.base.scss +++ b/src/components/checkbox/themes/switch.base.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/common/component'; @use 'styles/utilities' as *; diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts index 1f8fe4ac9..f09917b2e 100644 --- a/src/components/chip/chip.ts +++ b/src/components/chip/chip.ts @@ -1,11 +1,8 @@ import { LitElement, html, nothing } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/chip.base.css.js'; -import { styles as bootstrap } from './themes/light/chip.bootstrap.css.js'; -import { styles as fluent } from './themes/light/chip.fluent.css.js'; -import { styles as indigo } from './themes/light/chip.indigo.css.js'; -import { styles as material } from './themes/light/chip.material.css.js'; +import { styles } from './themes/chip.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -34,10 +31,7 @@ export interface IgcChipEventMap { * @csspart prefix - The prefix container of the chip. * @csspart suffix - The suffix container of the chip. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcChipComponent extends SizableMixin( EventEmitterMixin>(LitElement) ) { diff --git a/src/components/chip/themes/light/chip.base.scss b/src/components/chip/themes/chip.base.scss similarity index 100% rename from src/components/chip/themes/light/chip.base.scss rename to src/components/chip/themes/chip.base.scss diff --git a/src/components/chip/themes/dark/chip.bootstrap.scss b/src/components/chip/themes/dark/chip.bootstrap.scss index 62bf6ffe6..3ab8fb7c6 100644 --- a/src/components/chip/themes/dark/chip.bootstrap.scss +++ b/src/components/chip/themes/dark/chip.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-chip { - @include css-vars-from-theme($theme, 'ig-chip'); - } +:host { + @include css-vars-from-theme($theme, 'ig-chip'); } diff --git a/src/components/chip/themes/dark/chip.fluent.scss b/src/components/chip/themes/dark/chip.fluent.scss index 7eaee3752..ed707993c 100644 --- a/src/components/chip/themes/dark/chip.fluent.scss +++ b/src/components/chip/themes/dark/chip.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-chip { - @include css-vars-from-theme($theme, 'ig-chip'); - } +:host { + @include css-vars-from-theme($theme, 'ig-chip'); } diff --git a/src/components/chip/themes/dark/chip.indigo.scss b/src/components/chip/themes/dark/chip.indigo.scss index 6e2cecb2c..7ad64ee3f 100644 --- a/src/components/chip/themes/dark/chip.indigo.scss +++ b/src/components/chip/themes/dark/chip.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-chip { - @include css-vars-from-theme($theme, 'ig-chip'); - } +:host { + @include css-vars-from-theme($theme, 'ig-chip'); } diff --git a/src/components/chip/themes/dark/chip.material.scss b/src/components/chip/themes/dark/chip.material.scss index 35a92e9d0..126e187b9 100644 --- a/src/components/chip/themes/dark/chip.material.scss +++ b/src/components/chip/themes/dark/chip.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-chip { - @include css-vars-from-theme($theme, 'ig-chip'); - } +:host { + @include css-vars-from-theme($theme, 'ig-chip'); } diff --git a/src/components/chip/themes/light/chip.bootstrap.scss b/src/components/chip/themes/light/chip.bootstrap.scss index 8e6f6d9df..3ab8fb7c6 100644 --- a/src/components/chip/themes/light/chip.bootstrap.scss +++ b/src/components/chip/themes/light/chip.bootstrap.scss @@ -6,81 +6,3 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-chip'); } - -:host button { - border-radius: var-get($theme, 'border-radius'); - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - height: var-get($theme, 'size'); - - &:hover { - background: var-get($theme, 'hover-background'); - color: var-get($theme, 'hover-text-color'); - } - - &:focus { - outline: rem(2px) solid var-get($theme, 'focus-outline-color'); - background: var-get($theme, 'focus-background'); - color: var-get($theme, 'focus-text-color'); - } - - &[disabled] { - background: var-get($theme, 'disabled-background'); - color: var-get($theme, 'disabled-text-color'); - } -} - -:host([variant='primary']) button, -:host([variant='primary']) button:focus, -:host([variant='primary']) button:hover, -:host([selected][variant='primary']) button:not([disabled]) { - color: contrast-color(primary, 700); -} - -:host([variant='primary']) button:focus { - outline: rem(2px) solid color(primary, 200); -} - -:host([variant='info']) button, -:host([variant='info']) button:focus, -:host([variant='info']) button:hover, -:host([selected][variant='info']) button:not([disabled]) { - color: contrast-color(info, 700); -} - -:host([variant='info']) button:focus { - outline: rem(2px) solid color(info, 200); -} - -:host([variant='success']) button, -:host([variant='success']) button:focus, -:host([variant='success']) button:hover, -:host([selected][variant='success']) button:not([disabled]) { - color: contrast-color(success, 700); -} - -:host([variant='success']) button:focus { - outline: rem(2px) solid color(success, 200); -} - -:host([variant='warning']) button, -:host([variant='warning']) button:focus, -:host([variant='warning']) button:hover, -:host([selected][variant='warning']) button:not([disabled]) { - color: contrast-color(warn, 700); -} - -:host([variant='warning']) button:focus { - outline: rem(2px) solid color(warn, 200); -} - -:host([variant='danger']) button, -:host([variant='danger']) button:focus, -:host([variant='danger']) button:hover, -:host([selected][variant='danger']) button:not([disabled]) { - color: contrast-color(error, 700); -} - -:host([variant='danger']) button:focus { - outline: rem(2px) solid color(error, 200); -} diff --git a/src/components/chip/themes/light/chip.fluent.scss b/src/components/chip/themes/light/chip.fluent.scss index 2ca3c411e..ed707993c 100644 --- a/src/components/chip/themes/light/chip.fluent.scss +++ b/src/components/chip/themes/light/chip.fluent.scss @@ -6,41 +6,3 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-chip'); } - -:host button { - @include type-style('subtitle-2'); - - border-radius: var-get($theme, 'border-radius'); - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - outline: none; - height: var-get($theme, 'size'); - - &:hover { - background: var-get($theme, 'hover-background'); - color: var-get($theme, 'hover-text-color'); - } - - &:focus { - background: var-get($theme, 'focus-background'); - color: var-get($theme, 'focus-text-color'); - } - - &[disabled] { - background: var-get($theme, 'disabled-background'); - color: var-get($theme, 'disabled-text-color'); - } -} - -:host([selected]) button:not([disabled]) { - background: var-get($theme, 'selected-background'); - color: var-get($theme, 'selected-text-color'); - - &:hover { - background: var-get($theme, 'hover-selected-background'); - } - - &:focus { - background: var-get($theme, 'focus-selected-background'); - } -} diff --git a/src/components/chip/themes/light/chip.indigo.scss b/src/components/chip/themes/light/chip.indigo.scss index e653b8211..7ad64ee3f 100644 --- a/src/components/chip/themes/light/chip.indigo.scss +++ b/src/components/chip/themes/light/chip.indigo.scss @@ -6,147 +6,3 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-chip'); } - -:host button { - border-radius: var-get($theme, 'border-radius'); - border: rem(1px) solid var-get($theme, 'border-color'); - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - height: var-get($theme, 'size'); - - &:hover { - background: var-get($theme, 'hover-background'); - color: var-get($theme, 'hover-text-color'); - } - - &:focus { - background: var-get($theme, 'focus-background'); - color: var-get($theme, 'focus-text-color'); - outline: rem(3px) solid var-get($theme, 'focus-outline-color'); - } - - &[disabled] { - border-color: var-get($theme, 'disabled-border-color'); - background: var-get($theme, 'disabled-background'); - color: var-get($theme, 'disabled-text-color'); - } -} - -:host([selected]) button:not([disabled]) { - border-color: transparent; - background: var-get($theme, 'selected-background'); - color: var-get($theme, 'selected-text-color'); - - &:hover { - background: var-get($theme, 'hover-selected-background'); - } - - &:focus { - outline: rem(3px) solid var-get($theme, 'focus-selected-outline-color'); - } -} - -:host([variant='primary']) button, -:host([selected][variant='primary']) button:not([disabled]) { - border-color: transparent; - - &:hover { - background: color(primary, 400); - color: contrast-color(primary, 400); - } - - &:focus { - background: color(primary, 500); - color: contrast-color(primary, 500); - outline: rem(3px) solid var-get($theme, 'focus-selected-outline-color'); - } -} - -:host([variant='primary']) button[disabled] { - background: color(primary, 200); - color: contrast-color(primary, 400); -} - -:host([variant='info']) button, -:host([selected][variant='info']) button:not([disabled]) { - border-color: transparent; - - &:hover { - background: color(info, 400); - color: contrast-color(info, 400); - } - - &:focus { - background: color(info, 500); - color: contrast-color(info, 500); - outline: rem(3px) solid color(info, 200); - } -} - -:host([variant='info']) button[disabled] { - background: color(info, 200); - color: contrast-color(info, 400); -} - -:host([variant='success']) button, -:host([selected][variant='success']) button:not([disabled]) { - border-color: transparent; - - &:hover { - background: color(success, 400); - color: contrast-color(success, 400); - } - - &:focus { - background: color(success, 500); - color: contrast-color(success, 500); - outline: rem(3px) solid color(success, 200); - } -} - -:host([variant='success']) button[disabled] { - background: color(success, 200); - color: contrast-color(success, 800); -} - -:host([variant='warning']) button, -:host([selected][variant='warning']) button:not([disabled]) { - border-color: transparent; - - &:hover { - background: color(warn, 400); - color: contrast-color(warn, 400); - } - - &:focus { - background: color(warn, 500); - color: contrast-color(warn, 500); - outline: rem(3px) solid color(warn, 200); - } -} - -:host([variant='warning']) button[disabled] { - background: color(warn, 200); - color: contrast-color(warn, 900); -} - -:host([variant='danger']) button, -:host([selected][variant='danger']) button:not([disabled]) { - border-color: transparent; - - &:hover { - background: color(error, 400); - color: contrast-color(error, 400); - } - - &:focus { - background: color(error, 500); - color: contrast-color(error, 500); - outline: rem(3px) solid color(error, 200); - } -} - -:host([variant='danger']) button[disabled] { - background: color(error, 200); - color: contrast-color(error, 400); -} diff --git a/src/components/chip/themes/light/chip.material.scss b/src/components/chip/themes/light/chip.material.scss index 347597d7e..126e187b9 100644 --- a/src/components/chip/themes/light/chip.material.scss +++ b/src/components/chip/themes/light/chip.material.scss @@ -6,26 +6,3 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-chip'); } - -:host button { - border-radius: var-get($theme, 'border-radius'); - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - outline: none; - height: var-get($theme, 'size'); - - &:hover { - background: var-get($theme, 'hover-background'); - color: var-get($theme, 'hover-text-color'); - } - - &:focus { - background: var-get($theme, 'focus-background'); - color: var-get($theme, 'focus-text-color'); - } - - &[disabled] { - background: var-get($theme, 'disabled-background'); - color: var-get($theme, 'disabled-text-color'); - } -} diff --git a/src/components/chip/themes/shared/chip.bootstrap.scss b/src/components/chip/themes/shared/chip.bootstrap.scss new file mode 100644 index 000000000..a734b33ab --- /dev/null +++ b/src/components/chip/themes/shared/chip.bootstrap.scss @@ -0,0 +1,82 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host button { + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + height: var-get($theme, 'size'); + + &:hover { + background: var-get($theme, 'hover-background'); + color: var-get($theme, 'hover-text-color'); + } + + &:focus { + outline: rem(2px) solid var-get($theme, 'focus-outline-color'); + background: var-get($theme, 'focus-background'); + color: var-get($theme, 'focus-text-color'); + } + + &[disabled] { + background: var-get($theme, 'disabled-background'); + color: var-get($theme, 'disabled-text-color'); + } +} + +:host([variant='primary']) button, +:host([variant='primary']) button:focus, +:host([variant='primary']) button:hover, +:host([selected][variant='primary']) button:not([disabled]) { + color: contrast-color(primary, 700); +} + +:host([variant='primary']) button:focus { + outline: rem(2px) solid color(primary, 200); +} + +:host([variant='info']) button, +:host([variant='info']) button:focus, +:host([variant='info']) button:hover, +:host([selected][variant='info']) button:not([disabled]) { + color: contrast-color(info, 700); +} + +:host([variant='info']) button:focus { + outline: rem(2px) solid color(info, 200); +} + +:host([variant='success']) button, +:host([variant='success']) button:focus, +:host([variant='success']) button:hover, +:host([selected][variant='success']) button:not([disabled]) { + color: contrast-color(success, 700); +} + +:host([variant='success']) button:focus { + outline: rem(2px) solid color(success, 200); +} + +:host([variant='warning']) button, +:host([variant='warning']) button:focus, +:host([variant='warning']) button:hover, +:host([selected][variant='warning']) button:not([disabled]) { + color: contrast-color(warn, 700); +} + +:host([variant='warning']) button:focus { + outline: rem(2px) solid color(warn, 200); +} + +:host([variant='danger']) button, +:host([variant='danger']) button:focus, +:host([variant='danger']) button:hover, +:host([selected][variant='danger']) button:not([disabled]) { + color: contrast-color(error, 700); +} + +:host([variant='danger']) button:focus { + outline: rem(2px) solid color(error, 200); +} diff --git a/src/components/chip/themes/shared/chip.fluent.scss b/src/components/chip/themes/shared/chip.fluent.scss new file mode 100644 index 000000000..d28b23b9e --- /dev/null +++ b/src/components/chip/themes/shared/chip.fluent.scss @@ -0,0 +1,42 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host button { + @include type-style('subtitle-2'); + + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + outline: none; + height: var-get($theme, 'size'); + + &:hover { + background: var-get($theme, 'hover-background'); + color: var-get($theme, 'hover-text-color'); + } + + &:focus { + background: var-get($theme, 'focus-background'); + color: var-get($theme, 'focus-text-color'); + } + + &[disabled] { + background: var-get($theme, 'disabled-background'); + color: var-get($theme, 'disabled-text-color'); + } +} + +:host([selected]) button:not([disabled]) { + background: var-get($theme, 'selected-background'); + color: var-get($theme, 'selected-text-color'); + + &:hover { + background: var-get($theme, 'hover-selected-background'); + } + + &:focus { + background: var-get($theme, 'focus-selected-background'); + } +} diff --git a/src/components/chip/themes/shared/chip.indigo.scss b/src/components/chip/themes/shared/chip.indigo.scss new file mode 100644 index 000000000..474bdd662 --- /dev/null +++ b/src/components/chip/themes/shared/chip.indigo.scss @@ -0,0 +1,148 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host button { + border-radius: var-get($theme, 'border-radius'); + border: rem(1px) solid var-get($theme, 'border-color'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + height: var-get($theme, 'size'); + + &:hover { + background: var-get($theme, 'hover-background'); + color: var-get($theme, 'hover-text-color'); + } + + &:focus { + background: var-get($theme, 'focus-background'); + color: var-get($theme, 'focus-text-color'); + outline: rem(3px) solid var-get($theme, 'focus-outline-color'); + } + + &[disabled] { + border-color: var-get($theme, 'disabled-border-color'); + background: var-get($theme, 'disabled-background'); + color: var-get($theme, 'disabled-text-color'); + } +} + +:host([selected]) button:not([disabled]) { + border-color: transparent; + background: var-get($theme, 'selected-background'); + color: var-get($theme, 'selected-text-color'); + + &:hover { + background: var-get($theme, 'hover-selected-background'); + } + + &:focus { + outline: rem(3px) solid var-get($theme, 'focus-selected-outline-color'); + } +} + +:host([variant='primary']) button, +:host([selected][variant='primary']) button:not([disabled]) { + border-color: transparent; + + &:hover { + background: color(primary, 400); + color: contrast-color(primary, 400); + } + + &:focus { + background: color(primary, 500); + color: contrast-color(primary, 500); + outline: rem(3px) solid var-get($theme, 'focus-selected-outline-color'); + } +} + +:host([variant='primary']) button[disabled] { + background: color(primary, 200); + color: contrast-color(primary, 400); +} + +:host([variant='info']) button, +:host([selected][variant='info']) button:not([disabled]) { + border-color: transparent; + + &:hover { + background: color(info, 400); + color: contrast-color(info, 400); + } + + &:focus { + background: color(info, 500); + color: contrast-color(info, 500); + outline: rem(3px) solid color(info, 200); + } +} + +:host([variant='info']) button[disabled] { + background: color(info, 200); + color: contrast-color(info, 400); +} + +:host([variant='success']) button, +:host([selected][variant='success']) button:not([disabled]) { + border-color: transparent; + + &:hover { + background: color(success, 400); + color: contrast-color(success, 400); + } + + &:focus { + background: color(success, 500); + color: contrast-color(success, 500); + outline: rem(3px) solid color(success, 200); + } +} + +:host([variant='success']) button[disabled] { + background: color(success, 200); + color: contrast-color(success, 800); +} + +:host([variant='warning']) button, +:host([selected][variant='warning']) button:not([disabled]) { + border-color: transparent; + + &:hover { + background: color(warn, 400); + color: contrast-color(warn, 400); + } + + &:focus { + background: color(warn, 500); + color: contrast-color(warn, 500); + outline: rem(3px) solid color(warn, 200); + } +} + +:host([variant='warning']) button[disabled] { + background: color(warn, 200); + color: contrast-color(warn, 900); +} + +:host([variant='danger']) button, +:host([selected][variant='danger']) button:not([disabled]) { + border-color: transparent; + + &:hover { + background: color(error, 400); + color: contrast-color(error, 400); + } + + &:focus { + background: color(error, 500); + color: contrast-color(error, 500); + outline: rem(3px) solid color(error, 200); + } +} + +:host([variant='danger']) button[disabled] { + background: color(error, 200); + color: contrast-color(error, 400); +} diff --git a/src/components/chip/themes/shared/chip.material.scss b/src/components/chip/themes/shared/chip.material.scss new file mode 100644 index 000000000..462abf75a --- /dev/null +++ b/src/components/chip/themes/shared/chip.material.scss @@ -0,0 +1,27 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host button { + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + outline: none; + height: var-get($theme, 'size'); + + &:hover { + background: var-get($theme, 'hover-background'); + color: var-get($theme, 'hover-text-color'); + } + + &:focus { + background: var-get($theme, 'focus-background'); + color: var-get($theme, 'focus-text-color'); + } + + &[disabled] { + background: var-get($theme, 'disabled-background'); + color: var-get($theme, 'disabled-text-color'); + } +} diff --git a/src/components/chip/themes/themes.ts b/src/components/chip/themes/themes.ts new file mode 100644 index 000000000..6e761e5c8 --- /dev/null +++ b/src/components/chip/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/chip.bootstrap.css.js'; +import { styles as fluentDark } from './dark/chip.fluent.css.js'; +import { styles as indigoDark } from './dark/chip.indigo.css.js'; +import { styles as materialDark } from './dark/chip.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/chip.bootstrap.css.js'; +import { styles as fluentLight } from './light/chip.fluent.css.js'; +import { styles as indigoLight } from './light/chip.indigo.css.js'; +import { styles as materialLight } from './light/chip.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/chip.bootstrap.css.js'; +import { styles as fluent } from './shared/chip.fluent.css.js'; +import { styles as indigo } from './shared/chip.indigo.css.js'; +import { styles as material } from './shared/chip.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/combo/combo-header.ts b/src/components/combo/combo-header.ts index 2ca71d143..6513b3941 100644 --- a/src/components/combo/combo-header.ts +++ b/src/components/combo/combo-header.ts @@ -1,20 +1,12 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/header/combo-header.base.css.js'; +import { styles } from './themes/combo-header.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; -import { styles as bootstrap } from '../dropdown/themes/light/header/dropdown-header.bootstrap.css.js'; -import { styles as fluent } from '../dropdown/themes/light/header/dropdown-header.fluent.css.js'; -import { - styles as indigo, - styles as material, -} from '../dropdown/themes/light/header/dropdown-header.material.css.js'; +import { all } from '../dropdown/themes/header.js'; /* blazorSuppress */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all) export default class IgcComboHeaderComponent extends LitElement { public static readonly tagName: string = 'igc-combo-header'; public static override styles = styles; diff --git a/src/components/combo/combo-item.ts b/src/components/combo/combo-item.ts index 8644992c3..d1ce1a349 100644 --- a/src/components/combo/combo-item.ts +++ b/src/components/combo/combo-item.ts @@ -1,21 +1,15 @@ import { LitElement, html, nothing } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/item/combo-item.base.css.js'; +import { styles } from './themes/combo-item.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import IgcCheckboxComponent from '../checkbox/checkbox.js'; import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; -import { styles as bootstrap } from '../dropdown/themes/light/item/dropdown-item.bootstrap.css.js'; -import { styles as fluent } from '../dropdown/themes/light/item/dropdown-item.fluent.css.js'; -import { styles as indigo } from '../dropdown/themes/light/item/dropdown-item.indigo.css.js'; -import { styles as material } from '../dropdown/themes/light/item/dropdown-item.material.css.js'; +import { all } from '../dropdown/themes/item.js'; /* blazorSuppress */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all) export default class IgcComboItemComponent extends LitElement { public static readonly tagName: string = 'igc-combo-item'; public static override styles = styles; diff --git a/src/components/combo/combo.ts b/src/components/combo/combo.ts index 6645360d7..639ddcc1a 100644 --- a/src/components/combo/combo.ts +++ b/src/components/combo/combo.ts @@ -15,11 +15,8 @@ import IgcComboListComponent from './combo-list.js'; import { DataController } from './controllers/data.js'; import { NavigationController } from './controllers/navigation.js'; import { SelectionController } from './controllers/selection.js'; -import { styles } from './themes/light/combo.base.css.js'; -import { styles as bootstrap } from './themes/light/combo.bootstrap.css.js'; -import { styles as fluent } from './themes/light/combo.fluent.css.js'; -import { styles as indigo } from './themes/light/combo.indigo.css.js'; -import { styles as material } from './themes/light/combo.material.css.js'; +import { styles } from './themes/combo.base.css.js'; +import { all } from './themes/themes.js'; import type { ComboItemTemplate, ComboRecord, @@ -91,13 +88,7 @@ import { IgcToggleComponent } from '../toggle/types.js'; * @csspart footer - The container holding the footer content. * @csspart empty - The container holding the empty content. */ -@themes( - { - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, - }, - true -) +@themes(all) @blazorAdditionalDependencies('IgcIconComponent, IgcInputComponent') @blazorIndirectRender export default class IgcComboComponent diff --git a/src/components/combo/themes/combo-header.base.scss b/src/components/combo/themes/combo-header.base.scss new file mode 100644 index 000000000..9cf7f7bec --- /dev/null +++ b/src/components/combo/themes/combo-header.base.scss @@ -0,0 +1,6 @@ +@use 'styles/utilities' as *; +@use '../../dropdown/themes/dropdown-header.base' as *; + +:host { + --component-size: var(--ig-size, var(--ig-size-medium)); +} diff --git a/src/components/combo/themes/light/item/combo-item.base.scss b/src/components/combo/themes/combo-item.base.scss similarity index 53% rename from src/components/combo/themes/light/item/combo-item.base.scss rename to src/components/combo/themes/combo-item.base.scss index 0d334353b..92221675a 100644 --- a/src/components/combo/themes/light/item/combo-item.base.scss +++ b/src/components/combo/themes/combo-item.base.scss @@ -1,5 +1,5 @@ -@use '../../../../../styles/utilities' as *; -@use '../../../../dropdown/themes/light/item/dropdown-item.base' as *; +@use 'styles/utilities' as *; +@use '../../dropdown/themes/dropdown-item.base' as *; :host { --component-size: var(--ig-size, var(--ig-size-medium)); diff --git a/src/components/combo/themes/light/combo.base.scss b/src/components/combo/themes/combo.base.scss similarity index 100% rename from src/components/combo/themes/light/combo.base.scss rename to src/components/combo/themes/combo.base.scss diff --git a/src/components/combo/themes/dark/_themes.scss b/src/components/combo/themes/dark/_themes.scss index 21f87ca82..a1a4000b8 100644 --- a/src/components/combo/themes/dark/_themes.scss +++ b/src/components/combo/themes/dark/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/combo' as *; diff --git a/src/components/combo/themes/dark/combo.bootstrap.scss b/src/components/combo/themes/dark/combo.bootstrap.scss index e0df1122f..88c087705 100644 --- a/src/components/combo/themes/dark/combo.bootstrap.scss +++ b/src/components/combo/themes/dark/combo.bootstrap.scss @@ -1,17 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $theme: $bootstrap; -$dropdown-theme: dropdown-theme.$bootstrap; -$input-theme: input-theme.$bootstrap; -@mixin theme() { - igc-combo { - @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } +:host { + @include css-vars-from-theme($theme, 'ig-combo'); } diff --git a/src/components/combo/themes/dark/combo.fluent.scss b/src/components/combo/themes/dark/combo.fluent.scss index 10e894221..d40c5802a 100644 --- a/src/components/combo/themes/dark/combo.fluent.scss +++ b/src/components/combo/themes/dark/combo.fluent.scss @@ -1,17 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $theme: $fluent; -$dropdown-theme: dropdown-theme.$fluent; -$input-theme: input-theme.$fluent; -@mixin theme() { - igc-combo { - @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } +:host { + @include css-vars-from-theme($theme, 'ig-combo'); } diff --git a/src/components/combo/themes/dark/combo.indigo.scss b/src/components/combo/themes/dark/combo.indigo.scss index d0daac29b..8812e0e3f 100644 --- a/src/components/combo/themes/dark/combo.indigo.scss +++ b/src/components/combo/themes/dark/combo.indigo.scss @@ -1,17 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $theme: $indigo; -$dropdown-theme: dropdown-theme.$indigo; -$input-theme: input-theme.$indigo; -@mixin theme() { - igc-combo { - @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } +:host { + @include css-vars-from-theme($theme, 'ig-combo'); } diff --git a/src/components/combo/themes/dark/combo.material.scss b/src/components/combo/themes/dark/combo.material.scss index 4f753473e..53ed54598 100644 --- a/src/components/combo/themes/dark/combo.material.scss +++ b/src/components/combo/themes/dark/combo.material.scss @@ -1,17 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; $theme: $material; -$dropdown-theme: dropdown-theme.$material; -$input-theme: input-theme.$material; -@mixin theme() { - igc-combo { - @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } +:host { + @include css-vars-from-theme($theme, 'ig-combo'); } diff --git a/src/components/combo/themes/light/_themes.scss b/src/components/combo/themes/light/_themes.scss index b17a586b2..ad2a306be 100644 --- a/src/components/combo/themes/light/_themes.scss +++ b/src/components/combo/themes/light/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/combo' as *; diff --git a/src/components/combo/themes/light/combo.bootstrap.scss b/src/components/combo/themes/light/combo.bootstrap.scss index 7c5c37847..88c087705 100644 --- a/src/components/combo/themes/light/combo.bootstrap.scss +++ b/src/components/combo/themes/light/combo.bootstrap.scss @@ -1,131 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; $theme: $bootstrap; -$input-theme: input-theme.$bootstrap; -$dropdown-theme: dropdown-theme.$bootstrap; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); -} - -[part='helper-text'] { - margin-top: rem(4px); -} - -[part='list-wrapper'] { - border-radius: var-get($dropdown-theme, 'border-radius'); - - igc-input::part(input) { - border-inline-end: 0; - } - - igc-input::part(suffix) { - background: transparent; - border: none; - border-radius: 0; - } - - [part='search-input'] { - [part~='case-icon'] { - border-block-end: rem(1px) solid color(gray, 400); - transition: border .15s ease-out; - } - - &:focus, - &:focus-within { - [part~='case-icon'] { - border-block-end: rem(1px) solid color(primary, 500); - } - } - } -} - -[part='empty'] { - color: var-get($theme, 'empty-list-placeholder-color'); -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -[part='clear-icon'] { - background: var-get($theme, 'clear-button-background'); - color: var-get($theme, 'clear-button-foreground'); - border-inline-end: rem(1px) solid var-get($input-theme, 'border-color'); - - igc-icon { - color: inherit; - } -} - -[part='case-icon active'] { - color: color(primary, 500); -} - -:host(:focus-within) { - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } - - [part~='clear-icon'] { - background: var-get($theme, 'clear-button-background-focus'); - color: var-get($theme, 'clear-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - ::slotted([slot='prefix']), - ::slotted([slot='suffix']), - igc-input::part(label), - igc-input::part(input)::placeholder, - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - [part~='clear-icon'] { - border-inline-end: rem(1px) solid var-get($input-theme, 'disabled-border-color'); - background: inherit; - color: var-get($input-theme, 'disabled-text-color'); - - igc-icon { - color: inherit; - } - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } } diff --git a/src/components/combo/themes/light/combo.fluent.scss b/src/components/combo/themes/light/combo.fluent.scss index fda854ea6..d40c5802a 100644 --- a/src/components/combo/themes/light/combo.fluent.scss +++ b/src/components/combo/themes/light/combo.fluent.scss @@ -1,135 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; $theme: $fluent; -$input-theme: input-theme.$fluent; -$dropdown-theme: dropdown-theme.$fluent; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - - ::slotted([slot='helper-text']) { - @include type-style('caption'); - - display: block; - padding: 0; - margin-top: rem(5px); - color: color(gray, 700); - } -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -[part~='clear-icon'] { - background: var-get($theme, 'clear-button-background'); - color: var-get($theme, 'clear-button-foreground'); - - igc-icon { - color: inherit; - } -} - -[part='filter-input'] { - padding: pad(2px, 4px, 8px); -} - -[part='list-wrapper'] { - border-radius: var-get($dropdown-theme, 'border-radius'); - - igc-input::part(suffix) { - background: transparent; - } - - igc-input::part(input) { - height: var(--size); - } -} - -[part='empty'] { - color: var-get($theme, 'empty-list-placeholder-color'); -} - -:host(:focus-within) { - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } - - [part~='clear-icon'] { - background: var-get($theme, 'clear-button-background-focus'); - color: var-get($theme, 'clear-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host([invalid]:focus-within) { - igc-input::part(input) { - height: calc(var(--size) - #{rem(4px)}); - } - - igc-input::part(suffix) { - height: var(--size); - margin-inline-end: rem(-1px); - margin-block-start: rem(-2px); - } - - igc-input::part(prefix) { - margin-inline-start: rem(-1px); - margin-block-start: rem(-2px); - } -} - -:host(:disabled), -:host([disabled]) { - ::slotted([slot='prefix']), - ::slotted([slot='suffix']), - igc-input::part(label), - igc-input::part(input)::placeholder, - ::slotted([slot='helper-text']) { - color: color(gray, 500); - } - - [part~='clear-icon'] { - background: inherit; - color: var-get($input-theme, 'disabled-text-color'); - - igc-icon { - color: inherit; - } - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } } diff --git a/src/components/combo/themes/light/combo.indigo.scss b/src/components/combo/themes/light/combo.indigo.scss index f93bd36f9..8812e0e3f 100644 --- a/src/components/combo/themes/light/combo.indigo.scss +++ b/src/components/combo/themes/light/combo.indigo.scss @@ -1,141 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; $theme: $indigo; -$input-theme: input-theme.$indigo; -$dropdown-theme: dropdown-theme.$indigo; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - - - igc-input::part(container) { - padding-inline: 0; - } - - [part='helper-text'] { - margin-top: rem(6px); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } - - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); - } -} - -[part='case-icon'] { - color: color(gray, 600); -} - -[part='case-icon active'] { - color: color(gray, 900); -} - -[part='empty'] { - color: var-get($theme, 'empty-list-placeholder-color'); -} - -:host(:not([single-select])) { - > igc-input::part(input) { - &::selection { - background: transparent; - } - } -} - -[part='list-wrapper'] { - border-radius: var-get($dropdown-theme, 'border-radius'); - - igc-input::part(container) { - background: transparent; - border-inline-end-color: transparent; - } - - igc-input::part(input) { - border-inline-end-color: transparent; - - &::selection { - background: color(primary, 100); - } - } - - [part='case-icon active'] { - color: color(primary, 500); - } -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -:host(:focus-within) { - igc-input::part(label) { - color: var-get($input-theme, 'focused-secondary-color'); - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } - - [part~='clear-icon'] { - background: var-get($theme, 'clear-button-background-focus'); - color: var-get($theme, 'clear-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - ::slotted([slot='prefix']), - ::slotted([slot='suffix']), - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - igc-input::part(input)::selection { - background: transparent; - } - - [part~='clear-icon'] { - background: inherit; - color: var-get($input-theme, 'disabled-text-color'); - - igc-icon { - color: inherit; - } - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } } diff --git a/src/components/combo/themes/light/combo.material.scss b/src/components/combo/themes/light/combo.material.scss index 5e68f7b77..53ed54598 100644 --- a/src/components/combo/themes/light/combo.material.scss +++ b/src/components/combo/themes/light/combo.material.scss @@ -1,167 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; -@use '../../../input/themes/light/themes' as input-theme; -@use '../../../dropdown/themes/light/themes' as dropdown-theme; $theme: $material; -$input-theme: input-theme.$material; -$dropdown-theme: dropdown-theme.$material; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-combo'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - - [part='helper-text'] { - margin-top: rem(5px); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); - } - - ::slotted([slot='helper-text']) { - @include type-style('caption'); - - color: var-get($input-theme, 'helper-text-color'); - line-height: 1; - } - - ::slotted([slot='prefix']), - ::slotted([slot='suffix']) { - color: inherit; - } -} - -[part='empty'] { - color: var-get($theme, 'empty-list-placeholder-color'); -} - -:host(:not([single-select])) { - > igc-input::part(input) { - &::selection { - background: transparent; - } - } -} - -[part='list-wrapper'] { - border-radius: var-get($dropdown-theme, 'border-radius'); - - igc-input::part(container) { - background: transparent; - border-inline-end-color: transparent; - } - - igc-input::part(input) { - border-inline-end-color: transparent; - - &::selection { - background: color(primary, 100); - } - } - - [part='case-icon'] { - color: color(gray, 600); - } - - [part='case-icon active'] { - color: color(primary, 500); - } -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -[part='toggle-icon filled'] { - color: var-get($theme, 'toggle-button-foreground-filled'); -} - -[part~='clear-icon'] { - background: var-get($theme, 'clear-button-background'); - color: var-get($theme, 'clear-button-foreground'); - - igc-icon { - color: inherit; - } -} - -:host(:focus-within) { - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } - - [part~='clear-icon'] { - background: var-get($theme, 'clear-button-background-focus'); - color: var-get($theme, 'clear-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host(:not([outlined]):focus-within) { - > igc-input::part(container) { - background: var-get($input-theme, 'box-background-focus'); - } -} - -:host([outlined]:focus-within) { - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - ::slotted([slot='prefix']), - ::slotted([slot='suffix']), - igc-input::part(label), - igc-input::part(input)::placeholder, - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - [part~='clear-icon'] { - background: inherit; - color: var-get($input-theme, 'disabled-text-color'); - - igc-icon { - color: inherit; - } - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } -} - -:host(:disabled[outlined]), -:host([outlined][disabled]), -:host([outlined][invalid]) { - igc-input::part(filled) + igc-input::part(notch) { - border-top-color: transparent; - } } diff --git a/src/components/combo/themes/light/header/combo-header.base.scss b/src/components/combo/themes/light/header/combo-header.base.scss deleted file mode 100644 index d8779ead7..000000000 --- a/src/components/combo/themes/light/header/combo-header.base.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use '../../../../../styles/utilities' as *; -@use '../../../../dropdown/themes/light/header/dropdown-header.base' as *; - -:host { - --component-size: var(--ig-size, var(--ig-size-medium)); -} diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss new file mode 100644 index 000000000..64de30004 --- /dev/null +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -0,0 +1,123 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../input/themes/light/themes' as input-theme; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; + +$theme: $bootstrap; +$input-theme: input-theme.$bootstrap; +$dropdown-theme: dropdown-theme.$bootstrap; + +[part='helper-text'] { + margin-top: rem(4px); +} + +[part='list-wrapper'] { + border-radius: var-get($dropdown-theme, 'border-radius'); + + igc-input::part(input) { + border-inline-end: 0; + } + + igc-input::part(suffix) { + background: transparent; + border: none; + border-radius: 0; + } + + [part='search-input'] { + [part~='case-icon'] { + border-block-end: rem(1px) solid color(gray, 400); + transition: border .15s ease-out; + } + + &:focus, + &:focus-within { + [part~='case-icon'] { + border-block-end: rem(1px) solid color(primary, 500); + } + } + } +} + +[part='empty'] { + color: var-get($theme, 'empty-list-placeholder-color'); +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +[part='clear-icon'] { + background: var-get($theme, 'clear-button-background'); + color: var-get($theme, 'clear-button-foreground'); + border-inline-end: rem(1px) solid var-get($input-theme, 'border-color'); + + igc-icon { + color: inherit; + } +} + +[part='case-icon active'] { + color: color(primary, 500); +} + +:host(:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } + + [part~='clear-icon'] { + background: var-get($theme, 'clear-button-background-focus'); + color: var-get($theme, 'clear-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + ::slotted([slot='prefix']), + ::slotted([slot='suffix']), + igc-input::part(label), + igc-input::part(input)::placeholder, + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + [part~='clear-icon'] { + border-inline-end: rem(1px) solid var-get($input-theme, 'disabled-border-color'); + background: inherit; + color: var-get($input-theme, 'disabled-text-color'); + + igc-icon { + color: inherit; + } + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/combo/themes/shared/combo.fluent.scss b/src/components/combo/themes/shared/combo.fluent.scss new file mode 100644 index 000000000..6c42e05d7 --- /dev/null +++ b/src/components/combo/themes/shared/combo.fluent.scss @@ -0,0 +1,129 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../input/themes/light/themes' as input-theme; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; + +$theme: $fluent; +$input-theme: input-theme.$fluent; +$dropdown-theme: dropdown-theme.$fluent; + +:host { + ::slotted([slot='helper-text']) { + @include type-style('caption'); + + display: block; + padding: 0; + margin-top: rem(5px); + color: color(gray, 700); + } +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +[part~='clear-icon'] { + background: var-get($theme, 'clear-button-background'); + color: var-get($theme, 'clear-button-foreground'); + + igc-icon { + color: inherit; + } +} + +[part='filter-input'] { + padding: pad(2px, 4px, 8px); +} + +[part='list-wrapper'] { + border-radius: var-get($dropdown-theme, 'border-radius'); + + igc-input::part(suffix) { + background: transparent; + } + + igc-input::part(input) { + height: var(--size); + } +} + +[part='empty'] { + color: var-get($theme, 'empty-list-placeholder-color'); +} + +:host(:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } + + [part~='clear-icon'] { + background: var-get($theme, 'clear-button-background-focus'); + color: var-get($theme, 'clear-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host([invalid]:focus-within) { + igc-input::part(input) { + height: calc(var(--size) - #{rem(4px)}); + } + + igc-input::part(suffix) { + height: var(--size); + margin-inline-end: rem(-1px); + margin-block-start: rem(-2px); + } + + igc-input::part(prefix) { + margin-inline-start: rem(-1px); + margin-block-start: rem(-2px); + } +} + +:host(:disabled), +:host([disabled]) { + ::slotted([slot='prefix']), + ::slotted([slot='suffix']), + igc-input::part(label), + igc-input::part(input)::placeholder, + ::slotted([slot='helper-text']) { + color: color(gray, 500); + } + + [part~='clear-icon'] { + background: inherit; + color: var-get($input-theme, 'disabled-text-color'); + + igc-icon { + color: inherit; + } + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/combo/themes/shared/combo.indigo.scss b/src/components/combo/themes/shared/combo.indigo.scss new file mode 100644 index 000000000..7fafeee77 --- /dev/null +++ b/src/components/combo/themes/shared/combo.indigo.scss @@ -0,0 +1,134 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../input/themes/light/themes' as input-theme; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; + +$theme: $indigo; +$input-theme: input-theme.$indigo; +$dropdown-theme: dropdown-theme.$indigo; + +:host { + igc-input::part(container) { + padding-inline: 0; + } + + [part='helper-text'] { + margin-top: rem(6px); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } + + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'helper-text-color'); + } +} + +[part='case-icon'] { + color: color(gray, 600); +} + +[part='case-icon active'] { + color: color(gray, 900); +} + +[part='empty'] { + color: var-get($theme, 'empty-list-placeholder-color'); +} + +:host(:not([single-select])) { + > igc-input::part(input) { + &::selection { + background: transparent; + } + } +} + +[part='list-wrapper'] { + border-radius: var-get($dropdown-theme, 'border-radius'); + + igc-input::part(container) { + background: transparent; + border-inline-end-color: transparent; + } + + igc-input::part(input) { + border-inline-end-color: transparent; + + &::selection { + background: color(primary, 100); + } + } + + [part='case-icon active'] { + color: color(primary, 500); + } +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +:host(:focus-within) { + igc-input::part(label) { + color: var-get($input-theme, 'focused-secondary-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } + + [part~='clear-icon'] { + background: var-get($theme, 'clear-button-background-focus'); + color: var-get($theme, 'clear-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + ::slotted([slot='prefix']), + ::slotted([slot='suffix']), + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + igc-input::part(input)::selection { + background: transparent; + } + + [part~='clear-icon'] { + background: inherit; + color: var-get($input-theme, 'disabled-text-color'); + + igc-icon { + color: inherit; + } + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/combo/themes/shared/combo.material.scss b/src/components/combo/themes/shared/combo.material.scss new file mode 100644 index 000000000..f183d7fa6 --- /dev/null +++ b/src/components/combo/themes/shared/combo.material.scss @@ -0,0 +1,161 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../input/themes/light/themes' as input-theme; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; + +$theme: $material; +$input-theme: input-theme.$material; +$dropdown-theme: dropdown-theme.$material; + +:host { + [part='helper-text'] { + margin-top: rem(5px); + padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + } + + ::slotted([slot='helper-text']) { + @include type-style('caption'); + + color: var-get($input-theme, 'helper-text-color'); + line-height: 1; + } + + ::slotted([slot='prefix']), + ::slotted([slot='suffix']) { + color: inherit; + } +} + +[part='empty'] { + color: var-get($theme, 'empty-list-placeholder-color'); +} + +:host(:not([single-select])) { + > igc-input::part(input) { + &::selection { + background: transparent; + } + } +} + +[part='list-wrapper'] { + border-radius: var-get($dropdown-theme, 'border-radius'); + + igc-input::part(container) { + background: transparent; + border-inline-end-color: transparent; + } + + igc-input::part(input) { + border-inline-end-color: transparent; + + &::selection { + background: color(primary, 100); + } + } + + [part='case-icon'] { + color: color(gray, 600); + } + + [part='case-icon active'] { + color: color(primary, 500); + } +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +[part='toggle-icon filled'] { + color: var-get($theme, 'toggle-button-foreground-filled'); +} + +[part~='clear-icon'] { + background: var-get($theme, 'clear-button-background'); + color: var-get($theme, 'clear-button-foreground'); + + igc-icon { + color: inherit; + } +} + +:host(:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } + + [part~='clear-icon'] { + background: var-get($theme, 'clear-button-background-focus'); + color: var-get($theme, 'clear-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host(:not([outlined]):focus-within) { + > igc-input::part(container) { + background: var-get($input-theme, 'box-background-focus'); + } +} + +:host([outlined]:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + ::slotted([slot='prefix']), + ::slotted([slot='suffix']), + igc-input::part(label), + igc-input::part(input)::placeholder, + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + [part~='clear-icon'] { + background: inherit; + color: var-get($input-theme, 'disabled-text-color'); + + igc-icon { + color: inherit; + } + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} + +:host(:disabled[outlined]), +:host([outlined][disabled]), +:host([outlined][invalid]) { + igc-input::part(filled) + igc-input::part(notch) { + border-top-color: transparent; + } +} diff --git a/src/components/combo/themes/themes.ts b/src/components/combo/themes/themes.ts new file mode 100644 index 000000000..8bb471565 --- /dev/null +++ b/src/components/combo/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/combo.bootstrap.css.js'; +import { styles as fluentDark } from './dark/combo.fluent.css.js'; +import { styles as indigoDark } from './dark/combo.indigo.css.js'; +import { styles as materialDark } from './dark/combo.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/combo.bootstrap.css.js'; +import { styles as fluentLight } from './light/combo.fluent.css.js'; +import { styles as indigoLight } from './light/combo.indigo.css.js'; +import { styles as materialLight } from './light/combo.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/combo.bootstrap.css.js'; +import { styles as fluent } from './shared/combo.fluent.css.js'; +import { styles as indigo } from './shared/combo.indigo.css.js'; +import { styles as material } from './shared/combo.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 437aa733e..422d9a91d 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -2,11 +2,8 @@ import { LitElement, html, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { styles } from './themes/light/dialog.base.css.js'; -import { styles as bootstrap } from './themes/light/dialog.bootstrap.css.js'; -import { styles as fluent } from './themes/light/dialog.fluent.css.js'; -import { styles as indigo } from './themes/light/dialog.indigo.css.js'; -import { styles as material } from './themes/light/dialog.material.css.js'; +import { styles } from './themes/dialog.base.css.js'; +import { all } from './themes/themes.js'; import { AnimationPlayer } from '../../animations/player.js'; import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -40,10 +37,7 @@ export interface IgcDialogEventMap { * @csspart footer - The footer container. * @csspart overlay - The overlay. */ -@themes({ - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, -}) +@themes(all) @blazorAdditionalDependencies('IgcButtonComponent') export default class IgcDialogComponent extends EventEmitterMixin< IgcDialogEventMap, diff --git a/src/components/dialog/themes/dark/dialog.bootstrap.scss b/src/components/dialog/themes/dark/dialog.bootstrap.scss index b23c2d725..ed8a3e1ca 100644 --- a/src/components/dialog/themes/dark/dialog.bootstrap.scss +++ b/src/components/dialog/themes/dark/dialog.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-dialog { - @include css-vars-from-theme($theme, 'ig-dialog'); - } +:host { + @include css-vars-from-theme($theme, 'ig-dialog'); } diff --git a/src/components/dialog/themes/dark/dialog.fluent.scss b/src/components/dialog/themes/dark/dialog.fluent.scss index 8a11a16aa..59ca4ef01 100644 --- a/src/components/dialog/themes/dark/dialog.fluent.scss +++ b/src/components/dialog/themes/dark/dialog.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-dialog { - @include css-vars-from-theme($theme, 'ig-dialog'); - } +:host { + @include css-vars-from-theme($theme, 'ig-dialog'); } diff --git a/src/components/dialog/themes/dark/dialog.indigo.scss b/src/components/dialog/themes/dark/dialog.indigo.scss index 0c2cf0576..e80f8a087 100644 --- a/src/components/dialog/themes/dark/dialog.indigo.scss +++ b/src/components/dialog/themes/dark/dialog.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-dialog { - @include css-vars-from-theme($theme, 'ig-dialog'); - } +:host { + @include css-vars-from-theme($theme, 'ig-dialog'); } diff --git a/src/components/dialog/themes/dark/dialog.material.scss b/src/components/dialog/themes/dark/dialog.material.scss index bed92ddd5..2ecb36298 100644 --- a/src/components/dialog/themes/dark/dialog.material.scss +++ b/src/components/dialog/themes/dark/dialog.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-dialog { - @include css-vars-from-theme($theme, 'ig-dialog'); - } +:host { + @include css-vars-from-theme($theme, 'ig-dialog'); } diff --git a/src/components/dialog/themes/light/dialog.base.scss b/src/components/dialog/themes/dialog.base.scss similarity index 100% rename from src/components/dialog/themes/light/dialog.base.scss rename to src/components/dialog/themes/dialog.base.scss diff --git a/src/components/dialog/themes/light/dialog.bootstrap.scss b/src/components/dialog/themes/light/dialog.bootstrap.scss index 48c0c8049..ed8a3e1ca 100644 --- a/src/components/dialog/themes/light/dialog.bootstrap.scss +++ b/src/components/dialog/themes/light/dialog.bootstrap.scss @@ -5,40 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-dialog'); - - background: var-get($theme, 'background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part~='backdrop'] { - background: var-get($theme, 'backdrop'); -} - -[part='base'] { - min-width: rem(288px); - border: 1px solid var-get($theme, 'border-color'); - box-shadow: var-get($theme, 'elevation'); -} - -[part='title'], -[part='footer'] { - @include type-style('h5') { - margin: 0; - } - - color: var-get($theme, 'title-color'); - padding: rem(16px); -} - -[part='content'] { - color: var-get($theme, 'message-color'); - padding: rem(16px); -} - -[part='title'] { - border-block-end: 1px solid var-get($theme, 'border-color'); -} - -[part='footer'] { - border-block-start: 1px solid var-get($theme, 'border-color'); } diff --git a/src/components/dialog/themes/light/dialog.fluent.scss b/src/components/dialog/themes/light/dialog.fluent.scss index 1d8829f88..59ca4ef01 100644 --- a/src/components/dialog/themes/light/dialog.fluent.scss +++ b/src/components/dialog/themes/light/dialog.fluent.scss @@ -5,33 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-dialog'); - - background: var-get($theme, 'background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part='base'] { - box-shadow: var-get($theme, 'elevation'); -} - -[part='title'] { - color: var-get($theme, 'title-color'); - padding: rem(24px); - padding-block-start: rem(16px); -} - -[part='content'] { - color: var-get($theme, 'message-color'); - padding-inline: rem(24px); - padding-block-end: rem(20px); -} - -[part='footer'] { - color: var-get($theme, 'title-color'); - padding: rem(24px); - padding-block-start: 0; -} - -[part~='backdrop'] { - background: var-get($theme, 'backdrop'); } diff --git a/src/components/dialog/themes/light/dialog.indigo.scss b/src/components/dialog/themes/light/dialog.indigo.scss index 5c56fed55..e80f8a087 100644 --- a/src/components/dialog/themes/light/dialog.indigo.scss +++ b/src/components/dialog/themes/light/dialog.indigo.scss @@ -5,31 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-dialog'); - - background: var-get($theme, 'background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part~='backdrop'] { - background: var-get($theme, 'backdrop'); -} - -[part='base'] { - box-shadow: var-get($theme, 'elevation'); -} - -[part='title'] { - color: var-get($theme, 'title-color'); - padding: rem(16px) rem(24px); -} - -[part='content'] { - padding-inline: rem(24px); - padding-block-end: rem(8px); - color: var-get($theme, 'message-color'); -} - -[part='footer'] { - color: var-get($theme, 'title-color'); - padding: rem(8px); } diff --git a/src/components/dialog/themes/light/dialog.material.scss b/src/components/dialog/themes/light/dialog.material.scss index a9db57726..2ecb36298 100644 --- a/src/components/dialog/themes/light/dialog.material.scss +++ b/src/components/dialog/themes/light/dialog.material.scss @@ -5,32 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-dialog'); - - background: var-get($theme, 'background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part~='backdrop'] { - background: var-get($theme, 'backdrop'); -} - -[part='base'] { - box-shadow: var-get($theme, 'elevation'); -} - -[part='title'] { - color: var-get($theme, 'title-color'); - padding-inline: rem(24px); - padding-block-start: rem(16px); -} - -[part='content'] { - color: var-get($theme, 'message-color'); - padding: rem(14px) rem(24px); -} - -[part='footer'] { - color: var-get($theme, 'title-color'); - padding: rem(8px); - padding-block-start: 0; } diff --git a/src/components/dialog/themes/shared/dialog.bootstrap.scss b/src/components/dialog/themes/shared/dialog.bootstrap.scss new file mode 100644 index 000000000..68bc47e46 --- /dev/null +++ b/src/components/dialog/themes/shared/dialog.bootstrap.scss @@ -0,0 +1,42 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + background: var-get($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part~='backdrop'] { + background: var-get($theme, 'backdrop'); +} + +[part='base'] { + min-width: rem(288px); + border: 1px solid var-get($theme, 'border-color'); + box-shadow: var-get($theme, 'elevation'); +} + +[part='title'], +[part='footer'] { + @include type-style('h5') { + margin: 0; + } + + color: var-get($theme, 'title-color'); + padding: rem(16px); +} + +[part='content'] { + color: var-get($theme, 'message-color'); + padding: rem(16px); +} + +[part='title'] { + border-block-end: 1px solid var-get($theme, 'border-color'); +} + +[part='footer'] { + border-block-start: 1px solid var-get($theme, 'border-color'); +} diff --git a/src/components/dialog/themes/shared/dialog.fluent.scss b/src/components/dialog/themes/shared/dialog.fluent.scss new file mode 100644 index 000000000..2f076a51f --- /dev/null +++ b/src/components/dialog/themes/shared/dialog.fluent.scss @@ -0,0 +1,35 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + background: var-get($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part='base'] { + box-shadow: var-get($theme, 'elevation'); +} + +[part='title'] { + color: var-get($theme, 'title-color'); + padding: rem(24px); + padding-block-start: rem(16px); +} + +[part='content'] { + color: var-get($theme, 'message-color'); + padding-inline: rem(24px); + padding-block-end: rem(20px); +} + +[part='footer'] { + color: var-get($theme, 'title-color'); + padding: rem(24px); + padding-block-start: 0; +} + +[part~='backdrop'] { + background: var-get($theme, 'backdrop'); +} diff --git a/src/components/dialog/themes/shared/dialog.indigo.scss b/src/components/dialog/themes/shared/dialog.indigo.scss new file mode 100644 index 000000000..fb4965f34 --- /dev/null +++ b/src/components/dialog/themes/shared/dialog.indigo.scss @@ -0,0 +1,33 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + background: var-get($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part~='backdrop'] { + background: var-get($theme, 'backdrop'); +} + +[part='base'] { + box-shadow: var-get($theme, 'elevation'); +} + +[part='title'] { + color: var-get($theme, 'title-color'); + padding: rem(16px) rem(24px); +} + +[part='content'] { + padding-inline: rem(24px); + padding-block-end: rem(8px); + color: var-get($theme, 'message-color'); +} + +[part='footer'] { + color: var-get($theme, 'title-color'); + padding: rem(8px); +} diff --git a/src/components/dialog/themes/shared/dialog.material.scss b/src/components/dialog/themes/shared/dialog.material.scss new file mode 100644 index 000000000..869040dc9 --- /dev/null +++ b/src/components/dialog/themes/shared/dialog.material.scss @@ -0,0 +1,34 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + background: var-get($theme, 'background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part~='backdrop'] { + background: var-get($theme, 'backdrop'); +} + +[part='base'] { + box-shadow: var-get($theme, 'elevation'); +} + +[part='title'] { + color: var-get($theme, 'title-color'); + padding-inline: rem(24px); + padding-block-start: rem(16px); +} + +[part='content'] { + color: var-get($theme, 'message-color'); + padding: rem(14px) rem(24px); +} + +[part='footer'] { + color: var-get($theme, 'title-color'); + padding: rem(8px); + padding-block-start: 0; +} diff --git a/src/components/dialog/themes/themes.ts b/src/components/dialog/themes/themes.ts new file mode 100644 index 000000000..e9599dfd9 --- /dev/null +++ b/src/components/dialog/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/dialog.bootstrap.css.js'; +import { styles as fluentDark } from './dark/dialog.fluent.css.js'; +import { styles as indigoDark } from './dark/dialog.indigo.css.js'; +import { styles as materialDark } from './dark/dialog.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/dialog.bootstrap.css.js'; +import { styles as fluentLight } from './light/dialog.fluent.css.js'; +import { styles as indigoLight } from './light/dialog.indigo.css.js'; +import { styles as materialLight } from './light/dialog.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/dialog.bootstrap.css.js'; +import { styles as fluent } from './shared/dialog.fluent.css.js'; +import { styles as indigo } from './shared/dialog.indigo.css.js'; +import { styles as material } from './shared/dialog.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/dropdown-group.ts b/src/components/dropdown/dropdown-group.ts index 91472dcea..2751b1926 100644 --- a/src/components/dropdown/dropdown-group.ts +++ b/src/components/dropdown/dropdown-group.ts @@ -2,11 +2,8 @@ import { LitElement, html } from 'lit'; import { queryAssignedElements } from 'lit/decorators.js'; import type IgcDropdownItemComponent from './dropdown-item'; -import { styles } from './themes/light/group/dropdown-group.base.css.js'; -import { styles as bootstrap } from './themes/light/group/dropdown-group.bootstrap.css.js'; -import { styles as fluent } from './themes/light/group/dropdown-group.fluent.css.js'; -import { styles as indigo } from './themes/light/group/dropdown-group.indigo.css.js'; -import { styles as material } from './themes/light/group/dropdown-group.material.css.js'; +import { styles } from './themes/dropdown-group.base.css.js'; +import { all } from './themes/group.js'; import { themes } from '../../theming/theming-decorator.js'; import { blazorSuppress } from '../common/decorators/blazorSuppress.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -20,10 +17,7 @@ import { SizableInterface } from '../common/mixins/sizable.js'; * * @csspart label - The native label element. */ -@themes({ - light: { fluent, bootstrap, indigo, material }, - dark: { fluent, bootstrap, indigo, material }, -}) +@themes(all) export default class IgcDropdownGroupComponent extends LitElement { public static readonly tagName: string = 'igc-dropdown-group'; public static override styles = styles; diff --git a/src/components/dropdown/dropdown-header.ts b/src/components/dropdown/dropdown-header.ts index 81b8ec4b8..e4d96fc1f 100644 --- a/src/components/dropdown/dropdown-header.ts +++ b/src/components/dropdown/dropdown-header.ts @@ -1,10 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/header/dropdown-header.base.css.js'; -import { styles as bootstrap } from './themes/light/header/dropdown-header.bootstrap.css.js'; -import { styles as fluent } from './themes/light/header/dropdown-header.fluent.css.js'; -import { styles as indigo } from './themes/light/header/dropdown-header.indigo.css.js'; -import { styles as material } from './themes/light/header/dropdown-header.material.css.js'; +import { styles } from './themes/dropdown-header.base.css.js'; +import { all } from './themes/header.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -13,10 +10,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @slot - Renders the header. */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all) export default class IgcDropdownHeaderComponent extends LitElement { public static readonly tagName: string = 'igc-dropdown-header'; public static override styles = styles; diff --git a/src/components/dropdown/dropdown-item.ts b/src/components/dropdown/dropdown-item.ts index 248a4d6b2..5639a901d 100644 --- a/src/components/dropdown/dropdown-item.ts +++ b/src/components/dropdown/dropdown-item.ts @@ -1,11 +1,8 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/item/dropdown-item.base.css.js'; -import { styles as bootstrap } from './themes/light/item/dropdown-item.bootstrap.css.js'; -import { styles as fluent } from './themes/light/item/dropdown-item.fluent.css.js'; -import { styles as indigo } from './themes/light/item/dropdown-item.indigo.css.js'; -import { styles as material } from './themes/light/item/dropdown-item.material.css.js'; +import { styles } from './themes/dropdown-item.base.css.js'; +import { all } from './themes/item.js'; import { themes } from '../../theming/theming-decorator.js'; import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -23,10 +20,7 @@ import { registerComponent } from '../common/definitions/register.js'; * @csspart content - The main content wrapper. * @csspart suffix - The suffix wrapper. */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all) export default class IgcDropdownItemComponent extends LitElement { public static readonly tagName: string = 'igc-dropdown-item'; public static override styles = styles; diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts index 08610d477..6e40dcd14 100644 --- a/src/components/dropdown/dropdown.ts +++ b/src/components/dropdown/dropdown.ts @@ -10,11 +10,8 @@ import { styleMap } from 'lit/directives/style-map.js'; import IgcDropdownGroupComponent from './dropdown-group.js'; import IgcDropdownHeaderComponent from './dropdown-header.js'; import IgcDropdownItemComponent from './dropdown-item.js'; -import { styles } from './themes/light/dropdown.base.css.js'; -import { styles as bootstrap } from './themes/light/dropdown.bootstrap.css.js'; -import { styles as fluent } from './themes/light/dropdown.fluent.css.js'; -import { styles as indigo } from './themes/light/dropdown.indigo.css.js'; -import { styles as material } from './themes/light/dropdown.material.css.js'; +import { all } from './themes/container.js'; +import { styles } from './themes/dropdown.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js'; import { blazorSuppress } from '../common/decorators/blazorSuppress.js'; @@ -51,10 +48,7 @@ export interface IgcDropdownEventMap extends IgcToggleEventMap { * @csspart base - The dropdown list wrapper. * @csspart list - The dropdown list. */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all) @blazorAdditionalDependencies( 'IgcDropdownItemComponent, IgcDropdownHeaderComponent, IgcDropdownGroupComponent' ) diff --git a/src/components/dropdown/themes/container.ts b/src/components/dropdown/themes/container.ts new file mode 100644 index 000000000..1c2260d3d --- /dev/null +++ b/src/components/dropdown/themes/container.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/dropdown.bootstrap.css.js'; +import { styles as fluentDark } from './dark/dropdown.fluent.css.js'; +import { styles as indigoDark } from './dark/dropdown.indigo.css.js'; +import { styles as materialDark } from './dark/dropdown.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/dropdown.bootstrap.css.js'; +import { styles as fluentLight } from './light/dropdown.fluent.css.js'; +import { styles as indigoLight } from './light/dropdown.indigo.css.js'; +import { styles as materialLight } from './light/dropdown.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/dropdown.bootstrap.css.js'; +import { styles as fluent } from './shared/dropdown.fluent.css.js'; +import { styles as indigo } from './shared/dropdown.indigo.css.js'; +import { styles as material } from './shared/dropdown.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/themes/dark/_themes.scss b/src/components/dropdown/themes/dark/_themes.scss index 517b7baad..d6b1473d5 100644 --- a/src/components/dropdown/themes/dark/_themes.scss +++ b/src/components/dropdown/themes/dark/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/drop-down' as *; diff --git a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss index f4bc43d51..754143097 100644 --- a/src/components/dropdown/themes/dark/dropdown.bootstrap.scss +++ b/src/components/dropdown/themes/dark/dropdown.bootstrap.scss @@ -1,9 +1,6 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-dropdown { - @include css-vars-from-theme($bootstrap, 'ig-dropdown'); - } +:host { + @include css-vars-from-theme($bootstrap, 'ig-dropdown'); } diff --git a/src/components/dropdown/themes/dark/dropdown.fluent.scss b/src/components/dropdown/themes/dark/dropdown.fluent.scss index 23b51e78d..1d605db1e 100644 --- a/src/components/dropdown/themes/dark/dropdown.fluent.scss +++ b/src/components/dropdown/themes/dark/dropdown.fluent.scss @@ -1,9 +1,6 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-dropdown { - @include css-vars-from-theme($fluent, 'ig-dropdown'); - } +:host { + @include css-vars-from-theme($fluent, 'ig-dropdown'); } diff --git a/src/components/dropdown/themes/dark/dropdown.indigo.scss b/src/components/dropdown/themes/dark/dropdown.indigo.scss index 3cc0858c8..89dab2fb0 100644 --- a/src/components/dropdown/themes/dark/dropdown.indigo.scss +++ b/src/components/dropdown/themes/dark/dropdown.indigo.scss @@ -1,9 +1,6 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-dropdown { - @include css-vars-from-theme($indigo, 'ig-dropdown'); - } +:host { + @include css-vars-from-theme($indigo, 'ig-dropdown'); } diff --git a/src/components/dropdown/themes/dark/dropdown.material.scss b/src/components/dropdown/themes/dark/dropdown.material.scss index 251c328e4..0c5da1926 100644 --- a/src/components/dropdown/themes/dark/dropdown.material.scss +++ b/src/components/dropdown/themes/dark/dropdown.material.scss @@ -1,9 +1,6 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-dropdown { - @include css-vars-from-theme($material, 'ig-dropdown'); - } +:host { + @include css-vars-from-theme($material, 'ig-dropdown'); } diff --git a/src/components/dropdown/themes/light/group/dropdown-group.base.scss b/src/components/dropdown/themes/dropdown-group.base.scss similarity index 92% rename from src/components/dropdown/themes/light/group/dropdown-group.base.scss rename to src/components/dropdown/themes/dropdown-group.base.scss index 84b6293f2..b300d64e8 100644 --- a/src/components/dropdown/themes/light/group/dropdown-group.base.scss +++ b/src/components/dropdown/themes/dropdown-group.base.scss @@ -1,5 +1,5 @@ @use 'styles/common/component'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; :host { pointer-events: auto; diff --git a/src/components/dropdown/themes/light/header/dropdown-header.base.scss b/src/components/dropdown/themes/dropdown-header.base.scss similarity index 86% rename from src/components/dropdown/themes/light/header/dropdown-header.base.scss rename to src/components/dropdown/themes/dropdown-header.base.scss index d0a9fbbfe..e907d580e 100644 --- a/src/components/dropdown/themes/light/header/dropdown-header.base.scss +++ b/src/components/dropdown/themes/dropdown-header.base.scss @@ -1,5 +1,5 @@ @use 'styles/common/component'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; :host { @include type-style('overline'); diff --git a/src/components/dropdown/themes/light/item/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss similarity index 96% rename from src/components/dropdown/themes/light/item/dropdown-item.base.scss rename to src/components/dropdown/themes/dropdown-item.base.scss index f601444a2..2e690b486 100644 --- a/src/components/dropdown/themes/light/item/dropdown-item.base.scss +++ b/src/components/dropdown/themes/dropdown-item.base.scss @@ -1,4 +1,4 @@ -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; @use 'styles/common/component'; :host { diff --git a/src/components/dropdown/themes/light/dropdown.base.scss b/src/components/dropdown/themes/dropdown.base.scss similarity index 100% rename from src/components/dropdown/themes/light/dropdown.base.scss rename to src/components/dropdown/themes/dropdown.base.scss diff --git a/src/components/dropdown/themes/group.ts b/src/components/dropdown/themes/group.ts new file mode 100644 index 000000000..59589a09b --- /dev/null +++ b/src/components/dropdown/themes/group.ts @@ -0,0 +1,45 @@ +import { css } from 'lit'; + +// Light Overrides +import { styles as bootstrapLight } from './light/group/dropdown-group.bootstrap.css.js'; +import { styles as fluentLight } from './light/group/dropdown-group.fluent.css.js'; +import { styles as indigoLight } from './light/group/dropdown-group.indigo.css.js'; +import { styles as materialLight } from './light/group/dropdown-group.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/group/dropdown-group.bootstrap.css.js'; +import { styles as fluent } from './shared/group/dropdown-group.fluent.css.js'; +import { styles as indigo } from './shared/group/dropdown-group.indigo.css.js'; +import { styles as material } from './shared/group/dropdown-group.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/themes/header.ts b/src/components/dropdown/themes/header.ts new file mode 100644 index 000000000..07c0d879d --- /dev/null +++ b/src/components/dropdown/themes/header.ts @@ -0,0 +1,45 @@ +import { css } from 'lit'; + +// Light Overrides +import { styles as bootstrapLight } from './light/header/dropdown-header.bootstrap.css.js'; +import { styles as fluentLight } from './light/header/dropdown-header.fluent.css.js'; +import { styles as indigoLight } from './light/header/dropdown-header.indigo.css.js'; +import { styles as materialLight } from './light/header/dropdown-header.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/header/dropdown-header.bootstrap.css.js'; +import { styles as fluent } from './shared/header/dropdown-header.fluent.css.js'; +import { styles as indigo } from './shared/header/dropdown-header.indigo.css.js'; +import { styles as material } from './shared/header/dropdown-header.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/themes/item.ts b/src/components/dropdown/themes/item.ts new file mode 100644 index 000000000..a2b195427 --- /dev/null +++ b/src/components/dropdown/themes/item.ts @@ -0,0 +1,45 @@ +import { css } from 'lit'; + +// Light Overrides +import { styles as bootstrapLight } from './light/item/dropdown-item.bootstrap.css.js'; +import { styles as fluentLight } from './light/item/dropdown-item.fluent.css.js'; +import { styles as indigoLight } from './light/item/dropdown-item.indigo.css.js'; +import { styles as materialLight } from './light/item/dropdown-item.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/item/dropdown-item.bootstrap.css.js'; +import { styles as fluent } from './shared/item/dropdown-item.fluent.css.js'; +import { styles as indigo } from './shared/item/dropdown-item.indigo.css.js'; +import { styles as material } from './shared/item/dropdown-item.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/dropdown/themes/light/_themes.scss b/src/components/dropdown/themes/light/_themes.scss index bfe49fcdd..dba584e2b 100644 --- a/src/components/dropdown/themes/light/_themes.scss +++ b/src/components/dropdown/themes/light/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/drop-down' as *; diff --git a/src/components/dropdown/themes/light/dropdown.bootstrap.scss b/src/components/dropdown/themes/light/dropdown.bootstrap.scss index decf76606..ea406bf37 100644 --- a/src/components/dropdown/themes/light/dropdown.bootstrap.scss +++ b/src/components/dropdown/themes/light/dropdown.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,10 +6,3 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); } - -[part='base'] { - background: var-get($theme, 'background-color'); - border-radius: var-get($theme, 'border-radius'); - padding: rem(8px) 0; - border: rem(1px) solid var-get($theme, 'border-color'); -} diff --git a/src/components/dropdown/themes/light/dropdown.fluent.scss b/src/components/dropdown/themes/light/dropdown.fluent.scss index 7b4e84290..80d7dfb06 100644 --- a/src/components/dropdown/themes/light/dropdown.fluent.scss +++ b/src/components/dropdown/themes/light/dropdown.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,9 +6,3 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); } - -[part='base'] { - background: var-get($theme, 'background-color'); - border-radius: var-get($theme, 'border-radius'); - box-shadow: var(--ig-elevation-4); -} diff --git a/src/components/dropdown/themes/light/dropdown.indigo.scss b/src/components/dropdown/themes/light/dropdown.indigo.scss index b8d731630..ca7529192 100644 --- a/src/components/dropdown/themes/light/dropdown.indigo.scss +++ b/src/components/dropdown/themes/light/dropdown.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,9 +6,3 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); } - -[part='base'] { - background: var-get($theme, 'background-color'); - border-radius: var-get($theme, 'border-radius'); - box-shadow: var(--ig-elevation-3); -} diff --git a/src/components/dropdown/themes/light/dropdown.material.scss b/src/components/dropdown/themes/light/dropdown.material.scss index deb539dfe..4827740c4 100644 --- a/src/components/dropdown/themes/light/dropdown.material.scss +++ b/src/components/dropdown/themes/light/dropdown.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,10 +6,3 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); } - -[part='base'] { - background: var-get($theme, 'background-color'); - border-radius: var-get($theme, 'border-radius'); - box-shadow: var(--ig-elevation-8); - padding: rem(8px) 0; -} diff --git a/src/components/dropdown/themes/light/group/dropdown-group.bootstrap.scss b/src/components/dropdown/themes/light/group/dropdown-group.bootstrap.scss index a247c0d8a..c7f25823a 100644 --- a/src/components/dropdown/themes/light/group/dropdown-group.bootstrap.scss +++ b/src/components/dropdown/themes/light/group/dropdown-group.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - ::slotted([slot='label']) { - color: var-get($theme, 'header-text-color'); - } } diff --git a/src/components/dropdown/themes/light/group/dropdown-group.fluent.scss b/src/components/dropdown/themes/light/group/dropdown-group.fluent.scss index 214d73232..446ba5608 100644 --- a/src/components/dropdown/themes/light/group/dropdown-group.fluent.scss +++ b/src/components/dropdown/themes/light/group/dropdown-group.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,9 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - ::slotted([slot='label']) { - color: var-get($theme, 'header-text-color'); - padding: pad(rem(2px), rem(4px), (8px)); - } } diff --git a/src/components/dropdown/themes/light/group/dropdown-group.indigo.scss b/src/components/dropdown/themes/light/group/dropdown-group.indigo.scss index 688f231dd..80b10ac1b 100644 --- a/src/components/dropdown/themes/light/group/dropdown-group.indigo.scss +++ b/src/components/dropdown/themes/light/group/dropdown-group.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - ::slotted([slot='label']) { - color: var-get($theme, 'header-text-color'); - } } diff --git a/src/components/dropdown/themes/light/group/dropdown-group.material.scss b/src/components/dropdown/themes/light/group/dropdown-group.material.scss index cb7eca7a7..268ae7ec1 100644 --- a/src/components/dropdown/themes/light/group/dropdown-group.material.scss +++ b/src/components/dropdown/themes/light/group/dropdown-group.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - ::slotted([slot='label']) { - color: var-get($theme, 'header-text-color'); - } } diff --git a/src/components/dropdown/themes/light/header/dropdown-header.bootstrap.scss b/src/components/dropdown/themes/light/header/dropdown-header.bootstrap.scss index e7825b59c..c7f25823a 100644 --- a/src/components/dropdown/themes/light/header/dropdown-header.bootstrap.scss +++ b/src/components/dropdown/themes/light/header/dropdown-header.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - color: var-get($theme, 'header-text-color'); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: pad-block(rem(2px), rem(4px), rem(8px)); } diff --git a/src/components/dropdown/themes/light/header/dropdown-header.fluent.scss b/src/components/dropdown/themes/light/header/dropdown-header.fluent.scss index 325f35248..446ba5608 100644 --- a/src/components/dropdown/themes/light/header/dropdown-header.fluent.scss +++ b/src/components/dropdown/themes/light/header/dropdown-header.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,7 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - color: var-get($theme, 'header-text-color'); - padding: pad(rem(2px), rem(4px), rem(8px)); } diff --git a/src/components/dropdown/themes/light/header/dropdown-header.indigo.scss b/src/components/dropdown/themes/light/header/dropdown-header.indigo.scss index d1dd04d4e..80b10ac1b 100644 --- a/src/components/dropdown/themes/light/header/dropdown-header.indigo.scss +++ b/src/components/dropdown/themes/light/header/dropdown-header.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - color: var-get($theme, 'header-text-color'); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: pad-block(rem(2px), rem(4px), rem(8px)); } diff --git a/src/components/dropdown/themes/light/header/dropdown-header.material.scss b/src/components/dropdown/themes/light/header/dropdown-header.material.scss index c02af26f7..268ae7ec1 100644 --- a/src/components/dropdown/themes/light/header/dropdown-header.material.scss +++ b/src/components/dropdown/themes/light/header/dropdown-header.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use '../themes' as *; @@ -6,8 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - color: var-get($theme, 'header-text-color'); - padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); - padding-block: pad-block(rem(2px), rem(4px), rem(8px)); } diff --git a/src/components/dropdown/themes/light/item/dropdown-item.bootstrap.scss b/src/components/dropdown/themes/light/item/dropdown-item.bootstrap.scss index aa28ccad7..c7f25823a 100644 --- a/src/components/dropdown/themes/light/item/dropdown-item.bootstrap.scss +++ b/src/components/dropdown/themes/light/item/dropdown-item.bootstrap.scss @@ -1,39 +1,8 @@ -@use 'sass:map'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; @use '../themes' as *; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - border-radius: var-get($theme, 'item-border-radius'); - color: var-get($theme, 'item-text-color'); -} - -:host([active]), -:host(:hover) { - background: var-get($theme, 'hover-item-background'); - color: var-get($theme, 'hover-item-text-color'); -} - -:host([active]) { - background: var-get($theme, 'focused-item-background'); - color: var-get($theme, 'focused-item-text-color'); -} - -:host([selected]) { - background: var-get($theme, 'selected-item-background'); - color: var-get($theme, 'selected-item-text-color'); -} - -:host([selected]:hover), -:host([selected][active]) { - background: var-get($theme, 'selected-hover-item-background'); - color: var-get($theme, 'selected-hover-item-text-color'); -} - -:host([disabled]) { - background: var-get($theme, 'disabled-item-background'); - color: var-get($theme, 'disabled-item-text-color'); } diff --git a/src/components/dropdown/themes/light/item/dropdown-item.fluent.scss b/src/components/dropdown/themes/light/item/dropdown-item.fluent.scss index 239ed7e78..446ba5608 100644 --- a/src/components/dropdown/themes/light/item/dropdown-item.fluent.scss +++ b/src/components/dropdown/themes/light/item/dropdown-item.fluent.scss @@ -1,40 +1,8 @@ -@use 'sass:map'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; @use '../themes' as *; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - border-radius: var-get($theme, 'item-border-radius'); - color: var-get($theme, 'item-text-color'); - padding: pad(rem(2px), rem(4px), rem(8px)); -} - -:host([active]), -:host(:hover) { - background: var-get($theme, 'hover-item-background'); - color: var-get($theme, 'hover-item-text-color'); -} - -:host([active]) { - background: var-get($theme, 'focused-item-background'); - color: var-get($theme, 'focused-item-text-color'); -} - -:host([selected]) { - background: var-get($theme, 'selected-item-background'); - color: var-get($theme, 'selected-item-text-color'); -} - -:host([selected]:hover), -:host([selected][active]) { - background: var-get($theme, 'selected-hover-item-background'); - color: var-get($theme, 'selected-hover-item-text-color'); -} - -:host([disabled]) { - background: var-get($theme, 'disabled-item-background'); - color: var-get($theme, 'disabled-item-text-color'); } diff --git a/src/components/dropdown/themes/light/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/light/item/dropdown-item.indigo.scss index e949e5286..80b10ac1b 100644 --- a/src/components/dropdown/themes/light/item/dropdown-item.indigo.scss +++ b/src/components/dropdown/themes/light/item/dropdown-item.indigo.scss @@ -1,39 +1,8 @@ -@use 'sass:map'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; @use '../themes' as *; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - border-radius: var-get($theme, 'item-border-radius'); - color: var-get($theme, 'item-text-color'); -} - -:host([active]), -:host(:hover) { - background: var-get($theme, 'hover-item-background'); - color: var-get($theme, 'hover-item-text-color'); -} - -:host([active]) { - background: var-get($theme, 'focused-item-background'); - color: var-get($theme, 'focused-item-text-color'); -} - -:host([selected]) { - background: var-get($theme, 'selected-item-background'); - color: var-get($theme, 'selected-item-text-color'); -} - -:host([selected]:hover), -:host([selected][active]) { - background: var-get($theme, 'selected-hover-item-background'); - color: var-get($theme, 'selected-hover-item-text-color'); -} - -:host([disabled]) { - background: var-get($theme, 'disabled-item-background'); - color: var-get($theme, 'disabled-item-text-color'); } diff --git a/src/components/dropdown/themes/light/item/dropdown-item.material.scss b/src/components/dropdown/themes/light/item/dropdown-item.material.scss index d69af15ca..268ae7ec1 100644 --- a/src/components/dropdown/themes/light/item/dropdown-item.material.scss +++ b/src/components/dropdown/themes/light/item/dropdown-item.material.scss @@ -1,41 +1,8 @@ -@use 'sass:map'; -@use 'styles/utilities/index' as *; +@use 'styles/utilities' as *; @use '../themes' as *; $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-dropdown'); - - border-radius: var-get($theme, 'item-border-radius'); - color: var-get($theme, 'item-text-color'); -} - -:host([active]), -:host(:hover) { - background: var-get($theme, 'hover-item-background'); - color: var-get($theme, 'hover-item-text-color'); -} - -:host([active]) { - background: var-get($theme, 'focused-item-background'); - color: var-get($theme, 'focused-item-text-color'); -} - -:host([selected]) { - background: var-get($theme, 'selected-item-background'); - color: var-get($theme, 'selected-item-text-color'); } - -:host([selected]:hover), -:host([selected][active]) { - background: var-get($theme, 'selected-hover-item-background'); - color: var-get($theme, 'selected-hover-item-text-color'); -} - -:host([disabled]) { - background: var-get($theme, 'disabled-item-background'); - color: var-get($theme, 'disabled-item-text-color'); -} - - diff --git a/src/components/dropdown/themes/shared/dropdown.bootstrap.scss b/src/components/dropdown/themes/shared/dropdown.bootstrap.scss new file mode 100644 index 000000000..6b5acf58d --- /dev/null +++ b/src/components/dropdown/themes/shared/dropdown.bootstrap.scss @@ -0,0 +1,11 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +[part='base'] { + background: var-get($theme, 'background-color'); + border-radius: var-get($theme, 'border-radius'); + padding: rem(8px) 0; + border: rem(1px) solid var-get($theme, 'border-color'); +} diff --git a/src/components/dropdown/themes/shared/dropdown.fluent.scss b/src/components/dropdown/themes/shared/dropdown.fluent.scss new file mode 100644 index 000000000..c90bbea71 --- /dev/null +++ b/src/components/dropdown/themes/shared/dropdown.fluent.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +[part='base'] { + background: var-get($theme, 'background-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var(--ig-elevation-4); +} diff --git a/src/components/dropdown/themes/shared/dropdown.indigo.scss b/src/components/dropdown/themes/shared/dropdown.indigo.scss new file mode 100644 index 000000000..2132ce052 --- /dev/null +++ b/src/components/dropdown/themes/shared/dropdown.indigo.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +[part='base'] { + background: var-get($theme, 'background-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var(--ig-elevation-3); +} diff --git a/src/components/dropdown/themes/shared/dropdown.material.scss b/src/components/dropdown/themes/shared/dropdown.material.scss new file mode 100644 index 000000000..e4dd1a600 --- /dev/null +++ b/src/components/dropdown/themes/shared/dropdown.material.scss @@ -0,0 +1,11 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +[part='base'] { + background: var-get($theme, 'background-color'); + border-radius: var-get($theme, 'border-radius'); + box-shadow: var(--ig-elevation-8); + padding: rem(8px) 0; +} diff --git a/src/components/dropdown/themes/shared/group/dropdown-group.bootstrap.scss b/src/components/dropdown/themes/shared/group/dropdown-group.bootstrap.scss new file mode 100644 index 000000000..7e6a52414 --- /dev/null +++ b/src/components/dropdown/themes/shared/group/dropdown-group.bootstrap.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $bootstrap; + +:host { + ::slotted([slot='label']) { + color: var-get($theme, 'header-text-color'); + } +} diff --git a/src/components/dropdown/themes/shared/group/dropdown-group.fluent.scss b/src/components/dropdown/themes/shared/group/dropdown-group.fluent.scss new file mode 100644 index 000000000..8f812babe --- /dev/null +++ b/src/components/dropdown/themes/shared/group/dropdown-group.fluent.scss @@ -0,0 +1,11 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + ::slotted([slot='label']) { + color: var-get($theme, 'header-text-color'); + padding: pad(rem(2px), rem(4px), (8px)); + } +} diff --git a/src/components/dropdown/themes/shared/group/dropdown-group.indigo.scss b/src/components/dropdown/themes/shared/group/dropdown-group.indigo.scss new file mode 100644 index 000000000..a79250960 --- /dev/null +++ b/src/components/dropdown/themes/shared/group/dropdown-group.indigo.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + ::slotted([slot='label']) { + color: var-get($theme, 'header-text-color'); + } +} diff --git a/src/components/dropdown/themes/shared/group/dropdown-group.material.scss b/src/components/dropdown/themes/shared/group/dropdown-group.material.scss new file mode 100644 index 000000000..54bf98681 --- /dev/null +++ b/src/components/dropdown/themes/shared/group/dropdown-group.material.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + ::slotted([slot='label']) { + color: var-get($theme, 'header-text-color'); + } +} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.bootstrap.scss b/src/components/dropdown/themes/shared/header/dropdown-header.bootstrap.scss new file mode 100644 index 000000000..f96ccb467 --- /dev/null +++ b/src/components/dropdown/themes/shared/header/dropdown-header.bootstrap.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $bootstrap; + +:host { + color: var-get($theme, 'header-text-color'); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: pad-block(rem(2px), rem(4px), rem(8px)); +} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss b/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss new file mode 100644 index 000000000..0a8369ced --- /dev/null +++ b/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + color: var-get($theme, 'header-text-color'); + padding: pad(rem(2px), rem(4px), rem(8px)); +} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss new file mode 100644 index 000000000..90350ec85 --- /dev/null +++ b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + color: var-get($theme, 'header-text-color'); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: pad-block(rem(2px), rem(4px), rem(8px)); +} diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.material.scss b/src/components/dropdown/themes/shared/header/dropdown-header.material.scss new file mode 100644 index 000000000..226a7f90f --- /dev/null +++ b/src/components/dropdown/themes/shared/header/dropdown-header.material.scss @@ -0,0 +1,10 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + color: var-get($theme, 'header-text-color'); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: pad-block(rem(2px), rem(4px), rem(8px)); +} diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.bootstrap.scss b/src/components/dropdown/themes/shared/item/dropdown-item.bootstrap.scss new file mode 100644 index 000000000..1d2960c06 --- /dev/null +++ b/src/components/dropdown/themes/shared/item/dropdown-item.bootstrap.scss @@ -0,0 +1,36 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $bootstrap; + +:host { + border-radius: var-get($theme, 'item-border-radius'); + color: var-get($theme, 'item-text-color'); +} + +:host([active]), +:host(:hover) { + background: var-get($theme, 'hover-item-background'); + color: var-get($theme, 'hover-item-text-color'); +} + +:host([active]) { + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); +} + +:host([selected]) { + background: var-get($theme, 'selected-item-background'); + color: var-get($theme, 'selected-item-text-color'); +} + +:host([selected]:hover), +:host([selected][active]) { + background: var-get($theme, 'selected-hover-item-background'); + color: var-get($theme, 'selected-hover-item-text-color'); +} + +:host([disabled]) { + background: var-get($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-item-text-color'); +} diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss new file mode 100644 index 000000000..53c5b208e --- /dev/null +++ b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss @@ -0,0 +1,37 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + border-radius: var-get($theme, 'item-border-radius'); + color: var-get($theme, 'item-text-color'); + padding: pad(rem(2px), rem(4px), rem(8px)); +} + +:host([active]), +:host(:hover) { + background: var-get($theme, 'hover-item-background'); + color: var-get($theme, 'hover-item-text-color'); +} + +:host([active]) { + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); +} + +:host([selected]) { + background: var-get($theme, 'selected-item-background'); + color: var-get($theme, 'selected-item-text-color'); +} + +:host([selected]:hover), +:host([selected][active]) { + background: var-get($theme, 'selected-hover-item-background'); + color: var-get($theme, 'selected-hover-item-text-color'); +} + +:host([disabled]) { + background: var-get($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-item-text-color'); +} diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss new file mode 100644 index 000000000..5bc785cbc --- /dev/null +++ b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss @@ -0,0 +1,36 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + border-radius: var-get($theme, 'item-border-radius'); + color: var-get($theme, 'item-text-color'); +} + +:host([active]), +:host(:hover) { + background: var-get($theme, 'hover-item-background'); + color: var-get($theme, 'hover-item-text-color'); +} + +:host([active]) { + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); +} + +:host([selected]) { + background: var-get($theme, 'selected-item-background'); + color: var-get($theme, 'selected-item-text-color'); +} + +:host([selected]:hover), +:host([selected][active]) { + background: var-get($theme, 'selected-hover-item-background'); + color: var-get($theme, 'selected-hover-item-text-color'); +} + +:host([disabled]) { + background: var-get($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-item-text-color'); +} diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.material.scss b/src/components/dropdown/themes/shared/item/dropdown-item.material.scss new file mode 100644 index 000000000..e91713a25 --- /dev/null +++ b/src/components/dropdown/themes/shared/item/dropdown-item.material.scss @@ -0,0 +1,36 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + border-radius: var-get($theme, 'item-border-radius'); + color: var-get($theme, 'item-text-color'); +} + +:host([active]), +:host(:hover) { + background: var-get($theme, 'hover-item-background'); + color: var-get($theme, 'hover-item-text-color'); +} + +:host([active]) { + background: var-get($theme, 'focused-item-background'); + color: var-get($theme, 'focused-item-text-color'); +} + +:host([selected]) { + background: var-get($theme, 'selected-item-background'); + color: var-get($theme, 'selected-item-text-color'); +} + +:host([selected]:hover), +:host([selected][active]) { + background: var-get($theme, 'selected-hover-item-background'); + color: var-get($theme, 'selected-hover-item-text-color'); +} + +:host([disabled]) { + background: var-get($theme, 'disabled-item-background'); + color: var-get($theme, 'disabled-item-text-color'); +} diff --git a/src/components/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel.ts index a3433044a..8763da665 100644 --- a/src/components/expansion-panel/expansion-panel.ts +++ b/src/components/expansion-panel/expansion-panel.ts @@ -1,11 +1,8 @@ import { LitElement, html } from 'lit'; import { property, query } from 'lit/decorators.js'; -import { styles } from './themes/light/expansion-panel.base.css.js'; -import { styles as bootstrap } from './themes/light/expansion-panel.bootstrap.css.js'; -import { styles as fluent } from './themes/light/expansion-panel.fluent.css.js'; -import { styles as indigo } from './themes/light/expansion-panel.indigo.css.js'; -import { styles as material } from './themes/light/expansion-panel.material.css.js'; +import { styles } from './themes/expansion-panel.base.css.js'; +import { all } from './themes/themes.js'; import { AnimationPlayer } from '../../animations/player.js'; import { growVerIn, growVerOut } from '../../animations/presets/grow/index.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -46,10 +43,7 @@ export interface IgcExpansionPanelComponentEventMap { * @csspart content - The expansion panel's content wrapper. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcExpansionPanelComponent extends EventEmitterMixin< IgcExpansionPanelComponentEventMap, Constructor diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss index 97ed1c90e..434261e9c 100644 --- a/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss +++ b/src/components/expansion-panel/themes/dark/expansion-panel.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-expansion-panel { - @include css-vars-from-theme($theme, 'igc-expansion-panel'); - } +:host { + @include css-vars-from-theme($theme, 'ig-expansion-panel'); } diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss index 550bd67ae..88cb84329 100644 --- a/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss +++ b/src/components/expansion-panel/themes/dark/expansion-panel.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-expansion-panel { - @include css-vars-from-theme($theme, 'igc-expansion-panel'); - } +:host { + @include css-vars-from-theme($theme, 'ig-expansion-panel'); } diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss index 804c48278..e81f64a17 100644 --- a/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss +++ b/src/components/expansion-panel/themes/dark/expansion-panel.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-expansion-panel { - @include css-vars-from-theme($theme, 'igc-expansion-panel'); - } +:host { + @include css-vars-from-theme($theme, 'ig-expansion-panel'); } diff --git a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss index 03e63c66d..ea7b6b33f 100644 --- a/src/components/expansion-panel/themes/dark/expansion-panel.material.scss +++ b/src/components/expansion-panel/themes/dark/expansion-panel.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-expansion-panel { - @include css-vars-from-theme($theme, 'igc-expansion-panel'); - } +:host { + @include css-vars-from-theme($theme, 'ig-expansion-panel'); } diff --git a/src/components/expansion-panel/themes/light/expansion-panel.base.scss b/src/components/expansion-panel/themes/expansion-panel.base.scss similarity index 98% rename from src/components/expansion-panel/themes/light/expansion-panel.base.scss rename to src/components/expansion-panel/themes/expansion-panel.base.scss index 2d1f30b41..d1c883ef4 100644 --- a/src/components/expansion-panel/themes/light/expansion-panel.base.scss +++ b/src/components/expansion-panel/themes/expansion-panel.base.scss @@ -1,6 +1,5 @@ @use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; :host { --lines-clamped: 1; diff --git a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss index 0e80a278b..434261e9c 100644 --- a/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss +++ b/src/components/expansion-panel/themes/light/expansion-panel.bootstrap.scss @@ -5,45 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-expansion-panel'); - - color: var-get($theme, 'body-color'); - background: var-get($theme, 'body-background'); - border-radius: var-get($theme, 'border-radius'); -} - -:host([open]) [part~='content'] { - @include type-style('body-1'); -} - -[part='header'] { - background: var-get($theme, 'header-background'); - - &:focus, - &:active { - background: var-get($theme, 'header-focus-background'); - } -} - -[part='title'] { - color: var-get($theme, 'header-title-color'); -} - -[part='subtitle'] { - color: var-get($theme, 'header-description-color'); - - &::slotted(*) { - @include type-style('body-2'); - } -} - -[part~='indicator'] { - color: var-get($theme, 'header-icon-color'); -} - -:host([disabled]) { - [part='title'], - [part='subtitle'], - [part~='indicator'] { - color: var-get($theme, 'disabled-color'); - } } diff --git a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss index b4254ba65..88cb84329 100644 --- a/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss +++ b/src/components/expansion-panel/themes/light/expansion-panel.fluent.scss @@ -5,49 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-expansion-panel'); - - color: var-get($theme, 'body-color'); - background: var-get($theme, 'body-background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part='header'] { - background: var-get($theme, 'header-background'); - - &:focus, - &:active { - background: var-get($theme, 'header-focus-background'); - } -} - -[part~='indicator'] { - color: var-get($theme, 'header-icon-color'); -} - -[part='title'] { - color: var-get($theme, 'header-title-color'); - - &::slotted(*) { - @include type-style('subtitle-1'); - } -} - -[part='subtitle'] { - color: var-get($theme, 'header-description-color'); - - &::slotted(*) { - @include type-style('body-2'); - } -} - -:host([open]) [part~='content'] { - @include type-style('caption'); -} - -:host([disabled]) { - [part~='indicator'], - [part='title'], - [part='subtitle'] { - color: var-get($theme, 'disabled-color'); - } } diff --git a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss index 099686cf9..e81f64a17 100644 --- a/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss +++ b/src/components/expansion-panel/themes/light/expansion-panel.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,41 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-expansion-panel'); - - color: var-get($theme, 'body-color'); - background: var-get($theme, 'body-background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part='header'] { - background: var-get($theme, 'header-background'); - - &:focus, - &:active { - background: var-get($theme, 'header-focus-background'); - } -} - -[part~='indicator'] { - color: var-get($theme, 'header-icon-color'); -} - -[part='title'] { - color: var-get($theme, 'header-title-color'); -} - -[part='subtitle'] { - color: var-get($theme, 'header-description-color'); -} - -:host([open]) [part~='content'] { - @include type-style('body-1'); -} - -:host([disabled]) { - [part~='indicator'], - [part='title'], - [part='subtitle'] { - color: var-get($theme, 'disabled-color'); - } } diff --git a/src/components/expansion-panel/themes/light/expansion-panel.material.scss b/src/components/expansion-panel/themes/light/expansion-panel.material.scss index 9933d38ee..ea7b6b33f 100644 --- a/src/components/expansion-panel/themes/light/expansion-panel.material.scss +++ b/src/components/expansion-panel/themes/light/expansion-panel.material.scss @@ -5,37 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-expansion-panel'); - - color: var-get($theme, 'body-color'); - background: var-get($theme, 'body-background'); - border-radius: var-get($theme, 'border-radius'); -} - -[part='header'] { - background: var-get($theme, 'header-background'); - - &:focus, - &:active { - background: var-get($theme, 'header-focus-background'); - } -} - -[part='title'] { - color: var-get($theme, 'header-title-color'); -} - -[part='subtitle'] { - color: var-get($theme, 'header-description-color'); -} - -[part~='indicator'] { - color: var-get($theme, 'header-icon-color'); -} - -:host([disabled]) { - [part='title'], - [part='subtitle'], - [part~='indicator'] { - color: var-get($theme, 'disabled-color'); - } } diff --git a/src/components/expansion-panel/themes/shared/expansion-panel.bootstrap.scss b/src/components/expansion-panel/themes/shared/expansion-panel.bootstrap.scss new file mode 100644 index 000000000..07504d5fb --- /dev/null +++ b/src/components/expansion-panel/themes/shared/expansion-panel.bootstrap.scss @@ -0,0 +1,47 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); + border-radius: var-get($theme, 'border-radius'); +} + +:host([open]) [part~='content'] { + @include type-style('body-1'); +} + +[part='header'] { + background: var-get($theme, 'header-background'); + + &:focus, + &:active { + background: var-get($theme, 'header-focus-background'); + } +} + +[part='title'] { + color: var-get($theme, 'header-title-color'); +} + +[part='subtitle'] { + color: var-get($theme, 'header-description-color'); + + &::slotted(*) { + @include type-style('body-2'); + } +} + +[part~='indicator'] { + color: var-get($theme, 'header-icon-color'); +} + +:host([disabled]) { + [part='title'], + [part='subtitle'], + [part~='indicator'] { + color: var-get($theme, 'disabled-color'); + } +} diff --git a/src/components/expansion-panel/themes/shared/expansion-panel.fluent.scss b/src/components/expansion-panel/themes/shared/expansion-panel.fluent.scss new file mode 100644 index 000000000..93e560490 --- /dev/null +++ b/src/components/expansion-panel/themes/shared/expansion-panel.fluent.scss @@ -0,0 +1,51 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part='header'] { + background: var-get($theme, 'header-background'); + + &:focus, + &:active { + background: var-get($theme, 'header-focus-background'); + } +} + +[part~='indicator'] { + color: var-get($theme, 'header-icon-color'); +} + +[part='title'] { + color: var-get($theme, 'header-title-color'); + + &::slotted(*) { + @include type-style('subtitle-1'); + } +} + +[part='subtitle'] { + color: var-get($theme, 'header-description-color'); + + &::slotted(*) { + @include type-style('body-2'); + } +} + +:host([open]) [part~='content'] { + @include type-style('caption'); +} + +:host([disabled]) { + [part~='indicator'], + [part='title'], + [part='subtitle'] { + color: var-get($theme, 'disabled-color'); + } +} diff --git a/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss b/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss new file mode 100644 index 000000000..6539ad506 --- /dev/null +++ b/src/components/expansion-panel/themes/shared/expansion-panel.indigo.scss @@ -0,0 +1,43 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part='header'] { + background: var-get($theme, 'header-background'); + + &:focus, + &:active { + background: var-get($theme, 'header-focus-background'); + } +} + +[part~='indicator'] { + color: var-get($theme, 'header-icon-color'); +} + +[part='title'] { + color: var-get($theme, 'header-title-color'); +} + +[part='subtitle'] { + color: var-get($theme, 'header-description-color'); +} + +:host([open]) [part~='content'] { + @include type-style('body-1'); +} + +:host([disabled]) { + [part~='indicator'], + [part='title'], + [part='subtitle'] { + color: var-get($theme, 'disabled-color'); + } +} diff --git a/src/components/expansion-panel/themes/shared/expansion-panel.material.scss b/src/components/expansion-panel/themes/shared/expansion-panel.material.scss new file mode 100644 index 000000000..569713e6a --- /dev/null +++ b/src/components/expansion-panel/themes/shared/expansion-panel.material.scss @@ -0,0 +1,39 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + color: var-get($theme, 'body-color'); + background: var-get($theme, 'body-background'); + border-radius: var-get($theme, 'border-radius'); +} + +[part='header'] { + background: var-get($theme, 'header-background'); + + &:focus, + &:active { + background: var-get($theme, 'header-focus-background'); + } +} + +[part='title'] { + color: var-get($theme, 'header-title-color'); +} + +[part='subtitle'] { + color: var-get($theme, 'header-description-color'); +} + +[part~='indicator'] { + color: var-get($theme, 'header-icon-color'); +} + +:host([disabled]) { + [part='title'], + [part='subtitle'], + [part~='indicator'] { + color: var-get($theme, 'disabled-color'); + } +} diff --git a/src/components/expansion-panel/themes/themes.ts b/src/components/expansion-panel/themes/themes.ts new file mode 100644 index 000000000..9afc5a71f --- /dev/null +++ b/src/components/expansion-panel/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/expansion-panel.bootstrap.css.js'; +import { styles as fluentDark } from './dark/expansion-panel.fluent.css.js'; +import { styles as indigoDark } from './dark/expansion-panel.indigo.css.js'; +import { styles as materialDark } from './dark/expansion-panel.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/expansion-panel.bootstrap.css.js'; +import { styles as fluentLight } from './light/expansion-panel.fluent.css.js'; +import { styles as indigoLight } from './light/expansion-panel.indigo.css.js'; +import { styles as materialLight } from './light/expansion-panel.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/expansion-panel.bootstrap.css.js'; +import { styles as fluent } from './shared/expansion-panel.fluent.css.js'; +import { styles as indigo } from './shared/expansion-panel.indigo.css.js'; +import { styles as material } from './shared/expansion-panel.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/icon/dark/icon.bootstrap.scss b/src/components/icon/dark/icon.bootstrap.scss deleted file mode 100644 index 6fadde39a..000000000 --- a/src/components/icon/dark/icon.bootstrap.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - $theme: $bootstrap; - - igc-icon { - @include css-vars-from-theme($theme, 'ig-icon'); - } -} diff --git a/src/components/icon/dark/icon.fluent.scss b/src/components/icon/dark/icon.fluent.scss deleted file mode 100644 index 85f4187a2..000000000 --- a/src/components/icon/dark/icon.fluent.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - $theme: $fluent; - - igc-icon { - @include css-vars-from-theme($theme, 'ig-icon'); - } -} diff --git a/src/components/icon/dark/icon.indigo.scss b/src/components/icon/dark/icon.indigo.scss deleted file mode 100644 index c30a89116..000000000 --- a/src/components/icon/dark/icon.indigo.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - $theme: $indigo; - - igc-icon { - @include css-vars-from-theme($theme, 'ig-icon'); - } -} diff --git a/src/components/icon/dark/icon.material.scss b/src/components/icon/dark/icon.material.scss deleted file mode 100644 index 96c7bb5bd..000000000 --- a/src/components/icon/dark/icon.material.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - $theme: $material; - - igc-icon { - @include css-vars-from-theme($theme, 'ig-icon'); - } -} diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index 5195a7ae3..270c6ae8c 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -2,16 +2,13 @@ import { LitElement, html } from 'lit'; import { property, state } from 'lit/decorators.js'; import { unsafeSVG } from 'lit/directives/unsafe-svg.js'; -import { styles } from './icon.base.css.js'; import { IconsRegistry, registerIconFromText as registerIconFromText_impl, registerIcon as registerIcon_impl, } from './icon.registry.js'; -import { styles as bootstrap } from './light/icon.bootstrap.css.js'; -import { styles as fluent } from './light/icon.fluent.css.js'; -import { styles as indigo } from './light/icon.indigo.css.js'; -import { styles as material } from './light/icon.material.css.js'; +import { styles } from './themes/icon.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { alternateName } from '../common/decorators/alternateName.js'; import { blazorInclude } from '../common/decorators/blazorInclude.js'; @@ -19,10 +16,7 @@ import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; import { SizableMixin } from '../common/mixins/sizable.js'; -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) /** * Icon component * diff --git a/src/components/icon/dark/_themes.scss b/src/components/icon/themes/dark/_themes.scss similarity index 100% rename from src/components/icon/dark/_themes.scss rename to src/components/icon/themes/dark/_themes.scss diff --git a/src/components/icon/themes/dark/icon.bootstrap.scss b/src/components/icon/themes/dark/icon.bootstrap.scss new file mode 100644 index 000000000..36827465d --- /dev/null +++ b/src/components/icon/themes/dark/icon.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/dark/icon.fluent.scss b/src/components/icon/themes/dark/icon.fluent.scss new file mode 100644 index 000000000..e931f7471 --- /dev/null +++ b/src/components/icon/themes/dark/icon.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/dark/icon.indigo.scss b/src/components/icon/themes/dark/icon.indigo.scss new file mode 100644 index 000000000..0f71e5849 --- /dev/null +++ b/src/components/icon/themes/dark/icon.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/dark/icon.material.scss b/src/components/icon/themes/dark/icon.material.scss new file mode 100644 index 000000000..3cd5edcd6 --- /dev/null +++ b/src/components/icon/themes/dark/icon.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/icon.base.scss b/src/components/icon/themes/icon.base.scss similarity index 86% rename from src/components/icon/icon.base.scss rename to src/components/icon/themes/icon.base.scss index d135c8c96..c4fbca18e 100644 --- a/src/components/icon/icon.base.scss +++ b/src/components/icon/themes/icon.base.scss @@ -1,5 +1,5 @@ -@use '../../styles/common/component'; -@use '../../styles/utilities' as *; +@use 'styles/common/component'; +@use 'styles/utilities' as *; :host { display: inline-flex; diff --git a/src/components/icon/light/_themes.scss b/src/components/icon/themes/light/_themes.scss similarity index 100% rename from src/components/icon/light/_themes.scss rename to src/components/icon/themes/light/_themes.scss diff --git a/src/components/icon/themes/light/icon.bootstrap.scss b/src/components/icon/themes/light/icon.bootstrap.scss new file mode 100644 index 000000000..36827465d --- /dev/null +++ b/src/components/icon/themes/light/icon.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/light/icon.fluent.scss b/src/components/icon/themes/light/icon.fluent.scss new file mode 100644 index 000000000..e931f7471 --- /dev/null +++ b/src/components/icon/themes/light/icon.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/light/icon.indigo.scss b/src/components/icon/themes/light/icon.indigo.scss new file mode 100644 index 000000000..0f71e5849 --- /dev/null +++ b/src/components/icon/themes/light/icon.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/themes/light/icon.material.scss b/src/components/icon/themes/light/icon.material.scss new file mode 100644 index 000000000..3cd5edcd6 --- /dev/null +++ b/src/components/icon/themes/light/icon.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-icon'); +} diff --git a/src/components/icon/light/icon.bootstrap.scss b/src/components/icon/themes/shared/icon.bootstrap.scss similarity index 60% rename from src/components/icon/light/icon.bootstrap.scss rename to src/components/icon/themes/shared/icon.bootstrap.scss index bade95f21..ca3317f0f 100644 --- a/src/components/icon/light/icon.bootstrap.scss +++ b/src/components/icon/themes/shared/icon.bootstrap.scss @@ -1,13 +1,9 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-icon'); - color: var-get($theme, 'color'); } diff --git a/src/components/icon/light/icon.fluent.scss b/src/components/icon/themes/shared/icon.fluent.scss similarity index 60% rename from src/components/icon/light/icon.fluent.scss rename to src/components/icon/themes/shared/icon.fluent.scss index 9fcc2b46a..b71eafa17 100644 --- a/src/components/icon/light/icon.fluent.scss +++ b/src/components/icon/themes/shared/icon.fluent.scss @@ -1,13 +1,9 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../light/themes' as *; $theme: $fluent; :host { - @include css-vars-from-theme($theme, 'ig-icon'); - color: var-get($theme, 'color'); } diff --git a/src/components/icon/light/icon.indigo.scss b/src/components/icon/themes/shared/icon.indigo.scss similarity index 60% rename from src/components/icon/light/icon.indigo.scss rename to src/components/icon/themes/shared/icon.indigo.scss index 9f03b442d..5d79f9375 100644 --- a/src/components/icon/light/icon.indigo.scss +++ b/src/components/icon/themes/shared/icon.indigo.scss @@ -1,13 +1,9 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../light/themes' as *; $theme: $indigo; :host { - @include css-vars-from-theme($theme, 'ig-icon'); - color: var-get($theme, 'color'); } diff --git a/src/components/icon/light/icon.material.scss b/src/components/icon/themes/shared/icon.material.scss similarity index 60% rename from src/components/icon/light/icon.material.scss rename to src/components/icon/themes/shared/icon.material.scss index 8aa6ef205..a01972732 100644 --- a/src/components/icon/light/icon.material.scss +++ b/src/components/icon/themes/shared/icon.material.scss @@ -1,13 +1,9 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-icon'); - color: var-get($theme, 'color'); } diff --git a/src/components/icon/themes/themes.ts b/src/components/icon/themes/themes.ts new file mode 100644 index 000000000..dda9814b4 --- /dev/null +++ b/src/components/icon/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/icon.bootstrap.css.js'; +import { styles as fluentDark } from './dark/icon.fluent.css.js'; +import { styles as indigoDark } from './dark/icon.indigo.css.js'; +import { styles as materialDark } from './dark/icon.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/icon.bootstrap.css.js'; +import { styles as fluentLight } from './light/icon.fluent.css.js'; +import { styles as indigoLight } from './light/icon.indigo.css.js'; +import { styles as materialLight } from './light/icon.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/icon.bootstrap.css.js'; +import { styles as fluent } from './shared/icon.fluent.css.js'; +import { styles as indigo } from './shared/icon.indigo.css.js'; +import { styles as material } from './shared/icon.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts index 3f5283fb4..1d4656e73 100644 --- a/src/components/input/input-base.ts +++ b/src/components/input/input-base.ts @@ -1,11 +1,8 @@ import { LitElement, TemplateResult, html, nothing } from 'lit'; import { property, query, queryAssignedElements } from 'lit/decorators.js'; -import { styles } from './themes/light/input.base.css.js'; -import { styles as bootstrap } from './themes/light/input.bootstrap.css.js'; -import { styles as fluent } from './themes/light/input.fluent.css.js'; -import { styles as indigo } from './themes/light/input.indigo.css.js'; -import { styles as material } from './themes/light/input.material.css.js'; +import { styles } from './themes/input.base.css.js'; +import { all } from './themes/themes.js'; import { themeSymbol, themes } from '../../theming/theming-decorator.js'; import type { Theme } from '../../theming/types.js'; import { alternateName } from '../common/decorators/alternateName.js'; @@ -26,13 +23,7 @@ export interface IgcInputEventMap { igcBlur: CustomEvent; } -@themes( - { - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, - }, - true -) +@themes(all, true) @blazorDeepImport export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin( SizableMixin( diff --git a/src/components/input/themes/dark/input.bootstrap.scss b/src/components/input/themes/dark/input.bootstrap.scss new file mode 100644 index 000000000..9ff2c10a7 --- /dev/null +++ b/src/components/input/themes/dark/input.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-input'); +} diff --git a/src/components/input/themes/dark/input.dark.bootstrap.scss b/src/components/input/themes/dark/input.dark.bootstrap.scss deleted file mode 100644 index 513434866..000000000 --- a/src/components/input/themes/dark/input.dark.bootstrap.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-input { - @include css-vars-from-theme($theme, 'ig-input'); - } - - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } - - igc-select::part(input) { - @include css-vars-from-theme($theme, ig-select); - } - - igc-combo::part(input) { - @include css-vars-from-theme($theme, ig-combo); - } -} diff --git a/src/components/input/themes/dark/input.dark.fluent.scss b/src/components/input/themes/dark/input.dark.fluent.scss deleted file mode 100644 index 46de8efff..000000000 --- a/src/components/input/themes/dark/input.dark.fluent.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $fluent; - -@mixin theme() { - igc-input { - @include css-vars-from-theme($theme, 'ig-input'); - } - - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } - - igc-select::part(input) { - @include css-vars-from-theme($theme, ig-select); - } - - igc-combo::part(input) { - @include css-vars-from-theme($theme, ig-combo); - } -} diff --git a/src/components/input/themes/dark/input.dark.indigo.scss b/src/components/input/themes/dark/input.dark.indigo.scss deleted file mode 100644 index 022e6983b..000000000 --- a/src/components/input/themes/dark/input.dark.indigo.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-input { - @include css-vars-from-theme($theme, 'ig-input'); - } - - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } - - igc-select::part(input) { - @include css-vars-from-theme($theme, ig-select); - } - - igc-combo::part(input) { - @include css-vars-from-theme($theme, ig-combo); - } -} diff --git a/src/components/input/themes/dark/input.dark.material.scss b/src/components/input/themes/dark/input.dark.material.scss deleted file mode 100644 index e45e91fb8..000000000 --- a/src/components/input/themes/dark/input.dark.material.scss +++ /dev/null @@ -1,23 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $material; - -@mixin theme() { - igc-input { - @include css-vars-from-theme($theme, 'ig-input'); - } - - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } - - igc-select::part(input) { - @include css-vars-from-theme($theme, ig-select); - } - - igc-combo::part(input) { - @include css-vars-from-theme($theme, ig-combo); - } -} diff --git a/src/components/input/themes/dark/input.fluent.scss b/src/components/input/themes/dark/input.fluent.scss new file mode 100644 index 000000000..d29a57193 --- /dev/null +++ b/src/components/input/themes/dark/input.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-input'); +} diff --git a/src/components/input/themes/dark/input.indigo.scss b/src/components/input/themes/dark/input.indigo.scss new file mode 100644 index 000000000..07b8814c5 --- /dev/null +++ b/src/components/input/themes/dark/input.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-input'); +} diff --git a/src/components/input/themes/dark/input.material.scss b/src/components/input/themes/dark/input.material.scss new file mode 100644 index 000000000..fadf32ab6 --- /dev/null +++ b/src/components/input/themes/dark/input.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-input'); +} diff --git a/src/components/input/themes/light/input.base.scss b/src/components/input/themes/input.base.scss similarity index 100% rename from src/components/input/themes/light/input.base.scss rename to src/components/input/themes/input.base.scss diff --git a/src/components/input/themes/light/input.bootstrap.scss b/src/components/input/themes/light/input.bootstrap.scss index 93154f777..9ff2c10a7 100644 --- a/src/components/input/themes/light/input.bootstrap.scss +++ b/src/components/input/themes/light/input.bootstrap.scss @@ -1,219 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use 'styles/common/component'; @use 'themes' as *; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-input'); - - --font: #{sizable(rem(14px), rem(16px), rem(20px))}; - --input-font: #{sizable(rem(16px), rem(16px), rem(20px))}; -} - -[part~='container'] { - border-radius: var-get($theme, 'border-border-radius'); - border-style: none; - grid-template-columns: auto 1fr auto; - - &::after { - display: none; - } -} - -[part~='input'] { - border-radius: var-get($theme, 'border-border-radius'); - font-size: var(--input-font); - padding-inline: pad-inline(8px, 12px, 16px); - padding-block: pad-block(4px, 6px, 8px); - color: var-get($theme, 'idle-text-color'); - background: transparent; - box-shadow: none; - z-index: 1; - border: 1px solid var-get($theme, 'border-color'); - transition: box-shadow .15s ease-out, border .15s ease-out; - grid-area: 1 / 2; - background-clip: padding-box; -} - -[part~='input'], -[part~='container'] { - height: var-get($theme, 'size'); -} - -[part*='input prefixed'] { - border-start-start-radius: 0; - border-end-start-radius: 0; -} - -[part*='input suffixed'] { - border-start-end-radius: 0; - border-end-end-radius: 0; -} - -[part*='input prefixed suffixed'] { - border-radius: 0; -} - -[part~='label'] { - line-height: rem(24px); - margin-bottom: rem(4px); - color: var-get($theme, 'idle-secondary-color'); - - &:empty { - display: none; - } -} - -[name='prefix']::slotted(*), -[name='suffix']::slotted(*) { - display: inline-flex; - align-items: center; - width: max-content; - height: 100%; - padding-inline: pad-inline(8px, 12px, 16px); -} - -[part='prefix'], -[part='suffix'] { - position: relative; - border-radius: none; - min-width: auto; - transition: box-shadow .15s ease-out, border .15s ease-out; - font-size: var(--font); - - ::slotted(*) { - color: inherit; - } -} - -[part='prefix'] { - border-start-start-radius: inherit; - border-end-start-radius: inherit; - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - grid-area: 1 / 1; - border: { - style: solid; - color: var-get($theme, 'border-color');; - inline: { - start-width: 1px; - end-width: 0; - }; - block: { - start-width: 1px; - end-width: 1px; - }; - } -} - -[part='suffix'] { - border-start-end-radius: inherit; - border-end-end-radius: inherit; - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - grid-area: 1 / 3; - border: { - style: solid; - color: var-get($theme, 'border-color'); - inline: { - start-width: 0; - end-width: 1px; - }; - block: { - start-width: 1px; - end-width: 1px; - }; - } -} - -[part='helper-text'] { - @include type-style('body-2'); - - margin-top: rem(4px); - color: var-get($theme, 'helper-text-color'); -} - -:host(:focus-within) { - [part='prefix'] { - color: var-get($theme, 'input-prefix-color--focused'); - background: var-get($theme, 'input-prefix-background--focused'); - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color--focused'); - background: var-get($theme, 'input-suffix-background--focused'); - } - - [part~='input'] { - color: var-get($theme, 'input-prefix-color--focused'); - border-color: var-get($theme, 'focused-border-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); - } -} - -[part~='filled'] { - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part~='input'] { - color: var-get($theme, 'input-prefix-color--filled'); - } -} - -:host([invalid]) { - [part='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -[part~='prefixed'] [part='prefix'], -[part~='suffixed'] [part='suffix'] { - ::slotted(*) { - color: inherit; - } -} - -:host(:not([disabled])[invalid]), -:host(:not([disabled])[invalid]:focus-within) { - [part~='input'] { - border-color: var-get($theme, 'error-secondary-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); - } -} - -:host(:disabled), -:host([disabled]) { - [part='prefix'], - [part='suffix'], - [part~='input'] { - color: var-get($theme, 'disabled-text-color'); - background: var-get($theme, 'border-disabled-background'); - border-block-color: var-get($theme, 'disabled-border-color'); - } - - [part='prefix'] { - border-inline-start-color: var-get($theme, 'disabled-border-color'); - } - - [part='suffix'] { - border-inline-end-color: var-get($theme, 'disabled-border-color'); - } - - [part~='input'] { - border-color: var-get($theme, 'disabled-border-color'); - } - - [part='helper-text'], - [part='label'] { - color: var-get($theme, 'disabled-text-color') - } - - [part~='input']::placeholder { - color: var-get($theme, 'disabled-placeholder-color'); - } } diff --git a/src/components/input/themes/light/input.fluent.scss b/src/components/input/themes/light/input.fluent.scss index 9e3405012..d29a57193 100644 --- a/src/components/input/themes/light/input.fluent.scss +++ b/src/components/input/themes/light/input.fluent.scss @@ -1,167 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $fluent; -$resting-border-width: rem(1px); -$focused-border-width: rem(2px); -$resting-height: calc(var-get($theme, 'size') - #{($resting-border-width * 2)}); -$focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)}); :host { @include css-vars-from-theme($theme, 'ig-input'); - - [part='prefix'], - [part='suffix'] { - font-size: rem(14px); - cursor: default; - - ::slotted(*) { - color: inherit; - } - } - - [name='prefix']::slotted(*), - [name='suffix']::slotted(*) { - display: inline-flex; - align-items: center; - width: max-content; - height: 100%; - padding-inline: pad-inline(8px, 12px, 16px); - } - - [part='prefix'] { - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - grid-area: 1 / 1; - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - grid-area: 1 / 3; - } - - [part='label'] { - font-size: rem(14px); - font-weight: 600; - color: var-get($theme, 'idle-secondary-color'); - } - - [part^='container'] { - height: var-get($theme, 'size'); - border-radius: var-get($theme, 'border-border-radius'); - border: #{$resting-border-width} solid var-get($theme, 'border-color'); - transition: none; - cursor: text; - grid-template-columns: auto 1fr auto; - overflow: hidden; - } - - [part~='input'] { - color: var-get($theme, 'idle-text-color'); - height: $resting-height; - background: initial; - font-size: rem(14px); - padding-inline: rem(8px); - max-height: 100%; - border: none; - grid-area: 1 / 2; - } - - [part='helper-text'] { - padding: 0; - margin-top: rem(5px); - color: var-get($theme, 'helper-text-color'); - } -} - -:host(:hover) { - [part^='container'] { - border-color: var-get($theme, 'hover-border-color'); - } -} - -[part~='filled'] { - [part='prefix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color--filled'); - background: var-get($theme, 'input-suffix-background--filled'); - } -} - -:host(:focus-within) { - [part='label'] { - color: color(gray, 800); - } - - [part^='container'] { - border-color: var-get($theme, 'focused-border-color'); - border-width: #{$focused-border-width}; - } - - [part~='input'] { - height: $focused-height; - } - - [part='prefix'] { - color: var-get($theme, 'input-prefix-color--focused'); - background: var-get($theme, 'input-prefix-background--focused'); - margin-inline-start: rem(-1px); - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color--focused'); - background: var-get($theme, 'input-suffix-background--focused'); - margin-inline-end: rem(-1px); - } - - [name='prefix']::slotted(*), - [name='suffix']::slotted(*) { - padding-block: pad-block(6px, 8px, 10px); - } -} - -:host([required]) { - [part='label']::after { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host([invalid]) { - [part^='container'] { - border-color: var-get($theme, 'error-secondary-color'); - } - - [part='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - [part^='container'] { - border-color: var-get($theme, 'disabled-border-color'); - } - - [part^='container'], - [part='prefix'], - [part='suffix'] { - background: var-get($theme, 'border-disabled-background'); - } - - [part='prefix'], - [part='suffix'], - [part='label'], - [part='label']::after, - [part='helper-text'], - [part~='input'], - [part~='input']::placeholder { - color: var-get($theme, 'disabled-text-color'); - } } diff --git a/src/components/input/themes/light/input.indigo.scss b/src/components/input/themes/light/input.indigo.scss index 53cf751df..07b8814c5 100644 --- a/src/components/input/themes/light/input.indigo.scss +++ b/src/components/input/themes/light/input.indigo.scss @@ -1,196 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $indigo; -$transition-duration: .25s; - -%suffix-preffix { - display: inline-flex; - align-items: center; - width: max-content; - height: calc(100% - #{rem(2px)}); - padding-inline: pad-inline(8px, 12px, 16px); -} :host { @include css-vars-from-theme($theme, 'ig-input'); - - [part='prefix'], - [part='suffix'] { - // transition-duration is needed here because of a bug in safari - // https://github.com/IgniteUI/igniteui-webcomponents/pull/881 - transition-duration: 0ms; - - ::slotted(*) { - height: 100%; - color: inherit; - transition-duration: 0ms; - } - } - - [part='prefix'] { - border-start-start-radius: var-get($theme, 'border-border-radius'); - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - grid-area: 1 / 1; - - ::slotted(*) { - @extend %suffix-preffix; - } - } - - [part='suffix'] { - border-start-end-radius: var-get($theme, 'border-border-radius'); - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - grid-area: 1 / 3; - - ::slotted(*) { - @extend %suffix-preffix; - } - } - - [part~='label'] { - color: var-get($theme, 'idle-secondary-color'); - font-size: rem(14px); - font-weight: 600; - line-height: 1; - } - - [part^='container'] { - border-radius: var-get($theme, 'box-border-radius'); - border-end-start-radius: 0; - border-end-end-radius: 0; - border-bottom: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); - transition: background $transition-duration ease-out; - grid-template-columns: auto 1fr auto; - height: var-get($theme, 'size'); - - &::after { - position: absolute; - content: ''; - width: 100%; - height: rem(2px); - left: 0; - right: 0; - bottom: -1px; - background: var-get($theme, 'focused-bottom-line-color'); - transform: scaleY(0); - transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1); - transform-origin: bottom center; - } - } - - [part~='input'] { - color: var-get($theme, 'idle-text-color'); - font-size: rem(16px); - background: initial; - padding-block: rem(8px); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - border: none; - grid-area: 1 / 2; - height: 100%; - } - - [part~='prefixed'] { - padding-inline-start: rem(4px); - } - - [part~='suffixed'] { - padding-inline-end: rem(4px); - } - - [part='helper-text'] { - margin-top: rem(6px); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - color: var-get($theme, 'helper-text-color'); - } -} - -:host(:focus-within), -:host(:hover) { - [part^='container'] { - background: var-get($theme, 'box-background-hover'); - } -} - -[part~='filled'] { - [part='prefix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color--filled'); - background: var-get($theme, 'input-suffix-background--filled'); - } - - [part~='input'] { - color: var-get($theme, 'filled-text-color'); - } -} - -:host(:focus-within) { - [part='prefix'], - [part='suffix'] { - // transition-duration is needed here because of a bug in safari - // https://github.com/IgniteUI/igniteui-webcomponents/pull/881 - transition-duration: $transition-duration; - } - - [part^='container'] { - &::after { - transform: scaleY(1); - } - } - - [part='prefix'] { - color: var-get($theme, 'input-prefix-color--focused'); - background: var-get($theme, 'input-prefix-background--focused'); - } - - [part='suffix'] { - color: var-get($theme, 'input-suffix-color--focused'); - background: var-get($theme, 'input-suffix-background--focused'); - } - - [part='label'] { - color: var-get($theme, 'focused-secondary-color'); - } -} - -:host([invalid]) { - [part^='container'] { - border-color: var-get($theme, 'error-secondary-color'); - - &::after { - background: var-get($theme, 'error-secondary-color'); - } - } - - [part='label'] { - color: var-get($theme, 'error-secondary-color'); - } - - [part='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - [part^='container'] { - border-color: var-get($theme, 'disabled-bottom-line-color'); - } - - [part='prefix'], - [part='suffix'], - [part='label'], - [part~='input'], - [part='helper-text'], - [part~='input']::placeholder { - color: var-get($theme, 'disabled-text-color'); - } } diff --git a/src/components/input/themes/light/input.material.scss b/src/components/input/themes/light/input.material.scss index 174418e72..fadf32ab6 100644 --- a/src/components/input/themes/light/input.material.scss +++ b/src/components/input/themes/light/input.material.scss @@ -1,523 +1,8 @@ -@use 'sass:map'; -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $material; -$idle-border-width: rem(1px) !default; -$active-border-width: rem(2px) !default; -$fs: rem(16px) !default; - -%label { - --label-position: #{sizable(18px, 22px, 26px)}; - - transform: translateY(calc(var(--label-position) * -1)); - font-size: rem(12px); -} - -%floated-styles { - border-top: $idle-border-width solid transparent; -} - -%suffix-preffix { - display: inline-flex; - align-items: center; - width: max-content; - height: 100%; - padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); -} :host { @include css-vars-from-theme($theme, 'ig-input'); - - input:placeholder-shown + [part='notch'] { - @extend %floated-styles; - } - - input::placeholder { - color: var-get($theme, 'placeholder-color'); - } -} - -[part='prefix'] { - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); -} - -[part='suffix'] { - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); -} - -[part='prefix'], -[part='suffix'] { - ::slotted(*) { - color: inherit; - } -} - -input:placeholder-shown + [part='notch'] [part='label'], -[part~='filled'] + [part='notch'] [part='label'] { - @extend %label; -} - -[part~='input'] { - color: var-get($theme, 'filled-text-color'); - background: transparent; - padding: 0 rem(4px); - font-size: rem(16px); - grid-area: 1 / 2 / span 1 / span 2; -} - -[part='label'] { - color: var-get($theme, 'idle-secondary-color'); - transition: - transform 150ms cubic-bezier(.4, 0, .2, 1), - color 150ms cubic-bezier(.4, 0, .2, 1), - font-size 150ms cubic-bezier(.4, 0, .2, 1); - line-height: 1; - text-overflow: ellipsis; - overflow: hidden; - will-change: font-size, color, transform; -} - -[part~='filled'] { - [part~='prefix'] { - background: var-get($theme, 'input-prefix-background--filled'); - color: var-get($theme, 'input-prefix-color--filled'); - } - - [part~='suffix'] { - background: var-get($theme, 'input-suffix-background--filled'); - color: var-get($theme, 'input-suffix-color--filled'); - } -} - -[part^='container'] { - grid-template-columns: auto auto 1fr auto; -} - -[part~='input'], -[part^='container'] { - height: var-get($theme, 'size'); -} - -[part='start'] { - border-start-start-radius: var-get($theme, 'border-border-radius'); - justify-content: flex-start; - grid-area: 1 / 1; - - > [part='prefix'] { - ::slotted(*) { - @extend %suffix-preffix; - } - } -} - -[part='notch'] { - display: flex; - align-items: center; - width: auto; - min-width: 0; - height: 100%; - grid-area: 1 / 2; - padding: 0 rem(4px); - overflow: visible; - - &:empty { - display: none; - } -} - -[part='filler'] { - grid-area: 1 / 3; -} - -[part='end'] { - border-start-end-radius: var-get($theme, 'border-border-radius'); - justify-content: flex-end; - grid-area: 1 / 4; - - > [part='suffix'] { - ::slotted(*) { - @extend %suffix-preffix; - } - } -} - -[part='start'], -[part='end'] { - display: flex; - min-width: sizable(rem(10px), rem(12px), rem(14px)); - height: var(--size); - overflow: hidden; -} - -[part='helper-text'] { - @include type-style('caption'); - - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); - margin-top: rem(5px); - color: var-get($theme, 'helper-text-color'); -} - -:host(:focus-within) { - [part='label'] { - @extend %label; - - color: var-get($theme, 'focused-secondary-color'); - } - - [part~='prefix'] { - background: var-get($theme, 'input-prefix-background--focused'); - color: var-get($theme, 'input-prefix-color--focused'); - } - - [part~='suffix'] { - background: var-get($theme, 'input-suffix-background--focused'); - color: var-get($theme, 'input-suffix-color--focused'); - } -} - -:host([readonly]:not([outlined]):focus-within) { - :not([part~='filled']) { - input:not(:placeholder-shown) + [part='notch'] [part='label'] { - transform: translate(0); - font-size: initial; - } - } -} - -:host(:not([outlined])) { - [part='prefix'], - [part='suffix'] { - max-height: calc(100% - #{rem(1px)}); - } - - [part='label'] { - inset-inline-start: rem(2px); - } - - [part~='container'] { - background: var-get($theme, 'box-background'); - border-bottom: 1px solid var-get($theme, 'idle-bottom-line-color'); - - border: { - start: { - end-radius: var-get($theme, 'box-border-radius'); - start-radius: var-get($theme, 'box-border-radius'); - }; - } - - transition: border-bottom-width 150ms cubic-bezier(.4, 0, .2, 1); - - &::after { - position: absolute; - content: ''; - width: 100%; - height: rem(2px); - left: 0; - right: 0; - bottom: -1px; - background: var-get($theme, 'idle-bottom-line-color'); - transform: scaleX(0); - transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1); - } - } - - [part~='labelled'] [part~='input'] { - padding-top: rem(20px); - padding-bottom: rem(6px); - } - - input:placeholder-shown + [part='notch'] [part='label'], - [part~='filled'] + [part='notch'] [part='label'] { - transform: translateY(-106%); - } -} - -:host(:not([outlined]):hover) { - [part~='container'] { - background: var-get($theme, 'box-background-hover'); - border-bottom-color: var-get($theme, 'hover-bottom-line-color'); - - &::after { - background: var-get($theme, 'hover-bottom-line-color'); - } - } -} - -:host(:not([outlined]):focus-within) { - [part~='container'] { - background: var-get($theme, 'box-background-focus'); - border-bottom-color: var-get($theme, 'focused-bottom-line-color'); - - &::after { - background: var-get($theme, 'focused-bottom-line-color'); - transform: scaleX(1); - opacity: 1; - } - } - - [part='notch'] [part='label'] { - transform: translateY(-106%); - } -} - -:host(:not([outlined])[invalid]), -:host(:not([outlined])[invalid]:focus-within) { - [part~='container'] { - border-color: var-get($theme, 'error-secondary-color'); - - &::after { - background: var-get($theme, 'error-secondary-color'); - } - } -} - -:host(:not([outlined])[disabled]), -:host(:not([outlined]):disabled) { - [part~='container'] { - background: var-get($theme, 'box-disabled-background'); - border-color: var-get($theme, 'disabled-border-color'); - border-bottom-style: dashed; - } -} - -:host([outlined]) { - [part^='container'] { - border-radius: var-get($theme, 'border-border-radius'); - background: var-get($theme, 'border-background'); - } - - [part='start'] { - border: { - style: solid; - color: var-get($theme, 'border-color'); - inline: { - start-width: $idle-border-width; - end-width: 0; - }; - block: { - start-width: $idle-border-width; - end-width: $idle-border-width; - }; - start: { - start-radius: var-get($theme, 'border-border-radius'); - }; - end: { - start-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - [part='notch'] { - border: { - width: $idle-border-width; - style: solid; - color: var-get($theme, 'border-color'); - left: none; - right: none; - } - } - - [part='filler'] { - border: { - width: $idle-border-width; - style: solid; - color: var-get($theme, 'border-color'); - left: none; - right: none; - } - } - - [part='end'] { - border: { - style: solid; - color: var-get($theme, 'border-color'); - inline: { - start-width: 0; - end-width: $idle-border-width; - }; - block: { - start-width: $idle-border-width; - end-width: $idle-border-width; - }; - start: { - end-radius: var-get($theme, 'border-border-radius'); - }; - end: { - end-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - [part~='filled'] + [part='notch'] { - @extend %floated-styles; - } -} - -:host([readonly][outlined]:focus-within) { - :not([part~='filled']) { - input:not(:placeholder-shown) + [part='notch'] [part='label'] { - transform: translate(0); - font-size: initial; - } - - input:not(:placeholder-shown) + [part='notch'] { - border: { - width: $active-border-width; - color: var-get($theme, 'focused-border-color'); - } - } - } -} - -:host([outlined]:focus-within) { - [part='label'] { - margin-block-start: calc(#{$active-border-width} / 2); - } - - [part='start'] { - border: { - color: var-get($theme, 'focused-border-color'); - inline: { - start-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - } - } - } - - [part='notch'] { - border: { - width: $active-border-width; - color: var-get($theme, 'focused-border-color'); - top: $idle-border-width solid transparent; - } - } - - [part='filler'] { - border: { - width: $active-border-width; - color: var-get($theme, 'focused-border-color'); - } - } - - [part='end'] { - border: { - color: var-get($theme, 'focused-border-color'); - inline: { - end-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - }; - } - } -} - -:host([outlined]:active), -:host([outlined]:focus), -:host([outlined]:focus-within) { - [part='suffix'] { - margin-inline-end: rem(-1px); - } - - [part='prefix'] { - margin-inline-start: rem(-1px); - } - - [part='suffix'], - [part='prefix'] { - ::slotted(*) { - padding-block: pad-block(10px, 12px, 14px); - } - } -} - -:host([outlined][invalid]), -:host([outlined][invalid]:focus-within) { - [part='start'], - [part='notch'], - [part='filler'], - [part='end'] { - border-color: var-get($theme, 'error-secondary-color'); - } - - input:placeholder-shown + [part='notch'], - [part~='filled'] + [part='notch'] { - @extend %floated-styles; - } -} - -:host([outlined][invalid]:focus-within) { - [part='notch'] { - border-top: $idle-border-width solid transparent; - } -} - -:host([outlined][invalid]:focus-within), -:host([readonly][outlined][invalid]:focus-within) { - input:not(:placeholder-shown) + [part='notch'] { - border: { - width: $active-border-width; - color: var-get($theme, 'error-secondary-color'); - top: $active-border-width solid var-get($theme, 'error-secondary-color'); - } - } -} - -:host([invalid]) { - [part='label'] { - color: var-get($theme, 'error-secondary-color'); - } - - [part='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled[outlined]), -:host([disabled][outlined]) { - [part='start'], - [part='filler'], - [part='notch'], - [part='end'] { - border-color: var-get($theme, 'disabled-border-color'); - } - - input:placeholder-shown + [part='notch'], - [part~='filled'] + [part='notch'] { - @extend %floated-styles; - } -} - -:host(:disabled), -:host([disabled]) { - [part~='input'], - [part='label'], - [part='prefix'], - [part='suffix'], - [part='helper-text'] { - color: var-get($theme, 'disabled-text-color'); - } - - [part='start'], - [part='filler'], - [part='notch'], - [part='end'] { - color: var-get($theme, 'disabled-text-color'); - } - - input::placeholder { - color: var-get($theme, 'disabled-text-color'); - } - - [part~='filled'] + [part='notch'] { - @extend %floated-styles; - } } diff --git a/src/components/input/themes/shared/input.bootstrap.scss b/src/components/input/themes/shared/input.bootstrap.scss new file mode 100644 index 000000000..cb3856f26 --- /dev/null +++ b/src/components/input/themes/shared/input.bootstrap.scss @@ -0,0 +1,215 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + --font: #{sizable(rem(14px), rem(16px), rem(20px))}; + --input-font: #{sizable(rem(16px), rem(16px), rem(20px))}; +} + +[part~='container'] { + border-radius: var-get($theme, 'border-border-radius'); + border-style: none; + grid-template-columns: auto 1fr auto; + + &::after { + display: none; + } +} + +[part~='input'] { + border-radius: var-get($theme, 'border-border-radius'); + font-size: var(--input-font); + padding-inline: pad-inline(8px, 12px, 16px); + padding-block: pad-block(4px, 6px, 8px); + color: var-get($theme, 'idle-text-color'); + background: transparent; + box-shadow: none; + z-index: 1; + border: 1px solid var-get($theme, 'border-color'); + transition: box-shadow .15s ease-out, border .15s ease-out; + grid-area: 1 / 2; + background-clip: padding-box; +} + +[part~='input'], +[part~='container'] { + height: var-get($theme, 'size'); +} + +[part*='input prefixed'] { + border-start-start-radius: 0; + border-end-start-radius: 0; +} + +[part*='input suffixed'] { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +[part*='input prefixed suffixed'] { + border-radius: 0; +} + +[part~='label'] { + line-height: rem(24px); + margin-bottom: rem(4px); + color: var-get($theme, 'idle-secondary-color'); + + &:empty { + display: none; + } +} + +[name='prefix']::slotted(*), +[name='suffix']::slotted(*) { + display: inline-flex; + align-items: center; + width: max-content; + height: 100%; + padding-inline: pad-inline(8px, 12px, 16px); +} + +[part='prefix'], +[part='suffix'] { + position: relative; + border-radius: none; + min-width: auto; + transition: box-shadow .15s ease-out, border .15s ease-out; + font-size: var(--font); + + ::slotted(*) { + color: inherit; + } +} + +[part='prefix'] { + border-start-start-radius: inherit; + border-end-start-radius: inherit; + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + grid-area: 1 / 1; + border: { + style: solid; + color: var-get($theme, 'border-color');; + inline: { + start-width: 1px; + end-width: 0; + }; + block: { + start-width: 1px; + end-width: 1px; + }; + } +} + +[part='suffix'] { + border-start-end-radius: inherit; + border-end-end-radius: inherit; + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + grid-area: 1 / 3; + border: { + style: solid; + color: var-get($theme, 'border-color'); + inline: { + start-width: 0; + end-width: 1px; + }; + block: { + start-width: 1px; + end-width: 1px; + }; + } +} + +[part='helper-text'] { + @include type-style('body-2'); + + margin-top: rem(4px); + color: var-get($theme, 'helper-text-color'); +} + +:host(:focus-within) { + [part='prefix'] { + color: var-get($theme, 'input-prefix-color--focused'); + background: var-get($theme, 'input-prefix-background--focused'); + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color--focused'); + background: var-get($theme, 'input-suffix-background--focused'); + } + + [part~='input'] { + color: var-get($theme, 'input-prefix-color--focused'); + border-color: var-get($theme, 'focused-border-color'); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); + } +} + +[part~='filled'] { + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part~='input'] { + color: var-get($theme, 'input-prefix-color--filled'); + } +} + +:host([invalid]) { + [part='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +[part~='prefixed'] [part='prefix'], +[part~='suffixed'] [part='suffix'] { + ::slotted(*) { + color: inherit; + } +} + +:host(:not([disabled])[invalid]), +:host(:not([disabled])[invalid]:focus-within) { + [part~='input'] { + border-color: var-get($theme, 'error-secondary-color'); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); + } +} + +:host(:disabled), +:host([disabled]) { + [part='prefix'], + [part='suffix'], + [part~='input'] { + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'border-disabled-background'); + border-block-color: var-get($theme, 'disabled-border-color'); + } + + [part='prefix'] { + border-inline-start-color: var-get($theme, 'disabled-border-color'); + } + + [part='suffix'] { + border-inline-end-color: var-get($theme, 'disabled-border-color'); + } + + [part~='input'] { + border-color: var-get($theme, 'disabled-border-color'); + } + + [part='helper-text'], + [part='label'] { + color: var-get($theme, 'disabled-text-color') + } + + [part~='input']::placeholder { + color: var-get($theme, 'disabled-placeholder-color'); + } +} diff --git a/src/components/input/themes/shared/input.fluent.scss b/src/components/input/themes/shared/input.fluent.scss new file mode 100644 index 000000000..6e3b3b32f --- /dev/null +++ b/src/components/input/themes/shared/input.fluent.scss @@ -0,0 +1,163 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; +$resting-border-width: rem(1px); +$focused-border-width: rem(2px); +$resting-height: calc(var-get($theme, 'size') - #{($resting-border-width * 2)}); +$focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)}); + +:host { + [part='prefix'], + [part='suffix'] { + font-size: rem(14px); + cursor: default; + + ::slotted(*) { + color: inherit; + } + } + + [name='prefix']::slotted(*), + [name='suffix']::slotted(*) { + display: inline-flex; + align-items: center; + width: max-content; + height: 100%; + padding-inline: pad-inline(8px, 12px, 16px); + } + + [part='prefix'] { + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + grid-area: 1 / 1; + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + grid-area: 1 / 3; + } + + [part='label'] { + font-size: rem(14px); + font-weight: 600; + color: var-get($theme, 'idle-secondary-color'); + } + + [part^='container'] { + height: var-get($theme, 'size'); + border-radius: var-get($theme, 'border-border-radius'); + border: #{$resting-border-width} solid var-get($theme, 'border-color'); + transition: none; + cursor: text; + grid-template-columns: auto 1fr auto; + overflow: hidden; + } + + [part~='input'] { + color: var-get($theme, 'idle-text-color'); + height: $resting-height; + background: initial; + font-size: rem(14px); + padding-inline: rem(8px); + max-height: 100%; + border: none; + grid-area: 1 / 2; + } + + [part='helper-text'] { + padding: 0; + margin-top: rem(5px); + color: var-get($theme, 'helper-text-color'); + } +} + +:host(:hover) { + [part^='container'] { + border-color: var-get($theme, 'hover-border-color'); + } +} + +[part~='filled'] { + [part='prefix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color--filled'); + background: var-get($theme, 'input-suffix-background--filled'); + } +} + +:host(:focus-within) { + [part='label'] { + color: color(gray, 800); + } + + [part^='container'] { + border-color: var-get($theme, 'focused-border-color'); + border-width: #{$focused-border-width}; + } + + [part~='input'] { + height: $focused-height; + } + + [part='prefix'] { + color: var-get($theme, 'input-prefix-color--focused'); + background: var-get($theme, 'input-prefix-background--focused'); + margin-inline-start: rem(-1px); + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color--focused'); + background: var-get($theme, 'input-suffix-background--focused'); + margin-inline-end: rem(-1px); + } + + [name='prefix']::slotted(*), + [name='suffix']::slotted(*) { + padding-block: pad-block(6px, 8px, 10px); + } +} + +:host([required]) { + [part='label']::after { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host([invalid]) { + [part^='container'] { + border-color: var-get($theme, 'error-secondary-color'); + } + + [part='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + [part^='container'] { + border-color: var-get($theme, 'disabled-border-color'); + } + + [part^='container'], + [part='prefix'], + [part='suffix'] { + background: var-get($theme, 'border-disabled-background'); + } + + [part='prefix'], + [part='suffix'], + [part='label'], + [part='label']::after, + [part='helper-text'], + [part~='input'], + [part~='input']::placeholder { + color: var-get($theme, 'disabled-text-color'); + } +} diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss new file mode 100644 index 000000000..367b2a59c --- /dev/null +++ b/src/components/input/themes/shared/input.indigo.scss @@ -0,0 +1,192 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; +$transition-duration: .25s; + +%suffix-preffix { + display: inline-flex; + align-items: center; + width: max-content; + height: calc(100% - #{rem(2px)}); + padding-inline: pad-inline(8px, 12px, 16px); +} + +:host { + [part='prefix'], + [part='suffix'] { + // transition-duration is needed here because of a bug in safari + // https://github.com/IgniteUI/igniteui-webcomponents/pull/881 + transition-duration: 0ms; + + ::slotted(*) { + height: 100%; + color: inherit; + transition-duration: 0ms; + } + } + + [part='prefix'] { + border-start-start-radius: var-get($theme, 'border-border-radius'); + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + grid-area: 1 / 1; + + ::slotted(*) { + @extend %suffix-preffix; + } + } + + [part='suffix'] { + border-start-end-radius: var-get($theme, 'border-border-radius'); + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + grid-area: 1 / 3; + + ::slotted(*) { + @extend %suffix-preffix; + } + } + + [part~='label'] { + color: var-get($theme, 'idle-secondary-color'); + font-size: rem(14px); + font-weight: 600; + line-height: 1; + } + + [part^='container'] { + border-radius: var-get($theme, 'box-border-radius'); + border-end-start-radius: 0; + border-end-end-radius: 0; + border-bottom: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); + transition: background $transition-duration ease-out; + grid-template-columns: auto 1fr auto; + height: var-get($theme, 'size'); + + &::after { + position: absolute; + content: ''; + width: 100%; + height: rem(2px); + left: 0; + right: 0; + bottom: -1px; + background: var-get($theme, 'focused-bottom-line-color'); + transform: scaleY(0); + transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1); + transform-origin: bottom center; + } + } + + [part~='input'] { + color: var-get($theme, 'idle-text-color'); + font-size: rem(16px); + background: initial; + padding-block: rem(8px); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + border: none; + grid-area: 1 / 2; + height: 100%; + } + + [part~='prefixed'] { + padding-inline-start: rem(4px); + } + + [part~='suffixed'] { + padding-inline-end: rem(4px); + } + + [part='helper-text'] { + margin-top: rem(6px); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + color: var-get($theme, 'helper-text-color'); + } +} + +:host(:focus-within), +:host(:hover) { + [part^='container'] { + background: var-get($theme, 'box-background-hover'); + } +} + +[part~='filled'] { + [part='prefix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color--filled'); + background: var-get($theme, 'input-suffix-background--filled'); + } + + [part~='input'] { + color: var-get($theme, 'filled-text-color'); + } +} + +:host(:focus-within) { + [part='prefix'], + [part='suffix'] { + // transition-duration is needed here because of a bug in safari + // https://github.com/IgniteUI/igniteui-webcomponents/pull/881 + transition-duration: $transition-duration; + } + + [part^='container'] { + &::after { + transform: scaleY(1); + } + } + + [part='prefix'] { + color: var-get($theme, 'input-prefix-color--focused'); + background: var-get($theme, 'input-prefix-background--focused'); + } + + [part='suffix'] { + color: var-get($theme, 'input-suffix-color--focused'); + background: var-get($theme, 'input-suffix-background--focused'); + } + + [part='label'] { + color: var-get($theme, 'focused-secondary-color'); + } +} + +:host([invalid]) { + [part^='container'] { + border-color: var-get($theme, 'error-secondary-color'); + + &::after { + background: var-get($theme, 'error-secondary-color'); + } + } + + [part='label'] { + color: var-get($theme, 'error-secondary-color'); + } + + [part='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + [part^='container'] { + border-color: var-get($theme, 'disabled-bottom-line-color'); + } + + [part='prefix'], + [part='suffix'], + [part='label'], + [part~='input'], + [part='helper-text'], + [part~='input']::placeholder { + color: var-get($theme, 'disabled-text-color'); + } +} diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss new file mode 100644 index 000000000..30448b4f7 --- /dev/null +++ b/src/components/input/themes/shared/input.material.scss @@ -0,0 +1,519 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; +$idle-border-width: rem(1px) !default; +$active-border-width: rem(2px) !default; +$fs: rem(16px) !default; + +%label { + --label-position: #{sizable(18px, 22px, 26px)}; + + transform: translateY(calc(var(--label-position) * -1)); + font-size: rem(12px); +} + +%floated-styles { + border-top: $idle-border-width solid transparent; +} + +%suffix-preffix { + display: inline-flex; + align-items: center; + width: max-content; + height: 100%; + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); +} + +:host { + input:placeholder-shown + [part='notch'] { + @extend %floated-styles; + } + + input::placeholder { + color: var-get($theme, 'placeholder-color'); + } +} + +[part='prefix'] { + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); +} + +[part='suffix'] { + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); +} + +[part='prefix'], +[part='suffix'] { + ::slotted(*) { + color: inherit; + } +} + +input:placeholder-shown + [part='notch'] [part='label'], +[part~='filled'] + [part='notch'] [part='label'] { + @extend %label; +} + +[part~='input'] { + color: var-get($theme, 'filled-text-color'); + background: transparent; + padding: 0 rem(4px); + font-size: rem(16px); + grid-area: 1 / 2 / span 1 / span 2; +} + +[part='label'] { + color: var-get($theme, 'idle-secondary-color'); + transition: + transform 150ms cubic-bezier(.4, 0, .2, 1), + color 150ms cubic-bezier(.4, 0, .2, 1), + font-size 150ms cubic-bezier(.4, 0, .2, 1); + line-height: 1; + text-overflow: ellipsis; + overflow: hidden; + will-change: font-size, color, transform; +} + +[part~='filled'] { + [part~='prefix'] { + background: var-get($theme, 'input-prefix-background--filled'); + color: var-get($theme, 'input-prefix-color--filled'); + } + + [part~='suffix'] { + background: var-get($theme, 'input-suffix-background--filled'); + color: var-get($theme, 'input-suffix-color--filled'); + } +} + +[part^='container'] { + grid-template-columns: auto auto 1fr auto; +} + +[part~='input'], +[part^='container'] { + height: var-get($theme, 'size'); +} + +[part='start'] { + border-start-start-radius: var-get($theme, 'border-border-radius'); + justify-content: flex-start; + grid-area: 1 / 1; + + > [part='prefix'] { + ::slotted(*) { + @extend %suffix-preffix; + } + } +} + +[part='notch'] { + display: flex; + align-items: center; + width: auto; + min-width: 0; + height: 100%; + grid-area: 1 / 2; + padding: 0 rem(4px); + overflow: visible; + + &:empty { + display: none; + } +} + +[part='filler'] { + grid-area: 1 / 3; +} + +[part='end'] { + border-start-end-radius: var-get($theme, 'border-border-radius'); + justify-content: flex-end; + grid-area: 1 / 4; + + > [part='suffix'] { + ::slotted(*) { + @extend %suffix-preffix; + } + } +} + +[part='start'], +[part='end'] { + display: flex; + min-width: sizable(rem(10px), rem(12px), rem(14px)); + height: var(--size); + overflow: hidden; +} + +[part='helper-text'] { + @include type-style('caption'); + + padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); + margin-top: rem(5px); + color: var-get($theme, 'helper-text-color'); +} + +:host(:focus-within) { + [part='label'] { + @extend %label; + + color: var-get($theme, 'focused-secondary-color'); + } + + [part~='prefix'] { + background: var-get($theme, 'input-prefix-background--focused'); + color: var-get($theme, 'input-prefix-color--focused'); + } + + [part~='suffix'] { + background: var-get($theme, 'input-suffix-background--focused'); + color: var-get($theme, 'input-suffix-color--focused'); + } +} + +:host([readonly]:not([outlined]):focus-within) { + :not([part~='filled']) { + input:not(:placeholder-shown) + [part='notch'] [part='label'] { + transform: translate(0); + font-size: initial; + } + } +} + +:host(:not([outlined])) { + [part='prefix'], + [part='suffix'] { + max-height: calc(100% - #{rem(1px)}); + } + + [part='label'] { + inset-inline-start: rem(2px); + } + + [part~='container'] { + background: var-get($theme, 'box-background'); + border-bottom: 1px solid var-get($theme, 'idle-bottom-line-color'); + + border: { + start: { + end-radius: var-get($theme, 'box-border-radius'); + start-radius: var-get($theme, 'box-border-radius'); + }; + } + + transition: border-bottom-width 150ms cubic-bezier(.4, 0, .2, 1); + + &::after { + position: absolute; + content: ''; + width: 100%; + height: rem(2px); + left: 0; + right: 0; + bottom: -1px; + background: var-get($theme, 'idle-bottom-line-color'); + transform: scaleX(0); + transition: transform 180ms cubic-bezier(.4, 0, .2, 1), opacity 180ms cubic-bezier(.4, 0, .2, 1); + } + } + + [part~='labelled'] [part~='input'] { + padding-top: rem(20px); + padding-bottom: rem(6px); + } + + input:placeholder-shown + [part='notch'] [part='label'], + [part~='filled'] + [part='notch'] [part='label'] { + transform: translateY(-106%); + } +} + +:host(:not([outlined]):hover) { + [part~='container'] { + background: var-get($theme, 'box-background-hover'); + border-bottom-color: var-get($theme, 'hover-bottom-line-color'); + + &::after { + background: var-get($theme, 'hover-bottom-line-color'); + } + } +} + +:host(:not([outlined]):focus-within) { + [part~='container'] { + background: var-get($theme, 'box-background-focus'); + border-bottom-color: var-get($theme, 'focused-bottom-line-color'); + + &::after { + background: var-get($theme, 'focused-bottom-line-color'); + transform: scaleX(1); + opacity: 1; + } + } + + [part='notch'] [part='label'] { + transform: translateY(-106%); + } +} + +:host(:not([outlined])[invalid]), +:host(:not([outlined])[invalid]:focus-within) { + [part~='container'] { + border-color: var-get($theme, 'error-secondary-color'); + + &::after { + background: var-get($theme, 'error-secondary-color'); + } + } +} + +:host(:not([outlined])[disabled]), +:host(:not([outlined]):disabled) { + [part~='container'] { + background: var-get($theme, 'box-disabled-background'); + border-color: var-get($theme, 'disabled-border-color'); + border-bottom-style: dashed; + } +} + +:host([outlined]) { + [part^='container'] { + border-radius: var-get($theme, 'border-border-radius'); + background: var-get($theme, 'border-background'); + } + + [part='start'] { + border: { + style: solid; + color: var-get($theme, 'border-color'); + inline: { + start-width: $idle-border-width; + end-width: 0; + }; + block: { + start-width: $idle-border-width; + end-width: $idle-border-width; + }; + start: { + start-radius: var-get($theme, 'border-border-radius'); + }; + end: { + start-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + [part='notch'] { + border: { + width: $idle-border-width; + style: solid; + color: var-get($theme, 'border-color'); + left: none; + right: none; + } + } + + [part='filler'] { + border: { + width: $idle-border-width; + style: solid; + color: var-get($theme, 'border-color'); + left: none; + right: none; + } + } + + [part='end'] { + border: { + style: solid; + color: var-get($theme, 'border-color'); + inline: { + start-width: 0; + end-width: $idle-border-width; + }; + block: { + start-width: $idle-border-width; + end-width: $idle-border-width; + }; + start: { + end-radius: var-get($theme, 'border-border-radius'); + }; + end: { + end-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + } +} + +:host([readonly][outlined]:focus-within) { + :not([part~='filled']) { + input:not(:placeholder-shown) + [part='notch'] [part='label'] { + transform: translate(0); + font-size: initial; + } + + input:not(:placeholder-shown) + [part='notch'] { + border: { + width: $active-border-width; + color: var-get($theme, 'focused-border-color'); + } + } + } +} + +:host([outlined]:focus-within) { + [part='label'] { + margin-block-start: calc(#{$active-border-width} / 2); + } + + [part='start'] { + border: { + color: var-get($theme, 'focused-border-color'); + inline: { + start-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + } + } + } + + [part='notch'] { + border: { + width: $active-border-width; + color: var-get($theme, 'focused-border-color'); + top: $idle-border-width solid transparent; + } + } + + [part='filler'] { + border: { + width: $active-border-width; + color: var-get($theme, 'focused-border-color'); + } + } + + [part='end'] { + border: { + color: var-get($theme, 'focused-border-color'); + inline: { + end-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + }; + } + } +} + +:host([outlined]:active), +:host([outlined]:focus), +:host([outlined]:focus-within) { + [part='suffix'] { + margin-inline-end: rem(-1px); + } + + [part='prefix'] { + margin-inline-start: rem(-1px); + } + + [part='suffix'], + [part='prefix'] { + ::slotted(*) { + padding-block: pad-block(10px, 12px, 14px); + } + } +} + +:host([outlined][invalid]), +:host([outlined][invalid]:focus-within) { + [part='start'], + [part='notch'], + [part='filler'], + [part='end'] { + border-color: var-get($theme, 'error-secondary-color'); + } + + input:placeholder-shown + [part='notch'], + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + } +} + +:host([outlined][invalid]:focus-within) { + [part='notch'] { + border-top: $idle-border-width solid transparent; + } +} + +:host([outlined][invalid]:focus-within), +:host([readonly][outlined][invalid]:focus-within) { + input:not(:placeholder-shown) + [part='notch'] { + border: { + width: $active-border-width; + color: var-get($theme, 'error-secondary-color'); + top: $active-border-width solid var-get($theme, 'error-secondary-color'); + } + } +} + +:host([invalid]) { + [part='label'] { + color: var-get($theme, 'error-secondary-color'); + } + + [part='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled[outlined]), +:host([disabled][outlined]) { + [part='start'], + [part='filler'], + [part='notch'], + [part='end'] { + border-color: var-get($theme, 'disabled-border-color'); + } + + input:placeholder-shown + [part='notch'], + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + } +} + +:host(:disabled), +:host([disabled]) { + [part~='input'], + [part='label'], + [part='prefix'], + [part='suffix'], + [part='helper-text'] { + color: var-get($theme, 'disabled-text-color'); + } + + [part='start'], + [part='filler'], + [part='notch'], + [part='end'] { + color: var-get($theme, 'disabled-text-color'); + } + + input::placeholder { + color: var-get($theme, 'disabled-text-color'); + } + + [part~='filled'] + [part='notch'] { + @extend %floated-styles; + } +} diff --git a/src/components/input/themes/themes.ts b/src/components/input/themes/themes.ts new file mode 100644 index 000000000..ae35d30ac --- /dev/null +++ b/src/components/input/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/input.bootstrap.css.js'; +import { styles as fluentDark } from './dark/input.fluent.css.js'; +import { styles as indigoDark } from './dark/input.indigo.css.js'; +import { styles as materialDark } from './dark/input.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/input.bootstrap.css.js'; +import { styles as fluentLight } from './light/input.fluent.css.js'; +import { styles as indigoLight } from './light/input.indigo.css.js'; +import { styles as materialLight } from './light/input.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/input.bootstrap.css.js'; +import { styles as fluent } from './shared/input.fluent.css.js'; +import { styles as indigo } from './shared/input.indigo.css.js'; +import { styles as material } from './shared/input.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/list/list-header.ts b/src/components/list/list-header.ts index 6407d6869..dc30772c1 100644 --- a/src/components/list/list-header.ts +++ b/src/components/list/list-header.ts @@ -1,8 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/list-header.base.css.js'; -import { styles as bootstrap } from './themes/light/list-header.bootstrap.css.js'; -import { styles as indigo } from './themes/light/list-header.indigo.css.js'; +import { styles } from './themes/header.base.css.js'; +import { all } from './themes/header.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -13,7 +12,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @slot - Renders header list item's content. */ -@themes({ light: { bootstrap, indigo }, dark: { bootstrap, indigo } }) +@themes(all) export default class IgcListHeaderComponent extends LitElement { public static readonly tagName = 'igc-list-header'; public static override styles = styles; diff --git a/src/components/list/list-item.ts b/src/components/list/list-item.ts index e5a7376a2..c788fbfd1 100644 --- a/src/components/list/list-item.ts +++ b/src/components/list/list-item.ts @@ -1,10 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/list-item.base.css.js'; -import { styles as bootstrap } from './themes/light/list-item.bootstrap.css.js'; -import { styles as fluent } from './themes/light/list-item.fluent.css.js'; -import { styles as indigo } from './themes/light/list-item.indigo.css.js'; -import { styles as material } from './themes/light/list-item.material.css.js'; +import { styles } from './themes/item.base.css.js'; +import { all } from './themes/item.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -27,10 +24,7 @@ import { registerComponent } from '../common/definitions/register.js'; * @csspart title - The title container. * @csspart subtitle - The subtitle container. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcListItemComponent extends LitElement { public static readonly tagName = 'igc-list-item'; public static override styles = styles; diff --git a/src/components/list/list.ts b/src/components/list/list.ts index 1ab38e816..8318b3cbe 100644 --- a/src/components/list/list.ts +++ b/src/components/list/list.ts @@ -2,8 +2,8 @@ import { LitElement, html } from 'lit'; import IgcListHeaderComponent from './list-header.js'; import IgcListItemComponent from './list-item.js'; -import { styles } from './themes/light/list.base.css.js'; -import { styles as bootstrap } from './themes/light/list.bootstrap.css.js'; +import { styles } from './themes/container.base.css.js'; +import { all } from './themes/container.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { SizableMixin } from '../common/mixins/sizable.js'; @@ -15,7 +15,7 @@ import { SizableMixin } from '../common/mixins/sizable.js'; * * @slot - Renders the list items and list headers inside default slot. */ -@themes({ light: { bootstrap }, dark: { bootstrap } }) +@themes(all) export default class IgcListComponent extends SizableMixin(LitElement) { public static readonly tagName = 'igc-list'; public static override styles = styles; diff --git a/src/components/list/themes/light/list.base.scss b/src/components/list/themes/container.base.scss similarity index 81% rename from src/components/list/themes/light/list.base.scss rename to src/components/list/themes/container.base.scss index 8b0ef7312..c195d3419 100644 --- a/src/components/list/themes/light/list.base.scss +++ b/src/components/list/themes/container.base.scss @@ -1,12 +1,10 @@ @use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; +@use './light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-list'); - display: flex; flex-flow: column nowrap; font-family: var(--ig-font-family); diff --git a/src/components/list/themes/container.ts b/src/components/list/themes/container.ts new file mode 100644 index 000000000..d6fac3751 --- /dev/null +++ b/src/components/list/themes/container.ts @@ -0,0 +1,31 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/container/list.bootstrap.css.js'; +import { styles as fluentDark } from './dark/container/list.fluent.css.js'; +import { styles as indigoDark } from './dark/container/list.indigo.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/container/list.bootstrap.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/container/list.bootstrap.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + fluent: css` + ${fluentDark} + `, + indigo: css` + ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/list/themes/dark/_themes.scss b/src/components/list/themes/dark/_themes.scss index dff765e9e..0e8906950 100644 --- a/src/components/list/themes/dark/_themes.scss +++ b/src/components/list/themes/dark/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/dark/list' as *; diff --git a/src/components/list/themes/dark/container/list.bootstrap.scss b/src/components/list/themes/dark/container/list.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/dark/container/list.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/container/list.fluent.scss b/src/components/list/themes/dark/container/list.fluent.scss new file mode 100644 index 000000000..d1fe69cc8 --- /dev/null +++ b/src/components/list/themes/dark/container/list.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/container/list.indigo.scss b/src/components/list/themes/dark/container/list.indigo.scss new file mode 100644 index 000000000..54b8bfcb6 --- /dev/null +++ b/src/components/list/themes/dark/container/list.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/header/list-header.bootstrap.scss b/src/components/list/themes/dark/header/list-header.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/dark/header/list-header.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/header/list-header.fluent.scss b/src/components/list/themes/dark/header/list-header.fluent.scss new file mode 100644 index 000000000..d1fe69cc8 --- /dev/null +++ b/src/components/list/themes/dark/header/list-header.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/header/list-header.indigo.scss b/src/components/list/themes/dark/header/list-header.indigo.scss new file mode 100644 index 000000000..54b8bfcb6 --- /dev/null +++ b/src/components/list/themes/dark/header/list-header.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/header/list-header.material.scss b/src/components/list/themes/dark/header/list-header.material.scss new file mode 100644 index 000000000..138587ddd --- /dev/null +++ b/src/components/list/themes/dark/header/list-header.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/item/list-item.bootstrap.scss b/src/components/list/themes/dark/item/list-item.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/dark/item/list-item.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/item/list-item.fluent.scss b/src/components/list/themes/dark/item/list-item.fluent.scss new file mode 100644 index 000000000..d1fe69cc8 --- /dev/null +++ b/src/components/list/themes/dark/item/list-item.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/item/list-item.indigo.scss b/src/components/list/themes/dark/item/list-item.indigo.scss new file mode 100644 index 000000000..54b8bfcb6 --- /dev/null +++ b/src/components/list/themes/dark/item/list-item.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/item/list-item.material.scss b/src/components/list/themes/dark/item/list-item.material.scss new file mode 100644 index 000000000..138587ddd --- /dev/null +++ b/src/components/list/themes/dark/item/list-item.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/dark/list-header.bootstrap.scss b/src/components/list/themes/dark/list-header.bootstrap.scss deleted file mode 100644 index db39a876d..000000000 --- a/src/components/list/themes/dark/list-header.bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-list-header { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list-header.indigo.scss b/src/components/list/themes/dark/list-header.indigo.scss deleted file mode 100644 index 6372d496e..000000000 --- a/src/components/list/themes/dark/list-header.indigo.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-list-header { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list-item.bootstrap.scss b/src/components/list/themes/dark/list-item.bootstrap.scss deleted file mode 100644 index d5be85c0a..000000000 --- a/src/components/list/themes/dark/list-item.bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-list-item { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list-item.fluent.scss b/src/components/list/themes/dark/list-item.fluent.scss deleted file mode 100644 index bee5b0ab9..000000000 --- a/src/components/list/themes/dark/list-item.fluent.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $fluent; - -@mixin theme() { - igc-list-item { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list-item.indigo.scss b/src/components/list/themes/dark/list-item.indigo.scss deleted file mode 100644 index 4aaf584e4..000000000 --- a/src/components/list/themes/dark/list-item.indigo.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-list-item { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list-item.material.scss b/src/components/list/themes/dark/list-item.material.scss deleted file mode 100644 index 679ed99a4..000000000 --- a/src/components/list/themes/dark/list-item.material.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $material; - -@mixin theme() { - igc-list-item { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list.bootstrap.scss b/src/components/list/themes/dark/list.bootstrap.scss deleted file mode 100644 index 91084c8df..000000000 --- a/src/components/list/themes/dark/list.bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $bootstrap; - -@mixin theme() { - igc-list { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list.fluent.scss b/src/components/list/themes/dark/list.fluent.scss deleted file mode 100644 index 2a3f13daa..000000000 --- a/src/components/list/themes/dark/list.fluent.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $fluent; - -@mixin theme() { - igc-list { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/dark/list.indigo.scss b/src/components/list/themes/dark/list.indigo.scss deleted file mode 100644 index ed801b359..000000000 --- a/src/components/list/themes/dark/list.indigo.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $indigo; - -@mixin theme() { - igc-list { - @include css-vars-from-theme($theme, 'ig-list'); - } -} diff --git a/src/components/list/themes/header.base.scss b/src/components/list/themes/header.base.scss new file mode 100644 index 000000000..9ef4c1d89 --- /dev/null +++ b/src/components/list/themes/header.base.scss @@ -0,0 +1,16 @@ +@use 'styles/utilities' as *; + +:host { + @include type-style('overline'); + + display: flex; + align-items: center; + justify-content: flex-start; + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: pad-block(rem(2px), rem(4px), rem(8px)); +} + +::slotted(*) { + font: inherit; + margin: inherit; +} diff --git a/src/components/list/themes/header.ts b/src/components/list/themes/header.ts new file mode 100644 index 000000000..063c55c57 --- /dev/null +++ b/src/components/list/themes/header.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/header/list-header.bootstrap.css.js'; +import { styles as fluentDark } from './dark/header/list-header.fluent.css.js'; +import { styles as indigoDark } from './dark/header/list-header.indigo.css.js'; +import { styles as materialDark } from './dark/header/list-header.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/header/list-header.bootstrap.css.js'; +import { styles as fluentLight } from './light/header/list-header.fluent.css.js'; +import { styles as indigoLight } from './light/header/list-header.indigo.css.js'; +import { styles as materialLight } from './light/header/list-header.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/header/list-header.bootstrap.css.js'; +import { styles as fluent } from './shared/header/list-header.fluent.css.js'; +import { styles as indigo } from './shared/header/list-header.indigo.css.js'; +import { styles as material } from './shared/header/list-header.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + material: css` + ${material} ${materialLight} + `, + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + material: css` + ${material} ${materialDark} + `, + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/list/themes/light/list-item.base.scss b/src/components/list/themes/item.base.scss similarity index 75% rename from src/components/list/themes/light/list-item.base.scss rename to src/components/list/themes/item.base.scss index eeff0aaf7..a4d9ec14f 100644 --- a/src/components/list/themes/light/list-item.base.scss +++ b/src/components/list/themes/item.base.scss @@ -1,13 +1,12 @@ @use 'styles/utilities' as *; -@use 'themes' as *; :host { display: flex; align-items: center; position: relative; transition: background .15s ease-out; - padding-inline: pad-inline(4px, 8px, 16px); - padding-block: pad-block(2px, 4px, 8px); + padding-inline: pad-inline(rem(4px), rem(8px), rem(16px)); + padding-block: pad-block(rem(2px), rem(4px), rem(8px)); ::slotted(igc-avatar) { --ig-size: 1; @@ -32,11 +31,11 @@ } [name='start']::slotted(*) { - margin-inline-end: pad(16px); + margin-inline-end: pad(rem(16px)); } [name='end']::slotted(*) { - margin-inline-start: pad(16px); + margin-inline-start: pad(rem(16px)); } [part='title'] { diff --git a/src/components/list/themes/item.ts b/src/components/list/themes/item.ts new file mode 100644 index 000000000..f7097ff54 --- /dev/null +++ b/src/components/list/themes/item.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/item/list-item.bootstrap.css.js'; +import { styles as fluentDark } from './dark/item/list-item.fluent.css.js'; +import { styles as indigoDark } from './dark/item/list-item.indigo.css.js'; +import { styles as materialDark } from './dark/item/list-item.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/item/list-item.bootstrap.css.js'; +import { styles as fluentLight } from './light/item/list-item.fluent.css.js'; +import { styles as indigoLight } from './light/item/list-item.indigo.css.js'; +import { styles as materialLight } from './light/item/list-item.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/item/list-item.bootstrap.css.js'; +import { styles as fluent } from './shared/item/list-item.fluent.css.js'; +import { styles as indigo } from './shared/item/list-item.indigo.css.js'; +import { styles as material } from './shared/item/list-item.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/list/themes/light/_themes.scss b/src/components/list/themes/light/_themes.scss index 5935e846a..6ea944ff7 100644 --- a/src/components/list/themes/light/_themes.scss +++ b/src/components/list/themes/light/_themes.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/list' as *; diff --git a/src/components/list/themes/light/container/list.bootstrap.scss b/src/components/list/themes/light/container/list.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/light/container/list.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/header/list-header.bootstrap.scss b/src/components/list/themes/light/header/list-header.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/light/header/list-header.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/header/list-header.fluent.scss b/src/components/list/themes/light/header/list-header.fluent.scss new file mode 100644 index 000000000..d1fe69cc8 --- /dev/null +++ b/src/components/list/themes/light/header/list-header.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/header/list-header.indigo.scss b/src/components/list/themes/light/header/list-header.indigo.scss new file mode 100644 index 000000000..54b8bfcb6 --- /dev/null +++ b/src/components/list/themes/light/header/list-header.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/header/list-header.material.scss b/src/components/list/themes/light/header/list-header.material.scss new file mode 100644 index 000000000..138587ddd --- /dev/null +++ b/src/components/list/themes/light/header/list-header.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/item/list-item.bootstrap.scss b/src/components/list/themes/light/item/list-item.bootstrap.scss new file mode 100644 index 000000000..957107729 --- /dev/null +++ b/src/components/list/themes/light/item/list-item.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/item/list-item.fluent.scss b/src/components/list/themes/light/item/list-item.fluent.scss new file mode 100644 index 000000000..d1fe69cc8 --- /dev/null +++ b/src/components/list/themes/light/item/list-item.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/item/list-item.indigo.scss b/src/components/list/themes/light/item/list-item.indigo.scss new file mode 100644 index 000000000..54b8bfcb6 --- /dev/null +++ b/src/components/list/themes/light/item/list-item.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/item/list-item.material.scss b/src/components/list/themes/light/item/list-item.material.scss new file mode 100644 index 000000000..138587ddd --- /dev/null +++ b/src/components/list/themes/light/item/list-item.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-list'); +} diff --git a/src/components/list/themes/light/list-header.base.scss b/src/components/list/themes/light/list-header.base.scss deleted file mode 100644 index 44dd51e02..000000000 --- a/src/components/list/themes/light/list-header.base.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $material; - -:host { - @include css-vars-from-theme($theme, 'ig-list'); - @include type-style('overline'); - - display: flex; - align-items: center; - justify-content: flex-start; - color: var-get($theme, 'header-text-color'); - background: var-get($theme, 'header-background'); - padding-inline: pad-inline(4px, 8px, 16px); - padding-block: pad-block(2px, 4px, 8px); -} - -::slotted(*) { - font: inherit; - margin: inherit; -} diff --git a/src/components/list/themes/light/list.bootstrap.scss b/src/components/list/themes/shared/container/list.bootstrap.scss similarity index 75% rename from src/components/list/themes/light/list.bootstrap.scss rename to src/components/list/themes/shared/container/list.bootstrap.scss index f8c2e9d7f..652eeba74 100644 --- a/src/components/list/themes/light/list.bootstrap.scss +++ b/src/components/list/themes/shared/container/list.bootstrap.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-list'); - background: var-get($theme, 'background'); border: rem(1px) solid var-get($theme, 'border-color'); border-radius: var-get($theme, 'border-radius'); diff --git a/src/components/list/themes/light/list-header.bootstrap.scss b/src/components/list/themes/shared/header/list-header.bootstrap.scss similarity index 69% rename from src/components/list/themes/light/list-header.bootstrap.scss rename to src/components/list/themes/shared/header/list-header.bootstrap.scss index 2b1b3ee56..b3d9180bf 100644 --- a/src/components/list/themes/light/list-header.bootstrap.scss +++ b/src/components/list/themes/shared/header/list-header.bootstrap.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-list'); - background: var-get($theme, 'header-background'); color: var-get($theme, 'header-text-color'); } diff --git a/src/components/list/themes/shared/header/list-header.fluent.scss b/src/components/list/themes/shared/header/list-header.fluent.scss new file mode 100644 index 000000000..eeddeaed9 --- /dev/null +++ b/src/components/list/themes/shared/header/list-header.fluent.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); +} diff --git a/src/components/list/themes/light/list-header.indigo.scss b/src/components/list/themes/shared/header/list-header.indigo.scss similarity index 68% rename from src/components/list/themes/light/list-header.indigo.scss rename to src/components/list/themes/shared/header/list-header.indigo.scss index 59a4dba3c..242487ebc 100644 --- a/src/components/list/themes/light/list-header.indigo.scss +++ b/src/components/list/themes/shared/header/list-header.indigo.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; :host { - @include css-vars-from-theme($theme, 'ig-list'); - background: var-get($theme, 'header-background'); color: var-get($theme, 'header-text-color'); } diff --git a/src/components/list/themes/shared/header/list-header.material.scss b/src/components/list/themes/shared/header/list-header.material.scss new file mode 100644 index 000000000..83a9cc37d --- /dev/null +++ b/src/components/list/themes/shared/header/list-header.material.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + background: var-get($theme, 'header-background'); + color: var-get($theme, 'header-text-color'); +} diff --git a/src/components/list/themes/light/list-item.bootstrap.scss b/src/components/list/themes/shared/item/list-item.bootstrap.scss similarity index 90% rename from src/components/list/themes/light/list-item.bootstrap.scss rename to src/components/list/themes/shared/item/list-item.bootstrap.scss index 3e7f3a44a..5022019c5 100644 --- a/src/components/list/themes/light/list-item.bootstrap.scss +++ b/src/components/list/themes/shared/item/list-item.bootstrap.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; :host { - @include css-vars-from-theme($theme, 'ig-list'); - color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); border-bottom: rem(1px) solid var-get($theme, 'border-color'); diff --git a/src/components/list/themes/light/list-item.fluent.scss b/src/components/list/themes/shared/item/list-item.fluent.scss similarity index 90% rename from src/components/list/themes/light/list-item.fluent.scss rename to src/components/list/themes/shared/item/list-item.fluent.scss index 8457f5072..6814b2f1d 100644 --- a/src/components/list/themes/light/list-item.fluent.scss +++ b/src/components/list/themes/shared/item/list-item.fluent.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $fluent; :host { - @include css-vars-from-theme($theme, 'ig-list'); - color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); border-bottom: rem(1px) solid var-get($theme, 'border-color'); diff --git a/src/components/list/themes/light/list-item.indigo.scss b/src/components/list/themes/shared/item/list-item.indigo.scss similarity index 88% rename from src/components/list/themes/light/list-item.indigo.scss rename to src/components/list/themes/shared/item/list-item.indigo.scss index 2d33214de..6b2b452a0 100644 --- a/src/components/list/themes/light/list-item.indigo.scss +++ b/src/components/list/themes/shared/item/list-item.indigo.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; :host { - @include css-vars-from-theme($theme, 'ig-list'); - color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); border-radius: var-get($theme, 'item-border-radius'); diff --git a/src/components/list/themes/light/list-item.material.scss b/src/components/list/themes/shared/item/list-item.material.scss similarity index 87% rename from src/components/list/themes/light/list-item.material.scss rename to src/components/list/themes/shared/item/list-item.material.scss index 400fc4f96..0e1efed83 100644 --- a/src/components/list/themes/light/list-item.material.scss +++ b/src/components/list/themes/shared/item/list-item.material.scss @@ -1,11 +1,9 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-list'); - border-radius: var-get($theme, 'item-border-radius'); color: var-get($theme, 'item-text-color'); background: var-get($theme, 'item-background'); diff --git a/src/components/nav-drawer/nav-drawer-header-item.ts b/src/components/nav-drawer/nav-drawer-header-item.ts index 8729e80c9..0298bb0a8 100644 --- a/src/components/nav-drawer/nav-drawer-header-item.ts +++ b/src/components/nav-drawer/nav-drawer-header-item.ts @@ -1,12 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/header-item/nav-drawer-header-item.base.css.js'; -import { styles as fluent } from './themes/light/header-item/nav-drawer-header-item.fluent.css.js'; -import { - styles as bootstrap, - styles as indigo, - styles as material, -} from './themes/light/header-item/nav-drawer-header-item.indigo.css.js'; +import { styles } from './themes/header-item.base.css.js'; +import { all } from './themes/header-item.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -16,10 +11,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @slot - Renders the header content */ -@themes({ - light: { fluent, indigo, bootstrap, material }, - dark: { fluent, indigo, bootstrap, material }, -}) +@themes(all) 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 970787c6d..9dcd2a315 100644 --- a/src/components/nav-drawer/nav-drawer-item.ts +++ b/src/components/nav-drawer/nav-drawer-item.ts @@ -6,11 +6,8 @@ import { state, } from 'lit/decorators.js'; -import { styles } from './themes/light/item/nav-drawer-item.base.css.js'; -import { styles as bootstrap } from './themes/light/item/nav-drawer-item.bootstrap.css.js'; -import { styles as fluent } from './themes/light/item/nav-drawer-item.fluent.css.js'; -import { styles as indigo } from './themes/light/item/nav-drawer-item.indigo.css.js'; -import { styles as material } from './themes/light/item/nav-drawer-item.material.css.js'; +import { styles } from './themes/item.base.css.js'; +import { all } from './themes/item.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { partNameMap } from '../common/util.js'; @@ -27,10 +24,7 @@ import { partNameMap } from '../common/util.js'; * @csspart icon - The icon container. * @csspart content - The content container. */ -@themes({ - light: { fluent, indigo, bootstrap, material }, - dark: { fluent, indigo, bootstrap, material }, -}) +@themes(all) 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/nav-drawer.ts b/src/components/nav-drawer/nav-drawer.ts index 2135ecd3d..5d713b5c1 100644 --- a/src/components/nav-drawer/nav-drawer.ts +++ b/src/components/nav-drawer/nav-drawer.ts @@ -3,11 +3,8 @@ import { property } from 'lit/decorators.js'; import IgcNavDrawerHeaderItemComponent from './nav-drawer-header-item.js'; import IgcNavDrawerItemComponent from './nav-drawer-item.js'; -import { styles } from './themes/light/nav-drawer.base.css.js'; -import { styles as bootstrap } from './themes/light/nav-drawer.bootstrap.css.js'; -import { styles as fluent } from './themes/light/nav-drawer.fluent.css.js'; -import { styles as indigo } from './themes/light/nav-drawer.indigo.css.js'; -import { styles as material } from './themes/light/nav-drawer.material.css.js'; +import { styles } from './themes/container.base.css.js'; +import { all } from './themes/container.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { partNameMap } from '../common/util.js'; @@ -25,10 +22,7 @@ import { partNameMap } from '../common/util.js'; * @csspart main - The main container. * @csspart mini - The mini container. */ -@themes({ - light: { indigo, material, fluent, bootstrap }, - dark: { indigo, material, fluent, bootstrap }, -}) +@themes(all) export default class IgcNavDrawerComponent extends LitElement { public static readonly tagName = 'igc-nav-drawer'; public static override styles = styles; diff --git a/src/components/nav-drawer/themes/light/nav-drawer.base.scss b/src/components/nav-drawer/themes/container.base.scss similarity index 97% rename from src/components/nav-drawer/themes/light/nav-drawer.base.scss rename to src/components/nav-drawer/themes/container.base.scss index 048848505..d5802fa0a 100644 --- a/src/components/nav-drawer/themes/light/nav-drawer.base.scss +++ b/src/components/nav-drawer/themes/container.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-nav-drawer'); - --menu-full-width: #{rem(256px)}; --menu-mini-width: #{rem(60px)}; diff --git a/src/components/nav-drawer/themes/container.ts b/src/components/nav-drawer/themes/container.ts new file mode 100644 index 000000000..0e97cba42 --- /dev/null +++ b/src/components/nav-drawer/themes/container.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/container/nav-drawer.bootstrap.css.js'; +import { styles as fluentDark } from './dark/container/nav-drawer.fluent.css.js'; +import { styles as indigoDark } from './dark/container/nav-drawer.indigo.css.js'; +import { styles as materialDark } from './dark/container/nav-drawer.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/container/nav-drawer.bootstrap.css.js'; +import { styles as fluentLight } from './light/container/nav-drawer.fluent.css.js'; +import { styles as indigoLight } from './light/container/nav-drawer.indigo.css.js'; +import { styles as materialLight } from './light/container/nav-drawer.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/container/nav-drawer.bootstrap.css.js'; +import { styles as fluent } from './shared/container/nav-drawer.fluent.css.js'; +import { styles as indigo } from './shared/container/nav-drawer.indigo.css.js'; +import { styles as material } from './shared/container/nav-drawer.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss new file mode 100644 index 000000000..2958f1327 --- /dev/null +++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.bootstrap.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +:host { + @include css-vars-from-theme($bootstrap, 'ig-nav-drawer'); + @include css-vars-from-theme($bootstrap-overlay, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss new file mode 100644 index 000000000..cef23109a --- /dev/null +++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.fluent.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +:host { + @include css-vars-from-theme($fluent, 'ig-nav-drawer'); + @include css-vars-from-theme($fluent-overlay, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss new file mode 100644 index 000000000..e9041a6fe --- /dev/null +++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.indigo.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +:host { + @include css-vars-from-theme($indigo, 'ig-nav-drawer'); + @include css-vars-from-theme($indigo-overlay, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss new file mode 100644 index 000000000..5f541cd37 --- /dev/null +++ b/src/components/nav-drawer/themes/dark/container/nav-drawer.material.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +:host { + @include css-vars-from-theme($material, 'ig-nav-drawer'); + @include css-vars-from-theme($material-overlay, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/dark/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/dark/nav-drawer.bootstrap.scss deleted file mode 100644 index c9ee171fc..000000000 --- a/src/components/nav-drawer/themes/dark/nav-drawer.bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - igc-nav-drawer, - igc-nav-drawer-item, - igc-nav-drawer-header-item { - @include css-vars-from-theme($bootstrap, 'ig-navdrawer'); - } -} diff --git a/src/components/nav-drawer/themes/dark/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/dark/nav-drawer.fluent.scss deleted file mode 100644 index e570b45e9..000000000 --- a/src/components/nav-drawer/themes/dark/nav-drawer.fluent.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - igc-nav-drawer, - igc-nav-drawer-item, - igc-nav-drawer-header-item { - @include css-vars-from-theme($fluent, 'ig-navdrawer'); - } -} diff --git a/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss deleted file mode 100644 index 6bf033fa8..000000000 --- a/src/components/nav-drawer/themes/dark/nav-drawer.indigo.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - igc-nav-drawer, - igc-nav-drawer-item, - igc-nav-drawer-header-item { - @include css-vars-from-theme($indigo, 'ig-navdrawer'); - } -} diff --git a/src/components/nav-drawer/themes/dark/nav-drawer.material.scss b/src/components/nav-drawer/themes/dark/nav-drawer.material.scss deleted file mode 100644 index 144805060..000000000 --- a/src/components/nav-drawer/themes/dark/nav-drawer.material.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'styles/utilities' as *; -@use 'themes' as *; - -@mixin theme() { - igc-nav-drawer, - igc-nav-drawer-item, - igc-nav-drawer-header-item { - @include css-vars-from-theme($material, 'ig-navdrawer'); - } -} diff --git a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.base.scss b/src/components/nav-drawer/themes/header-item.base.scss similarity index 78% rename from src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.base.scss rename to src/components/nav-drawer/themes/header-item.base.scss index 7d2c3127a..f4dbb8a66 100644 --- a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.base.scss +++ b/src/components/nav-drawer/themes/header-item.base.scss @@ -1,3 +1,4 @@ +@use 'styles/common/component'; @use 'styles/utilities' as *; :host { diff --git a/src/components/nav-drawer/themes/header-item.ts b/src/components/nav-drawer/themes/header-item.ts new file mode 100644 index 000000000..32996be06 --- /dev/null +++ b/src/components/nav-drawer/themes/header-item.ts @@ -0,0 +1,40 @@ +import { css } from 'lit'; + +// Shared Styles +import { styles as bootstrap } from './shared/header-item/header-item.bootstrap.css.js'; +import { styles as fluent } from './shared/header-item/header-item.fluent.css.js'; +import { styles as indigo } from './shared/header-item/header-item.indigo.css.js'; +import { styles as material } from './shared/header-item/header-item.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/nav-drawer/themes/light/item/nav-drawer-item.base.scss b/src/components/nav-drawer/themes/item.base.scss similarity index 96% rename from src/components/nav-drawer/themes/light/item/nav-drawer-item.base.scss rename to src/components/nav-drawer/themes/item.base.scss index 8c0be343a..1ead9c404 100644 --- a/src/components/nav-drawer/themes/light/item/nav-drawer-item.base.scss +++ b/src/components/nav-drawer/themes/item.base.scss @@ -1,3 +1,4 @@ +@use 'styles/common/component'; @use 'styles/utilities' as *; [part~='base'] { diff --git a/src/components/nav-drawer/themes/item.ts b/src/components/nav-drawer/themes/item.ts new file mode 100644 index 000000000..4bd0a264e --- /dev/null +++ b/src/components/nav-drawer/themes/item.ts @@ -0,0 +1,40 @@ +import { css } from 'lit'; + +// Shared Styles +import { styles as bootstrap } from './shared/item/item.bootstrap.css.js'; +import { styles as fluent } from './shared/item/item.fluent.css.js'; +import { styles as indigo } from './shared/item/item.indigo.css.js'; +import { styles as material } from './shared/item/item.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss new file mode 100644 index 000000000..302b5e3ce --- /dev/null +++ b/src/components/nav-drawer/themes/light/container/nav-drawer.bootstrap.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-nav-drawer'); + @include css-vars-from-theme($overlay-bootstrap, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss new file mode 100644 index 000000000..6cd3c7491 --- /dev/null +++ b/src/components/nav-drawer/themes/light/container/nav-drawer.fluent.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-nav-drawer'); + @include css-vars-from-theme($overlay-fluent, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss new file mode 100644 index 000000000..c7d09f061 --- /dev/null +++ b/src/components/nav-drawer/themes/light/container/nav-drawer.indigo.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-nav-drawer'); + @include css-vars-from-theme($overlay-indigo, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss new file mode 100644 index 000000000..0f7dcc49a --- /dev/null +++ b/src/components/nav-drawer/themes/light/container/nav-drawer.material.scss @@ -0,0 +1,9 @@ +@use 'styles/utilities' as *; +@use '../themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-nav-drawer'); + @include css-vars-from-theme($overlay-material, 'ig-nav-drawer'); +} diff --git a/src/components/nav-drawer/themes/light/nav-drawer.bootstrap.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss similarity index 89% rename from src/components/nav-drawer/themes/light/nav-drawer.bootstrap.scss rename to src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss index fd92e4a93..8a2e3f40a 100644 --- a/src/components/nav-drawer/themes/light/nav-drawer.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.bootstrap.scss @@ -1,13 +1,10 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; $background: var-get($theme, 'background') !default; :host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-bootstrap, 'ig-nav-drawer'); - [part='base'] { border-radius: var-get($theme, 'border-radius'); background: $background; diff --git a/src/components/nav-drawer/themes/light/nav-drawer.fluent.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss similarity index 89% rename from src/components/nav-drawer/themes/light/nav-drawer.fluent.scss rename to src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss index b6cec5ded..184a0dc80 100644 --- a/src/components/nav-drawer/themes/light/nav-drawer.fluent.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.fluent.scss @@ -1,13 +1,10 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $fluent; $background: var-get($theme, 'background') !default; :host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-fluent, 'ig-nav-drawer'); - [part='base'] { border-radius: var-get($theme, 'border-radius'); background: $background; diff --git a/src/components/nav-drawer/themes/light/nav-drawer.indigo.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss similarity index 89% rename from src/components/nav-drawer/themes/light/nav-drawer.indigo.scss rename to src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss index eed040a82..e83ca5237 100644 --- a/src/components/nav-drawer/themes/light/nav-drawer.indigo.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.indigo.scss @@ -1,13 +1,10 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; $background: var-get($theme, 'background') !default; :host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-indigo, 'ig-nav-drawer'); - [part='base'] { border-radius: var-get($theme, 'border-radius'); background: $background; diff --git a/src/components/nav-drawer/themes/light/nav-drawer.material.scss b/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss similarity index 89% rename from src/components/nav-drawer/themes/light/nav-drawer.material.scss rename to src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss index 159b023f5..bd2ff16ad 100644 --- a/src/components/nav-drawer/themes/light/nav-drawer.material.scss +++ b/src/components/nav-drawer/themes/shared/container/nav-drawer.material.scss @@ -1,13 +1,10 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $material; $background: var-get($theme, 'background') !default; :host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-material, 'ig-nav-drawer'); - [part='base'] { border-radius: var-get($theme, 'border-radius'); background: $background; diff --git a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.bootstrap.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss similarity index 82% rename from src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.bootstrap.scss rename to src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss index ece7aaff6..88bd2ce83 100644 --- a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.bootstrap.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; diff --git a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.fluent.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss similarity index 82% rename from src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.fluent.scss rename to src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss index d4afcf9ee..792f78269 100644 --- a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.fluent.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.fluent.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; diff --git a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.indigo.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss similarity index 82% rename from src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.indigo.scss rename to src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss index 93b260de4..820204f90 100644 --- a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.indigo.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.indigo.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $indigo; diff --git a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.material.scss b/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss similarity index 82% rename from src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.material.scss rename to src/components/nav-drawer/themes/shared/header-item/header-item.material.scss index e9b11ea22..b3bb54e55 100644 --- a/src/components/nav-drawer/themes/light/header-item/nav-drawer-header-item.material.scss +++ b/src/components/nav-drawer/themes/shared/header-item/header-item.material.scss @@ -1,5 +1,5 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; diff --git a/src/components/nav-drawer/themes/light/item/nav-drawer-item.bootstrap.scss b/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss similarity index 83% rename from src/components/nav-drawer/themes/light/item/nav-drawer-item.bootstrap.scss rename to src/components/nav-drawer/themes/shared/item/item.bootstrap.scss index d31d305d3..55e2227af 100644 --- a/src/components/nav-drawer/themes/light/item/nav-drawer-item.bootstrap.scss +++ b/src/components/nav-drawer/themes/shared/item/item.bootstrap.scss @@ -1,13 +1,8 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; -:host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-bootstrap, 'ig-nav-drawer'); -} - [part~='base'] { border-radius: var-get($theme, 'item-border-radius'); color: var-get($theme, 'item-text-color'); diff --git a/src/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.scss b/src/components/nav-drawer/themes/shared/item/item.fluent.scss similarity index 84% rename from src/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.scss rename to src/components/nav-drawer/themes/shared/item/item.fluent.scss index 7b44c72a6..e146c84c3 100644 --- a/src/components/nav-drawer/themes/light/item/nav-drawer-item.fluent.scss +++ b/src/components/nav-drawer/themes/shared/item/item.fluent.scss @@ -1,13 +1,8 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $fluent; -:host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-fluent, 'ig-nav-drawer'); -} - [part~='base'] { border-radius: var-get($theme, 'item-border-radius'); color: var-get($theme, 'item-text-color'); diff --git a/src/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.scss b/src/components/nav-drawer/themes/shared/item/item.indigo.scss similarity index 72% rename from src/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.scss rename to src/components/nav-drawer/themes/shared/item/item.indigo.scss index 8e3f181df..79049001a 100644 --- a/src/components/nav-drawer/themes/light/item/nav-drawer-item.indigo.scss +++ b/src/components/nav-drawer/themes/shared/item/item.indigo.scss @@ -1,15 +1,7 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $indigo; -$active-background: var(--active-background, color(gray, 600, .8)) !default; -$text-color: var(--text-color, color(gray, 300, .8)) !default; -$hover-text-color: var(--hover-text-color, color(gray, 100)) !default; - -:host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-indigo, 'ig-nav-drawer'); -} [part~='base'] { gap: rem(24px); diff --git a/src/components/nav-drawer/themes/light/item/nav-drawer-item.material.scss b/src/components/nav-drawer/themes/shared/item/item.material.scss similarity index 83% rename from src/components/nav-drawer/themes/light/item/nav-drawer-item.material.scss rename to src/components/nav-drawer/themes/shared/item/item.material.scss index 64d58dee5..0c718c078 100644 --- a/src/components/nav-drawer/themes/light/item/nav-drawer-item.material.scss +++ b/src/components/nav-drawer/themes/shared/item/item.material.scss @@ -1,13 +1,8 @@ @use 'styles/utilities' as *; -@use '../themes' as *; +@use '../../light/themes' as *; $theme: $material; -:host { - @include css-vars-from-theme($theme, 'ig-nav-drawer'); - @include css-vars-from-theme($overlay-material, 'ig-nav-drawer'); -} - [part~='base'] { border-radius: var-get($theme, 'item-border-radius'); color: var-get($theme, 'item-text-color'); diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts index 87acfdaf6..b7f17d9e6 100644 --- a/src/components/navbar/navbar.ts +++ b/src/components/navbar/navbar.ts @@ -1,10 +1,7 @@ import { LitElement, html } from 'lit'; -import { styles as bootstrap } from './themes/light/navbar.bootstrap.css.js'; -import { styles as fluent } from './themes/light/navbar.fluent.css.js'; -import { styles as indigo } from './themes/light/navbar.indigo.css.js'; -import { styles as material } from './themes/light/navbar.material.css.js'; import { styles } from './themes/navbar.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -23,10 +20,7 @@ import { registerComponent } from '../common/definitions/register.js'; * @csspart middle - The navigation bar title container. * @csspart end - The right aligned action icons container. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcNavbarComponent extends LitElement { public static readonly tagName = 'igc-navbar'; public static override styles = styles; diff --git a/src/components/navbar/themes/dark/navbar.bootstrap.scss b/src/components/navbar/themes/dark/navbar.bootstrap.scss index ebde219e4..b18a2ebb6 100644 --- a/src/components/navbar/themes/dark/navbar.bootstrap.scss +++ b/src/components/navbar/themes/dark/navbar.bootstrap.scss @@ -1,8 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-navbar { - @include css-vars-from-theme($bootstrap, 'ig-navbar'); - } +:host { + @include css-vars-from-theme($bootstrap, 'ig-navbar'); } diff --git a/src/components/navbar/themes/dark/navbar.fluent.scss b/src/components/navbar/themes/dark/navbar.fluent.scss index a1addc792..655ea725a 100644 --- a/src/components/navbar/themes/dark/navbar.fluent.scss +++ b/src/components/navbar/themes/dark/navbar.fluent.scss @@ -1,8 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-navbar { - @include css-vars-from-theme($fluent, 'ig-navbar'); - } +:host { + @include css-vars-from-theme($fluent, 'ig-navbar'); } diff --git a/src/components/navbar/themes/dark/navbar.indigo.scss b/src/components/navbar/themes/dark/navbar.indigo.scss index fbae12602..41c5d516f 100644 --- a/src/components/navbar/themes/dark/navbar.indigo.scss +++ b/src/components/navbar/themes/dark/navbar.indigo.scss @@ -1,8 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-navbar { - @include css-vars-from-theme($indigo, 'ig-navbar'); - } +:host { + @include css-vars-from-theme($indigo, 'ig-navbar'); } diff --git a/src/components/navbar/themes/dark/navbar.material.scss b/src/components/navbar/themes/dark/navbar.material.scss index b8ccd6f3f..af45ae868 100644 --- a/src/components/navbar/themes/dark/navbar.material.scss +++ b/src/components/navbar/themes/dark/navbar.material.scss @@ -1,8 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-navbar { - @include css-vars-from-theme($material, 'ig-navbar'); - } +:host { + @include css-vars-from-theme($material, 'ig-navbar'); } diff --git a/src/components/navbar/themes/light/navbar.bootstrap.scss b/src/components/navbar/themes/light/navbar.bootstrap.scss index d44ffc39c..743293c5e 100644 --- a/src/components/navbar/themes/light/navbar.bootstrap.scss +++ b/src/components/navbar/themes/light/navbar.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,28 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-navbar'); - - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - box-shadow: var(--ig-elevation-0); - padding: 0 rem(8px); -} - -::slotted(igc-icon) { - color: var-get($theme, 'idle-icon-color'); -} - -::slotted(igc-icon:hover) { - color: var-get($theme, 'hover-icon-color'); -} - -[part='base'] { - padding-inline: rem(4px) rem(4px); -} - -::slotted(*) { - @include type-style('h5') { - line-height: normal; - margin: 0; - } } diff --git a/src/components/navbar/themes/light/navbar.fluent.scss b/src/components/navbar/themes/light/navbar.fluent.scss index 541b964a1..f6e20f080 100644 --- a/src/components/navbar/themes/light/navbar.fluent.scss +++ b/src/components/navbar/themes/light/navbar.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,23 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-navbar'); - - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - box-shadow: var(--ig-elevation-4); -} - -::slotted(igc-icon) { - color: var-get($theme, 'idle-icon-color'); -} - -::slotted(igc-icon:hover) { - color: var-get($theme, 'hover-icon-color'); -} - -::slotted(*) { - @include type-style('subtitle-2') { - line-height: normal; - margin: 0; - } } diff --git a/src/components/navbar/themes/light/navbar.indigo.scss b/src/components/navbar/themes/light/navbar.indigo.scss index a63ece17f..90d4b30c8 100644 --- a/src/components/navbar/themes/light/navbar.indigo.scss +++ b/src/components/navbar/themes/light/navbar.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,16 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-navbar'); - - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - box-shadow: var(--ig-elevation-0); -} - -::slotted(igc-icon) { - color: var-get($theme, 'idle-icon-color'); -} - -::slotted(igc-icon:hover) { - color: var-get($theme, 'hover-icon-color'); } diff --git a/src/components/navbar/themes/light/navbar.material.scss b/src/components/navbar/themes/light/navbar.material.scss index 348ab49f1..7b2cd2e09 100644 --- a/src/components/navbar/themes/light/navbar.material.scss +++ b/src/components/navbar/themes/light/navbar.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,16 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-navbar'); - - background: var-get($theme, 'background'); - color: var-get($theme, 'text-color'); - box-shadow: var(--ig-elevation-4); -} - -::slotted(igc-icon) { - color: var-get($theme, 'idle-icon-color'); -} - -::slotted(igc-icon:hover) { - color: var-get($theme, 'hover-icon-color'); } diff --git a/src/components/navbar/themes/shared/navbar.bootstrap.scss b/src/components/navbar/themes/shared/navbar.bootstrap.scss new file mode 100644 index 000000000..7f4c78a44 --- /dev/null +++ b/src/components/navbar/themes/shared/navbar.bootstrap.scss @@ -0,0 +1,30 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + box-shadow: var(--ig-elevation-0); + padding: 0 rem(8px); +} + +::slotted(igc-icon) { + color: var-get($theme, 'idle-icon-color'); +} + +::slotted(igc-icon:hover) { + color: var-get($theme, 'hover-icon-color'); +} + +[part='base'] { + padding-inline: rem(4px); +} + +::slotted(*) { + @include type-style('h5') { + line-height: normal; + margin: 0; + } +} diff --git a/src/components/navbar/themes/shared/navbar.fluent.scss b/src/components/navbar/themes/shared/navbar.fluent.scss new file mode 100644 index 000000000..37f9147e2 --- /dev/null +++ b/src/components/navbar/themes/shared/navbar.fluent.scss @@ -0,0 +1,25 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + box-shadow: var(--ig-elevation-4); +} + +::slotted(igc-icon) { + color: var-get($theme, 'idle-icon-color'); +} + +::slotted(igc-icon:hover) { + color: var-get($theme, 'hover-icon-color'); +} + +::slotted(*) { + @include type-style('subtitle-2') { + line-height: normal; + margin: 0; + } +} diff --git a/src/components/navbar/themes/shared/navbar.indigo.scss b/src/components/navbar/themes/shared/navbar.indigo.scss new file mode 100644 index 000000000..5c6a3199d --- /dev/null +++ b/src/components/navbar/themes/shared/navbar.indigo.scss @@ -0,0 +1,18 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + box-shadow: var(--ig-elevation-0); +} + +::slotted(igc-icon) { + color: var-get($theme, 'idle-icon-color'); +} + +::slotted(igc-icon:hover) { + color: var-get($theme, 'hover-icon-color'); +} diff --git a/src/components/navbar/themes/shared/navbar.material.scss b/src/components/navbar/themes/shared/navbar.material.scss new file mode 100644 index 000000000..1d27877cb --- /dev/null +++ b/src/components/navbar/themes/shared/navbar.material.scss @@ -0,0 +1,18 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + background: var-get($theme, 'background'); + color: var-get($theme, 'text-color'); + box-shadow: var(--ig-elevation-4); +} + +::slotted(igc-icon) { + color: var-get($theme, 'idle-icon-color'); +} + +::slotted(igc-icon:hover) { + color: var-get($theme, 'hover-icon-color'); +} diff --git a/src/components/navbar/themes/themes.ts b/src/components/navbar/themes/themes.ts new file mode 100644 index 000000000..8c0c521d2 --- /dev/null +++ b/src/components/navbar/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/navbar.bootstrap.css.js'; +import { styles as fluentDark } from './dark/navbar.fluent.css.js'; +import { styles as indigoDark } from './dark/navbar.indigo.css.js'; +import { styles as materialDark } from './dark/navbar.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/navbar.bootstrap.css.js'; +import { styles as fluentLight } from './light/navbar.fluent.css.js'; +import { styles as indigoLight } from './light/navbar.indigo.css.js'; +import { styles as materialLight } from './light/navbar.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/navbar.bootstrap.css.js'; +import { styles as fluent } from './shared/navbar.fluent.css.js'; +import { styles as indigo } from './shared/navbar.indigo.css.js'; +import { styles as material } from './shared/navbar.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/progress/circular-progress.ts b/src/components/progress/circular-progress.ts index aecd4f706..becc8a162 100644 --- a/src/components/progress/circular-progress.ts +++ b/src/components/progress/circular-progress.ts @@ -6,8 +6,7 @@ import { when } from 'lit/directives/when.js'; import { IgcProgressBaseComponent } from './base.js'; import IgcCircularGradientComponent from './circular-gradient.js'; import { styles } from './themes/circular/circular.progress.base.css.js'; -import { styles as bootstrap } from './themes/circular/circular.progress.bootstrap.css.js'; -import { styles as fluent } from './themes/circular/circular.progress.fluent.css.js'; +import { all } from './themes/circular/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { asPercent, partNameMap } from '../common/util.js'; @@ -35,8 +34,7 @@ import { asPercent, partNameMap } from '../common/util.js'; * @csspart info * @csspart success */ - -@themes({ light: { bootstrap, fluent }, dark: { bootstrap, fluent } }) +@themes(all, true) export default class IgcCircularProgressComponent extends IgcProgressBaseComponent { public static readonly tagName = 'igc-circular-progress'; public static override styles = styles; diff --git a/src/components/progress/linear-progress.ts b/src/components/progress/linear-progress.ts index bf0bc9887..0cf8b4403 100644 --- a/src/components/progress/linear-progress.ts +++ b/src/components/progress/linear-progress.ts @@ -4,9 +4,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { IgcProgressBaseComponent } from './base.js'; import { styles } from './themes/linear/linear.progress.base.css.js'; -import { styles as bootstrap } from './themes/linear/linear.progress.bootstrap.css.js'; -import { styles as fluent } from './themes/linear/linear.progress.fluent.css.js'; -import { styles as indigo } from './themes/linear/linear.progress.indigo.css.js'; +import { all } from './themes/linear/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { asPercent, partNameMap } from '../common/util.js'; @@ -31,10 +29,7 @@ import { asPercent, partNameMap } from '../common/util.js'; * @csspart info * @csspart success */ -@themes({ - light: { bootstrap, indigo, fluent }, - dark: { bootstrap, indigo, fluent }, -}) +@themes(all, true) export default class IgcLinearProgressComponent extends IgcProgressBaseComponent { public static readonly tagName = 'igc-linear-progress'; public static override styles = styles; diff --git a/src/components/progress/themes/shared.scss b/src/components/progress/themes/animations.scss similarity index 99% rename from src/components/progress/themes/shared.scss rename to src/components/progress/themes/animations.scss index 6d1663f2d..db21dbaef 100644 --- a/src/components/progress/themes/shared.scss +++ b/src/components/progress/themes/animations.scss @@ -164,7 +164,6 @@ $indeterminate-secondary-scale-step-3: cubic-bezier(.4, .627, .6, .902); align-items: center; justify-content: center; font-family: var(--ig-font-family); - color: $text-color; } %label { diff --git a/src/components/progress/themes/circular/circular.progress.base.scss b/src/components/progress/themes/circular/circular.progress.base.scss index b46f41653..2c7ea0f10 100644 --- a/src/components/progress/themes/circular/circular.progress.base.scss +++ b/src/components/progress/themes/circular/circular.progress.base.scss @@ -1,6 +1,6 @@ @use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../shared' as *; +@use '../animations' as *; @use '../vars' as *; :host { @@ -19,7 +19,6 @@ [part~='label'] { @extend %label !optional; - fill: $text-color; position: absolute; transform: translate(-50%, -50%); top: 50%; @@ -48,10 +47,6 @@ transform: rotate(-90deg); } -[part~='track'] { - stroke: $track-color; -} - [part~='fill'] { stroke-dasharray: #{$circumference} #{$circumference}; stroke-dashoffset: calc(#{$circumference} - var(--percentage) * #{$circumference}); @@ -77,31 +72,6 @@ transform-origin: center; } -[part~='gradient_start'], -[part~='gradient_end'] { - stop-color: $fill-color; -} - -:host([variant='danger']) [part~='gradient_start'], -:host([variant='danger']) [part~='gradient_end'] { - stop-color: $danger-color; -} - -:host([variant='warning']) [part~='gradient_start'], -:host([variant='warning']) [part~='gradient_end'] { - stop-color: $warning-color; -} - -:host([variant='info']) [part~='gradient_start'], -:host([variant='info']) [part~='gradient_end'] { - stop-color: $info-color; -} - -:host([variant='success']) [part~='gradient_start'], -:host([variant='success']) [part~='gradient_end'] { - stop-color: $success-color; -} - :host([dir='rtl']) { [part='svg indeterminate'] [part~='fill'] { animation-name: indeterminate-accordion-rtl; diff --git a/src/components/progress/themes/circular/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/circular.progress.bootstrap.scss deleted file mode 100644 index 4cafaa05c..000000000 --- a/src/components/progress/themes/circular/circular.progress.bootstrap.scss +++ /dev/null @@ -1,17 +0,0 @@ -:host { - --stroke-thickness: 4px; - --diameter: 28px; -} - -[part~='svg'][part~='indeterminate'] { - animation-duration: .75s; -} - -[part='svg indeterminate'] [part~='fill'] { - stroke-dashoffset: 60% !important; - animation: none; -} - -[part~='track'][part~='indeterminate'] { - stroke: transparent; -} diff --git a/src/components/progress/themes/circular/circular.progress.fluent.scss b/src/components/progress/themes/circular/circular.progress.fluent.scss deleted file mode 100644 index eef024047..000000000 --- a/src/components/progress/themes/circular/circular.progress.fluent.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use 'styles/utilities' as *; - -$track-color: color(primary, 50, .3); - -:host { - --stroke-thickness: 1.5px; -} - -[part~='track'] { - stroke: $track-color; -} - -// TODO If possible make the animation the same as the MS fluent diff --git a/src/components/progress/themes/circular/dark/_themes.scss b/src/components/progress/themes/circular/dark/_themes.scss new file mode 100644 index 000000000..882a0a722 --- /dev/null +++ b/src/components/progress/themes/circular/dark/_themes.scss @@ -0,0 +1,8 @@ +@use 'sass:map'; +@use 'styles/utilities' as *; +@use '../../../../../../node_modules/igniteui-theming/sass/themes/schemas/components/dark/progress' as *; + +$material: digest-schema($dark-progress-circular); +$bootstrap: digest-schema($dark-bootstrap-progress-circular); +$fluent: digest-schema($dark-fluent-progress-circular); +$indigo: digest-schema($dark-indigo-progress-circular); diff --git a/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss new file mode 100644 index 000000000..3d0bc6fe2 --- /dev/null +++ b/src/components/progress/themes/circular/dark/circular.progress.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/dark/circular.progress.fluent.scss b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss new file mode 100644 index 000000000..e77b833d9 --- /dev/null +++ b/src/components/progress/themes/circular/dark/circular.progress.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/dark/circular.progress.indigo.scss b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss new file mode 100644 index 000000000..420ca7907 --- /dev/null +++ b/src/components/progress/themes/circular/dark/circular.progress.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/dark/circular.progress.material.scss b/src/components/progress/themes/circular/dark/circular.progress.material.scss new file mode 100644 index 000000000..0a9b95c89 --- /dev/null +++ b/src/components/progress/themes/circular/dark/circular.progress.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/light/_themes.scss b/src/components/progress/themes/circular/light/_themes.scss new file mode 100644 index 000000000..f44a35a42 --- /dev/null +++ b/src/components/progress/themes/circular/light/_themes.scss @@ -0,0 +1,8 @@ +@use 'sass:map'; +@use 'styles/utilities' as *; +@use '../../../../../../node_modules/igniteui-theming/sass/themes/schemas/components/light/progress' as *; + +$material: digest-schema($light-progress-circular); +$bootstrap: digest-schema($bootstrap-progress-circular); +$fluent: digest-schema($fluent-progress-circular); +$indigo: digest-schema($indigo-progress-circular); diff --git a/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss new file mode 100644 index 000000000..3d0bc6fe2 --- /dev/null +++ b/src/components/progress/themes/circular/light/circular.progress.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/light/circular.progress.fluent.scss b/src/components/progress/themes/circular/light/circular.progress.fluent.scss new file mode 100644 index 000000000..e77b833d9 --- /dev/null +++ b/src/components/progress/themes/circular/light/circular.progress.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/light/circular.progress.indigo.scss b/src/components/progress/themes/circular/light/circular.progress.indigo.scss new file mode 100644 index 000000000..420ca7907 --- /dev/null +++ b/src/components/progress/themes/circular/light/circular.progress.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/light/circular.progress.material.scss b/src/components/progress/themes/circular/light/circular.progress.material.scss new file mode 100644 index 000000000..0a9b95c89 --- /dev/null +++ b/src/components/progress/themes/circular/light/circular.progress.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-circular-progress'); +} diff --git a/src/components/progress/themes/circular/shared/circular.progress.bootstrap.scss b/src/components/progress/themes/circular/shared/circular.progress.bootstrap.scss new file mode 100644 index 000000000..d17535e8f --- /dev/null +++ b/src/components/progress/themes/circular/shared/circular.progress.bootstrap.scss @@ -0,0 +1,56 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + --stroke-thickness: 4px; + --diameter: 28px; +} + +[part~='track'] { + stroke: var-get($theme, 'base-circle-color'); +} + +[part~='svg'][part~='indeterminate'] { + animation-duration: .75s; +} + +[part='svg indeterminate'] [part~='fill'] { + stroke-dashoffset: 60% !important; + animation: none; +} + +[part~='track'][part~='indeterminate'] { + stroke: transparent; +} + +[part~='label'] { + fill: var-get($theme, 'text-color'); +} + +[part~='gradient_start'], +[part~='gradient_end'] { + stop-color: var-get($theme, 'progress-circle-color'); +} + +:host([variant='danger']) [part~='gradient_start'], +:host([variant='danger']) [part~='gradient_end'] { + stop-color: color(error, 500); +} + +:host([variant='warning']) [part~='gradient_start'], +:host([variant='warning']) [part~='gradient_end'] { + stop-color: color(warn, 500); +} + +:host([variant='info']) [part~='gradient_start'], +:host([variant='info']) [part~='gradient_end'] { + stop-color: color(info, 500); +} + +:host([variant='success']) [part~='gradient_start'], +:host([variant='success']) [part~='gradient_end'] { + stop-color: color(success, 500); +} + diff --git a/src/components/progress/themes/circular/shared/circular.progress.fluent.scss b/src/components/progress/themes/circular/shared/circular.progress.fluent.scss new file mode 100644 index 000000000..8f879be19 --- /dev/null +++ b/src/components/progress/themes/circular/shared/circular.progress.fluent.scss @@ -0,0 +1,43 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +// TODO If possible make the animation the same as the MS fluent + +$theme: $fluent; + +:host { + --stroke-thickness: 1.5px; +} + +[part~='track'] { + stroke: var-get($theme, 'base-circle-color'); +} + +[part~='label'] { + fill: var-get($theme, 'text-color'); +} + +[part~='gradient_start'], +[part~='gradient_end'] { + stop-color: var-get($theme, 'progress-circle-color'); +} + +:host([variant='danger']) [part~='gradient_start'], +:host([variant='danger']) [part~='gradient_end'] { + stop-color: color(error, 500); +} + +:host([variant='warning']) [part~='gradient_start'], +:host([variant='warning']) [part~='gradient_end'] { + stop-color: color(warn, 500); +} + +:host([variant='info']) [part~='gradient_start'], +:host([variant='info']) [part~='gradient_end'] { + stop-color: color(info, 500); +} + +:host([variant='success']) [part~='gradient_start'], +:host([variant='success']) [part~='gradient_end'] { + stop-color: color(success, 500); +} diff --git a/src/components/progress/themes/circular/shared/circular.progress.indigo.scss b/src/components/progress/themes/circular/shared/circular.progress.indigo.scss new file mode 100644 index 000000000..f657eec94 --- /dev/null +++ b/src/components/progress/themes/circular/shared/circular.progress.indigo.scss @@ -0,0 +1,38 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +[part~='label'] { + fill: var-get($theme, 'text-color'); +} + +[part~='track'] { + stroke: var-get($theme, 'base-circle-color'); +} + +[part~='gradient_start'], +[part~='gradient_end'] { + stop-color: var-get($theme, 'progress-circle-color'); +} + +:host([variant='danger']) [part~='gradient_start'], +:host([variant='danger']) [part~='gradient_end'] { + stop-color: color(error, 500); +} + +:host([variant='warning']) [part~='gradient_start'], +:host([variant='warning']) [part~='gradient_end'] { + stop-color: color(warn, 500); +} + +:host([variant='info']) [part~='gradient_start'], +:host([variant='info']) [part~='gradient_end'] { + stop-color: color(info, 500); +} + +:host([variant='success']) [part~='gradient_start'], +:host([variant='success']) [part~='gradient_end'] { + stop-color: color(success, 500); +} + diff --git a/src/components/progress/themes/circular/shared/circular.progress.material.scss b/src/components/progress/themes/circular/shared/circular.progress.material.scss new file mode 100644 index 000000000..0d87bc27b --- /dev/null +++ b/src/components/progress/themes/circular/shared/circular.progress.material.scss @@ -0,0 +1,37 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +[part~='label'] { + fill: var-get($theme, 'text-color'); +} + +[part~='track'] { + stroke: var-get($theme, 'base-circle-color'); +} + +[part~='gradient_start'], +[part~='gradient_end'] { + stop-color: var-get($theme, 'progress-circle-color'); +} + +:host([variant='danger']) [part~='gradient_start'], +:host([variant='danger']) [part~='gradient_end'] { + stop-color: color(error, 500); +} + +:host([variant='warning']) [part~='gradient_start'], +:host([variant='warning']) [part~='gradient_end'] { + stop-color: color(warn, 500); +} + +:host([variant='info']) [part~='gradient_start'], +:host([variant='info']) [part~='gradient_end'] { + stop-color: color(info, 500); +} + +:host([variant='success']) [part~='gradient_start'], +:host([variant='success']) [part~='gradient_end'] { + stop-color: color(success, 500); +} diff --git a/src/components/progress/themes/circular/themes.ts b/src/components/progress/themes/circular/themes.ts new file mode 100644 index 000000000..0cb1f9637 --- /dev/null +++ b/src/components/progress/themes/circular/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/circular.progress.bootstrap.css.js'; +import { styles as fluentDark } from './dark/circular.progress.fluent.css.js'; +import { styles as indigoDark } from './dark/circular.progress.indigo.css.js'; +import { styles as materialDark } from './dark/circular.progress.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/circular.progress.bootstrap.css.js'; +import { styles as fluentLight } from './light/circular.progress.fluent.css.js'; +import { styles as indigoLight } from './light/circular.progress.indigo.css.js'; +import { styles as materialLight } from './light/circular.progress.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/circular.progress.bootstrap.css.js'; +import { styles as fluent } from './shared/circular.progress.fluent.css.js'; +import { styles as indigo } from './shared/circular.progress.indigo.css.js'; +import { styles as material } from './shared/circular.progress.material.css.js'; +import { Themes } from '../../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss new file mode 100644 index 000000000..c33d7e4b6 --- /dev/null +++ b/src/components/progress/themes/linear/dark/linear.progress.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/dark/linear.progress.fluent.scss b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss new file mode 100644 index 000000000..aefe118d8 --- /dev/null +++ b/src/components/progress/themes/linear/dark/linear.progress.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/dark/linear.progress.indigo.scss b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss new file mode 100644 index 000000000..cfac99414 --- /dev/null +++ b/src/components/progress/themes/linear/dark/linear.progress.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/dark/linear.progress.material.scss b/src/components/progress/themes/linear/dark/linear.progress.material.scss new file mode 100644 index 000000000..65a77a93a --- /dev/null +++ b/src/components/progress/themes/linear/dark/linear.progress.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/_dark-themes.scss b/src/components/progress/themes/linear/dark/themes.scss similarity index 71% rename from src/components/progress/themes/_dark-themes.scss rename to src/components/progress/themes/linear/dark/themes.scss index c9a588db5..23be5924e 100644 --- a/src/components/progress/themes/_dark-themes.scss +++ b/src/components/progress/themes/linear/dark/themes.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use 'styles/utilities' as *; -@use 'igniteui-theming/sass/themes/schemas/components/dark/progress' as *; +@use '../../../../../../node_modules/igniteui-theming/sass/themes/schemas/components/dark/progress' as *; $material: digest-schema($dark-progress-linear); $bootstrap: digest-schema($dark-bootstrap-progress-linear); diff --git a/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss new file mode 100644 index 000000000..c33d7e4b6 --- /dev/null +++ b/src/components/progress/themes/linear/light/linear.progress.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/light/linear.progress.fluent.scss b/src/components/progress/themes/linear/light/linear.progress.fluent.scss new file mode 100644 index 000000000..aefe118d8 --- /dev/null +++ b/src/components/progress/themes/linear/light/linear.progress.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/light/linear.progress.indigo.scss b/src/components/progress/themes/linear/light/linear.progress.indigo.scss new file mode 100644 index 000000000..cfac99414 --- /dev/null +++ b/src/components/progress/themes/linear/light/linear.progress.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/linear/light/linear.progress.material.scss b/src/components/progress/themes/linear/light/linear.progress.material.scss new file mode 100644 index 000000000..65a77a93a --- /dev/null +++ b/src/components/progress/themes/linear/light/linear.progress.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-linear-progress'); +} diff --git a/src/components/progress/themes/_light-themes.scss b/src/components/progress/themes/linear/light/themes.scss similarity index 70% rename from src/components/progress/themes/_light-themes.scss rename to src/components/progress/themes/linear/light/themes.scss index f36849c59..1e5c6d2eb 100644 --- a/src/components/progress/themes/_light-themes.scss +++ b/src/components/progress/themes/linear/light/themes.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use 'styles/utilities' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/progress' as *; +@use '../../../../../../node_modules/igniteui-theming/sass/themes/schemas/components/light/progress' as *; $material: digest-schema($light-progress-linear); $bootstrap: digest-schema($bootstrap-progress-linear); diff --git a/src/components/progress/themes/linear/linear.progress.base.scss b/src/components/progress/themes/linear/linear.progress.base.scss index 0abe4f43c..de926f4e7 100644 --- a/src/components/progress/themes/linear/linear.progress.base.scss +++ b/src/components/progress/themes/linear/linear.progress.base.scss @@ -1,13 +1,9 @@ -@use '../shared' as *; -@use '../vars' as *; @use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../light-themes' as *; - -$theme: $material; +@use '../animations' as *; +@use '../vars' as *; :host { - @include css-vars-from-theme($theme, 'ig-linear-bar'); @extend %host !optional; display: flex; @@ -31,11 +27,9 @@ $theme: $material; } [part~='track'] { - border-radius: var-get($theme, 'track-border-radius'); position: relative; width: inherit; height: var(--track-size); - background: $track-color; overflow: hidden; z-index: 0; } @@ -87,113 +81,13 @@ $theme: $material; [part~='value'] { margin: 0; - color: $text-color; font-size: em(14px); font-weight: 600; } -// Colors -[part~='primary']:not([part~='indeterminate']) { - background-color: $primary-color; -} - -[part~='primary'] { - &::after { - background-color: $primary-color; - } -} - [part~='striped'][part~='primary']:not([part~='indeterminate']) { width: 100%; height: 100%; - - @include stripe-colors($primary-color, $stripe-grays, $stripe-size, -45deg); -} - -[part~='striped'][part~='primary'] { - &::after { - @include stripe-colors($primary-color, $stripe-grays, $stripe-size, -45deg); - } -} - -[part~='danger']:not([part~='indeterminate']) { - background-color: $danger-color; -} - -[part~='danger'] { - &::after { - background-color: $danger-color; - } -} - -[part~='striped'][part~='danger']:not([part~='indeterminate']) { - @include stripe-colors($danger-color, $stripe-grays, $stripe-size, -45deg); -} - -[part~='striped'][part~='danger'] { - &::after { - @include stripe-colors($danger-color, $stripe-grays, $stripe-size, -45deg); - } -} - -[part~='warning']:not([part~='indeterminate']) { - background-color: $warning-color; -} - -[part~='warning'] { - &::after { - background-color: $warning-color; - } -} - -[part~='striped'][part~='warning']:not([part~='indeterminate']) { - @include stripe-colors($warning-color, $stripe-grays, $stripe-size, -45deg); -} - -[part~='striped'][part~='warning'] { - &::after { - @include stripe-colors($warning-color, $stripe-grays, $stripe-size, -45deg); - } -} - -[part~='info']:not([part~='indeterminate']) { - background-color: $info-color; -} - -[part~='info'] { - &::after { - background-color: $info-color; - } -} - -[part~='striped'][part~='info']:not([part~='indeterminate']) { - @include stripe-colors($info-color, $stripe-grays, $stripe-size, -45deg); -} - -[part~='striped'][part~='info'] { - &::after { - @include stripe-colors($info-color, $stripe-grays, $stripe-size, -45deg); - } -} - -[part~='success']:not([part~='indeterminate']) { - background-color: $success-color; -} - -[part~='success'] { - &::after { - background-color: $success-color; - } -} - -[part~='striped'][part~='success']:not([part~='indeterminate']) { - @include stripe-colors($success-color, $stripe-grays, $stripe-size, -45deg); -} - -[part~='striped'][part~='success'] { - &::after { - @include stripe-colors($success-color, $stripe-grays, $stripe-size, -45deg); - } } // Label Positions diff --git a/src/components/progress/themes/linear/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/linear.progress.bootstrap.scss deleted file mode 100644 index 2ffc4415e..000000000 --- a/src/components/progress/themes/linear/linear.progress.bootstrap.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../shared' as *; -@use '../vars' as *; -@use '../light-themes' as *; - -$theme: $bootstrap; -$stripe-grays: color(gray, 50, .2); -$stripe-size: rem(5px); - -:host { - @include css-vars-from-theme($theme, 'ig-linear-bar'); - - --track-size: #{rem(16px)}; -} - -[part~='track'] { - border-radius: var-get($theme, 'track-border-radius'); -} - -[part~='striped'][part~='primary']:not([part~='indeterminate']) { - @include stripe-colors($primary-color, $stripe-grays, $stripe-size, 45deg); -} - -[part~='striped'][part~='primary'] { - &::after { - @include stripe-colors($primary-color, $stripe-grays, $stripe-size, 45deg); - } -} - -[part~='striped'][part~='danger']:not([part~='indeterminate']) { - @include stripe-colors($danger-color, $stripe-grays, $stripe-size, 45deg); -} - -[part~='striped'][part~='danger'] { - &::after { - @include stripe-colors($danger-color, $stripe-grays, $stripe-size, 45deg); - } -} - -[part~='striped'][part~='warning']:not([part~='indeterminate']) { - @include stripe-colors($warning-color, $stripe-grays, $stripe-size, 45deg); -} - -[part~='striped'][part~='warning'] { - &::after { - @include stripe-colors($warning-color, $stripe-grays, $stripe-size, 45deg); - } -} - -[part~='striped'][part~='info']:not([part~='indeterminate']) { - @include stripe-colors($info-color, $stripe-grays, $stripe-size, 45deg); -} - -[part~='striped'][part~='info'] { - &::after { - @include stripe-colors($info-color, $stripe-grays, $stripe-size, 45deg); - } -} - -[part~='striped'][part~='success']:not([part~='indeterminate']) { - @include stripe-colors($success-color, $stripe-grays, $stripe-size, 45deg); -} - -[part~='striped'][part~='success'] { - &::after { - @include stripe-colors($success-color, $stripe-grays, $stripe-size, 45deg); - } -} diff --git a/src/components/progress/themes/linear/linear.progress.fluent.scss b/src/components/progress/themes/linear/linear.progress.fluent.scss deleted file mode 100644 index e98a83d7c..000000000 --- a/src/components/progress/themes/linear/linear.progress.fluent.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../vars' as *; -@use '../light-themes' as *; - -$theme: $fluent; -$track-color: color(gray, 200); - -:host { - @include css-vars-from-theme($theme, 'ig-linear-bar'); - - --track-size: #{rem(2px)}; - --linear-animation-duration: 3000ms; -} - -[part~='track'] { - border-radius: var-get($theme, 'track-border-radius'); - background: $track-color; - margin: rem(8px) 0; -} - -[part~='label'] { - font-size: rem(14px); - font-weight: 400; -} - -[part~='indeterminate']:not([part~='secondary']) { - width: 33% !important; - min-width: 33%; - animation-name: indeterminate-bar-fluent; - animation-duration: var(--linear-animation-duration); - animation-timing-function: ease; - animation-iteration-count: infinite; - left: auto; - - &::after { - display: none; - } -} - -[part~='secondary'] { - display: none; -} - -:host([dir='rtl']) { - [part~='indeterminate'] { - animation-name: indeterminate-bar-fluent-rtl; - } -} - -[part~='primary'][part~='indeterminate'] { - background: linear-gradient(90deg, transparent 0%, $primary-color 50%, transparent 100%); -} - -[part~='danger'][part~='indeterminate'] { - background: linear-gradient(90deg, transparent 0%, $danger-color 50%, transparent 100%); -} - -[part~='warning'][part~='indeterminate'] { - background: linear-gradient(90deg, transparent 0%, $warning-color 50%, transparent 100%); -} - -[part~='info'][part~='indeterminate'] { - background: linear-gradient(90deg, transparent 0%, $info-color 50%, transparent 100%); -} - -[part~='success'][part~='indeterminate'] { - background: linear-gradient(90deg, transparent 0%, $success-color 50%, transparent 100%); -} diff --git a/src/components/progress/themes/linear/linear.progress.indigo.scss b/src/components/progress/themes/linear/linear.progress.indigo.scss deleted file mode 100644 index ad5d8fdbe..000000000 --- a/src/components/progress/themes/linear/linear.progress.indigo.scss +++ /dev/null @@ -1,29 +0,0 @@ -@use 'sass:map'; -@use 'styles/utilities' as *; -@use '../light-themes' as *; - -$theme: $indigo; -$stripe-grays: color(gray, 50, .7); -$stripe-primary: color(secondary, 500); -$stripe-size: rem(6px); -$stripe-space: rem(14px); - -:host { - @include css-vars-from-theme($theme, 'ig-linear-bar'); -} - -[part~='track'] { - border-radius: var-get($theme, 'track-border-radius'); -} - -[part~='striped']:not([part~='indeterminate']) { - /* stylelint-disable */ - background: $stripe-primary repeating-linear-gradient( - 45deg, - $stripe-primary, - $stripe-primary $stripe-size, - $stripe-grays $stripe-size, - $stripe-grays $stripe-space - ); - /* stylelint-enable */ -} diff --git a/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss new file mode 100644 index 000000000..423400351 --- /dev/null +++ b/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss @@ -0,0 +1,120 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../vars' as *; +@use '../../animations' as *; + +$theme: $bootstrap; +$stripe-size: rem(5px); + +:host { + --track-size: #{rem(16px)}; +} + +[part~='track'] { + background: var-get($theme, 'track-color'); + border-radius: var-get($theme, 'track-border-radius'); +} + +[part~='value'] { + color: var-get($theme, 'text-color') +} + +[part~='primary']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-default'); +} + +[part~='primary'] { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } +} + +[part~='striped'][part~='primary']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); +} + +[part~='striped'][part~='primary'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); + } +} + +[part~='danger']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-default'); +} + +[part~='danger'] { + &::after { + background-color: var-get($theme, 'fill-color-danger'); + } +} + +[part~='striped'][part~='danger']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); +} + +[part~='striped'][part~='danger'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); + } +} + +[part~='warning']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-warning'); +} + +[part~='warning'] { + &::after { + background-color: var-get($theme, 'fill-color-warning'); + } +} + +[part~='striped'][part~='warning']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); +} + +[part~='striped'][part~='warning'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); + } +} + +[part~='info']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-info'); +} + +[part~='info'] { + &::after { + background-color: var-get($theme, 'fill-color-info'); + } +} + +[part~='striped'][part~='info']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); +} + +[part~='striped'][part~='info'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); + } +} + +[part~='success']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-success'); +} + +[part~='success'] { + &::after { + background-color: var-get($theme, 'fill-color-success'); + } +} + +[part~='striped'][part~='success']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); +} + +[part~='striped'][part~='success'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, 45deg); + } +} diff --git a/src/components/progress/themes/linear/shared/linear.progress.fluent.scss b/src/components/progress/themes/linear/shared/linear.progress.fluent.scss new file mode 100644 index 000000000..8465b25cc --- /dev/null +++ b/src/components/progress/themes/linear/shared/linear.progress.fluent.scss @@ -0,0 +1,171 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../vars' as *; +@use '../../animations' as *; + +$theme: $fluent; +$track-color: color(gray, 200); + +:host { + --track-size: #{rem(2px)}; + --linear-animation-duration: 3000ms; +} + +:host([dir='rtl']) { + [part~='indeterminate'] { + animation-name: indeterminate-bar-fluent-rtl; + } +} + +[part~='track'] { + border-radius: var-get($theme, 'track-border-radius'); + background: var-get($theme, 'track-color'); + margin: rem(8px) 0; +} + +[part~='label'] { + font-size: rem(14px); + font-weight: 400; +} + +[part~='value'] { + color: var-get($theme, 'text-color') +} + +[part~='primary']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-default'); +} + +[part~='primary'] { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } +} + +[part~='indeterminate']:not([part~='secondary']) { + width: 33% !important; + min-width: 33%; + animation-name: indeterminate-bar-fluent; + animation-duration: var(--linear-animation-duration); + animation-timing-function: ease; + animation-iteration-count: infinite; + left: auto; + + &::after { + display: none; + } +} + +[part~='secondary'] { + display: none; +} + +[part~='primary'][part~='indeterminate'] { + background: linear-gradient(90deg, transparent 0%, var-get($theme, 'fill-color-default') 50%, transparent 100%); +} + +[part~='danger'][part~='indeterminate'] { + background: linear-gradient(90deg, transparent 0%, var-get($theme, 'fill-color-danger') 50%, transparent 100%); +} + +[part~='warning'][part~='indeterminate'] { + background: linear-gradient(90deg, transparent 0%, var-get($theme, 'fill-color-warning') 50%, transparent 100%); +} + +[part~='info'][part~='indeterminate'] { + background: linear-gradient(90deg, transparent 0%, var-get($theme, 'fill-color-info') 50%, transparent 100%); +} + +[part~='success'][part~='indeterminate'] { + background: linear-gradient(90deg, transparent 0%, var-get($theme, 'fill-color-success') 50%, transparent 100%); +} + +[part~='striped'][part~='primary']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='primary'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='danger']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-danger'); +} + +[part~='danger'] { + &::after { + background-color: var-get($theme, 'fill-color-danger'); + } +} + +[part~='striped'][part~='danger']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='danger'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='warning']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-warning'); +} + +[part~='warning'] { + &::after { + background-color: var-get($theme, 'fill-color-warning'); + } +} + +[part~='striped'][part~='warning']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='warning'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='info']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-info'); +} + +[part~='info'] { + &::after { + background-color: var-get($theme, 'fill-color-info'); + } +} + +[part~='striped'][part~='info']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='info'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='success']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-success'); +} + +[part~='success'] { + &::after { + background-color: var-get($theme, 'fill-color-success'); + } +} + +[part~='striped'][part~='success']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='success'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} diff --git a/src/components/progress/themes/linear/shared/linear.progress.indigo.scss b/src/components/progress/themes/linear/shared/linear.progress.indigo.scss new file mode 100644 index 000000000..4a0f05102 --- /dev/null +++ b/src/components/progress/themes/linear/shared/linear.progress.indigo.scss @@ -0,0 +1,130 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../vars' as *; +@use '../../animations' as *; + +$theme: $indigo; +$stripe-size: rem(6px); +$stripe-space: rem(14px); + +[part~='track'] { + border-radius: var-get($theme, 'track-border-radius'); + background: var-get($theme, 'track-color'); +} + +[part~='striped']:not([part~='indeterminate']) { + /* stylelint-disable */ + background: var-get($theme, 'fill-color-default') repeating-linear-gradient( + 45deg, + var-get($theme, 'fill-color-default'), + var-get($theme, 'fill-color-default') $stripe-size, + var-get($theme, 'stripes-color') $stripe-size, + var-get($theme, 'stripes-color') $stripe-space + ); + /* stylelint-enable */ +} + + +[part~='value'] { + color: var-get($theme, 'text-color') +} + +[part~='primary']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-default'); +} + +[part~='primary'] { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } +} + +[part~='striped'][part~='primary']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='primary'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='danger']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-danger'); +} + +[part~='danger'] { + &::after { + background-color: var-get($theme, 'fill-color-danger'); + } +} + +[part~='striped'][part~='danger']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='danger'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='warning']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-warning'); +} + +[part~='warning'] { + &::after { + background-color: var-get($theme, 'fill-color-warning'); + } +} + +[part~='striped'][part~='warning']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='warning'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='info']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-info'); +} + +[part~='info'] { + &::after { + background-color: var-get($theme, 'fill-color-info'); + } +} + +[part~='striped'][part~='info']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='info'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='success']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-success'); +} + +[part~='success'] { + &::after { + background-color: var-get($theme, 'fill-color-success'); + } +} + +[part~='striped'][part~='success']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='success'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} diff --git a/src/components/progress/themes/linear/shared/linear.progress.material.scss b/src/components/progress/themes/linear/shared/linear.progress.material.scss new file mode 100644 index 000000000..91638a1b1 --- /dev/null +++ b/src/components/progress/themes/linear/shared/linear.progress.material.scss @@ -0,0 +1,115 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../vars' as *; +@use '../../animations' as *; + +$theme: $material; + +[part~='track'] { + border-radius: var-get($theme, 'track-border-radius'); + background: var-get($theme, 'track-color'); +} + +[part~='value'] { + color: var-get($theme, 'text-color'); +} + +[part~='primary']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-default'); +} + +[part~='primary'] { + &::after { + background-color: var-get($theme, 'fill-color-default'); + } +} + +[part~='striped'][part~='primary']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='primary'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-default'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='danger']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-danger'); +} + +[part~='danger'] { + &::after { + background-color: var-get($theme, 'fill-color-danger'); + } +} + +[part~='striped'][part~='danger']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='danger'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-danger'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='warning']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-warning'); +} + +[part~='warning'] { + &::after { + background-color: var-get($theme, 'fill-color-warning'); + } +} + +[part~='striped'][part~='warning']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='warning'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-warning'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='info']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-info'); +} + +[part~='info'] { + &::after { + background-color: var-get($theme, 'fill-color-info'); + } +} + +[part~='striped'][part~='info']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='info'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-info'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} + +[part~='success']:not([part~='indeterminate']) { + background-color: var-get($theme, 'fill-color-success'); +} + +[part~='success'] { + &::after { + background-color: var-get($theme, 'fill-color-success'); + } +} + +[part~='striped'][part~='success']:not([part~='indeterminate']) { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); +} + +[part~='striped'][part~='success'] { + &::after { + @include stripe-colors(var-get($theme, 'fill-color-success'), var-get($theme, 'stripes-color'), $stripe-size, -45deg); + } +} diff --git a/src/components/progress/themes/linear/themes.ts b/src/components/progress/themes/linear/themes.ts new file mode 100644 index 000000000..58aa92351 --- /dev/null +++ b/src/components/progress/themes/linear/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/linear.progress.bootstrap.css.js'; +import { styles as fluentDark } from './dark/linear.progress.fluent.css.js'; +import { styles as indigoDark } from './dark/linear.progress.indigo.css.js'; +import { styles as materialDark } from './dark/linear.progress.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/linear.progress.bootstrap.css.js'; +import { styles as fluentLight } from './light/linear.progress.fluent.css.js'; +import { styles as indigoLight } from './light/linear.progress.indigo.css.js'; +import { styles as materialLight } from './light/linear.progress.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/linear.progress.bootstrap.css.js'; +import { styles as fluent } from './shared/linear.progress.fluent.css.js'; +import { styles as indigo } from './shared/linear.progress.indigo.css.js'; +import { styles as material } from './shared/linear.progress.material.css.js'; +import { Themes } from '../../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/progress/themes/vars.scss b/src/components/progress/themes/vars.scss index 107959634..f35c81e04 100644 --- a/src/components/progress/themes/vars.scss +++ b/src/components/progress/themes/vars.scss @@ -1,15 +1,6 @@ @use 'styles/utilities' as *; -$danger-color: color(error, 500); -$warning-color: color(warn, 500); -$success-color: color(success, 500); -$info-color: color(info, 500); -$primary-color: color(primary, 500); -$text-color: color(gray, 900); -$track-color: color(gray, 300); -$fill-color: $primary-color; $background-size: #{rem(40px)} #{rem(40px)}; -$stripe-grays: color(gray, 50, .7); $stripe-size: rem(16px); $animation-direction: normal; $animation-direction-rtl: reverse; diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index c90f32e9d..52e4dc583 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -3,11 +3,8 @@ import { property, query, queryAssignedNodes, state } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; -import { styles } from './themes/light/radio.base.css.js'; -import { styles as bootstrap } from './themes/light/radio.bootstrap.css.js'; -import { styles as fluent } from './themes/light/radio.fluent.css.js'; -import { styles as indigo } from './themes/light/radio.indigo.css.js'; -import { styles as material } from './themes/light/radio.material.css.js'; +import { styles } from './themes/radio.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { alternateName } from '../common/decorators/alternateName.js'; import { blazorTwoWayBind } from '../common/decorators/blazorTwoWayBind.js'; @@ -64,10 +61,7 @@ type RadioQueryResult = { * @csspart control - The radio control. * @csspart label - The radio control label. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all) export default class IgcRadioComponent extends FormAssociatedRequiredMixin( EventEmitterMixin>(LitElement) ) { diff --git a/src/components/radio/themes/dark/radio.bootstrap.scss b/src/components/radio/themes/dark/radio.bootstrap.scss index 6b073af64..24d014c85 100644 --- a/src/components/radio/themes/dark/radio.bootstrap.scss +++ b/src/components/radio/themes/dark/radio.bootstrap.scss @@ -1,8 +1,6 @@ -@use '../../../../styles/utilities' as *; +@use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-radio { - @include css-vars-from-theme($bootstrap, 'ig-radio'); - } +:host { + @include css-vars-from-theme($bootstrap, 'ig-radio'); } diff --git a/src/components/radio/themes/dark/radio.fluent.scss b/src/components/radio/themes/dark/radio.fluent.scss index 8249dc561..566b1c0e0 100644 --- a/src/components/radio/themes/dark/radio.fluent.scss +++ b/src/components/radio/themes/dark/radio.fluent.scss @@ -1,8 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-radio { - @include css-vars-from-theme($fluent, 'ig-radio'); - } +:host { + @include css-vars-from-theme($fluent, 'ig-radio'); } diff --git a/src/components/radio/themes/dark/radio.indigo.scss b/src/components/radio/themes/dark/radio.indigo.scss index 195589c82..e384ab464 100644 --- a/src/components/radio/themes/dark/radio.indigo.scss +++ b/src/components/radio/themes/dark/radio.indigo.scss @@ -1,9 +1,6 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-radio { - @include css-vars-from-theme($indigo, 'ig-radio'); - } +:host { + @include css-vars-from-theme($indigo, 'ig-radio'); } diff --git a/src/components/radio/themes/dark/radio.material.scss b/src/components/radio/themes/dark/radio.material.scss index 03029e138..9cb2ffe2f 100644 --- a/src/components/radio/themes/dark/radio.material.scss +++ b/src/components/radio/themes/dark/radio.material.scss @@ -1,28 +1,22 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-radio { - @include css-vars-from-theme($material, 'ig-radio'); - - &:hover { - &::part(ripple) { - opacity: .12; - } +:host { + @include css-vars-from-theme($material, 'ig-radio'); +} - &::part(ripple checked) { - opacity: .12; - } +[part~='base'] { + &:hover { + [part~='ripple'], + [part~='ripple checked'] { + opacity: 0.12; } + } - &:focus-within { - &::part(ripple) { - opacity: .24; - } - - &::part(ripple checked) { - opacity: .24; - } + &:focus-within { + [part='ripple'], + [part='ripple checked'] { + opacity: 0.24; } } } diff --git a/src/components/radio/themes/light/radio.bootstrap.scss b/src/components/radio/themes/light/radio.bootstrap.scss index 0379a9c00..8d12104a9 100644 --- a/src/components/radio/themes/light/radio.bootstrap.scss +++ b/src/components/radio/themes/light/radio.bootstrap.scss @@ -5,105 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-radio'); - - &::part(base) { - transition: none; - } -} - -[part~='label'] { - color: var-get($theme, 'label-color'); -} - -[part~='base'] { - gap: rem(8px); -} - -[part~='control'] { - --size: #{rem(16px)}; - - border-radius: var(--size); - width: var(--size); - height: var(--size); - min-width: var(--size); - background: none; - transition: transparent; - - &::before, - &::after { - transition: none; - border-radius: calc(var(--size) / 2); - } - - &::before { - transform: translate(-50%, -50%) scale(.375); - } - - &::after { - width: inherit; - height: inherit; - min-width: inherit; - border: rem(1px) solid var-get($theme, 'empty-color'); - } -} - -[part~='focused'] [part~='control'] { - box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'); - - &::after { - border-color: var-get($theme, 'fill-color'); - } -} - -[part='control checked'] { - &::after { - background: var-get($theme, 'fill-color'); - border-color: var-get($theme, 'fill-color'); - } - - &::before { - border-color: var-get($theme, 'fill-hover-border-color'); - background: var-get($theme, 'fill-hover-border-color'); - } -} - -:host(:not([disabled])[invalid]), -:host(:not(:disabled)[invalid]) { - [part~='label'] { - color: var-get($theme, 'error-color'); - } - - [part~='control']::after { - border-color: var-get($theme, 'error-color'); - } - - [part='control checked'] { - &::after { - background: var-get($theme, 'error-color'); - } - } - - [part~='focused'] [part~='control'] { - box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover'); - } -} - -:host([disabled]), -:host(:disabled) { - [part~='label'] { - color: var-get($theme, 'disabled-label-color'); - } - - [part='control'] { - &::after { - border-color: var-get($theme, 'disabled-label-color'); - } - } - - [part='control checked'] { - &::after { - background: var-get($theme, 'disabled-color'); - border-color: var-get($theme, 'disabled-color'); - } - } } diff --git a/src/components/radio/themes/light/radio.fluent.scss b/src/components/radio/themes/light/radio.fluent.scss index 40fed3864..b81f580fe 100644 --- a/src/components/radio/themes/light/radio.fluent.scss +++ b/src/components/radio/themes/light/radio.fluent.scss @@ -6,172 +6,3 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-radio'); } - -[part~='label'] { - @include type-style('body-2'); - - color: var-get($theme, 'label-color'); -} - -:host [part~='base'] { - transition-duration: .1s; - gap: rem(6px); -} - -:host [part~='control'] { - border-radius: var(--size); - width: var(--size); - height: var(--size); - min-width: var(--size); - - // TODO SEE IF THIS CAN BE REMOVED - transition: none; - - &::before, - &::after { - border-radius: calc(var(--size) / 2); - width: var(--size); - height: var(--size); - inset-inline-start: 0; - top: 0; - - // TODO SEE IF THIS CAN BE REMOVED - transform: none; - } - - &::before { - backface-visibility: hidden; - transform: scale(0); - transition: all .2s ease-in; - z-index: 1; - } - - &::after { - border: rem(1px) solid var-get($theme, 'empty-color'); - } -} - -:host [part='control checked'] { - &::before { - border-color: var-get($theme, 'fill-color'); - background: var-get($theme, 'fill-color'); - transform: scale(.5); - } - - &::after { - border-color: var-get($theme, 'fill-color'); - } -} - -[part~='focused'] { - position: relative; - - $focus-outline-offset-top: rem(2px); - $focus-outline-offset-left: rem(2px); - - &::after { - content: ''; - position: absolute; - top: -$focus-outline-offset-top; - left: -$focus-outline-offset-left; - box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color'); - width: calc(100% + (#{$focus-outline-offset-left} * 2)); - height: calc(100% + (#{$focus-outline-offset-top} * 2)); - } - - [part='control'] { - &::before { - background: var-get($theme, 'hover-color') - } - } -} - -:host(:hover) { - [part='control'] { - &::before { - background: var-get($theme, 'hover-color'); - transform: scale(.5); - } - } - - [part='control checked'] { - &::after { - border-color: var-get($theme, 'fill-hover-border-color'); - } - - &::before { - background: var-get($theme, 'fill-color-hover'); - border-color: var-get($theme, 'fill-hover-border-color'); - } - } -} - -:host(:not([disabled])[invalid]:hover) { - [part='control'] { - &::after { - border-color: var-get($theme, 'error-color-hover'); - } - - &::before { - background: var-get($theme, 'error-color-hover'); - } - } - - [part='control checked'] { - &::after { - border-color: var-get($theme, 'error-color-hover'); - } - - &::before { - background: var-get($theme, 'error-color-hover'); - } - } -} - -:host(:not([disabled])[invalid]) { - [part~='label'] { - color: var-get($theme, 'error-color'); - } - - [part~='control'] { - &::after { - border-color: var-get($theme, 'error-color'); - } - } - - [part='control checked'] { - &::before { - background: var-get($theme, 'error-color'); - } - } - - [part='focused'] [part='control'] { - &::after { - border-color: var-get($theme, 'error-color-hover'); - } - - &::before { - background: var-get($theme, 'error-color-hover'); - } - } -} - -:host([disabled]), -:host(:disabled) { - [part~='label'] { - color: var-get($theme, 'disabled-label-color'); - } - - [part~='control'] { - &::after { - border-color: var-get($theme, 'disabled-color'); - } - } - - [part='control checked'] { - &::before { - background: var-get($theme, 'disabled-color'); - border-color: var-get($theme, 'disabled-color'); - } - } -} diff --git a/src/components/radio/themes/light/radio.indigo.scss b/src/components/radio/themes/light/radio.indigo.scss index e09bbd2c8..c3aa55131 100644 --- a/src/components/radio/themes/light/radio.indigo.scss +++ b/src/components/radio/themes/light/radio.indigo.scss @@ -2,112 +2,7 @@ @use 'themes' as *; $theme: $indigo; -$border-color: var(--border-color, color(gray, 600)) !default; -$checked-color: var(--checked-color, color(secondary, 500)) !default; -$disabled-color: var(--disabled-color, color(gray, 300)) !default; :host { @include css-vars-from-theme($theme, 'ig-radio'); - - font-weight: 600; -} - -[part~='base'] { - gap: rem(8px); -} - -[part~='label'] { - color: var-get($theme, 'label-color'); -} - -[part~='control'] { - border-radius: var(--size); - width: var(--size, rem(20px)); - height: var(--size, rem(20px)); - min-width: var(--size, rem(20px)); - transition: none; - background: none; - - &::before, - &::after { - border-radius: calc(var(--size) / 2); - } - - &::after { - border: rem(2px) solid var-get($theme, 'empty-color'); - } -} - -[part='control checked'] { - &::after { - border-color: var-get($theme, 'fill-color'); - } - - &::before { - background: var-get($theme, 'fill-color-hover'); - border-color: var-get($theme, 'fill-hover-border-color'); - } -} - -[part~='focused'] { - [part='control'] { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); - } - - [part='control checked'] { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused'); - } -} - -:host(:not([disabled])[invalid]), -:host(:not(:disabled)[invalid]) { - [part~='label'] { - color: var-get($theme, 'error-color'); - } - - [part='control'] { - &::after { - border-color: var-get($theme, 'error-color'); - } - } - - [part='control checked'] { - &::after { - border-color: var-get($theme, 'error-color'); - } - - &::before { - background: var-get($theme, 'error-color'); - } - } - - [part~='focused'] { - [part~='control'], - [part='control checked'] { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-color-hover'); - } - } -} - -:host([disabled]), -:host(:disabled) { - [part~='label'] { - color: var-get($theme, 'disabled-label-color'); - } - - [part='control'] { - &::after { - border-color: var-get($theme, 'disabled-color'); - } - } - - [part='control checked'] { - &::after { - border-color: var-get($theme, 'disabled-color'); - } - - &::before { - background: var-get($theme, 'disabled-color'); - } - } } diff --git a/src/components/radio/themes/light/radio.material.scss b/src/components/radio/themes/light/radio.material.scss index 230107572..d8397735f 100644 --- a/src/components/radio/themes/light/radio.material.scss +++ b/src/components/radio/themes/light/radio.material.scss @@ -3,128 +3,6 @@ $theme: $material; -[part~='ripple'] { - border-radius: var(--size); - display: block; - position: absolute; - top: calc(50% - 1.25rem); - width: calc(var(--size) * 2); - height: calc(var(--size) * 2); - min-width: calc(var(--size) * 2); - overflow: hidden; - pointer-events: none; - filter: opacity(1); -} - :host { @include css-vars-from-theme($theme, 'ig-radio'); } - -[part~='label'] { - color: var-get($theme, 'label-color'); -} - -[part~='base'] { - gap: rem(2px); - - &:hover { - [part~='ripple'] { - background: var-get($theme, 'empty-color'); - opacity: .06; - } - - [part='ripple checked'] { - background: var-get($theme, 'fill-color'); - opacity: .06; - } - } - - &:focus-within { - [part='ripple'] { - background: var-get($theme, 'empty-color'); - opacity: .12; - } - - [part='ripple checked'] { - background: var-get($theme, 'fill-color'); - opacity: .12; - } - } -} - -[part~='control'] { - border-radius: var(--size); - position: relative; - - &::before, - &::after { - border-radius: calc(var(--size) / 2); - } - - &::after { - border: calc(var(--size) / 10) solid var-get($theme, 'empty-color'); - } -} - -[part='control checked'] { - &::before { - border-color: var-get($theme, 'fill-color'); - background: var-get($theme, 'fill-color'); - } - - &::after { - border-color: var-get($theme, 'fill-color'); - } -} - -:host(:not([disabled])[invalid]) { - [part~='label'] { - color: var-get($theme, 'error-color'); - } - - [part~='control'] { - &::after { - border-color: var-get($theme, 'error-color'); - } - } - - [part='control checked'] { - &::before { - background: var-get($theme, 'error-color'); - } - } - - [part~='base'] { - &:hover { - [part~='ripple'] { - background: var-get($theme, 'error-color'); - } - } - - &:focus-within { - [part~='ripple'] { - background: var-get($theme, 'error-color'); - } - } - } -} - -:host([disabled]), -:host(:disabled) { - [part~='label'] { - color: var-get($theme, 'disabled-label-color'); - } - - [part~='control'] { - &::after { - border-color: var-get($theme, 'disabled-color'); - } - } - - [part='control checked'] { - &::before { - background: var-get($theme, 'disabled-color'); - border-color: var-get($theme, 'disabled-color'); - } - } -} diff --git a/src/components/radio/themes/light/radio.base.scss b/src/components/radio/themes/radio.base.scss similarity index 98% rename from src/components/radio/themes/light/radio.base.scss rename to src/components/radio/themes/radio.base.scss index 24eb811e2..b04aa68ee 100644 --- a/src/components/radio/themes/light/radio.base.scss +++ b/src/components/radio/themes/radio.base.scss @@ -1,4 +1,3 @@ -@use 'sass:math'; @use 'styles/common/component'; @use 'styles/utilities' as *; diff --git a/src/components/radio/themes/shared/radio.bootstrap.scss b/src/components/radio/themes/shared/radio.bootstrap.scss new file mode 100644 index 000000000..56c4b4035 --- /dev/null +++ b/src/components/radio/themes/shared/radio.bootstrap.scss @@ -0,0 +1,107 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + &::part(base) { + transition: none; + } +} + +[part~='label'] { + color: var-get($theme, 'label-color'); +} + +[part~='base'] { + gap: rem(8px); +} + +[part~='control'] { + --size: #{rem(16px)}; + + border-radius: var(--size); + width: var(--size); + height: var(--size); + min-width: var(--size); + background: none; + transition: transparent; + + &::before, + &::after { + transition: none; + border-radius: calc(var(--size) / 2); + } + + &::before { + transform: translate(-50%, -50%) scale(.375); + } + + &::after { + width: inherit; + height: inherit; + min-width: inherit; + border: rem(1px) solid var-get($theme, 'empty-color'); + } +} + +[part~='focused'] [part~='control'] { + box-shadow: 0 0 0 rem(2px) var-get($theme, 'focus-outline-color'); + + &::after { + border-color: var-get($theme, 'fill-color'); + } +} + +[part='control checked'] { + &::after { + background: var-get($theme, 'fill-color'); + border-color: var-get($theme, 'fill-color'); + } + + &::before { + border-color: var-get($theme, 'fill-hover-border-color'); + background: var-get($theme, 'fill-hover-border-color'); + } +} + +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + [part~='label'] { + color: var-get($theme, 'error-color'); + } + + [part~='control']::after { + border-color: var-get($theme, 'error-color'); + } + + [part='control checked'] { + &::after { + background: var-get($theme, 'error-color'); + } + } + + [part~='focused'] [part~='control'] { + box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover'); + } +} + +:host([disabled]), +:host(:disabled) { + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part='control'] { + &::after { + border-color: var-get($theme, 'disabled-label-color'); + } + } + + [part='control checked'] { + &::after { + background: var-get($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); + } + } +} diff --git a/src/components/radio/themes/shared/radio.fluent.scss b/src/components/radio/themes/shared/radio.fluent.scss new file mode 100644 index 000000000..dd1d9bd54 --- /dev/null +++ b/src/components/radio/themes/shared/radio.fluent.scss @@ -0,0 +1,173 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +[part~='label'] { + @include type-style('body-2'); + + color: var-get($theme, 'label-color'); +} + +:host [part~='base'] { + transition-duration: .1s; + gap: rem(6px); +} + +:host [part~='control'] { + border-radius: var(--size); + width: var(--size); + height: var(--size); + min-width: var(--size); + + // TODO: SEE IF THIS CAN BE REMOVED + transition: none; + + &::before, + &::after { + border-radius: calc(var(--size) / 2); + width: var(--size); + height: var(--size); + inset-inline-start: 0; + top: 0; + + // TODO: SEE IF THIS CAN BE REMOVED + transform: none; + } + + &::before { + backface-visibility: hidden; + transform: scale(0); + transition: all .2s ease-in; + z-index: 1; + } + + &::after { + border: rem(1px) solid var-get($theme, 'empty-color'); + } +} + +:host [part='control checked'] { + &::before { + border-color: var-get($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); + transform: scale(.5); + } + + &::after { + border-color: var-get($theme, 'fill-color'); + } +} + +[part~='focused'] { + position: relative; + + $focus-outline-offset-top: rem(2px); + $focus-outline-offset-left: rem(2px); + + &::after { + content: ''; + position: absolute; + top: -$focus-outline-offset-top; + left: -$focus-outline-offset-left; + box-shadow: 0 0 0 rem(1px) var-get($theme, 'focus-outline-color'); + width: calc(100% + (#{$focus-outline-offset-left} * 2)); + height: calc(100% + (#{$focus-outline-offset-top} * 2)); + } + + [part='control'] { + &::before { + background: var-get($theme, 'hover-color') + } + } +} + +:host(:hover) { + [part='control'] { + &::before { + background: var-get($theme, 'hover-color'); + transform: scale(.5); + } + } + + [part='control checked'] { + &::after { + border-color: var-get($theme, 'fill-hover-border-color'); + } + + &::before { + background: var-get($theme, 'fill-color-hover'); + border-color: var-get($theme, 'fill-hover-border-color'); + } + } +} + +:host(:not([disabled])[invalid]:hover) { + [part='control'] { + &::after { + border-color: var-get($theme, 'error-color-hover'); + } + + &::before { + background: var-get($theme, 'error-color-hover'); + } + } + + [part='control checked'] { + &::after { + border-color: var-get($theme, 'error-color-hover'); + } + + &::before { + background: var-get($theme, 'error-color-hover'); + } + } +} + +:host(:not([disabled])[invalid]) { + [part~='label'] { + color: var-get($theme, 'error-color'); + } + + [part~='control'] { + &::after { + border-color: var-get($theme, 'error-color'); + } + } + + [part='control checked'] { + &::before { + background: var-get($theme, 'error-color'); + } + } + + [part='focused'] [part='control'] { + &::after { + border-color: var-get($theme, 'error-color-hover'); + } + + &::before { + background: var-get($theme, 'error-color-hover'); + } + } +} + +:host([disabled]), +:host(:disabled) { + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='control'] { + &::after { + border-color: var-get($theme, 'disabled-color'); + } + } + + [part='control checked'] { + &::before { + background: var-get($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); + } + } +} diff --git a/src/components/radio/themes/shared/radio.indigo.scss b/src/components/radio/themes/shared/radio.indigo.scss new file mode 100644 index 000000000..a482edf02 --- /dev/null +++ b/src/components/radio/themes/shared/radio.indigo.scss @@ -0,0 +1,108 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + font-weight: 600; +} + +[part~='base'] { + gap: rem(8px); +} + +[part~='label'] { + color: var-get($theme, 'label-color'); +} + +[part~='control'] { + border-radius: var(--size); + width: var(--size, rem(20px)); + height: var(--size, rem(20px)); + min-width: var(--size, rem(20px)); + transition: none; + background: none; + + &::before, + &::after { + border-radius: calc(var(--size) / 2); + } + + &::after { + border: rem(2px) solid var-get($theme, 'empty-color'); + } +} + +[part='control checked'] { + &::after { + border-color: var-get($theme, 'fill-color'); + } + + &::before { + background: var-get($theme, 'fill-color-hover'); + border-color: var-get($theme, 'fill-hover-border-color'); + } +} + +[part~='focused'] { + [part='control'] { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color'); + } + + [part='control checked'] { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color-focused'); + } +} + +:host(:not([disabled])[invalid]), +:host(:not(:disabled)[invalid]) { + [part~='label'] { + color: var-get($theme, 'error-color'); + } + + [part='control'] { + &::after { + border-color: var-get($theme, 'error-color'); + } + } + + [part='control checked'] { + &::after { + border-color: var-get($theme, 'error-color'); + } + + &::before { + background: var-get($theme, 'error-color'); + } + } + + [part~='focused'] { + [part~='control'], + [part='control checked'] { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'error-color-hover'); + } + } +} + +:host([disabled]), +:host(:disabled) { + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part='control'] { + &::after { + border-color: var-get($theme, 'disabled-color'); + } + } + + [part='control checked'] { + &::after { + border-color: var-get($theme, 'disabled-color'); + } + + &::before { + background: var-get($theme, 'disabled-color'); + } + } +} diff --git a/src/components/radio/themes/shared/radio.material.scss b/src/components/radio/themes/shared/radio.material.scss new file mode 100644 index 000000000..1864aa9d8 --- /dev/null +++ b/src/components/radio/themes/shared/radio.material.scss @@ -0,0 +1,126 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +[part~='ripple'] { + border-radius: var(--size); + display: block; + position: absolute; + top: calc(50% - 1.25rem); + width: calc(var(--size) * 2); + height: calc(var(--size) * 2); + min-width: calc(var(--size) * 2); + overflow: hidden; + pointer-events: none; + filter: opacity(1); +} + +[part~='label'] { + color: var-get($theme, 'label-color'); +} + +[part~='base'] { + gap: rem(2px); + + &:hover { + [part~='ripple'] { + background: var-get($theme, 'empty-color'); + opacity: .06; + } + + [part='ripple checked'] { + background: var-get($theme, 'fill-color'); + opacity: .06; + } + } + + &:focus-within { + [part='ripple'] { + background: var-get($theme, 'empty-color'); + opacity: .12; + } + + [part='ripple checked'] { + background: var-get($theme, 'fill-color'); + opacity: .12; + } + } +} + +[part~='control'] { + border-radius: var(--size); + position: relative; + + &::before, + &::after { + border-radius: calc(var(--size) / 2); + } + + &::after { + border: calc(var(--size) / 10) solid var-get($theme, 'empty-color'); + } +} + +[part='control checked'] { + &::before { + border-color: var-get($theme, 'fill-color'); + background: var-get($theme, 'fill-color'); + } + + &::after { + border-color: var-get($theme, 'fill-color'); + } +} + +:host(:not([disabled])[invalid]) { + [part~='label'] { + color: var-get($theme, 'error-color'); + } + + [part~='control'] { + &::after { + border-color: var-get($theme, 'error-color'); + } + } + + [part='control checked'] { + &::before { + background: var-get($theme, 'error-color'); + } + } + + [part~='base'] { + &:hover { + [part~='ripple'] { + background: var-get($theme, 'error-color'); + } + } + + &:focus-within { + [part~='ripple'] { + background: var-get($theme, 'error-color'); + } + } + } +} + +:host([disabled]), +:host(:disabled) { + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='control'] { + &::after { + border-color: var-get($theme, 'disabled-color'); + } + } + + [part='control checked'] { + &::before { + background: var-get($theme, 'disabled-color'); + border-color: var-get($theme, 'disabled-color'); + } + } +} diff --git a/src/components/radio/themes/themes.ts b/src/components/radio/themes/themes.ts new file mode 100644 index 000000000..a0cdc1f8b --- /dev/null +++ b/src/components/radio/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/radio.bootstrap.css.js'; +import { styles as fluentDark } from './dark/radio.fluent.css.js'; +import { styles as indigoDark } from './dark/radio.indigo.css.js'; +import { styles as materialDark } from './dark/radio.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/radio.bootstrap.css.js'; +import { styles as fluentLight } from './light/radio.fluent.css.js'; +import { styles as indigoLight } from './light/radio.indigo.css.js'; +import { styles as materialLight } from './light/radio.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/radio.bootstrap.css.js'; +import { styles as fluent } from './shared/radio.fluent.css.js'; +import { styles as indigo } from './shared/radio.indigo.css.js'; +import { styles as material } from './shared/radio.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/rating/dark/rating.fluent.scss b/src/components/rating/dark/rating.fluent.scss deleted file mode 100644 index 1f0d77f30..000000000 --- a/src/components/rating/dark/rating.fluent.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '../../../styles/utilities' as *; - -@mixin theme() { - igc-rating { - --symbol-full-color: #{color(gray, 800)}; - --symbol-empty-color: #{color(gray, 400)}; - } - - igc-rating[disabled], - igc-rating:disabled { - --symbol-full-color: #{color(warn, 900)}; - --symbol-empty-color: #{color(warn, 900)}; - } -} - diff --git a/src/components/rating/rating-symbol.ts b/src/components/rating/rating-symbol.ts index 71b47aa10..c3431381e 100644 --- a/src/components/rating/rating-symbol.ts +++ b/src/components/rating/rating-symbol.ts @@ -1,6 +1,6 @@ import { LitElement, html } from 'lit'; -import { styles } from './rating-symbol.base.css.js'; +import { styles } from './themes/rating-symbol.base.css.js'; import { registerComponent } from '../common/definitions/register.js'; /** diff --git a/src/components/rating/rating.bootstrap.scss b/src/components/rating/rating.bootstrap.scss deleted file mode 100644 index 2b5f1db49..000000000 --- a/src/components/rating/rating.bootstrap.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '../../styles/utilities' as *; - -[part='base'] { - gap: rem(7px); -} - -[part~='label'] { - @include type-style('body-1'); - - color: color(gray, 900); -} - -[part~='value-label'] { - @include type-style('body-2'); - - color: color(gray, 900); -} diff --git a/src/components/rating/rating.fluent.scss b/src/components/rating/rating.fluent.scss deleted file mode 100644 index 57cc23744..000000000 --- a/src/components/rating/rating.fluent.scss +++ /dev/null @@ -1,36 +0,0 @@ -@use '../../styles/utilities' as *; - -$disabled-label-color: color(gray, 400) !default; - -:host { - --symbol-full-color: #{color(warn, 900)}; - --symbol-empty-color: #{color(gray, 700)}; -} - -[part='base'], -:host { - gap: rem(6px); -} - -[part~='label'] { - @include type-style('subtitle-2'); - - color: color(gray, 900); -} - -[part~='value-label'] { - @include type-style('body-2'); - - color: color(gray, 900); -} - -:host([disabled]), -:host(:disabled) { - --symbol-full-color: #{color(warn, 100)}; - --symbol-empty-color: #{color(warn, 100)}; - - [part~='value-label'], - [part~='label'] { - color: $disabled-label-color; - } -} diff --git a/src/components/rating/rating.indigo.scss b/src/components/rating/rating.indigo.scss deleted file mode 100644 index 76430827d..000000000 --- a/src/components/rating/rating.indigo.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use '../../styles/utilities' as *; - -:host { - gap: rem(5px); -} - -[part='base'] { - gap: rem(8px); -} - -[part~='label'] { - @include type-style('body-1'); - - color: color(gray, 900); -} - -[part~='value-label'] { - @include type-style('body-1'); - - color: color(gray, 900); -} diff --git a/src/components/rating/rating.ts b/src/components/rating/rating.ts index 75dfef99b..97a6125bb 100644 --- a/src/components/rating/rating.ts +++ b/src/components/rating/rating.ts @@ -5,10 +5,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; import IgcRatingSymbolComponent from './rating-symbol.js'; -import { styles } from './rating.base.css.js'; -import { styles as bootstrap } from './rating.bootstrap.css.js'; -import { styles as fluent } from './rating.fluent.css.js'; -import { styles as indigo } from './rating.indigo.css.js'; +import { styles } from './themes/rating.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { watch } from '../common/decorators/watch.js'; import { registerComponent } from '../common/definitions/register.js'; @@ -47,10 +45,7 @@ export interface IgcRatingEventMap { * @cssproperty --symbol-full-filter - The filter(s) used for the filled symbol. * @cssproperty --symbol-empty-filter - The filter(s) used for the empty symbol. */ -@themes({ - light: { fluent, bootstrap, indigo }, - dark: { fluent, bootstrap, indigo }, -}) +@themes(all, true) export default class IgcRatingComponent extends FormAssociatedMixin( SizableMixin( EventEmitterMixin>(LitElement) diff --git a/src/components/rating/themes/dark/_themes.scss b/src/components/rating/themes/dark/_themes.scss new file mode 100644 index 000000000..eb921314f --- /dev/null +++ b/src/components/rating/themes/dark/_themes.scss @@ -0,0 +1,8 @@ +@use 'sass:map'; +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/rating' as *; + +$material: digest-schema($dark-rating); +$bootstrap: digest-schema($dark-bootstrap-rating); +$fluent: digest-schema($dark-fluent-rating); +$indigo: digest-schema($dark-indigo-rating); diff --git a/src/components/rating/themes/dark/rating.bootstrap.scss b/src/components/rating/themes/dark/rating.bootstrap.scss new file mode 100644 index 000000000..4dcfff53f --- /dev/null +++ b/src/components/rating/themes/dark/rating.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/dark/rating.fluent.scss b/src/components/rating/themes/dark/rating.fluent.scss new file mode 100644 index 000000000..97ac629f1 --- /dev/null +++ b/src/components/rating/themes/dark/rating.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/dark/rating.indigo.scss b/src/components/rating/themes/dark/rating.indigo.scss new file mode 100644 index 000000000..d09d8a552 --- /dev/null +++ b/src/components/rating/themes/dark/rating.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/dark/rating.material.scss b/src/components/rating/themes/dark/rating.material.scss new file mode 100644 index 000000000..386f1e08c --- /dev/null +++ b/src/components/rating/themes/dark/rating.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/light/_themes.scss b/src/components/rating/themes/light/_themes.scss new file mode 100644 index 000000000..e5571f4f3 --- /dev/null +++ b/src/components/rating/themes/light/_themes.scss @@ -0,0 +1,8 @@ +@use 'sass:map'; +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/rating' as *; + +$material: digest-schema($light-rating); +$bootstrap: digest-schema($bootstrap-rating); +$fluent: digest-schema($fluent-rating); +$indigo: digest-schema($indigo-rating); diff --git a/src/components/rating/themes/light/rating.bootstrap.scss b/src/components/rating/themes/light/rating.bootstrap.scss new file mode 100644 index 000000000..4dcfff53f --- /dev/null +++ b/src/components/rating/themes/light/rating.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/light/rating.fluent.scss b/src/components/rating/themes/light/rating.fluent.scss new file mode 100644 index 000000000..97ac629f1 --- /dev/null +++ b/src/components/rating/themes/light/rating.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/light/rating.indigo.scss b/src/components/rating/themes/light/rating.indigo.scss new file mode 100644 index 000000000..d09d8a552 --- /dev/null +++ b/src/components/rating/themes/light/rating.indigo.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/themes/light/rating.material.scss b/src/components/rating/themes/light/rating.material.scss new file mode 100644 index 000000000..386f1e08c --- /dev/null +++ b/src/components/rating/themes/light/rating.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-rating'); +} diff --git a/src/components/rating/rating-symbol.base.scss b/src/components/rating/themes/rating-symbol.base.scss similarity index 89% rename from src/components/rating/rating-symbol.base.scss rename to src/components/rating/themes/rating-symbol.base.scss index 8863815d4..ba84db47a 100644 --- a/src/components/rating/rating-symbol.base.scss +++ b/src/components/rating/themes/rating-symbol.base.scss @@ -50,9 +50,10 @@ } slot:not([name])::slotted(:not(igc-icon)) { - filter: var(--symbol-full-filter, grayscale(0)); + filter: var(--disabled-symbol-full-filter, grayscale(0)); } [name='empty']::slotted(:not(igc-icon)) { - filter: var(--symbol-empty-filter, grayscale(1)); + filter: var(--disabled-symbol-empty-filter, grayscale(1)); } + diff --git a/src/components/rating/rating.base.scss b/src/components/rating/themes/rating.base.scss similarity index 60% rename from src/components/rating/rating.base.scss rename to src/components/rating/themes/rating.base.scss index 30ed8886d..2a8bb2269 100644 --- a/src/components/rating/rating.base.scss +++ b/src/components/rating/themes/rating.base.scss @@ -2,14 +2,10 @@ @use 'styles/utilities' as *; :host { - --symbol-full-color: #{color(warn)}; - --symbol-empty-color: #{color(gray, 600)}; - display: inline-flex; font-family: var(--ig-font-family); align-items: flex-start; flex-direction: column; - gap: rem(4px); } [part='base'] { @@ -18,7 +14,6 @@ align-items: center; user-select: none; flex-wrap: wrap; - gap: rem(4px); } [part~='symbols'] { @@ -31,16 +26,7 @@ inset-inline-start: 0; } -[part~='value-label'] { - @include type-style('subtitle-1'); - - color: color(gray, 900); -} - [part~='label'] { - @include type-style('caption'); - - color: color(gray, 700); padding-inline-start: rem(4px); height: auto; width: auto; @@ -57,16 +43,6 @@ :host([disabled]), :host(:disabled) { - [part~='value-label'], - [part~='label'] { - color: color(gray, 400); - } - - --symbol-full-color: #{color(warn, 200)}; - --symbol-empty-color: #{color(gray, 400)}; - --symbol-full-filter: grayscale(50%); - --symbol-empty-filter: grayscale(100%) opacity(50%); - [part~='symbols'] { cursor: initial; } diff --git a/src/components/rating/themes/shared/rating.bootstrap.scss b/src/components/rating/themes/shared/rating.bootstrap.scss new file mode 100644 index 000000000..94f7d09e7 --- /dev/null +++ b/src/components/rating/themes/shared/rating.bootstrap.scss @@ -0,0 +1,43 @@ +@use 'styles/utilities/index' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + --symbol-full-color: #{var-get($theme, 'symbol-full-color')}; + --symbol-empty-color: #{var-get($theme, 'symbol-empty-color')}; + + gap: rem(4px); +} + +[part='base'] { + gap: rem(7px); +} + +[part~='label'] { + @include type-style('body-1'); + + color: var-get($theme, 'label-color'); +} + +[part~='value-label'] { + @include type-style('body-2'); + + color: var-get($theme, 'value-label'); +} + +:host([disabled]), +:host(:disabled) { + --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; + --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; + --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; + + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='value-label'] { + color: var-get($theme, 'disabled-label-color'); + } +} diff --git a/src/components/rating/themes/shared/rating.fluent.scss b/src/components/rating/themes/shared/rating.fluent.scss new file mode 100644 index 000000000..164b9af66 --- /dev/null +++ b/src/components/rating/themes/shared/rating.fluent.scss @@ -0,0 +1,43 @@ +@use 'styles/utilities/index' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + --symbol-full-color: #{var-get($theme, 'symbol-full-color')}; + --symbol-empty-color: #{var-get($theme, 'symbol-empty-color')}; +} + +:host, +[part='base'] { + gap: rem(6px); +} + +[part~='label'] { + @include type-style('subtitle-2'); + + color: var-get($theme, 'label-color'); +} + +[part~='value-label'] { + @include type-style('body-2'); + + color: var-get($theme, 'value-label'); +} + +:host([disabled]), +:host(:disabled) { + --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; + --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; + --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; + + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='value-label'] { + color: var-get($theme, 'disabled-label-color'); + } +} + diff --git a/src/components/rating/themes/shared/rating.indigo.scss b/src/components/rating/themes/shared/rating.indigo.scss new file mode 100644 index 000000000..cbd77c579 --- /dev/null +++ b/src/components/rating/themes/shared/rating.indigo.scss @@ -0,0 +1,44 @@ +@use 'styles/utilities/index' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + --symbol-full-color: #{var-get($theme, 'symbol-full-color')}; + --symbol-empty-color: #{var-get($theme, 'symbol-empty-color')}; + + gap: rem(5px); +} + +[part='base'] { + gap: rem(8px); +} + +[part~='label'], +[part~='value-label'] { + @include type-style('body-1'); +} + +[part~='label'] { + color: var-get($theme, 'label-color'); +} + +[part~='value-label'] { + color: var-get($theme, 'value-label'); +} + +:host([disabled]), +:host(:disabled) { + --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; + --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; + --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; + + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='value-label'] { + color: var-get($theme, 'disabled-label-color'); + } +} diff --git a/src/components/rating/themes/shared/rating.material.scss b/src/components/rating/themes/shared/rating.material.scss new file mode 100644 index 000000000..984e55fff --- /dev/null +++ b/src/components/rating/themes/shared/rating.material.scss @@ -0,0 +1,42 @@ +@use '../../../../styles/utilities/index' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + --symbol-full-color: #{var-get($theme, 'symbol-full-color')}; + --symbol-empty-color: #{var-get($theme, 'symbol-empty-color')}; +} + +:host, +[part='base'] { + gap: rem(4px); +} + +[part~='label'] { + @include type-style('caption'); + + color: var-get($theme, 'label-color'); +} + +[part~='value-label'] { + @include type-style('subtitle-1'); + + color: var-get($theme, 'value-label'); +} + +:host([disabled]), +:host(:disabled) { + --symbol-full-color: #{var-get($theme, 'disabled-full-symbol-color')}; + --symbol-empty-color: #{var-get($theme, 'disabled-empty-symbol-color')}; + --disabled-symbol-full-filter: #{var-get($theme, 'symbol-full-filter')}; + --disabled-symbol-empty-filter: #{var-get($theme, 'symbol-empty-filter')}; + + [part~='label'] { + color: var-get($theme, 'disabled-label-color'); + } + + [part~='value-label'] { + color: var-get($theme, 'disabled-label-color'); + } +} diff --git a/src/components/rating/themes/themes.ts b/src/components/rating/themes/themes.ts new file mode 100644 index 000000000..0ca38280e --- /dev/null +++ b/src/components/rating/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/rating.bootstrap.css.js'; +import { styles as fluentDark } from './dark/rating.fluent.css.js'; +import { styles as indigoDark } from './dark/rating.indigo.css.js'; +import { styles as materialDark } from './dark/rating.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/rating.bootstrap.css.js'; +import { styles as fluentLight } from './light/rating.fluent.css.js'; +import { styles as indigoLight } from './light/rating.indigo.css.js'; +import { styles as materialLight } from './light/rating.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/rating.bootstrap.css.js'; +import { styles as fluent } from './shared/rating.fluent.css.js'; +import { styles as indigo } from './shared/rating.indigo.css.js'; +import { styles as material } from './shared/rating.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 5357a18af..c8460838f 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -12,11 +12,8 @@ import { styleMap } from 'lit/directives/style-map.js'; import IgcSelectGroupComponent from './select-group.js'; import IgcSelectHeaderComponent from './select-header.js'; import IgcSelectItemComponent from './select-item.js'; -import { styles } from './themes/light/select.base.css.js'; -import { styles as bootstrap } from './themes/light/select.bootstrap.css.js'; -import { styles as fluent } from './themes/light/select.fluent.css.js'; -import { styles as indigo } from './themes/light/select.indigo.css.js'; -import { styles as material } from './themes/light/select.material.css.js'; +import { styles } from './themes/select.base.css.js'; +import { all } from './themes/themes.js'; import { themeSymbol, themes } from '../../theming/theming-decorator.js'; import type { Theme } from '../../theming/types.js'; import { alternateName } from '../common/decorators/alternateName.js'; @@ -40,13 +37,7 @@ export interface IgcSelectEventMap extends IgcDropdownEventMap { igcBlur: CustomEvent; } -@themes( - { - light: { bootstrap, material, fluent, indigo }, - dark: { bootstrap, material, fluent, indigo }, - }, - true -) +@themes(all, true) @blazorAdditionalDependencies( 'IgcIconComponent, IgcInputComponent, IgcSelectGroupComponent, IgcSelectHeaderComponent, IgcSelectItemComponent' ) diff --git a/src/components/select/themes/dark/select.bootstrap.scss b/src/components/select/themes/dark/select.bootstrap.scss index 23bea4218..a3447c7a6 100644 --- a/src/components/select/themes/dark/select.bootstrap.scss +++ b/src/components/select/themes/dark/select.bootstrap.scss @@ -1,16 +1,17 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; -$theme: $bootstrap; $dropdown-theme: dropdown-theme.$bootstrap; -$input-theme: input-theme.$bootstrap; +$theme: $bootstrap; + -@mixin theme() { - igc-select { - @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } +:host { + @include css-vars-from-theme($theme, 'ig-select'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); + + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } + diff --git a/src/components/select/themes/dark/select.fluent.scss b/src/components/select/themes/dark/select.fluent.scss index 78976f11b..df97e9ec3 100644 --- a/src/components/select/themes/dark/select.fluent.scss +++ b/src/components/select/themes/dark/select.fluent.scss @@ -1,16 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; -$theme: $fluent; $dropdown-theme: dropdown-theme.$fluent; -$input-theme: input-theme.$fluent; +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-select'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); -@mixin theme() { - igc-select { - @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/dark/select.indigo.scss b/src/components/select/themes/dark/select.indigo.scss index feed1d8ea..5fa13aa46 100644 --- a/src/components/select/themes/dark/select.indigo.scss +++ b/src/components/select/themes/dark/select.indigo.scss @@ -1,16 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; -$theme: $indigo; $dropdown-theme: dropdown-theme.$indigo; -$input-theme: input-theme.$indigo; +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-select'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); -@mixin theme() { - igc-select { - @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/dark/select.material.scss b/src/components/select/themes/dark/select.material.scss index a8deec5fc..111c83ebe 100644 --- a/src/components/select/themes/dark/select.material.scss +++ b/src/components/select/themes/dark/select.material.scss @@ -1,16 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/dark/themes' as dropdown-theme; -@use '../../../input/themes/dark/themes' as input-theme; -$theme: $material; $dropdown-theme: dropdown-theme.$material; -$input-theme: input-theme.$material; +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-select'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); -@mixin theme() { - igc-select { - @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($input-theme, 'ig-input'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/light/select.bootstrap.scss b/src/components/select/themes/light/select.bootstrap.scss index 5febf032b..450e78983 100644 --- a/src/components/select/themes/light/select.bootstrap.scss +++ b/src/components/select/themes/light/select.bootstrap.scss @@ -1,86 +1,18 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; -$theme: $bootstrap; $dropdown-theme: dropdown-theme.$bootstrap; -$input-theme: input-theme.$bootstrap; +$theme: $bootstrap; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - - [part='helper-text'] { - margin-top: rem(4px); - } - - ::slotted([slot='helper-text']) { - @include type-style('body-2'); - - color: var-get($input-theme, 'helper-text-color'); - } -} - -[part='base'] { - background: var-get($dropdown-theme, 'background-color'); - border-radius: var-get($dropdown-theme, 'border-radius'); - padding: rem(8px) 0; - border: rem(1px) solid var-get($dropdown-theme, 'border-color'); -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - igc-icon { - color: inherit; - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius: #{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } -:host(:focus-within) { - igc-input[readonly]:not([disabled])::part(input) { - box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'focused-secondary-color'); - border-color: var-get($input-theme, 'focused-border-color'); - } - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - igc-icon { - color: inherit; - } - } -} - -:host([invalid]), -:host([invalid]:focus-within) { - igc-input[readonly]:not([disabled])::part(input) { - box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'error-shadow-color'); - border-color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host([disabled]), -:host(:disabled) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } -} diff --git a/src/components/select/themes/light/select.fluent.scss b/src/components/select/themes/light/select.fluent.scss index 2ecba9a0c..a0f052222 100644 --- a/src/components/select/themes/light/select.fluent.scss +++ b/src/components/select/themes/light/select.fluent.scss @@ -1,84 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; -$theme: $fluent; $dropdown-theme: dropdown-theme.$fluent; -$input-theme: input-theme.$fluent; -$focused-border-width: rem(2px); +$theme: $fluent; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); -} - -[part='base'] { - background: var-get($dropdown-theme, 'background-color'); - border-radius: var-get($dropdown-theme, 'border-radius'); - box-shadow: var(--ig-elevation-4); -} - -[part='helper-text'] { - margin-top: rem(5px); - - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); - } -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -:host(:focus-within) { - igc-input[readonly]:not([disabled])::part(container) { - border-width: #{$focused-border-width}; - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host(:not([invalid]):focus-within) { - igc-input[readonly]:not([disabled])::part(container) { - border-color: var-get($input-theme, 'focused-border-color'); - border-width: #{$focused-border-width}; - } - - igc-input[readonly]:not([disabled])::part(prefix) { - margin-inline-start: rem(-1px); - } - - igc-input[readonly]:not([disabled])::part(suffix) { - margin-inline-end: rem(-1px); - } -} - -:host(:disabled), -:host([disabled]) { - [part='helper-text'] ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - igc-icon { - color: inherit; - } - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/light/select.indigo.scss b/src/components/select/themes/light/select.indigo.scss index a6cb3c34b..0af85f64e 100644 --- a/src/components/select/themes/light/select.indigo.scss +++ b/src/components/select/themes/light/select.indigo.scss @@ -1,101 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; -$theme: $indigo; $dropdown-theme: dropdown-theme.$indigo; -$input-theme: input-theme.$indigo; +$theme: $indigo; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); - - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'helper-text-color'); - } - - igc-input::part(input) { - color: var-get($input-theme, 'filled-text-color'); - } - - igc-input::part(container) { - padding-inline: 0; - } - - [part='helper-text'] { - margin-top: rem(6px); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - } -} - -[part='base'] { - background: var-get($dropdown-theme, 'background-color'); - border-radius: var-get($dropdown-theme, 'border-radius'); - box-shadow: var(--ig-elevation-3); -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -:host(:focus-within) { - igc-input::part(label) { - color: var-get($input-theme, 'focused-secondary-color'); - } - - igc-input::part(container) { - background: var-get($input-theme, 'box-background-hover'); - - &::after { - transform: scaleY(1); - } - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host([invalid]) { - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host([invalid]:focus-within) { - igc-input::part(label) { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - igc-input::part(input) { - color: var-get($input-theme, 'disabled-text-color'); - } - - ::slotted([slot='helper-text']) { - color: var-get($input-theme, 'disabled-text-color'); - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); - igc-icon { - color: inherit; - } - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/light/select.material.scss b/src/components/select/themes/light/select.material.scss index 8d66c239b..034a47bf4 100644 --- a/src/components/select/themes/light/select.material.scss +++ b/src/components/select/themes/light/select.material.scss @@ -1,197 +1,15 @@ @use 'styles/utilities' as *; @use 'themes' as *; @use '../../../dropdown/themes/light/themes' as dropdown-theme; -@use '../../../input/themes/light/themes' as input-theme; -$theme: $material; $dropdown-theme: dropdown-theme.$material; -$input-theme: input-theme.$material; -$active-color: var-get($input-theme, 'focused-border-color'); -$error-color: var-get($input-theme, 'error-secondary-color'); -$idle-border-width: rem(1px) !default; -$active-border-width: rem(2px) !default; - +$theme: $material; :host { - @include css-vars-from-theme($input-theme, 'ig-input'); @include css-vars-from-theme($theme, 'ig-select'); - @include css-vars-from-theme($dropdown-theme, 'ig-drop-down'); -} - -[part='base'] { - background: var-get($dropdown-theme, 'background-color'); - border-radius: var-get($dropdown-theme, 'border-radius'); - box-shadow: var(--ig-elevation-8); - padding: rem(8px) 0; -} - -:host([outlined]:focus-within) { - igc-input[readonly]:not([disabled])::part(start) { - border: { - color: $active-color; - inline: { - start-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - } - } - } - - igc-input[readonly]:not([disabled])::part(filler) { - border: { - width: $active-border-width; - color: $active-color; - } - } - - igc-input:not([invalid])::part(notch) { - border-bottom: { - width: $active-border-width; - color: $active-color; - } - } - - igc-input[readonly]:not([disabled])::part(end) { - border: { - color: $active-color; - inline: { - end-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - }; - } - } - - igc-input[readonly]:not([disabled])::part(label) { - color: $active-color; - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - } -} - -:host([outlined][invalid]:focus-within) { - igc-input[readonly]:not([disabled])::part(start) { - border: { - color: $error-color; - inline: { - start-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - } - } - } - - igc-input[readonly]:not([disabled])::part(filler) { - border: { - width: $active-border-width; - color: $error-color; - } - } - - igc-input[readonly]:not([disabled])::part(end) { - border: { - color: $error-color; - inline: { - end-width: $active-border-width; - }; - block: { - start-width: $active-border-width; - end-width: $active-border-width; - }; - } - } - - igc-input[readonly]:not([disabled])::part(label) { - color: $error-color; - } -} - -:host(:not([outlined]):focus-within) { - igc-input::part(container) { - background: var-get($input-theme, 'box-background-focus'); - border-bottom-color: var-get($input-theme, 'focused-bottom-line-color'); - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus'); - } -} - -:host(:focus-within) { - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-focus--border'); - color: var-get($theme, 'toggle-button-foreground-focus'); - - igc-icon { - color: inherit; - } - } -} - -:host(:not([outlined])[invalid]:focus-within) { - igc-input::part(container) { - border-bottom-color: var-get($input-theme, 'error-secondary-color'); - } -} - -[part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background'); - color: var-get($theme, 'toggle-button-foreground'); - - igc-icon { - color: inherit; - } -} - -[part='toggle-icon filled'] { - color: var-get($theme, 'toggle-button-foreground-filled'); -} - - -[part='helper-text'] { - color: var-get($input-theme, 'helper-text-color'); - margin-top: rem(5px); - padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); -} - -:host([invalid]) { - [part='helper-text'] { - color: var-get($input-theme, 'error-secondary-color'); - } -} - -:host([disabled]), -:host(:disabled) { - igc-input::part(input)::selection { - background: transparent; - } - - [part~='toggle-icon'] { - background: var-get($theme, 'toggle-button-background-disabled'); - color: var-get($theme, 'toggle-button-foreground-disabled'); - - igc-icon { - color: inherit; - } - } - - [part='helper-text'] { - color: var-get($input-theme, 'disabled-text-color'); - } -} + @include css-vars-from-theme($dropdown-theme, 'ig-dropdown'); -:host(:disabled[outlined]), -:host([outlined][disabled]), -:host([outlined][invalid]) { - igc-input::part(filled) + igc-input::part(notch) { - border-top-color: transparent; - } + --dd-background-color: #{var-get($dropdown-theme, 'background-color')}; + --dd-border-radius:#{var-get($dropdown-theme, 'border-radius')}; + --dd-border-color: #{var-get($dropdown-theme, 'border-color')}; } diff --git a/src/components/select/themes/light/select.base.scss b/src/components/select/themes/select.base.scss similarity index 91% rename from src/components/select/themes/light/select.base.scss rename to src/components/select/themes/select.base.scss index ac62eca73..94e7aba17 100644 --- a/src/components/select/themes/light/select.base.scss +++ b/src/components/select/themes/select.base.scss @@ -1,6 +1,6 @@ @use 'styles/utilities' as *; @use 'styles/common/component'; -@use '../../../dropdown/themes/light/dropdown.base' as *; +@use '../../dropdown/themes/dropdown.base' as *; :host { display: block; diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss new file mode 100644 index 000000000..e2cb257ad --- /dev/null +++ b/src/components/select/themes/shared/select.bootstrap.scss @@ -0,0 +1,80 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../input/themes/light/themes' as input-theme; + +$theme: $bootstrap; +$input-theme: input-theme.$bootstrap; + +:host { + [part='helper-text'] { + margin-top: rem(4px); + } + + ::slotted([slot='helper-text']) { + @include type-style('body-2'); + + color: var-get($input-theme, 'helper-text-color'); + } +} + +[part='base'] { + background: var(--dd-background-color); + border-radius: var(--dd-border-radius); + border: rem(1px) solid var(--dd-border-color); + padding: rem(8px) 0; +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +:host(:focus-within) { + igc-input[readonly]:not([disabled])::part(input) { + box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'focused-secondary-color'); + border-color: var-get($input-theme, 'focused-border-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host([invalid]), +:host([invalid]:focus-within) { + igc-input[readonly]:not([disabled])::part(input) { + box-shadow: 0 0 0 rem(4px) var-get($input-theme, 'error-shadow-color'); + border-color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host([disabled]), +:host(:disabled) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/select/themes/shared/select.fluent.scss b/src/components/select/themes/shared/select.fluent.scss new file mode 100644 index 000000000..e394a6f90 --- /dev/null +++ b/src/components/select/themes/shared/select.fluent.scss @@ -0,0 +1,79 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; + +$theme: $fluent; +$dropdown-theme: dropdown-theme.$fluent; +$input-theme: input-theme.$fluent; +$focused-border-width: rem(2px); + + +[part='base'] { + background: var(--dd-background-color); + border-radius: var(--dd-border-radius); + box-shadow: var(--ig-elevation-4); +} + +[part='helper-text'] { + margin-top: rem(5px); + + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'helper-text-color'); + } +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +:host(:focus-within) { + igc-input[readonly]:not([disabled])::part(container) { + border-width: #{$focused-border-width}; + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host(:not([invalid]):focus-within) { + igc-input[readonly]:not([disabled])::part(container) { + border-color: var-get($input-theme, 'focused-border-color'); + border-width: #{$focused-border-width}; + } + + igc-input[readonly]:not([disabled])::part(prefix) { + margin-inline-start: rem(-1px); + } + + igc-input[readonly]:not([disabled])::part(suffix) { + margin-inline-end: rem(-1px); + } +} + +:host(:disabled), +:host([disabled]) { + [part='helper-text'] ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/select/themes/shared/select.indigo.scss b/src/components/select/themes/shared/select.indigo.scss new file mode 100644 index 000000000..61c852335 --- /dev/null +++ b/src/components/select/themes/shared/select.indigo.scss @@ -0,0 +1,97 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; + +$theme: $indigo; +$dropdown-theme: dropdown-theme.$indigo; +$input-theme: input-theme.$indigo; + +:host { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'helper-text-color'); + } + + igc-input::part(input) { + color: var-get($input-theme, 'filled-text-color'); + } + + igc-input::part(container) { + padding-inline: 0; + } + + [part='helper-text'] { + margin-top: rem(6px); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } +} + +[part='base'] { + background: var(--dd-background-color); + border-radius: var(--dd-border-radius); + box-shadow: var(--ig-elevation-3); +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +:host(:focus-within) { + igc-input::part(label) { + color: var-get($input-theme, 'focused-secondary-color'); + } + + igc-input::part(container) { + background: var-get($input-theme, 'box-background-hover'); + + &::after { + transform: scaleY(1); + } + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host([invalid]) { + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host([invalid]:focus-within) { + igc-input::part(label) { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + igc-input::part(input) { + color: var-get($input-theme, 'disabled-text-color'); + } + + ::slotted([slot='helper-text']) { + color: var-get($input-theme, 'disabled-text-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } +} diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss new file mode 100644 index 000000000..4d3245163 --- /dev/null +++ b/src/components/select/themes/shared/select.material.scss @@ -0,0 +1,190 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use '../../../dropdown/themes/light/themes' as dropdown-theme; +@use '../../../input/themes/light/themes' as input-theme; + +$theme: $material; +$dropdown-theme: dropdown-theme.$material; +$input-theme: input-theme.$material; +$active-color: var-get($input-theme, 'focused-border-color'); +$error-color: var-get($input-theme, 'error-secondary-color'); +$idle-border-width: rem(1px) !default; +$active-border-width: rem(2px) !default; + +[part='base'] { + background: var(--dd-background-color); + border-radius: var(--dd-border-radius); + box-shadow: var(--ig-elevation-8); + padding: rem(8px) 0; +} + +:host([outlined]:focus-within) { + igc-input[readonly]:not([disabled])::part(start) { + border: { + color: $active-color; + inline: { + start-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + } + } + } + + igc-input[readonly]:not([disabled])::part(filler) { + border: { + width: $active-border-width; + color: $active-color; + } + } + + igc-input:not([invalid])::part(notch) { + border-bottom: { + width: $active-border-width; + color: $active-color; + } + } + + igc-input[readonly]:not([disabled])::part(end) { + border: { + color: $active-color; + inline: { + end-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + }; + } + } + + igc-input[readonly]:not([disabled])::part(label) { + color: $active-color; + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + } +} + +:host([outlined][invalid]:focus-within) { + igc-input[readonly]:not([disabled])::part(start) { + border: { + color: $error-color; + inline: { + start-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + } + } + } + + igc-input[readonly]:not([disabled])::part(filler) { + border: { + width: $active-border-width; + color: $error-color; + } + } + + igc-input[readonly]:not([disabled])::part(end) { + border: { + color: $error-color; + inline: { + end-width: $active-border-width; + }; + block: { + start-width: $active-border-width; + end-width: $active-border-width; + }; + } + } + + igc-input[readonly]:not([disabled])::part(label) { + color: $error-color; + } +} + +:host(:not([outlined]):focus-within) { + igc-input::part(container) { + background: var-get($input-theme, 'box-background-focus'); + border-bottom-color: var-get($input-theme, 'focused-bottom-line-color'); + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus'); + } +} + +:host(:focus-within) { + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-focus--border'); + color: var-get($theme, 'toggle-button-foreground-focus'); + + igc-icon { + color: inherit; + } + } +} + +:host(:not([outlined])[invalid]:focus-within) { + igc-input::part(container) { + border-bottom-color: var-get($input-theme, 'error-secondary-color'); + } +} + +[part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background'); + color: var-get($theme, 'toggle-button-foreground'); + + igc-icon { + color: inherit; + } +} + +[part='toggle-icon filled'] { + color: var-get($theme, 'toggle-button-foreground-filled'); +} + + +[part='helper-text'] { + color: var-get($input-theme, 'helper-text-color'); + margin-top: rem(5px); + padding-inline: pad-inline(rem(14px), rem(16px), rem(18px)); +} + +:host([invalid]) { + [part='helper-text'] { + color: var-get($input-theme, 'error-secondary-color'); + } +} + +:host([disabled]), +:host(:disabled) { + igc-input::part(input)::selection { + background: transparent; + } + + [part~='toggle-icon'] { + background: var-get($theme, 'toggle-button-background-disabled'); + color: var-get($theme, 'toggle-button-foreground-disabled'); + + igc-icon { + color: inherit; + } + } + + [part='helper-text'] { + color: var-get($input-theme, 'disabled-text-color'); + } +} + +:host(:disabled[outlined]), +:host([outlined][disabled]), +:host([outlined][invalid]) { + igc-input::part(filled) + igc-input::part(notch) { + border-top-color: transparent; + } +} diff --git a/src/components/select/themes/themes.ts b/src/components/select/themes/themes.ts new file mode 100644 index 000000000..ef7019ca4 --- /dev/null +++ b/src/components/select/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/select.bootstrap.css.js'; +import { styles as fluentDark } from './dark/select.fluent.css.js'; +import { styles as indigoDark } from './dark/select.indigo.css.js'; +import { styles as materialDark } from './dark/select.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/select.bootstrap.css.js'; +import { styles as fluentLight } from './light/select.fluent.css.js'; +import { styles as indigoLight } from './light/select.indigo.css.js'; +import { styles as materialLight } from './light/select.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/select.bootstrap.css.js'; +import { styles as fluent } from './shared/select.fluent.css.js'; +import { styles as indigo } from './shared/select.indigo.css.js'; +import { styles as material } from './shared/select.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/slider/slider-base.ts b/src/components/slider/slider-base.ts index 6c877eb75..9c68a1d2f 100644 --- a/src/components/slider/slider-base.ts +++ b/src/components/slider/slider-base.ts @@ -8,21 +8,15 @@ import { import { ifDefined } from 'lit/directives/if-defined.js'; import { StyleInfo, styleMap } from 'lit/directives/style-map.js'; -import { styles } from './themes/light/slider.base.css.js'; -import { styles as bootstrap } from './themes/light/slider.bootstrap.css.js'; -import { styles as fluent } from './themes/light/slider.fluent.css.js'; -import { styles as indigo } from './themes/light/slider.indigo.css.js'; -import { styles as material } from './themes/light/slider.material.css.js'; +import { styles } from './themes/slider.base.css.js'; +import { all } from './themes/themes.js'; import { themes } from '../../theming/theming-decorator.js'; import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js'; import { blazorTypeOverride } from '../common/decorators/blazorTypeOverride.js'; import { watch } from '../common/decorators/watch.js'; import { isLTR } from '../common/util.js'; -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all, true) @blazorDeepImport export class IgcSliderBaseComponent extends LitElement { public static override styles = styles; diff --git a/src/components/slider/themes/dark/slider.bootstrap.scss b/src/components/slider/themes/dark/slider.bootstrap.scss index 0f15f79ac..e867f97e7 100644 --- a/src/components/slider/themes/dark/slider.bootstrap.scss +++ b/src/components/slider/themes/dark/slider.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-slider { - @include css-vars-from-theme($theme, 'ig-slider'); - } +:host { + @include css-vars-from-theme($theme, 'ig-slider'); } diff --git a/src/components/slider/themes/dark/slider.fluent.scss b/src/components/slider/themes/dark/slider.fluent.scss index 95e1d8c64..11757aab7 100644 --- a/src/components/slider/themes/dark/slider.fluent.scss +++ b/src/components/slider/themes/dark/slider.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-slider { - @include css-vars-from-theme($theme, 'ig-slider'); - } +:host { + @include css-vars-from-theme($theme, 'ig-slider'); } diff --git a/src/components/slider/themes/dark/slider.indigo.scss b/src/components/slider/themes/dark/slider.indigo.scss index e7fdf607a..5b435ba7e 100644 --- a/src/components/slider/themes/dark/slider.indigo.scss +++ b/src/components/slider/themes/dark/slider.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-slider { - @include css-vars-from-theme($theme, 'ig-slider'); - } +:host { + @include css-vars-from-theme($theme, 'ig-slider'); } diff --git a/src/components/slider/themes/dark/slider.material.scss b/src/components/slider/themes/dark/slider.material.scss index 2036d06f7..0c23f4cfb 100644 --- a/src/components/slider/themes/dark/slider.material.scss +++ b/src/components/slider/themes/dark/slider.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-slider { - @include css-vars-from-theme($theme, 'ig-slider'); - } +:host { + @include css-vars-from-theme($theme, 'ig-slider'); } diff --git a/src/components/slider/themes/light/slider.bootstrap.scss b/src/components/slider/themes/light/slider.bootstrap.scss index 8ddc68802..e867f97e7 100644 --- a/src/components/slider/themes/light/slider.bootstrap.scss +++ b/src/components/slider/themes/light/slider.bootstrap.scss @@ -6,69 +6,3 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-slider'); } - -$thumb-size: rem(16px); -$thumb-radius: calc(#{$thumb-size} / 2); - -[part='track'], -[part='inactive'] { - height: rem(8px); -} - -[part='fill'] { - display: none; -} - -[part='inactive'] { - background: var-get($theme, 'base-track-color'); -} - -[part='steps'] { - color: var-get($theme, 'track-step-color'); -} - -[part~='thumb'] { - width: $thumb-size; - height: $thumb-size; - background: var-get($theme, 'thumb-color'); - top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - - &:focus { - border: rem(1px) solid var-get($theme, 'thumb-border-focus-color'); - box-shadow: 0 0 0 rem(3px) var-get($theme, 'thumb-focus-color'); - } -} - -[part='tick'] { - background: var-get($theme, 'tick-color'); -} - -[part='tick-label'] { - color: var-get($theme, 'tick-label-color'); -} - -[part='thumb-label-inner'] { - color: var-get($theme, 'label-text-color'); - background: var-get($theme, 'label-background-color'); - - &::after { - border-top: rem(10px) solid var-get($theme, 'label-background-color'); - } -} - -:host([disabled]), -:host(:disabled) { - [part='inactive'], - [part='tick'] { - background: var-get($theme, 'disabled-base-track-color'); - } - - [part~='thumb'] { - background: var-get($theme, 'disabled-thumb-color'); - } - - [part='tick-label'] { - color: var-get($theme, 'disabled-base-track-color'); - } -} diff --git a/src/components/slider/themes/light/slider.fluent.scss b/src/components/slider/themes/light/slider.fluent.scss index aca5a28b2..11757aab7 100644 --- a/src/components/slider/themes/light/slider.fluent.scss +++ b/src/components/slider/themes/light/slider.fluent.scss @@ -1,99 +1,8 @@ -@use 'sass:math'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $fluent; -$thumb-size: rem(16px); -$thumb-radius: math.div($thumb-size, 2); :host { @include css-vars-from-theme($theme, 'ig-slider'); } - -:host(:hover) { - [part='fill'] { - background: var-get($theme, 'track-hover-color'); - } - - [part~='thumb'] { - border-color: var-get($theme, 'thumb-focus-color'); - } -} - -[part~='focused']::after { - $focus-outline-offset: rem(2px); - - position: absolute; - content: ''; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color'); - width: calc(($thumb-size) + (#{$focus-outline-offset} * 2)); - height: calc(($thumb-size) + (#{$focus-outline-offset} * 2)); -} - -[part='track'], -[part='fill'], -[part='inactive'] { - height: rem(4px); -} - -[part='inactive'] { - background: var-get($theme, 'base-track-color'); - top: initial; -} - -[part='fill'] { - background: var-get($theme, 'track-color'); -} - -[part='steps'] { - color: var-get($theme, 'track-step-color'); -} - -[part='tick'] { - background: var-get($theme, 'tick-color'); -} - -[part='tick-label'] { - color: var-get($theme, 'tick-label-color'); -} - -[part~='thumb'] { - background: var-get($theme, 'thumb-color'); - border: rem(2px) solid var-get($theme, 'thumb-border-color'); - width: $thumb-size; - height: $thumb-size; - top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); -} - -[part='thumb-label-inner'] { - background: var-get($theme, 'label-background-color'); - color: var-get($theme, 'label-text-color'); - - &::after { - border-top: rem(10px) solid var-get($theme, 'label-background-color'); - } -} - -:host([disabled]), -:host(:disabled) { - [part='inactive'] { - background: var-get($theme, 'disabled-base-track-color'); - } - - [part='fill'] { - background: var-get($theme, 'disabled-fill-track-color'); - } - - [part~='thumb'] { - background: var-get($theme, 'disabled-thumb-color'); - border-color: var-get($theme, 'thumb-disabled-border-color'); - } - - [part='tick-label'] { - color: var-get($theme, 'disabled-fill-track-color'); - } -} diff --git a/src/components/slider/themes/light/slider.indigo.scss b/src/components/slider/themes/light/slider.indigo.scss index 6c8d88bb5..5b435ba7e 100644 --- a/src/components/slider/themes/light/slider.indigo.scss +++ b/src/components/slider/themes/light/slider.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:math'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,94 +6,3 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-slider'); } - -$thumb-size: rem(14px); -$thumb-radius: math.div($thumb-size, 2); - -[part='base']:hover { - [part='inactive'] { - background: var-get($theme, 'base-track-hover-color'); - } - - [part='fill'] { - background: var-get($theme, 'track-hover-color'); - } -} - -[part='fill'] { - background: var-get($theme, 'track-color'); -} - -[part='inactive'] { - background: var-get($theme, 'base-track-color'); -} - -[part='track'], -[part='fill'], -[part='inactive'] { - height: rem(2px); - top: initial; - border-radius: initial; -} - -[part='steps'] { - color: var-get($theme, 'track-step-color'); - height: rem(2px); - - line { - transform: none; - } -} - -[part='tick'] { - background: var-get($theme, 'tick-color'); -} - -[part='tick-label'] { - color: var-get($theme, 'tick-label-color'); -} - -[part~='thumb'] { - background: var-get($theme, 'thumb-color'); - width: $thumb-size; - height: $thumb-size; - top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - - &:focus { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'thumb-focus-color'); - } - - &::after { - display: none; - } -} - -[part='thumb-label-inner'] { - background: var-get($theme, 'label-background-color'); - color: var-get($theme, 'label-text-color'); - - &::after { - border-top: rem(10px) solid var-get($theme, 'label-background-color'); - } -} - -:host([disabled]), -:host(:disabled) { - [part='inactive'] { - background: var-get($theme, 'disabled-base-track-color'); - } - - [part='fill'], - [part='tick'] { - background: var-get($theme, 'disabled-fill-track-color'); - } - - [part~='thumb'] { - background: var-get($theme, 'disabled-thumb-color'); - } - - [part='tick-label'] { - color: var-get($theme, 'disabled-fill-track-color'); - } -} diff --git a/src/components/slider/themes/light/slider.material.scss b/src/components/slider/themes/light/slider.material.scss index 2a1b00cd4..0c23f4cfb 100644 --- a/src/components/slider/themes/light/slider.material.scss +++ b/src/components/slider/themes/light/slider.material.scss @@ -1,4 +1,3 @@ -@use 'sass:math'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -7,103 +6,3 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-slider'); } - -$ripple-size: rem(40px); -$ripple-radius: math.div($ripple-size, 2); -$thumb-size: rem(20px); -$thumb-radius: math.div($thumb-size, 2); - -[part='track'] { - height: rem(6px); -} - -[part='fill'] { - background: var-get($theme, 'track-color'); - height: rem(6px); -} - -[part='inactive'] { - background: var-get($theme, 'base-track-color'); - height: rem(4px); - top: rem(1px); -} - -[part='steps'] { - color: var-get($theme, 'track-step-color'); -} - -[part~='thumb'] { - width: $thumb-size; - height: $thumb-size; - top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); - background: var-get($theme, 'thumb-color'); - - &::after { - @include border-radius($ripple-radius); - - position: absolute; - content: ''; - width: $ripple-size; - height: $ripple-size; - background: var-get($theme, 'thumb-color'); - top: calc(50% - #{$ripple-radius}); - inset-inline-start: calc(50% - #{$ripple-radius}); - opacity: 0; - transform: scale(0); - transform-origin: center center; - transition: transform .1s ease-out, opacity .1s ease-out; - overflow: hidden; - } - - &:hover::after { - opacity: .12; - transform: scale(1); - } - - &:focus::after { - opacity: .18; - transform: scale(1); - } - - &:active::after { - opacity: .24; - } -} - -[part='tick'] { - background: var-get($theme, 'tick-color'); -} - -[part='tick-label'] { - color: var-get($theme, 'tick-label-color'); -} - -[part='thumb-label-inner'] { - color: var-get($theme, 'label-text-color'); - background: var-get($theme, 'label-background-color'); - - &::after { - border-top: rem(10px) solid var-get($theme, 'label-background-color'); - } -} - -:host([disabled]), -:host(:disabled) { - [part='inactive'] { - background: var-get($theme, 'disabled-base-track-color'); - } - - [part='fill'], - [part='tick'] { - background: var-get($theme, 'disabled-fill-track-color'); - } - - [part~='thumb'] { - background: var-get($theme, 'disabled-thumb-color'); - } - - [part='tick-label'] { - color: var-get($theme, 'disabled-fill-track-color'); - } -} diff --git a/src/components/slider/themes/shared/slider.bootstrap.scss b/src/components/slider/themes/shared/slider.bootstrap.scss new file mode 100644 index 000000000..bfc2cfabd --- /dev/null +++ b/src/components/slider/themes/shared/slider.bootstrap.scss @@ -0,0 +1,69 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; +$thumb-size: rem(16px); +$thumb-radius: calc(#{$thumb-size} / 2); + +[part='track'], +[part='inactive'] { + height: rem(8px); +} + +[part='fill'] { + display: none; +} + +[part='inactive'] { + background: var-get($theme, 'base-track-color'); +} + +[part='steps'] { + color: var-get($theme, 'track-step-color'); +} + +[part~='thumb'] { + width: $thumb-size; + height: $thumb-size; + background: var-get($theme, 'thumb-color'); + top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + + &:focus { + border: rem(1px) solid var-get($theme, 'thumb-border-focus-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'thumb-focus-color'); + } +} + +[part='tick'] { + background: var-get($theme, 'tick-color'); +} + +[part='tick-label'] { + color: var-get($theme, 'tick-label-color'); +} + +[part='thumb-label-inner'] { + color: var-get($theme, 'label-text-color'); + background: var-get($theme, 'label-background-color'); + + &::after { + border-top: rem(10px) solid var-get($theme, 'label-background-color'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='inactive'], + [part='tick'] { + background: var-get($theme, 'disabled-base-track-color'); + } + + [part~='thumb'] { + background: var-get($theme, 'disabled-thumb-color'); + } + + [part='tick-label'] { + color: var-get($theme, 'disabled-base-track-color'); + } +} diff --git a/src/components/slider/themes/shared/slider.fluent.scss b/src/components/slider/themes/shared/slider.fluent.scss new file mode 100644 index 000000000..38ae5acc7 --- /dev/null +++ b/src/components/slider/themes/shared/slider.fluent.scss @@ -0,0 +1,95 @@ +@use 'sass:math'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; +$thumb-size: rem(16px); +$thumb-radius: math.div($thumb-size, 2); + +:host(:hover) { + [part='fill'] { + background: var-get($theme, 'track-hover-color'); + } + + [part~='thumb'] { + border-color: var-get($theme, 'thumb-focus-color'); + } +} + +[part~='focused']::after { + $focus-outline-offset: rem(2px); + + position: absolute; + content: ''; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color'); + width: calc(($thumb-size) + (#{$focus-outline-offset} * 2)); + height: calc(($thumb-size) + (#{$focus-outline-offset} * 2)); +} + +[part='track'], +[part='fill'], +[part='inactive'] { + height: rem(4px); +} + +[part='inactive'] { + background: var-get($theme, 'base-track-color'); + top: initial; +} + +[part='fill'] { + background: var-get($theme, 'track-color'); +} + +[part='steps'] { + color: var-get($theme, 'track-step-color'); +} + +[part='tick'] { + background: var-get($theme, 'tick-color'); +} + +[part='tick-label'] { + color: var-get($theme, 'tick-label-color'); +} + +[part~='thumb'] { + background: var-get($theme, 'thumb-color'); + border: rem(2px) solid var-get($theme, 'thumb-border-color'); + width: $thumb-size; + height: $thumb-size; + top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); +} + +[part='thumb-label-inner'] { + background: var-get($theme, 'label-background-color'); + color: var-get($theme, 'label-text-color'); + + &::after { + border-top: rem(10px) solid var-get($theme, 'label-background-color'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='inactive'] { + background: var-get($theme, 'disabled-base-track-color'); + } + + [part='fill'] { + background: var-get($theme, 'disabled-fill-track-color'); + } + + [part~='thumb'] { + background: var-get($theme, 'disabled-thumb-color'); + border-color: var-get($theme, 'thumb-disabled-border-color'); + } + + [part='tick-label'] { + color: var-get($theme, 'disabled-fill-track-color'); + } +} diff --git a/src/components/slider/themes/shared/slider.indigo.scss b/src/components/slider/themes/shared/slider.indigo.scss new file mode 100644 index 000000000..23bbd8e5d --- /dev/null +++ b/src/components/slider/themes/shared/slider.indigo.scss @@ -0,0 +1,95 @@ +@use 'sass:math'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; +$thumb-size: rem(14px); +$thumb-radius: math.div($thumb-size, 2); + +[part='base']:hover { + [part='inactive'] { + background: var-get($theme, 'base-track-hover-color'); + } + + [part='fill'] { + background: var-get($theme, 'track-hover-color'); + } +} + +[part='fill'] { + background: var-get($theme, 'track-color'); +} + +[part='inactive'] { + background: var-get($theme, 'base-track-color'); +} + +[part='track'], +[part='fill'], +[part='inactive'] { + height: rem(2px); + top: initial; + border-radius: initial; +} + +[part='steps'] { + color: var-get($theme, 'track-step-color'); + height: rem(2px); + + line { + transform: none; + } +} + +[part='tick'] { + background: var-get($theme, 'tick-color'); +} + +[part='tick-label'] { + color: var-get($theme, 'tick-label-color'); +} + +[part~='thumb'] { + background: var-get($theme, 'thumb-color'); + width: $thumb-size; + height: $thumb-size; + top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + + &:focus { + box-shadow: 0 0 0 rem(3px) var-get($theme, 'thumb-focus-color'); + } + + &::after { + display: none; + } +} + +[part='thumb-label-inner'] { + background: var-get($theme, 'label-background-color'); + color: var-get($theme, 'label-text-color'); + + &::after { + border-top: rem(10px) solid var-get($theme, 'label-background-color'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='inactive'] { + background: var-get($theme, 'disabled-base-track-color'); + } + + [part='fill'], + [part='tick'] { + background: var-get($theme, 'disabled-fill-track-color'); + } + + [part~='thumb'] { + background: var-get($theme, 'disabled-thumb-color'); + } + + [part='tick-label'] { + color: var-get($theme, 'disabled-fill-track-color'); + } +} diff --git a/src/components/slider/themes/shared/slider.material.scss b/src/components/slider/themes/shared/slider.material.scss new file mode 100644 index 000000000..a0a127df5 --- /dev/null +++ b/src/components/slider/themes/shared/slider.material.scss @@ -0,0 +1,104 @@ +@use 'sass:math'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; +$ripple-size: rem(40px); +$ripple-radius: math.div($ripple-size, 2); +$thumb-size: rem(20px); +$thumb-radius: math.div($thumb-size, 2); + +[part='track'] { + height: rem(6px); +} + +[part='fill'] { + background: var-get($theme, 'track-color'); + height: rem(6px); +} + +[part='inactive'] { + background: var-get($theme, 'base-track-color'); + height: rem(4px); + top: rem(1px); +} + +[part='steps'] { + color: var-get($theme, 'track-step-color'); +} + +[part~='thumb'] { + width: $thumb-size; + height: $thumb-size; + top: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1); + background: var-get($theme, 'thumb-color'); + + &::after { + @include border-radius($ripple-radius); + + position: absolute; + content: ''; + width: $ripple-size; + height: $ripple-size; + background: var-get($theme, 'thumb-color'); + top: calc(50% - #{$ripple-radius}); + inset-inline-start: calc(50% - #{$ripple-radius}); + opacity: 0; + transform: scale(0); + transform-origin: center center; + transition: transform .1s ease-out, opacity .1s ease-out; + overflow: hidden; + } + + &:hover::after { + opacity: .12; + transform: scale(1); + } + + &:focus::after { + opacity: .18; + transform: scale(1); + } + + &:active::after { + opacity: .24; + } +} + +[part='tick'] { + background: var-get($theme, 'tick-color'); +} + +[part='tick-label'] { + color: var-get($theme, 'tick-label-color'); +} + +[part='thumb-label-inner'] { + color: var-get($theme, 'label-text-color'); + background: var-get($theme, 'label-background-color'); + + &::after { + border-top: rem(10px) solid var-get($theme, 'label-background-color'); + } +} + +:host([disabled]), +:host(:disabled) { + [part='inactive'] { + background: var-get($theme, 'disabled-base-track-color'); + } + + [part='fill'], + [part='tick'] { + background: var-get($theme, 'disabled-fill-track-color'); + } + + [part~='thumb'] { + background: var-get($theme, 'disabled-thumb-color'); + } + + [part='tick-label'] { + color: var-get($theme, 'disabled-fill-track-color'); + } +} diff --git a/src/components/slider/themes/light/slider.base.scss b/src/components/slider/themes/slider.base.scss similarity index 100% rename from src/components/slider/themes/light/slider.base.scss rename to src/components/slider/themes/slider.base.scss diff --git a/src/components/slider/themes/themes.ts b/src/components/slider/themes/themes.ts new file mode 100644 index 000000000..6b6263fe2 --- /dev/null +++ b/src/components/slider/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/slider.bootstrap.css.js'; +import { styles as fluentDark } from './dark/slider.fluent.css.js'; +import { styles as indigoDark } from './dark/slider.indigo.css.js'; +import { styles as materialDark } from './dark/slider.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/slider.bootstrap.css.js'; +import { styles as fluentLight } from './light/slider.fluent.css.js'; +import { styles as indigoLight } from './light/slider.indigo.css.js'; +import { styles as materialLight } from './light/slider.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/slider.bootstrap.css.js'; +import { styles as fluent } from './shared/slider.fluent.css.js'; +import { styles as indigo } from './shared/slider.indigo.css.js'; +import { styles as material } from './shared/slider.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/snackbar/snackbar.ts b/src/components/snackbar/snackbar.ts index 11dc0fc43..3af671740 100644 --- a/src/components/snackbar/snackbar.ts +++ b/src/components/snackbar/snackbar.ts @@ -2,11 +2,8 @@ import { LitElement, html, nothing } from 'lit'; import { property, query } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { styles } from './themes/light/snackbar.base.css.js'; -import { styles as bootstrap } from './themes/light/snackbar.bootstrap.css.js'; -import { styles as fluent } from './themes/light/snackbar.fluent.css.js'; -import { styles as indigo } from './themes/light/snackbar.indigo.css.js'; -import { styles as material } from './themes/light/snackbar.material.css.js'; +import { styles } from './themes/snackbar.base.css.js'; +import { all } from './themes/themes.js'; import { AnimationPlayer } from '../../animations/player.js'; import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -19,6 +16,7 @@ export interface IgcSnackbarEventMap { igcAction: CustomEvent; } +@themes(all, true) /** * A snackbar component is used to provide feedback about an operation * by showing a brief message at the bottom of the screen. @@ -33,10 +31,6 @@ export interface IgcSnackbarEventMap { * @csspart message - The snackbar message. * @csspart action - The snackbar action button. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) export default class IgcSnackbarComponent extends EventEmitterMixin< IgcSnackbarEventMap, Constructor diff --git a/src/components/snackbar/themes/dark/snackbar.bootstrap.scss b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss new file mode 100644 index 000000000..ec6853474 --- /dev/null +++ b/src/components/snackbar/themes/dark/snackbar.bootstrap.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-snackbar'); +} diff --git a/src/components/snackbar/themes/dark/snackbar.fluent.scss b/src/components/snackbar/themes/dark/snackbar.fluent.scss new file mode 100644 index 000000000..a527e4312 --- /dev/null +++ b/src/components/snackbar/themes/dark/snackbar.fluent.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-snackbar'); +} diff --git a/src/components/snackbar/themes/dark/snackbar.indigo.scss b/src/components/snackbar/themes/dark/snackbar.indigo.scss index bbb4d740d..db03b7b5e 100644 --- a/src/components/snackbar/themes/dark/snackbar.indigo.scss +++ b/src/components/snackbar/themes/dark/snackbar.indigo.scss @@ -1,8 +1,8 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-snackbar { - @include css-vars-from-theme($indigo, 'ig-snackbar'); - } +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-snackbar'); } diff --git a/src/components/snackbar/themes/dark/snackbar.material.scss b/src/components/snackbar/themes/dark/snackbar.material.scss new file mode 100644 index 000000000..4ad3d070a --- /dev/null +++ b/src/components/snackbar/themes/dark/snackbar.material.scss @@ -0,0 +1,8 @@ +@use 'styles/utilities' as *; +@use 'themes' as *; + +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-snackbar'); +} diff --git a/src/components/snackbar/themes/light/snackbar.bootstrap.scss b/src/components/snackbar/themes/light/snackbar.bootstrap.scss index 8a311be0a..ec6853474 100644 --- a/src/components/snackbar/themes/light/snackbar.bootstrap.scss +++ b/src/components/snackbar/themes/light/snackbar.bootstrap.scss @@ -6,14 +6,3 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-snackbar'); } - -[part~='base'] { - border-radius: var-get($theme, 'border-radius'); - color: var-get($theme, 'text-color'); - background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'elevation'); -} - -igc-button::part(base):hover { - color: var-get($theme, 'button-color'); -} diff --git a/src/components/snackbar/themes/light/snackbar.fluent.scss b/src/components/snackbar/themes/light/snackbar.fluent.scss index 2058f0750..a527e4312 100644 --- a/src/components/snackbar/themes/light/snackbar.fluent.scss +++ b/src/components/snackbar/themes/light/snackbar.fluent.scss @@ -6,23 +6,3 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-snackbar'); } - -[part~='base'] { - border-radius: var-get($theme, 'border-radius'); - color: var-get($theme, 'text-color'); - background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'elevation'); -} - -[part~='message'] { - @include type-style('caption'); -} - -igc-button::part(base), -igc-button::part(base):hover { - color: var-get($theme, 'button-color'); -} - -igc-button::part(base):focus-visible::after { - display: none; -} diff --git a/src/components/snackbar/themes/light/snackbar.indigo.scss b/src/components/snackbar/themes/light/snackbar.indigo.scss index e61b3f19a..db03b7b5e 100644 --- a/src/components/snackbar/themes/light/snackbar.indigo.scss +++ b/src/components/snackbar/themes/light/snackbar.indigo.scss @@ -6,15 +6,3 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-snackbar'); } - -[part~='base'] { - border-radius: var-get($theme, 'border-radius'); - color: var-get($theme, 'text-color'); - background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'elevation'); -} - -igc-button::part(base), -igc-button::part(base):hover { - color: var-get($theme, 'button-color'); -} diff --git a/src/components/snackbar/themes/light/snackbar.material.scss b/src/components/snackbar/themes/light/snackbar.material.scss index 551847556..4ad3d070a 100644 --- a/src/components/snackbar/themes/light/snackbar.material.scss +++ b/src/components/snackbar/themes/light/snackbar.material.scss @@ -6,10 +6,3 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-snackbar'); } - -[part~='base'] { - border-radius: var-get($theme, 'border-radius'); - color: var-get($theme, 'text-color'); - background: var-get($theme, 'background'); - box-shadow: var-get($theme, 'elevation'); -} diff --git a/src/components/snackbar/themes/shared/snackbar.bootstrap.scss b/src/components/snackbar/themes/shared/snackbar.bootstrap.scss new file mode 100644 index 000000000..fba74f930 --- /dev/null +++ b/src/components/snackbar/themes/shared/snackbar.bootstrap.scss @@ -0,0 +1,15 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +[part~='base'] { + border-radius: var-get($theme, 'border-radius'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); +} + +igc-button::part(base):hover { + color: var-get($theme, 'button-color'); +} diff --git a/src/components/snackbar/themes/shared/snackbar.fluent.scss b/src/components/snackbar/themes/shared/snackbar.fluent.scss new file mode 100644 index 000000000..da29a56c0 --- /dev/null +++ b/src/components/snackbar/themes/shared/snackbar.fluent.scss @@ -0,0 +1,24 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +[part~='base'] { + border-radius: var-get($theme, 'border-radius'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); +} + +[part~='message'] { + @include type-style('caption'); +} + +igc-button::part(base), +igc-button::part(base):hover { + color: var-get($theme, 'button-color'); +} + +igc-button::part(base):focus-visible::after { + display: none; +} diff --git a/src/components/snackbar/themes/shared/snackbar.indigo.scss b/src/components/snackbar/themes/shared/snackbar.indigo.scss new file mode 100644 index 000000000..a60e7930b --- /dev/null +++ b/src/components/snackbar/themes/shared/snackbar.indigo.scss @@ -0,0 +1,16 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +[part~='base'] { + border-radius: var-get($theme, 'border-radius'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); +} + +igc-button::part(base), +igc-button::part(base):hover { + color: var-get($theme, 'button-color'); +} diff --git a/src/components/snackbar/themes/shared/snackbar.material.scss b/src/components/snackbar/themes/shared/snackbar.material.scss new file mode 100644 index 000000000..5f67c8faf --- /dev/null +++ b/src/components/snackbar/themes/shared/snackbar.material.scss @@ -0,0 +1,11 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +[part~='base'] { + border-radius: var-get($theme, 'border-radius'); + color: var-get($theme, 'text-color'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); +} diff --git a/src/components/snackbar/themes/light/snackbar.base.scss b/src/components/snackbar/themes/snackbar.base.scss similarity index 100% rename from src/components/snackbar/themes/light/snackbar.base.scss rename to src/components/snackbar/themes/snackbar.base.scss diff --git a/src/components/snackbar/themes/themes.ts b/src/components/snackbar/themes/themes.ts new file mode 100644 index 000000000..287a9e96f --- /dev/null +++ b/src/components/snackbar/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/snackbar.bootstrap.css.js'; +import { styles as fluentDark } from './dark/snackbar.fluent.css.js'; +import { styles as indigoDark } from './dark/snackbar.indigo.css.js'; +import { styles as materialDark } from './dark/snackbar.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/snackbar.bootstrap.css.js'; +import { styles as fluentLight } from './light/snackbar.fluent.css.js'; +import { styles as indigoLight } from './light/snackbar.indigo.css.js'; +import { styles as materialLight } from './light/snackbar.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/snackbar.bootstrap.css.js'; +import { styles as fluent } from './shared/snackbar.fluent.css.js'; +import { styles as indigo } from './shared/snackbar.indigo.css.js'; +import { styles as material } from './shared/snackbar.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/stepper/step.ts b/src/components/stepper/step.ts index 008243de3..b4ed71ecb 100644 --- a/src/components/stepper/step.ts +++ b/src/components/stepper/step.ts @@ -3,11 +3,8 @@ import { property, query, queryAssignedElements } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; import { Animation, animations } from './animations.js'; -import { styles } from './themes/step/light/step.base.css.js'; -import { styles as bootstrap } from './themes/step/light/step.bootstrap.css.js'; -import { styles as fluent } from './themes/step/light/step.fluent.css.js'; -import { styles as indigo } from './themes/step/light/step.indigo.css.js'; -import { styles as material } from './themes/step/light/step.material.css.js'; +import { styles } from './themes/step/step.base.css.js'; +import { all } from './themes/step/themes.js'; import { EaseInOut } from '../../animations/easings.js'; import { AnimationPlayer } from '../../animations/player.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -45,10 +42,7 @@ import { partNameMap } from '../common/util.js'; * @csspart body - Wrapper of the step's `content`. * @csspart content - The steps `content`. */ -@themes({ - light: { bootstrap, indigo, fluent, material }, - dark: { bootstrap, indigo, fluent, material }, -}) +@themes(all, true) export default class IgcStepComponent extends LitElement { public static readonly tagName = 'igc-step'; public static override styles = styles; diff --git a/src/components/stepper/themes/step/dark/step.bootstrap.scss b/src/components/stepper/themes/step/dark/step.bootstrap.scss index 515c8eb27..c0a4354ab 100644 --- a/src/components/stepper/themes/step/dark/step.bootstrap.scss +++ b/src/components/stepper/themes/step/dark/step.bootstrap.scss @@ -1,9 +1,9 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-step { - @include css-vars-from-theme($bootstrap, 'ig-stepper'); - } +$theme: $bootstrap; + +:host { + @include css-vars-from-theme($theme, 'ig-stepper'); } diff --git a/src/components/stepper/themes/step/dark/step.fluent.scss b/src/components/stepper/themes/step/dark/step.fluent.scss index 48d3083ae..dacd3adcd 100644 --- a/src/components/stepper/themes/step/dark/step.fluent.scss +++ b/src/components/stepper/themes/step/dark/step.fluent.scss @@ -1,8 +1,8 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-step { - @include css-vars-from-theme($fluent, 'ig-stepper'); - } +$theme: $fluent; + +:host { + @include css-vars-from-theme($theme, 'ig-stepper'); } diff --git a/src/components/stepper/themes/step/dark/step.indigo.scss b/src/components/stepper/themes/step/dark/step.indigo.scss index 5b51dfdc5..e29eec2d2 100644 --- a/src/components/stepper/themes/step/dark/step.indigo.scss +++ b/src/components/stepper/themes/step/dark/step.indigo.scss @@ -1,8 +1,8 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-step { - @include css-vars-from-theme($indigo, 'ig-stepper'); - } +$theme: $indigo; + +:host { + @include css-vars-from-theme($theme, 'ig-stepper'); } diff --git a/src/components/stepper/themes/step/dark/step.material.scss b/src/components/stepper/themes/step/dark/step.material.scss index bd9d4e77a..7c783d7b1 100644 --- a/src/components/stepper/themes/step/dark/step.material.scss +++ b/src/components/stepper/themes/step/dark/step.material.scss @@ -1,8 +1,8 @@ @use 'styles/utilities' as *; @use 'themes' as *; -@mixin theme() { - igc-step { - @include css-vars-from-theme($material, 'ig-stepper') - } +$theme: $material; + +:host { + @include css-vars-from-theme($theme, 'ig-stepper'); } diff --git a/src/components/stepper/themes/step/light/step.bootstrap.scss b/src/components/stepper/themes/step/light/step.bootstrap.scss index 2a67cb3ad..c0a4354ab 100644 --- a/src/components/stepper/themes/step/light/step.bootstrap.scss +++ b/src/components/stepper/themes/step/light/step.bootstrap.scss @@ -7,163 +7,3 @@ $theme: $bootstrap; @include css-vars-from-theme($theme, 'ig-stepper'); } -[part~='title'] { - color: var-get($theme, 'title-color'); -} - -[part~='subtitle'] { - color: var-get($theme, 'subtitle-color'); -} - -[part~='header'] { - background: var-get($theme, 'step-background'); - border-radius: var-get($theme, 'border-radius-step-header'); - - &::before, - &::after { - border-block-start-style: var-get($theme, 'step-separator-style'); - border-block-start-color: var-get($theme, 'step-separator-color'); - } - - &:hover { - background: var-get($theme, 'step-hover-background'); - color: var-get($theme, 'title-hover-color') - } - - &:focus, - &:focus-within, - &:active { - background: var-get($theme, 'step-focus-background'); - color: var-get($theme, 'title-focus-color'); - box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'indicator-outline'); - } -} - -[part~='header-container'], -[part~='header'] { - &::before { - border-block-start-color: var-get($theme, 'step-separator-color'); - border-block-start-style: var-get($theme, 'step-separator-style'); - } -} - -[part~='body'] { - &::before { - border-inline-start-color: var-get($theme, 'step-separator-color'); - } -} - -[part~='indicator'] { - border-radius: var-get($theme, 'border-radius-indicator'); - background: var-get($theme, 'indicator-background'); - color: var-get($theme, 'indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } - - [part~='indicator'] { - background: var-get($theme, 'complete-indicator-background'); - color: var-get($theme, 'complete-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'complete-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'complete-subtitle-color'); - } -} - -:host([complete]) { - [part~='body'] { - &::before { - border-inline-start-style: var-get($theme, 'complete-step-separator-style'); - border-inline-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='complete-end'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='invalid'] { - [part~='indicator'] { - color: var-get($theme, 'invalid-indicator-color'); - background: var-get($theme, 'invalid-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); - } - - [part~='title'], - [part~='subtitle'] { - color: var-get($theme, 'invalid-title-color'); - } -} - -:host([active]) { - [part~='indicator'] { - background: var-get($theme, 'current-indicator-background'); - color: var-get($theme, 'current-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'current-title-color'); - font-weight: 600; - } - - [part~='subtitle'] { - color: var-get($theme, 'current-subtitle-color'); - } -} - -[part~='disabled'] { - &:focus, - &:focus-visible, - &:focus-within, - &:active, - &:hover { - [part='header'] { - background: var-get($theme, 'step-background'); - box-shadow: none; - } - } - - [part~='indicator'] { - color: var-get($theme, 'disabled-indicator-color'); - background: var-get($theme, 'disabled-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'disabled-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'disabled-subtitle-color'); - } -} diff --git a/src/components/stepper/themes/step/light/step.fluent.scss b/src/components/stepper/themes/step/light/step.fluent.scss index a19b3b7f9..dacd3adcd 100644 --- a/src/components/stepper/themes/step/light/step.fluent.scss +++ b/src/components/stepper/themes/step/light/step.fluent.scss @@ -6,162 +6,3 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-stepper'); } - -[part~='title'] { - color: var-get($theme, 'title-color'); -} - -[part~='subtitle'] { - color: var-get($theme, 'subtitle-color'); -} - -[part~='header'] { - background: var-get($theme, 'step-background'); - border-radius: var-get($theme, 'border-radius-step-header'); - - &::before, - &::after { - border-block-start-style: var-get($theme, 'step-separator-style'); - border-block-start-color: var-get($theme, 'step-separator-color'); - } - - &:hover { - background: var-get($theme, 'step-hover-background'); - color: var-get($theme, 'title-hover-color') - } - - &:focus, - &:focus-within, - &:active { - background: var-get($theme, 'step-focus-background'); - color: var-get($theme, 'title-focus-color'); - } -} - -[part~='header-container'], -[part~='header'] { - &::before { - border-block-start-color: var-get($theme, 'step-separator-color'); - border-block-start-style: var-get($theme, 'step-separator-style'); - } -} - -[part~='body'] { - &::before { - border-inline-start-color: var-get($theme, 'step-separator-color'); - } -} - -[part~='indicator'] { - border-radius: var-get($theme, 'border-radius-indicator'); - background: var-get($theme, 'indicator-background'); - color: var-get($theme, 'indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } - - [part~='indicator'] { - background: var-get($theme, 'complete-indicator-background'); - color: var-get($theme, 'complete-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'complete-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'complete-subtitle-color'); - } -} - -:host([complete]) { - [part~='body'] { - &::before { - border-inline-start-style: var-get($theme, 'complete-step-separator-style'); - border-inline-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='complete-end'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='invalid'] { - [part~='indicator'] { - color: var-get($theme, 'invalid-indicator-color'); - background: var-get($theme, 'invalid-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); - } - - [part~='title'], - [part~='subtitle'] { - color: var-get($theme, 'invalid-title-color'); - } -} - -:host([active]) { - [part~='indicator'] { - background: var-get($theme, 'current-indicator-background'); - color: var-get($theme, 'current-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'current-title-color'); - font-weight: 600; - } - - [part~='subtitle'] { - color: var-get($theme, 'current-subtitle-color'); - } -} - -[part~='disabled'] { - &:focus, - &:focus-visible, - &:focus-within, - &:active, - &:hover { - [part='header'] { - background: var-get($theme, 'step-background'); - } - } - - [part~='indicator'] { - color: var-get($theme, 'disabled-indicator-color'); - background: var-get($theme, 'disabled-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'disabled-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'disabled-subtitle-color'); - } -} diff --git a/src/components/stepper/themes/step/light/step.indigo.scss b/src/components/stepper/themes/step/light/step.indigo.scss index e7e7ab8be..e29eec2d2 100644 --- a/src/components/stepper/themes/step/light/step.indigo.scss +++ b/src/components/stepper/themes/step/light/step.indigo.scss @@ -6,162 +6,3 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-stepper'); } - -[part~='title'] { - color: var-get($theme, 'title-color'); -} - -[part~='subtitle'] { - color: var-get($theme, 'subtitle-color'); -} - -[part~='header'] { - background: var-get($theme, 'step-background'); - border-radius: var-get($theme, 'border-radius-step-header'); - - &::before, - &::after { - border-block-start-style: var-get($theme, 'step-separator-style'); - border-block-start-color: var-get($theme, 'step-separator-color'); - } - - &:hover { - background: var-get($theme, 'step-hover-background'); - color: var-get($theme, 'title-hover-color') - } - - &:focus, - &:focus-within, - &:active { - background: var-get($theme, 'step-focus-background'); - color: var-get($theme, 'title-focus-color'); - } -} - -[part~='header-container'], -[part~='header'] { - &::before { - border-block-start-color: var-get($theme, 'step-separator-color'); - border-block-start-style: var-get($theme, 'step-separator-style'); - } -} - -[part~='body'] { - &::before { - border-inline-start-color: var-get($theme, 'step-separator-color'); - } -} - -[part~='indicator'] { - border-radius: var-get($theme, 'border-radius-indicator'); - background: var-get($theme, 'indicator-background'); - color: var-get($theme, 'indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } - - [part~='indicator'] { - background: var-get($theme, 'complete-indicator-background'); - color: var-get($theme, 'complete-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'complete-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'complete-subtitle-color'); - } -} - -:host([complete]) { - [part~='body'] { - &::before { - border-inline-start-style: var-get($theme, 'complete-step-separator-style'); - border-inline-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='complete-end'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='invalid'] { - [part~='indicator'] { - color: var-get($theme, 'invalid-indicator-color'); - background: var-get($theme, 'invalid-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); - } - - [part~='title'], - [part~='subtitle'] { - color: var-get($theme, 'invalid-title-color'); - } -} - -:host([active]) { - [part~='indicator'] { - background: var-get($theme, 'current-indicator-background'); - color: var-get($theme, 'current-indicator-color'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'current-title-color'); - font-weight: 600; - } - - [part~='subtitle'] { - color: var-get($theme, 'current-subtitle-color'); - } -} - -[part~='disabled'] { - &:focus, - &:focus-visible, - &:focus-within, - &:active, - &:hover { - [part='header'] { - background: var-get($theme, 'step-background'); - } - } - - [part~='indicator'] { - color: var-get($theme, 'disabled-indicator-color'); - background: var-get($theme, 'disabled-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'disabled-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'disabled-subtitle-color'); - } -} diff --git a/src/components/stepper/themes/step/light/step.material.scss b/src/components/stepper/themes/step/light/step.material.scss index c648b616f..7c783d7b1 100644 --- a/src/components/stepper/themes/step/light/step.material.scss +++ b/src/components/stepper/themes/step/light/step.material.scss @@ -6,162 +6,3 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-stepper'); } - -[part~='title'] { - color: var-get($theme, 'title-color'); -} - -[part~='subtitle'] { - color: var-get($theme, 'subtitle-color'); -} - -[part~='header'] { - background: var-get($theme, 'step-background'); - border-radius: var-get($theme, 'border-radius-step-header'); - - &::before, - &::after { - border-block-start-style: var-get($theme, 'step-separator-style'); - border-block-start-color: var-get($theme, 'step-separator-color'); - } - - &:hover { - background: var-get($theme, 'step-hover-background'); - color: var-get($theme, 'title-hover-color') - } - - &:focus, - &:focus-within, - &:active { - background: var-get($theme, 'step-focus-background'); - color: var-get($theme, 'title-focus-color'); - } -} - -[part~='header-container'], -[part~='header'] { - &::before { - border-block-start-color: var-get($theme, 'step-separator-color'); - border-block-start-style: var-get($theme, 'step-separator-style'); - } -} - -[part~='body'] { - &::before { - border-inline-start-color: var-get($theme, 'step-separator-color'); - } -} - -[part~='indicator'] { - border-radius: var-get($theme, 'border-radius-indicator'); - background: var-get($theme, 'indicator-background'); - color: var-get($theme, 'indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'indicator-outline'); -} - -[part~='complete-start'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::after { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } - - [part~='indicator'] { - background: var-get($theme, 'complete-indicator-background'); - color: var-get($theme, 'complete-indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'complete-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'complete-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'complete-subtitle-color'); - } -} - -:host([complete]) { - [part~='body'] { - &::before { - border-inline-start-style: var-get($theme, 'complete-step-separator-style'); - border-inline-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='complete-end'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - - [part~='header'] { - &::before { - border-block-start-style: var-get($theme, 'complete-step-separator-style'); - border-block-start-color: var-get($theme, 'complete-step-separator-color'); - } - } -} - -[part~='invalid'] { - [part~='indicator'] { - color: var-get($theme, 'invalid-indicator-color'); - background: var-get($theme, 'invalid-indicator-background'); - box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); - } - - [part~='title'], - [part~='subtitle'] { - color: var-get($theme, 'invalid-title-color'); - } -} - -:host([active]) { - [part~='indicator'] { - background: var-get($theme, 'current-indicator-background'); - color: var-get($theme, 'current-indicator-color'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'current-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'current-title-color'); - font-weight: 600; - } - - [part~='subtitle'] { - color: var-get($theme, 'current-subtitle-color'); - } -} - -[part~='disabled'] { - &:focus, - &:focus-visible, - &:focus-within, - &:active, - &:hover { - [part='header'] { - background: var-get($theme, 'step-background'); - } - } - - [part~='indicator'] { - color: var-get($theme, 'disabled-indicator-color'); - background: var-get($theme, 'disabled-indicator-background'); - box-shadow: 0 0 0 rem(1px) var-get($theme, 'disabled-indicator-outline'); - } - - [part~='title'] { - color: var-get($theme, 'disabled-title-color'); - } - - [part~='subtitle'] { - color: var-get($theme, 'disabled-subtitle-color'); - } -} diff --git a/src/components/stepper/themes/step/shared/step.bootstrap.scss b/src/components/stepper/themes/step/shared/step.bootstrap.scss new file mode 100644 index 000000000..9c7eda5fe --- /dev/null +++ b/src/components/stepper/themes/step/shared/step.bootstrap.scss @@ -0,0 +1,165 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +[part~='title'] { + color: var-get($theme, 'title-color'); +} + +[part~='subtitle'] { + color: var-get($theme, 'subtitle-color'); +} + +[part~='header'] { + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + + &::before, + &::after { + border-block-start-style: var-get($theme, 'step-separator-style'); + border-block-start-color: var-get($theme, 'step-separator-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color') + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'indicator-outline'); + } +} + +[part~='header-container'], +[part~='header'] { + &::before { + border-block-start-color: var-get($theme, 'step-separator-color'); + border-block-start-style: var-get($theme, 'step-separator-style'); + } +} + +[part~='body'] { + &::before { + border-inline-start-color: var-get($theme, 'step-separator-color'); + } +} + +[part~='indicator'] { + border-radius: var-get($theme, 'border-radius-indicator'); + background: var-get($theme, 'indicator-background'); + color: var-get($theme, 'indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); +} + +[part~='complete-start'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } + + [part~='indicator'] { + background: var-get($theme, 'complete-indicator-background'); + color: var-get($theme, 'complete-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'complete-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'complete-subtitle-color'); + } +} + +:host([complete]) { + [part~='body'] { + &::before { + border-inline-start-style: var-get($theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='complete-end'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='invalid'] { + [part~='indicator'] { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); + } + + [part~='title'], + [part~='subtitle'] { + color: var-get($theme, 'invalid-title-color'); + } +} + +:host([active]) { + [part~='indicator'] { + background: var-get($theme, 'current-indicator-background'); + color: var-get($theme, 'current-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'current-title-color'); + font-weight: 600; + } + + [part~='subtitle'] { + color: var-get($theme, 'current-subtitle-color'); + } +} + +[part~='disabled'] { + &:focus, + &:focus-visible, + &:focus-within, + &:active, + &:hover { + [part='header'] { + background: var-get($theme, 'step-background'); + box-shadow: none; + } + } + + [part~='indicator'] { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'disabled-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'disabled-subtitle-color'); + } +} diff --git a/src/components/stepper/themes/step/shared/step.fluent.scss b/src/components/stepper/themes/step/shared/step.fluent.scss new file mode 100644 index 000000000..719908d32 --- /dev/null +++ b/src/components/stepper/themes/step/shared/step.fluent.scss @@ -0,0 +1,163 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +[part~='title'] { + color: var-get($theme, 'title-color'); +} + +[part~='subtitle'] { + color: var-get($theme, 'subtitle-color'); +} + +[part~='header'] { + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + + &::before, + &::after { + border-block-start-style: var-get($theme, 'step-separator-style'); + border-block-start-color: var-get($theme, 'step-separator-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color') + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } +} + +[part~='header-container'], +[part~='header'] { + &::before { + border-block-start-color: var-get($theme, 'step-separator-color'); + border-block-start-style: var-get($theme, 'step-separator-style'); + } +} + +[part~='body'] { + &::before { + border-inline-start-color: var-get($theme, 'step-separator-color'); + } +} + +[part~='indicator'] { + border-radius: var-get($theme, 'border-radius-indicator'); + background: var-get($theme, 'indicator-background'); + color: var-get($theme, 'indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); +} + +[part~='complete-start'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } + + [part~='indicator'] { + background: var-get($theme, 'complete-indicator-background'); + color: var-get($theme, 'complete-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'complete-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'complete-subtitle-color'); + } +} + +:host([complete]) { + [part~='body'] { + &::before { + border-inline-start-style: var-get($theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='complete-end'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='invalid'] { + [part~='indicator'] { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); + } + + [part~='title'], + [part~='subtitle'] { + color: var-get($theme, 'invalid-title-color'); + } +} + +:host([active]) { + [part~='indicator'] { + background: var-get($theme, 'current-indicator-background'); + color: var-get($theme, 'current-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'current-title-color'); + font-weight: 600; + } + + [part~='subtitle'] { + color: var-get($theme, 'current-subtitle-color'); + } +} + +[part~='disabled'] { + &:focus, + &:focus-visible, + &:focus-within, + &:active, + &:hover { + [part='header'] { + background: var-get($theme, 'step-background'); + } + } + + [part~='indicator'] { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'disabled-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'disabled-subtitle-color'); + } +} diff --git a/src/components/stepper/themes/step/shared/step.indigo.scss b/src/components/stepper/themes/step/shared/step.indigo.scss new file mode 100644 index 000000000..e594d10c8 --- /dev/null +++ b/src/components/stepper/themes/step/shared/step.indigo.scss @@ -0,0 +1,163 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +[part~='title'] { + color: var-get($theme, 'title-color'); +} + +[part~='subtitle'] { + color: var-get($theme, 'subtitle-color'); +} + +[part~='header'] { + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + + &::before, + &::after { + border-block-start-style: var-get($theme, 'step-separator-style'); + border-block-start-color: var-get($theme, 'step-separator-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color') + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } +} + +[part~='header-container'], +[part~='header'] { + &::before { + border-block-start-color: var-get($theme, 'step-separator-color'); + border-block-start-style: var-get($theme, 'step-separator-style'); + } +} + +[part~='body'] { + &::before { + border-inline-start-color: var-get($theme, 'step-separator-color'); + } +} + +[part~='indicator'] { + border-radius: var-get($theme, 'border-radius-indicator'); + background: var-get($theme, 'indicator-background'); + color: var-get($theme, 'indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'indicator-outline'); +} + +[part~='complete-start'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } + + [part~='indicator'] { + background: var-get($theme, 'complete-indicator-background'); + color: var-get($theme, 'complete-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'complete-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'complete-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'complete-subtitle-color'); + } +} + +:host([complete]) { + [part~='body'] { + &::before { + border-inline-start-style: var-get($theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='complete-end'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='invalid'] { + [part~='indicator'] { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); + } + + [part~='title'], + [part~='subtitle'] { + color: var-get($theme, 'invalid-title-color'); + } +} + +:host([active]) { + [part~='indicator'] { + background: var-get($theme, 'current-indicator-background'); + color: var-get($theme, 'current-indicator-color'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'current-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'current-title-color'); + font-weight: 600; + } + + [part~='subtitle'] { + color: var-get($theme, 'current-subtitle-color'); + } +} + +[part~='disabled'] { + &:focus, + &:focus-visible, + &:focus-within, + &:active, + &:hover { + [part='header'] { + background: var-get($theme, 'step-background'); + } + } + + [part~='indicator'] { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'disabled-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'disabled-subtitle-color'); + } +} diff --git a/src/components/stepper/themes/step/shared/step.material.scss b/src/components/stepper/themes/step/shared/step.material.scss new file mode 100644 index 000000000..6c1083222 --- /dev/null +++ b/src/components/stepper/themes/step/shared/step.material.scss @@ -0,0 +1,163 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +[part~='title'] { + color: var-get($theme, 'title-color'); +} + +[part~='subtitle'] { + color: var-get($theme, 'subtitle-color'); +} + +[part~='header'] { + background: var-get($theme, 'step-background'); + border-radius: var-get($theme, 'border-radius-step-header'); + + &::before, + &::after { + border-block-start-style: var-get($theme, 'step-separator-style'); + border-block-start-color: var-get($theme, 'step-separator-color'); + } + + &:hover { + background: var-get($theme, 'step-hover-background'); + color: var-get($theme, 'title-hover-color') + } + + &:focus, + &:focus-within, + &:active { + background: var-get($theme, 'step-focus-background'); + color: var-get($theme, 'title-focus-color'); + } +} + +[part~='header-container'], +[part~='header'] { + &::before { + border-block-start-color: var-get($theme, 'step-separator-color'); + border-block-start-style: var-get($theme, 'step-separator-style'); + } +} + +[part~='body'] { + &::before { + border-inline-start-color: var-get($theme, 'step-separator-color'); + } +} + +[part~='indicator'] { + border-radius: var-get($theme, 'border-radius-indicator'); + background: var-get($theme, 'indicator-background'); + color: var-get($theme, 'indicator-color'); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'indicator-outline'); +} + +[part~='complete-start'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::after { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } + + [part~='indicator'] { + background: var-get($theme, 'complete-indicator-background'); + color: var-get($theme, 'complete-indicator-color'); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'complete-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'complete-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'complete-subtitle-color'); + } +} + +:host([complete]) { + [part~='body'] { + &::before { + border-inline-start-style: var-get($theme, 'complete-step-separator-style'); + border-inline-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='complete-end'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + + [part~='header'] { + &::before { + border-block-start-style: var-get($theme, 'complete-step-separator-style'); + border-block-start-color: var-get($theme, 'complete-step-separator-color'); + } + } +} + +[part~='invalid'] { + [part~='indicator'] { + color: var-get($theme, 'invalid-indicator-color'); + background: var-get($theme, 'invalid-indicator-background'); + box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'invalid-indicator-outline'); + } + + [part~='title'], + [part~='subtitle'] { + color: var-get($theme, 'invalid-title-color'); + } +} + +:host([active]) { + [part~='indicator'] { + background: var-get($theme, 'current-indicator-background'); + color: var-get($theme, 'current-indicator-color'); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'current-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'current-title-color'); + font-weight: 600; + } + + [part~='subtitle'] { + color: var-get($theme, 'current-subtitle-color'); + } +} + +[part~='disabled'] { + &:focus, + &:focus-visible, + &:focus-within, + &:active, + &:hover { + [part='header'] { + background: var-get($theme, 'step-background'); + } + } + + [part~='indicator'] { + color: var-get($theme, 'disabled-indicator-color'); + background: var-get($theme, 'disabled-indicator-background'); + box-shadow: 0 0 0 rem(1px) var-get($theme, 'disabled-indicator-outline'); + } + + [part~='title'] { + color: var-get($theme, 'disabled-title-color'); + } + + [part~='subtitle'] { + color: var-get($theme, 'disabled-subtitle-color'); + } +} diff --git a/src/components/stepper/themes/step/light/step.base.scss b/src/components/stepper/themes/step/step.base.scss similarity index 100% rename from src/components/stepper/themes/step/light/step.base.scss rename to src/components/stepper/themes/step/step.base.scss diff --git a/src/components/stepper/themes/step/themes.ts b/src/components/stepper/themes/step/themes.ts new file mode 100644 index 000000000..dc2fcc320 --- /dev/null +++ b/src/components/stepper/themes/step/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/step.bootstrap.css.js'; +import { styles as fluentDark } from './dark/step.fluent.css.js'; +import { styles as indigoDark } from './dark/step.indigo.css.js'; +import { styles as materialDark } from './dark/step.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/step.bootstrap.css.js'; +import { styles as fluentLight } from './light/step.fluent.css.js'; +import { styles as indigoLight } from './light/step.indigo.css.js'; +import { styles as materialLight } from './light/step.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/step.bootstrap.css.js'; +import { styles as fluent } from './shared/step.fluent.css.js'; +import { styles as indigo } from './shared/step.indigo.css.js'; +import { styles as material } from './shared/step.material.css.js'; +import { Themes } from '../../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/tabs/tab-panel.ts b/src/components/tabs/tab-panel.ts index 6c7d8e016..63449564a 100644 --- a/src/components/tabs/tab-panel.ts +++ b/src/components/tabs/tab-panel.ts @@ -1,6 +1,6 @@ import { LitElement, html } from 'lit'; -import { styles } from './themes/light/tab-panel.base.css.js'; +import { styles } from './themes/tab-panel.base.css.js'; import { registerComponent } from '../common/definitions/register.js'; import { createCounter } from '../common/util.js'; diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index 93af4a88a..86dd0dff4 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -1,11 +1,8 @@ import { LitElement, html } from 'lit'; import { property, query } from 'lit/decorators.js'; -import { styles } from './themes/light/tab.base.css.js'; -import { styles as bootstrap } from './themes/light/tab.bootstrap.css.js'; -import { styles as fluent } from './themes/light/tab.fluent.css.js'; -import { styles as indigo } from './themes/light/tab.indigo.css.js'; -import { styles as material } from './themes/light/tab.material.css.js'; +import { all } from './themes/tab-themes.js'; +import { styles } from './themes/tab.base.css.js'; import { themes } from '../../theming/theming-decorator.js'; import { registerComponent } from '../common/definitions/register.js'; import { createCounter } from '../common/util.js'; @@ -23,10 +20,8 @@ import { createCounter } from '../common/util.js'; * @csspart prefix - The prefix wrapper. * @csspart suffix - The suffix wrapper. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) + +@themes(all, true) export default class IgcTabComponent extends LitElement { public static readonly tagName = 'igc-tab'; public static override styles = styles; diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index cda6eb496..a996d3e0f 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -9,11 +9,8 @@ import { import IgcTabPanelComponent from './tab-panel.js'; import IgcTabComponent from './tab.js'; -import { styles } from './themes/light/tabs.base.css.js'; -import { styles as bootstrap } from './themes/light/tabs.bootstrap.css.js'; -import { styles as fluent } from './themes/light/tabs.fluent.css.js'; -import { styles as indigo } from './themes/light/tabs.indigo.css.js'; -import { styles as material } from './themes/light/tabs.material.css.js'; +import { all } from './themes/tabs-themes.js'; +import { styles } from './themes/tabs.base.css.js'; import { getAttributesForTags, getNodesForTags, @@ -51,10 +48,7 @@ export interface IgcTabsEventMap { * @csspart end-scroll-button - The end scroll button displayed when the tabs overflow. * @csspart content - The container for the tabs content. */ -@themes({ - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, -}) +@themes(all, true) @blazorAdditionalDependencies('IgcTabComponent, IgcTabPanelComponent') export default class IgcTabsComponent extends EventEmitterMixin< IgcTabsEventMap, diff --git a/src/components/tabs/themes/dark/tab.bootstrap.scss b/src/components/tabs/themes/dark/tab.bootstrap.scss index 7baa1391d..e1ea5bfeb 100644 --- a/src/components/tabs/themes/dark/tab.bootstrap.scss +++ b/src/components/tabs/themes/dark/tab.bootstrap.scss @@ -3,8 +3,6 @@ $theme: $bootstrap; -@mixin theme() { - igc-tab { - @include css-vars-from-theme($theme, 'ig-tabs'); - } +:host { + @include css-vars-from-theme($theme, 'ig-tabs'); } diff --git a/src/components/tabs/themes/dark/tab.fluent.scss b/src/components/tabs/themes/dark/tab.fluent.scss index 68df6e71e..2b9defc80 100644 --- a/src/components/tabs/themes/dark/tab.fluent.scss +++ b/src/components/tabs/themes/dark/tab.fluent.scss @@ -3,8 +3,6 @@ $theme: $fluent; -@mixin theme() { - igc-tab { - @include css-vars-from-theme($theme, 'ig-tabs'); - } +:host { + @include css-vars-from-theme($theme, 'ig-tabs'); } diff --git a/src/components/tabs/themes/dark/tab.indigo.scss b/src/components/tabs/themes/dark/tab.indigo.scss index bbb1b8837..cc9ba9a34 100644 --- a/src/components/tabs/themes/dark/tab.indigo.scss +++ b/src/components/tabs/themes/dark/tab.indigo.scss @@ -3,8 +3,6 @@ $theme: $indigo; -@mixin theme() { - igc-tab { - @include css-vars-from-theme($theme, 'ig-tabs'); - } +:host { + @include css-vars-from-theme($theme, 'ig-tabs'); } diff --git a/src/components/tabs/themes/dark/tab.material.scss b/src/components/tabs/themes/dark/tab.material.scss index 8c40d5709..6aa7f4e09 100644 --- a/src/components/tabs/themes/dark/tab.material.scss +++ b/src/components/tabs/themes/dark/tab.material.scss @@ -3,8 +3,6 @@ $theme: $material; -@mixin theme() { - igc-tab { - @include css-vars-from-theme($theme, 'ig-tabs'); - } +:host { + @include css-vars-from-theme($theme, 'ig-tabs'); } diff --git a/src/components/tabs/themes/light/tab.bootstrap.scss b/src/components/tabs/themes/light/tab.bootstrap.scss index e9692f0b7..e1ea5bfeb 100644 --- a/src/components/tabs/themes/light/tab.bootstrap.scss +++ b/src/components/tabs/themes/light/tab.bootstrap.scss @@ -5,66 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-tabs'); - - transition: none; - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - border-radius: var-get($theme, 'border-radius'); - border-end-end-radius: 0; - border-end-start-radius: 0; -} - -:host(:hover) { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-color'); - box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover'); -} - -:host([selected]) { - color: var-get($theme, 'item-active-color'); - position: relative; - box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-active-icon-color'); - } - - &::after { - content: ''; - position: absolute; - bottom: 0; - inset-inline-start: 0; - width: 100%; - height: rem(1px); - background: var-get($theme, 'item-background'); - z-index: 1; - } -} - -:host([selected]:hover) { - color: var-get($theme, 'item-active-color'); - border-top-color: var-get($theme, 'border-color'); - border-inline-color: var-get($theme, 'border-color'); - border-bottom-color: var-get($theme, 'item-background'); -} - -:host(:focus-within), -:host([selected]:focus-within) { - border-radius: var-get($theme, 'border-radius'); - color: var-get($theme, 'item-hover-color'); - background: var-get($theme, 'item-background'); - box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color'); - z-index: 1; - - &::after { - display: none; - } -} - -:host([selected]:focus-within) { - color: var-get($theme, 'item-active-color'); -} - -:host([disabled]) { - color: var-get($theme, 'item-disabled-color'); } diff --git a/src/components/tabs/themes/light/tab.fluent.scss b/src/components/tabs/themes/light/tab.fluent.scss index 355fdb6ad..2b9defc80 100644 --- a/src/components/tabs/themes/light/tab.fluent.scss +++ b/src/components/tabs/themes/light/tab.fluent.scss @@ -5,39 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-tabs'); - - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - border-radius: var-get($theme, 'border-radius'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-icon-color'); - } -} - -:host(:hover), -:host(:focus-within) { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-color'); -} - -:host([selected]) { - color: var-get($theme, 'item-active-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-active-icon-color'); - } -} - -:host([selected]:hover), -:host([selected]:focus-within) { - color: var-get($theme, 'item-active-color'); -} - -:host([disabled]) { - color: var-get($theme, 'item-disabled-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-disabled-icon-color'); - } } diff --git a/src/components/tabs/themes/light/tab.indigo.scss b/src/components/tabs/themes/light/tab.indigo.scss index a380d6676..cc9ba9a34 100644 --- a/src/components/tabs/themes/light/tab.indigo.scss +++ b/src/components/tabs/themes/light/tab.indigo.scss @@ -5,31 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-tabs'); - - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - border-radius: var-get($theme, 'border-radius'); -} - -:host(:hover), -:host(:focus-within) { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-color'); -} - -:host([selected]) { - color: var-get($theme, 'item-active-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-active-icon-color'); - } -} - -:host([selected]:hover), -:host([selected]:focus-within) { - color: var-get($theme, 'item-active-color'); -} - -:host([disabled]) { - color: var-get($theme, 'item-disabled-color'); } diff --git a/src/components/tabs/themes/light/tab.material.scss b/src/components/tabs/themes/light/tab.material.scss index fd092a7a2..6aa7f4e09 100644 --- a/src/components/tabs/themes/light/tab.material.scss +++ b/src/components/tabs/themes/light/tab.material.scss @@ -5,31 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-tabs'); - - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - border-radius: var-get($theme, 'border-radius'); -} - -:host(:hover), -:host(:focus-within) { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-color'); -} - -:host([selected]) { - color: var-get($theme, 'item-active-color'); - - ::slotted(igc-icon) { - color: var-get($theme, 'item-active-icon-color'); - } -} - -:host([selected]:hover), -:host([selected]:focus-within) { - color: var-get($theme, 'item-active-color'); -} - -:host([disabled]) { - color: var-get($theme, 'item-disabled-color'); } diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss new file mode 100644 index 000000000..f84502f0c --- /dev/null +++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss @@ -0,0 +1,68 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $bootstrap; + +:host { + transition: none; + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); + border-radius: var-get($theme, 'border-radius'); + border-end-end-radius: 0; + border-end-start-radius: 0; +} + +:host(:hover) { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover'); +} + +:host([selected]) { + color: var-get($theme, 'item-active-color'); + position: relative; + box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-active-icon-color'); + } + + &::after { + content: ''; + position: absolute; + bottom: 0; + inset-inline-start: 0; + width: 100%; + height: rem(1px); + background: var-get($theme, 'item-background'); + z-index: 1; + } +} + +:host([selected]:hover) { + color: var-get($theme, 'item-active-color'); + border-top-color: var-get($theme, 'border-color'); + border-inline-color: var-get($theme, 'border-color'); + border-bottom-color: var-get($theme, 'item-background'); +} + +:host(:focus-within), +:host([selected]:focus-within) { + border-radius: var-get($theme, 'border-radius'); + color: var-get($theme, 'item-hover-color'); + background: var-get($theme, 'item-background'); + box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color'); + z-index: 1; + + &::after { + display: none; + } +} + +:host([selected]:focus-within) { + color: var-get($theme, 'item-active-color'); +} + +:host([disabled]) { + color: var-get($theme, 'item-disabled-color'); +} diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss new file mode 100644 index 000000000..c83818776 --- /dev/null +++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss @@ -0,0 +1,41 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $fluent; + +:host { + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); + border-radius: var-get($theme, 'border-radius'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-icon-color'); + } +} + +:host(:hover), +:host(:focus-within) { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); +} + +:host([selected]) { + color: var-get($theme, 'item-active-color'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-active-icon-color'); + } +} + +:host([selected]:hover), +:host([selected]:focus-within) { + color: var-get($theme, 'item-active-color'); +} + +:host([disabled]) { + color: var-get($theme, 'item-disabled-color'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-disabled-icon-color'); + } +} diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss new file mode 100644 index 000000000..ee370849b --- /dev/null +++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss @@ -0,0 +1,33 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $indigo; + +:host { + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); + border-radius: var-get($theme, 'border-radius'); +} + +:host(:hover), +:host(:focus-within) { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); +} + +:host([selected]) { + color: var-get($theme, 'item-active-color'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-active-icon-color'); + } +} + +:host([selected]:hover), +:host([selected]:focus-within) { + color: var-get($theme, 'item-active-color'); +} + +:host([disabled]) { + color: var-get($theme, 'item-disabled-color'); +} diff --git a/src/components/tabs/themes/shared/tab/tab.material.scss b/src/components/tabs/themes/shared/tab/tab.material.scss new file mode 100644 index 000000000..ad3740044 --- /dev/null +++ b/src/components/tabs/themes/shared/tab/tab.material.scss @@ -0,0 +1,33 @@ +@use 'styles/utilities' as *; +@use '../../light/themes' as *; + +$theme: $material; + +:host { + background: var-get($theme, 'item-background'); + color: var-get($theme, 'item-text-color'); + border-radius: var-get($theme, 'border-radius'); +} + +:host(:hover), +:host(:focus-within) { + background: var-get($theme, 'item-hover-background'); + color: var-get($theme, 'item-hover-color'); +} + +:host([selected]) { + color: var-get($theme, 'item-active-color'); + + ::slotted(igc-icon) { + color: var-get($theme, 'item-active-icon-color'); + } +} + +:host([selected]:hover), +:host([selected]:focus-within) { + color: var-get($theme, 'item-active-color'); +} + +:host([disabled]) { + color: var-get($theme, 'item-disabled-color'); +} diff --git a/src/components/tabs/themes/light/tabs.bootstrap.scss b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss similarity index 91% rename from src/components/tabs/themes/light/tabs.bootstrap.scss rename to src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss index a8cea2004..fea1367ed 100644 --- a/src/components/tabs/themes/light/tabs.bootstrap.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.bootstrap.scss @@ -1,12 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $bootstrap; -:host { - @include css-vars-from-theme($theme, 'ig-tabs'); -} - [part='headers'] { background: var-get($theme, 'item-background'); } diff --git a/src/components/tabs/themes/light/tabs.fluent.scss b/src/components/tabs/themes/shared/tabs/tabs.fluent.scss similarity index 90% rename from src/components/tabs/themes/light/tabs.fluent.scss rename to src/components/tabs/themes/shared/tabs/tabs.fluent.scss index 14a185e26..c0ba7a829 100644 --- a/src/components/tabs/themes/light/tabs.fluent.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.fluent.scss @@ -1,12 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $fluent; -:host { - @include css-vars-from-theme($theme, 'ig-tabs'); -} - [part='headers'] { background: var-get($theme, 'item-background'); } diff --git a/src/components/tabs/themes/light/tabs.indigo.scss b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss similarity index 89% rename from src/components/tabs/themes/light/tabs.indigo.scss rename to src/components/tabs/themes/shared/tabs/tabs.indigo.scss index 5e57718b4..aac1be97d 100644 --- a/src/components/tabs/themes/light/tabs.indigo.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss @@ -1,12 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $indigo; -:host { - @include css-vars-from-theme($theme, 'ig-tabs'); -} - [part='headers'] { background: var-get($theme, 'item-background'); } diff --git a/src/components/tabs/themes/light/tabs.material.scss b/src/components/tabs/themes/shared/tabs/tabs.material.scss similarity index 89% rename from src/components/tabs/themes/light/tabs.material.scss rename to src/components/tabs/themes/shared/tabs/tabs.material.scss index 3cde61cb0..d0a96c177 100644 --- a/src/components/tabs/themes/light/tabs.material.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.material.scss @@ -1,12 +1,8 @@ @use 'styles/utilities' as *; -@use 'themes' as *; +@use '../../light/themes' as *; $theme: $material; -:host { - @include css-vars-from-theme($theme, 'ig-tabs'); -} - [part='headers'] { background: var-get($theme, 'item-background'); } diff --git a/src/components/tabs/themes/light/tab-panel.base.scss b/src/components/tabs/themes/tab-panel.base.scss similarity index 80% rename from src/components/tabs/themes/light/tab-panel.base.scss rename to src/components/tabs/themes/tab-panel.base.scss index 169a6dea3..e7359b035 100644 --- a/src/components/tabs/themes/light/tab-panel.base.scss +++ b/src/components/tabs/themes/tab-panel.base.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; :host { diff --git a/src/components/tabs/themes/tab-themes.ts b/src/components/tabs/themes/tab-themes.ts new file mode 100644 index 000000000..76240809d --- /dev/null +++ b/src/components/tabs/themes/tab-themes.ts @@ -0,0 +1,40 @@ +import { css } from 'lit'; + +// Shared Styles +import { styles as bootstrap } from './shared/tab/tab.bootstrap.css.js'; +import { styles as fluent } from './shared/tab/tab.fluent.css.js'; +import { styles as indigo } from './shared/tab/tab.indigo.css.js'; +import { styles as material } from './shared/tab/tab.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} + `, + material: css` + ${material} + `, + fluent: css` + ${fluent} + `, + indigo: css` + ${indigo} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/tabs/themes/light/tab.base.scss b/src/components/tabs/themes/tab.base.scss similarity index 100% rename from src/components/tabs/themes/light/tab.base.scss rename to src/components/tabs/themes/tab.base.scss diff --git a/src/components/tabs/themes/tabs-themes.ts b/src/components/tabs/themes/tabs-themes.ts new file mode 100644 index 000000000..a33146d45 --- /dev/null +++ b/src/components/tabs/themes/tabs-themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/tab.bootstrap.css.js'; +import { styles as fluentDark } from './dark/tab.fluent.css.js'; +import { styles as indigoDark } from './dark/tab.indigo.css.js'; +import { styles as materialDark } from './dark/tab.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/tab.bootstrap.css.js'; +import { styles as fluentLight } from './light/tab.fluent.css.js'; +import { styles as indigoLight } from './light/tab.indigo.css.js'; +import { styles as materialLight } from './light/tab.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/tabs/tabs.bootstrap.css.js'; +import { styles as fluent } from './shared/tabs/tabs.fluent.css.js'; +import { styles as indigo } from './shared/tabs/tabs.indigo.css.js'; +import { styles as material } from './shared/tabs/tabs.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/tabs/themes/light/tabs.base.scss b/src/components/tabs/themes/tabs.base.scss similarity index 100% rename from src/components/tabs/themes/light/tabs.base.scss rename to src/components/tabs/themes/tabs.base.scss diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 5a6e7d7e1..e83eb9526 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -9,11 +9,8 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { live } from 'lit/directives/live.js'; import { StyleInfo, styleMap } from 'lit/directives/style-map.js'; -import { styles } from './themes/light/textarea.base.css.js'; -import { styles as bootstrap } from './themes/light/textarea.bootstrap.css.js'; -import { styles as fluent } from './themes/light/textarea.fluent.css.js'; -import { styles as indigo } from './themes/light/textarea.indigo.css.js'; -import { styles as material } from './themes/light/textarea.material.css.js'; +import { styles } from './themes/textarea.base.css.js'; +import { all } from './themes/themes.js'; import { themeSymbol, themes } from '../../theming/theming-decorator.js'; import type { Theme } from '../../theming/types.js'; import { watch } from '../common/decorators/watch.js'; @@ -65,13 +62,7 @@ export interface IgcTextareaEventMap { * @csspart suffix - The suffix wrapper. * @csspart helper-text - The helper text wrapper. */ -@themes( - { - light: { material, bootstrap, fluent, indigo }, - dark: { material, bootstrap, fluent, indigo }, - }, - true -) +@themes(all, true) export default class IgcTextareaComponent extends FormAssociatedRequiredMixin( EventEmitterMixin>(LitElement) ) { diff --git a/src/components/textarea/themes/dark/_themes.scss b/src/components/textarea/themes/dark/_themes.scss new file mode 100644 index 000000000..e5b68eb21 --- /dev/null +++ b/src/components/textarea/themes/dark/_themes.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/input-group' as *; + +$material: digest-schema($dark-input-group); +$bootstrap: digest-schema($dark-bootstrap-input-group); +$fluent: digest-schema($dark-fluent-input-group); +$indigo: digest-schema($dark-indigo-input-group); diff --git a/src/components/textarea/themes/dark/textarea.bootstrap.scss b/src/components/textarea/themes/dark/textarea.bootstrap.scss index a6fff0ac9..b9e761613 100644 --- a/src/components/textarea/themes/dark/textarea.bootstrap.scss +++ b/src/components/textarea/themes/dark/textarea.bootstrap.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../../input/themes/dark/themes' as *; +@use 'themes' as *; $theme: $bootstrap; -@mixin theme() { - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } +:host { + @include css-vars-from-theme($theme, 'ig-textarea'); } diff --git a/src/components/textarea/themes/dark/textarea.fluent.scss b/src/components/textarea/themes/dark/textarea.fluent.scss index b8f9c2e0d..78c6f8803 100644 --- a/src/components/textarea/themes/dark/textarea.fluent.scss +++ b/src/components/textarea/themes/dark/textarea.fluent.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../../input/themes/dark/themes' as *; +@use 'themes' as *; $theme: $fluent; -@mixin theme() { - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } +:host { + @include css-vars-from-theme($theme, 'ig-textarea'); } diff --git a/src/components/textarea/themes/dark/textarea.indigo.scss b/src/components/textarea/themes/dark/textarea.indigo.scss index d9f153109..c00773435 100644 --- a/src/components/textarea/themes/dark/textarea.indigo.scss +++ b/src/components/textarea/themes/dark/textarea.indigo.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../../input/themes/dark/themes' as *; +@use 'themes' as *; $theme: $indigo; -@mixin theme() { - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } +:host { + @include css-vars-from-theme($theme, 'ig-textarea'); } diff --git a/src/components/textarea/themes/dark/textarea.material.scss b/src/components/textarea/themes/dark/textarea.material.scss index 7c4c64f52..1c635fa5b 100644 --- a/src/components/textarea/themes/dark/textarea.material.scss +++ b/src/components/textarea/themes/dark/textarea.material.scss @@ -1,11 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; -@use '../../../input/themes/dark/themes' as *; +@use 'themes' as *; $theme: $material; -@mixin theme() { - igc-textarea { - @include css-vars-from-theme($theme, 'ig-textarea'); - } +:host { + @include css-vars-from-theme($theme, 'ig-textarea'); } diff --git a/src/components/textarea/themes/light/_themes.scss b/src/components/textarea/themes/light/_themes.scss new file mode 100644 index 000000000..011a264f3 --- /dev/null +++ b/src/components/textarea/themes/light/_themes.scss @@ -0,0 +1,7 @@ +@use 'styles/utilities' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/input-group' as *; + +$material: digest-schema($light-input-group); +$bootstrap: digest-schema($bootstrap-input-group); +$fluent: digest-schema($fluent-input-group); +$indigo: digest-schema($indigo-input-group); diff --git a/src/components/textarea/themes/light/textarea.bootstrap.scss b/src/components/textarea/themes/light/textarea.bootstrap.scss index a9d14cb1a..b9e761613 100644 --- a/src/components/textarea/themes/light/textarea.bootstrap.scss +++ b/src/components/textarea/themes/light/textarea.bootstrap.scss @@ -1,185 +1,8 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../../../input/themes/light/themes' as *; +@use 'themes' as *; $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-textarea'); - @include type-style('body-1'); -} - -[part~='label'] { - position: static; - display: block; - color: var-get($theme, 'idle-secondary-color'); - padding: 0; - line-height: rem(24px); - transform: translateY(0); - transform-origin: top left; - margin-block: 0 rem(4px); - height: auto; - font-size: rem(16px); -} - -[part~='helper-text'] { - @include type-style('body-2'); - - color: var-get($theme, 'helper-text-color'); - padding-block-start: rem(4px); - padding-inline-start: 0; -} - -[part~='prefixed'] { - [part~='prefix'] { - border-width: rem(1px); - border-style: solid; - border-color: var-get($theme, 'border-color'); - overflow: hidden; - border-inline-end-width: 0; - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - border: { - start: { - start-radius: var-get($theme, 'border-border-radius'); - }; - end: { - start-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - textarea { - border: { - start: { - start-radius: 0; - }; - end: { - start-radius: 0; - }; - } - } -} - -[part~='suffixed'] { - [part~='suffix'] { - border-width: rem(1px); - border-style: solid; - border-color: var-get($theme, 'border-color'); - overflow: hidden; - border-inline-start-width: 0; - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - border: { - start: { - end-radius: var-get($theme, 'border-border-radius'); - }; - end: { - end-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - textarea { - border: { - start: { - end-radius: 0; - }; - end: { - end-radius: 0; - }; - } - } -} - -[part~='filled'] { - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part~='input'] { - color: var-get($theme, 'input-prefix-color--filled'); - } -} - -textarea { - @include type-style('body-1'); - - border: rem(1px) solid var-get($theme, 'border-color'); - padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - border-radius: var-get($theme, 'border-border-radius'); - z-index: 1; - font-size: pad(rem(14px), rem(16px), rem(20px)); - background: transparent; - color: var-get($theme, 'filled-text-color'); - transition: box-shadow .15s ease-out, border .15s ease-out; - - &::placeholder { - color: var-get($theme, 'placeholder-color'); - } -} - -:host(:focus-within) { - color: var-get($theme, 'input-prefix-color--focused'); - - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color--focused'); - background: var-get($theme, 'input-prefix-background--focused'); - } - - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color--focused'); - background: var-get($theme, 'input-suffix-background--focused'); - } - - textarea { - border: rem(1px) solid var-get($theme, 'focused-border-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); - } -} - -:host([invalid]:not(:disabled)), -:host([invalid]:not([disabled])) { - textarea { - border: rem(1px) solid var-get($theme, 'error-secondary-color'); - box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); - } - - [part~='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - color: var-get($theme, 'disabled-text-color'); - - [part='prefix'], - [part='suffix'] { - background: var-get($theme, 'border-disabled-background'); - border-color: var-get($theme, 'disabled-border-color'); - color: var-get($theme, 'disabled-text-color'); - } - - [part~='helper-text'] { - color: var-get($theme, 'disabled-text-color'); - } - - textarea { - color: var-get($theme, 'disabled-text-color'); - background: var-get($theme, 'border-disabled-background'); - border: rem(1px) solid var-get($theme, 'disabled-border-color'); - box-shadow: none; - - &::placeholder { - color: var-get($theme, 'disabled-placeholder-color'); - } - } - - [part~='label'] { - color: var-get($theme, 'disabled-text-color'); - } } diff --git a/src/components/textarea/themes/light/textarea.fluent.scss b/src/components/textarea/themes/light/textarea.fluent.scss index 6570a576b..78c6f8803 100644 --- a/src/components/textarea/themes/light/textarea.fluent.scss +++ b/src/components/textarea/themes/light/textarea.fluent.scss @@ -1,165 +1,8 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../../../input/themes/light/themes' as *; +@use 'themes' as *; $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-textarea'); - @include type-style('body-2'); -} - -:host(:hover) { - [part~='container'] { - border-color: var-get($theme, 'hover-border-color'); - } -} - -:host(:focus-within) { - [part~='container'] { - border-color: var-get($theme, 'focused-border-color'); - border-width: rem(2px); - } - - [part~='prefix']:not([hidden]) { - margin-inline-start: rem(-1px); - } - - [part~='suffix']:not([hidden]) { - margin-inline-end: rem(-1px); - } - - textarea { - margin-block: rem(-1px); - margin-inline-start: rem(-1px); - } - - [part~='prefix']:not([hidden]) ~ textarea { - margin-inline: initial; - } -} - -[part~='container'] { - border: rem(1px) solid var-get($theme, 'border-color'); - background: var-get($theme, 'border-background'); - align-items: stretch; - overflow: hidden; - border-radius: var-get($theme, 'border-border-radius'); -} - -[part~='label'] { - display: block; - font-size: rem(14px); - font-weight: 600; - position: static; - transform: translateY(0); - transform-origin: top left; - margin-top: 0; - height: auto; - margin-block-end: rem(4px); - color: var-get($theme, 'idle-secondary-color'); -} - -:host([invalid]) { - [part~='label'] { - color: var-get($theme, 'idle-text-color'); - } -} - -textarea { - @include type-style('body-2'); - - padding: rem(8px); - background: transparent; - color: var-get($theme, 'filled-text-color'); - - &::placeholder { - color: var-get($theme, 'placeholder-color'); - } -} - -[part~='prefixed'] { - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - } -} - -[part~='suffixed'] { - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - } -} - -[part~='filled'] { - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part~='input'] { - color: var-get($theme, 'input-prefix-color--filled'); - } -} - -[part~='helper-text'] { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); - padding-block-start: rem(5px); - padding-inline-start: 0; -} - -:host([required]:not(:disabled)), -:host([required]:not([disabled])) { - [part~='label'] { - &::after { - color: var-get($theme, 'error-secondary-color'); - } - } -} - -:host([invalid]:not(:disabled)), -:host([invalid]:not([disabled])) { - [part~='container'] { - border-color: var-get($theme, 'error-secondary-color'); - } - - [part~='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled), -:host([disabled]) { - color: var-get($theme, 'disabled-text-color'); - - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'disabled-text-color'); - background: inherit; - } - - [part~='helper-text'] { - color: var-get($theme, 'disabled-text-color'); - } - - textarea { - color: var-get($theme, 'disabled-text-color'); - - &::placeholder { - color: var-get($theme, 'disabled-placeholder-color'); - } - } - - [part~='label'] { - color: var-get($theme, 'disabled-text-color'); - } - - [part~='container'] { - border-color: var-get($theme, 'disabled-border-color'); - background: var-get($theme, 'border-disabled-background'); - } } diff --git a/src/components/textarea/themes/light/textarea.indigo.scss b/src/components/textarea/themes/light/textarea.indigo.scss index e8e36dc3b..c00773435 100644 --- a/src/components/textarea/themes/light/textarea.indigo.scss +++ b/src/components/textarea/themes/light/textarea.indigo.scss @@ -1,183 +1,8 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../../../input/themes/light/themes' as *; -@use 'igniteui-theming/sass/animations/easings' as *; +@use 'themes' as *; $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-textarea'); - @include type-style('body-1'); -} - -:host(:hover) { - [part~='container'] { - background: var-get($theme, 'box-background-hover'); - } -} - -:host(:focus-within) { - [part~='label'] { - color: var-get($theme, 'focused-secondary-color'); - } - - [part~='container'] { - background: var-get($theme, 'box-background-hover'); - - &::after { - border-block-end-width: rem(2px); - border-block-end-color: var-get($theme, 'focused-bottom-line-color'); - transition: all .25s $out-cubic; - } - } -} - -[part~='label'] { - display: block; - font-size: rem(14px); - font-weight: 600; - position: static; - transform: translateY(0); - transform-origin: top left; - margin-top: 0; - height: auto; - margin-block-end: rem(4px); - color: var-get($theme, 'idle-secondary-color'); -} - -[part~='container'] { - border-start-start-radius: var-get($theme, 'box-border-radius'); - border-start-end-radius: var-get($theme, 'box-border-radius'); - transition: background .25s $out-cubic; - overflow: hidden; - padding-inline-start: 0; - height: calc(100% - #{rem(2px)}); - top: rem(1px); - - &::after { - content: ''; - position: absolute; - bottom: 0%; - width: 100%; - border-block-end: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); - transition: all .25s $out-cubic; - } -} - -textarea { - padding-block: rem(8px); - padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); - background: transparent; - color: var-get($theme, 'filled-text-color'); - - &::placeholder { - color: var-get($theme, 'placeholder-color'); - } -} - -[part~='prefixed'] textarea { - padding-inline-start: rem(4px); -} - -[part~='suffixed'] textarea { - padding-inline-end: rem(4px); -} - -[part~='helper-text'] { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); - padding-block-start: rem(6px); - padding-inline-start: rem(12px); -} - -[part~='prefixed'] { - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - border-start-start-radius: var-get($theme, 'border-border-radius'); - } -} - -[part~='suffixed'] { - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - border-start-end-radius: var-get($theme, 'border-border-radius'); - } -} - -[part~='prefixed'] [part~='prefix'], -[part~='suffixed'] [part~='suffix'] { - height: calc(100% - #{rem(1px)}); -} - -[part~='filled'] { - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part~='input'] { - color: var-get($theme, 'input-prefix-color--filled'); - } -} - -:host([invalid]:not(:disabled)), -:host([invalid]:not([disabled])) { - [part~='label'], - [part~='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } - - [part~='container'] { - &::after { - border-block-end: rem(1px) solid var-get($theme, 'error-secondary-color'); - } - } -} - -:host([invalid]:not(:disabled):focus-within), -:host([invalid]:not([disabled]):focus-within) { - [part~='container'] { - &::after { - border-block-end-width: rem(2px); - } - } -} - -:host(:disabled), -:host([disabled]) { - color: var-get($theme, 'disabled-text-color'); - - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'disabled-text-color'); - background: inherit; - } - - [part~='helper-text'] { - color: var-get($theme, 'disabled-text-color'); - } - - [part~='container'] { - background: transparent; - - &::after { - border-block-end-color: var-get($theme, 'disabled-bottom-line-color'); - } - } - - textarea { - color: var-get($theme, 'disabled-text-color'); - - &::placeholder { - color: var-get($theme, 'disabled-placeholder-color'); - } - } - - [part~='label'] { - color: var-get($theme, 'disabled-text-color'); - } } diff --git a/src/components/textarea/themes/light/textarea.material.scss b/src/components/textarea/themes/light/textarea.material.scss index 476221018..1c635fa5b 100644 --- a/src/components/textarea/themes/light/textarea.material.scss +++ b/src/components/textarea/themes/light/textarea.material.scss @@ -1,411 +1,8 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; -@use '../../../input/themes/light/themes' as *; -@use 'igniteui-theming/sass/animations/easings' as *; +@use 'themes' as *; $theme: $material; -$input-top-padding: rem(20px); -$input-bottom-padding: rem(6px); :host { @include css-vars-from-theme($theme, 'ig-textarea'); - @include type-style('subtitle-1'); -} - -textarea { - border: none; - padding: 0; - overflow: auto; - margin-block-start: $input-top-padding; - grid-area: 1 / 2 / span 1 / span 2; - flex-grow: 1; - position: relative; - max-width: inherit; - padding-inline: rem(4px); - background: transparent; - color: var-get($theme, 'filled-text-color'); - - &::placeholder { - color: var-get($theme, 'placeholder-color'); - } -} - -:host(:not([outlined])) { - [part~='container'] { - overflow: hidden; - border-start-start-radius: var-get($theme, 'box-border-radius'); - border-start-end-radius: var-get($theme, 'box-border-radius'); - background: var-get($theme, 'box-background'); - - &::after { - content: ''; - position: absolute; - bottom: 0%; - width: 100%; - border-block-end: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); - transition: all .25s $out-cubic; - } - } -} - -:host(:not([outlined]):hover) { - [part~='container'] { - background: var-get($theme, 'box-background-hover'); - - &::after { - border-block-end-width: rem(1px); - border-block-end-color: var-get($theme, 'hover-bottom-line-color'); - } - } -} - -:host(:disabled), -:host([disabled]) { - color: var-get($theme, 'disabled-text-color'); - - [part='prefix'], - [part='suffix'] { - color: var-get($theme, 'disabled-text-color'); - background: inherit; - } - - [part~='helper-text'] { - color: var-get($theme, 'disabled-text-color'); - } - - textarea { - color: var-get($theme, 'disabled-text-color'); - - &::placeholder { - color: var-get($theme, 'disabled-placeholder-color'); - } - } - - [part~='label'] { - color: var-get($theme, 'disabled-text-color'); - } -} - -:host(:disabled:not([outlined])), -:host([disabled]:not([outlined])) { - [part~='container'] { - background: var-get($theme, 'box-disabled-background'); - - &::after { - border-block-end-color: var-get($theme, 'disabled-bottom-line-color'); - border-block-end-style: dashed; - } - } -} - -:host([invalid]:not(:disabled)), -:host([invalid]:not([disabled])) { - [part~='container'] { - &::after { - border-block-end-color: var-get($theme, 'error-secondary-color'); - } - } - - [part~='label'] { - color: var-get($theme, 'error-secondary-color'); - } - - [part~='helper-text'] { - color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:focus-within) { - [part~='label'] { - color: var-get($theme, 'focused-secondary-color'); - } -} - -:host(:not([outlined]):focus-within) { - color: var-get($theme, 'input-prefix-color--focused'); - - [part~='container'] { - background: var-get($theme, 'box-background-focus'); - - &::after { - border-block-end-width: rem(2px); - border-block-end-color: var-get($theme, 'focused-bottom-line-color'); - } - } - - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color--focused'); - background: var-get($theme, 'input-prefix-background--focused'); - } - - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color--focused'); - background: var-get($theme, 'input-suffix-background--focused'); - } -} - -:host([invalid]:not([outlined]):focus-within) { - [part~='container'] { - &::after { - border-block-end-color: var-get($theme, 'error-secondary-color'); - } - } -} - -[part~='label'] { - position: absolute; - max-width: 100%; - padding-inline-end: rem(4px); - line-height: normal; - backface-visibility: hidden; - will-change: transform; - transform-origin: top left; - color: var-get($theme, 'idle-secondary-color'); - transform: translateY(0); - top: calc(#{$input-top-padding} / 4); - font-size: rem(12px); -} - -[part='start'], -[part='end'] { - display: flex; - align-items: center; - min-width: pad(rem(10px), rem(12px), rem(14px)); - min-height: 100%; - overflow: hidden; -} - -[part='start'] { - grid-area: 1 / 1; -} - -[part='notch'] { - display: flex; - align-items: center; - width: auto; - min-width: 0; - height: 100%; - position: relative; - grid-area: 1 / 2; - padding-inline: rem(4px); -} - -[part='filler'] { - grid-area: 1 / 3; -} - -[part='end'] { - grid-area: 1 / 4; -} - -[part~='prefixed'] { - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color'); - background: var-get($theme, 'input-prefix-background'); - padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); - } -} - -[part~='suffixed'] { - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color'); - background: var-get($theme, 'input-suffix-background'); - padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); - } -} - -[part~='filled'] { - color: var-get($theme, 'input-prefix-color--filled'); - - [part~='prefix'] { - color: var-get($theme, 'input-prefix-color--filled'); - background: var-get($theme, 'input-prefix-background--filled'); - } - - [part~='suffix'] { - color: var-get($theme, 'input-suffix-color--filled'); - background: var-get($theme, 'input-suffix-background--filled'); - } -} - -[part~='helper-text'] { - @include type-style('caption'); - - color: var-get($theme, 'helper-text-color'); - padding-block-start: rem(5px); - padding-inline-start: rem(16px); -} - -// Outlined Textarea -:host([outlined]) { - align-items: initial; - padding: 0; - box-shadow: none; - border-radius: var-get($theme, 'border-border-radius'); - background: var-get($theme, 'border-background'); - overflow: initial; - - [part~='container'] { - grid-template-columns: auto auto 1fr auto; - display: grid; - } - - [part='start'] { - width: auto; - border: { - color: var-get($theme, 'border-color'); - style: solid; - inline: { - start-width: rem(1px); - end-width: 0; - }; - block: { - start-width: rem(1px); - end-width: rem(1px); - }; - start: { - start-radius: var-get($theme, 'border-border-radius'); - }; - end: { - start-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - [part~='label'] { - top: 0; - transform: translateY(-50%); - margin-block-end: auto; - padding-inline-end: 0; - display: inline-block; - position: relative; - background: transparent; - } - - [part='filler'] { - border: { - width: rem(1px); - style: solid; - color: var-get($theme, 'border-color'); - left: none; - right: none; - } - } - - [part='notch'] { - border-block-start-color: transparent; - border-block-end: rem(1px) solid var-get($theme, 'border-color'); - padding: 0 rem(4px); - - &:empty { - display: none; - } - } - - [part='end'] { - display: flex; - justify-content: flex-end; - flex-grow: 1; - height: 100%; - grid-area: 1 / 4; - border: { - color: var-get($theme, 'border-color'); - style: solid; - inline: { - start-width: 0; - end-width: rem(1px); - }; - block: { - start-width: rem(1px); - end-width: rem(1px); - }; - start: { - end-radius: var-get($theme, 'border-border-radius'); - }; - end: { - end-radius: var-get($theme, 'border-border-radius'); - }; - } - } - - textarea { - bottom: rem(2px); - } -} - -:host([outlined]:focus-within) { - [part='filler'], - [part='notch'] { - border-block-width: rem(2px); - } - - [part='filler'] { - border-block-color: var-get($theme, 'focused-border-color'); - } - - [part='notch'] { - border-block-end-color: var-get($theme, 'focused-border-color'); - } - - [part='start'] { - border: { - color: var-get($theme, 'focused-border-color'); - inline: { - start-width: rem(2px); - end-width: 0; - }; - block: { - start-width: rem(2px); - end-width: rem(2px); - }; - } - } - - [part='end'] { - border: { - color: var-get($theme, 'focused-border-color'); - inline: { - start-width: 0; - end-width: rem(2px); - }; - block: { - start-width: rem(2px); - end-width: rem(2px); - }; - } - } - - [part~='prefix'] { - margin-inline-start: rem(-1px); - } - - [part~='suffix'] { - margin-inline-end: rem(-1px); - } -} - -:host([invalid][outlined]:not(:disabled)), -:host([invalid][outlined]:not(:disabled):focus-within), -:host([invalid][outlined]:not([disabled])), -:host([invalid][outlined]:not([disabled]):focus-within) { - [part='start'], - [part='filler'], - [part='notch'], - [part='end'] { - border-color: var-get($theme, 'error-secondary-color'); - } -} - -:host(:disabled[outlined]), -:host([disabled][outlined]) { - [part~='container'] { - background: var-get($theme, 'border-disabled-background'); - } - - [part='start'], - [part='filler'], - [part='notch'], - [part='end'] { - border-color: var-get($theme, 'disabled-border-color'); - } } diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss new file mode 100644 index 000000000..8b975f647 --- /dev/null +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -0,0 +1,183 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + @include type-style('body-1'); +} + +[part~='label'] { + position: static; + display: block; + color: var-get($theme, 'idle-secondary-color'); + padding: 0; + line-height: rem(24px); + transform: translateY(0); + transform-origin: top left; + margin-block: 0 rem(4px); + height: auto; + font-size: rem(16px); +} + +[part~='helper-text'] { + @include type-style('body-2'); + + color: var-get($theme, 'helper-text-color'); + padding-block-start: rem(4px); + padding-inline-start: 0; +} + +[part~='prefixed'] { + [part~='prefix'] { + border-width: rem(1px); + border-style: solid; + border-color: var-get($theme, 'border-color'); + overflow: hidden; + border-inline-end-width: 0; + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + border: { + start: { + start-radius: var-get($theme, 'border-border-radius'); + }; + end: { + start-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + textarea { + border: { + start: { + start-radius: 0; + }; + end: { + start-radius: 0; + }; + } + } +} + +[part~='suffixed'] { + [part~='suffix'] { + border-width: rem(1px); + border-style: solid; + border-color: var-get($theme, 'border-color'); + overflow: hidden; + border-inline-start-width: 0; + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + border: { + start: { + end-radius: var-get($theme, 'border-border-radius'); + }; + end: { + end-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + textarea { + border: { + start: { + end-radius: 0; + }; + end: { + end-radius: 0; + }; + } + } +} + +[part~='filled'] { + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part~='input'] { + color: var-get($theme, 'input-prefix-color--filled'); + } +} + +textarea { + @include type-style('body-1'); + + border: rem(1px) solid var-get($theme, 'border-color'); + padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + border-radius: var-get($theme, 'border-border-radius'); + z-index: 1; + font-size: pad(rem(14px), rem(16px), rem(20px)); + background: transparent; + color: var-get($theme, 'filled-text-color'); + transition: box-shadow .15s ease-out, border .15s ease-out; + + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } +} + +:host(:focus-within) { + color: var-get($theme, 'input-prefix-color--focused'); + + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color--focused'); + background: var-get($theme, 'input-prefix-background--focused'); + } + + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color--focused'); + background: var-get($theme, 'input-suffix-background--focused'); + } + + textarea { + border: rem(1px) solid var-get($theme, 'focused-border-color'); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color'); + } +} + +:host([invalid]:not(:disabled)), +:host([invalid]:not([disabled])) { + textarea { + border: rem(1px) solid var-get($theme, 'error-secondary-color'); + box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color'); + } + + [part~='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + color: var-get($theme, 'disabled-text-color'); + + [part='prefix'], + [part='suffix'] { + background: var-get($theme, 'border-disabled-background'); + border-color: var-get($theme, 'disabled-border-color'); + color: var-get($theme, 'disabled-text-color'); + } + + [part~='helper-text'] { + color: var-get($theme, 'disabled-text-color'); + } + + textarea { + color: var-get($theme, 'disabled-text-color'); + background: var-get($theme, 'border-disabled-background'); + border: rem(1px) solid var-get($theme, 'disabled-border-color'); + box-shadow: none; + + &::placeholder { + color: var-get($theme, 'disabled-placeholder-color'); + } + } + + [part~='label'] { + color: var-get($theme, 'disabled-text-color'); + } +} diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss new file mode 100644 index 000000000..9be481144 --- /dev/null +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -0,0 +1,163 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + @include type-style('body-2'); +} + +:host(:hover) { + [part~='container'] { + border-color: var-get($theme, 'hover-border-color'); + } +} + +:host(:focus-within) { + [part~='container'] { + border-color: var-get($theme, 'focused-border-color'); + border-width: rem(2px); + } + + [part~='prefix']:not([hidden]) { + margin-inline-start: rem(-1px); + } + + [part~='suffix']:not([hidden]) { + margin-inline-end: rem(-1px); + } + + textarea { + margin-block: rem(-1px); + margin-inline-start: rem(-1px); + } + + [part~='prefix']:not([hidden]) ~ textarea { + margin-inline: initial; + } +} + +[part~='container'] { + border: rem(1px) solid var-get($theme, 'border-color'); + background: var-get($theme, 'border-background'); + align-items: stretch; + overflow: hidden; + border-radius: var-get($theme, 'border-border-radius'); +} + +[part~='label'] { + display: block; + font-size: rem(14px); + font-weight: 600; + position: static; + transform: translateY(0); + transform-origin: top left; + margin-top: 0; + height: auto; + margin-block-end: rem(4px); + color: var-get($theme, 'idle-secondary-color'); +} + +:host([invalid]) { + [part~='label'] { + color: var-get($theme, 'idle-text-color'); + } +} + +textarea { + @include type-style('body-2'); + + padding: rem(8px); + background: transparent; + color: var-get($theme, 'filled-text-color'); + + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } +} + +[part~='prefixed'] { + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + } +} + +[part~='suffixed'] { + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + } +} + +[part~='filled'] { + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part~='input'] { + color: var-get($theme, 'input-prefix-color--filled'); + } +} + +[part~='helper-text'] { + @include type-style('caption'); + + color: var-get($theme, 'helper-text-color'); + padding-block-start: rem(5px); + padding-inline-start: 0; +} + +:host([required]:not(:disabled)), +:host([required]:not([disabled])) { + [part~='label'] { + &::after { + color: var-get($theme, 'error-secondary-color'); + } + } +} + +:host([invalid]:not(:disabled)), +:host([invalid]:not([disabled])) { + [part~='container'] { + border-color: var-get($theme, 'error-secondary-color'); + } + + [part~='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled), +:host([disabled]) { + color: var-get($theme, 'disabled-text-color'); + + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'disabled-text-color'); + background: inherit; + } + + [part~='helper-text'] { + color: var-get($theme, 'disabled-text-color'); + } + + textarea { + color: var-get($theme, 'disabled-text-color'); + + &::placeholder { + color: var-get($theme, 'disabled-placeholder-color'); + } + } + + [part~='label'] { + color: var-get($theme, 'disabled-text-color'); + } + + [part~='container'] { + border-color: var-get($theme, 'disabled-border-color'); + background: var-get($theme, 'border-disabled-background'); + } +} diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss new file mode 100644 index 000000000..733396a2b --- /dev/null +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -0,0 +1,181 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use 'igniteui-theming/sass/animations/easings' as *; + +$theme: $indigo; + +:host { + @include type-style('body-1'); +} + +:host(:hover) { + [part~='container'] { + background: var-get($theme, 'box-background-hover'); + } +} + +:host(:focus-within) { + [part~='label'] { + color: var-get($theme, 'focused-secondary-color'); + } + + [part~='container'] { + background: var-get($theme, 'box-background-hover'); + + &::after { + border-block-end-width: rem(2px); + border-block-end-color: var-get($theme, 'focused-bottom-line-color'); + transition: all .25s $out-cubic; + } + } +} + +[part~='label'] { + display: block; + font-size: rem(14px); + font-weight: 600; + position: static; + transform: translateY(0); + transform-origin: top left; + margin-top: 0; + height: auto; + margin-block-end: rem(4px); + color: var-get($theme, 'idle-secondary-color'); +} + +[part~='container'] { + border-start-start-radius: var-get($theme, 'box-border-radius'); + border-start-end-radius: var-get($theme, 'box-border-radius'); + transition: background .25s $out-cubic; + overflow: hidden; + padding-inline-start: 0; + height: calc(100% - #{rem(2px)}); + top: rem(1px); + + &::after { + content: ''; + position: absolute; + bottom: 0%; + width: 100%; + border-block-end: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); + transition: all .25s $out-cubic; + } +} + +textarea { + padding-block: rem(8px); + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + background: transparent; + color: var-get($theme, 'filled-text-color'); + + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } +} + +[part~='prefixed'] textarea { + padding-inline-start: rem(4px); +} + +[part~='suffixed'] textarea { + padding-inline-end: rem(4px); +} + +[part~='helper-text'] { + @include type-style('caption'); + + color: var-get($theme, 'helper-text-color'); + padding-block-start: rem(6px); + padding-inline-start: rem(12px); +} + +[part~='prefixed'] { + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + border-start-start-radius: var-get($theme, 'border-border-radius'); + } +} + +[part~='suffixed'] { + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + border-start-end-radius: var-get($theme, 'border-border-radius'); + } +} + +[part~='prefixed'] [part~='prefix'], +[part~='suffixed'] [part~='suffix'] { + height: calc(100% - #{rem(1px)}); +} + +[part~='filled'] { + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part~='input'] { + color: var-get($theme, 'input-prefix-color--filled'); + } +} + +:host([invalid]:not(:disabled)), +:host([invalid]:not([disabled])) { + [part~='label'], + [part~='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } + + [part~='container'] { + &::after { + border-block-end: rem(1px) solid var-get($theme, 'error-secondary-color'); + } + } +} + +:host([invalid]:not(:disabled):focus-within), +:host([invalid]:not([disabled]):focus-within) { + [part~='container'] { + &::after { + border-block-end-width: rem(2px); + } + } +} + +:host(:disabled), +:host([disabled]) { + color: var-get($theme, 'disabled-text-color'); + + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'disabled-text-color'); + background: inherit; + } + + [part~='helper-text'] { + color: var-get($theme, 'disabled-text-color'); + } + + [part~='container'] { + background: transparent; + + &::after { + border-block-end-color: var-get($theme, 'disabled-bottom-line-color'); + } + } + + textarea { + color: var-get($theme, 'disabled-text-color'); + + &::placeholder { + color: var-get($theme, 'disabled-placeholder-color'); + } + } + + [part~='label'] { + color: var-get($theme, 'disabled-text-color'); + } +} diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss new file mode 100644 index 000000000..0ad3e4806 --- /dev/null +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -0,0 +1,409 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; +@use 'igniteui-theming/sass/animations/easings' as *; + +$theme: $material; +$input-top-padding: rem(20px); +$input-bottom-padding: rem(6px); + +:host { + @include type-style('subtitle-1'); +} + +textarea { + border: none; + padding: 0; + overflow: auto; + margin-block-start: $input-top-padding; + grid-area: 1 / 2 / span 1 / span 2; + flex-grow: 1; + position: relative; + max-width: inherit; + padding-inline: rem(4px); + background: transparent; + color: var-get($theme, 'filled-text-color'); + + &::placeholder { + color: var-get($theme, 'placeholder-color'); + } +} + +:host(:not([outlined])) { + [part~='container'] { + overflow: hidden; + border-start-start-radius: var-get($theme, 'box-border-radius'); + border-start-end-radius: var-get($theme, 'box-border-radius'); + background: var-get($theme, 'box-background'); + + &::after { + content: ''; + position: absolute; + bottom: 0%; + width: 100%; + border-block-end: rem(1px) solid var-get($theme, 'idle-bottom-line-color'); + transition: all .25s $out-cubic; + } + } +} + +:host(:not([outlined]):hover) { + [part~='container'] { + background: var-get($theme, 'box-background-hover'); + + &::after { + border-block-end-width: rem(1px); + border-block-end-color: var-get($theme, 'hover-bottom-line-color'); + } + } +} + +:host(:disabled), +:host([disabled]) { + color: var-get($theme, 'disabled-text-color'); + + [part='prefix'], + [part='suffix'] { + color: var-get($theme, 'disabled-text-color'); + background: inherit; + } + + [part~='helper-text'] { + color: var-get($theme, 'disabled-text-color'); + } + + textarea { + color: var-get($theme, 'disabled-text-color'); + + &::placeholder { + color: var-get($theme, 'disabled-placeholder-color'); + } + } + + [part~='label'] { + color: var-get($theme, 'disabled-text-color'); + } +} + +:host(:disabled:not([outlined])), +:host([disabled]:not([outlined])) { + [part~='container'] { + background: var-get($theme, 'box-disabled-background'); + + &::after { + border-block-end-color: var-get($theme, 'disabled-bottom-line-color'); + border-block-end-style: dashed; + } + } +} + +:host([invalid]:not(:disabled)), +:host([invalid]:not([disabled])) { + [part~='container'] { + &::after { + border-block-end-color: var-get($theme, 'error-secondary-color'); + } + } + + [part~='label'] { + color: var-get($theme, 'error-secondary-color'); + } + + [part~='helper-text'] { + color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:focus-within) { + [part~='label'] { + color: var-get($theme, 'focused-secondary-color'); + } +} + +:host(:not([outlined]):focus-within) { + color: var-get($theme, 'input-prefix-color--focused'); + + [part~='container'] { + background: var-get($theme, 'box-background-focus'); + + &::after { + border-block-end-width: rem(2px); + border-block-end-color: var-get($theme, 'focused-bottom-line-color'); + } + } + + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color--focused'); + background: var-get($theme, 'input-prefix-background--focused'); + } + + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color--focused'); + background: var-get($theme, 'input-suffix-background--focused'); + } +} + +:host([invalid]:not([outlined]):focus-within) { + [part~='container'] { + &::after { + border-block-end-color: var-get($theme, 'error-secondary-color'); + } + } +} + +[part~='label'] { + position: absolute; + max-width: 100%; + padding-inline-end: rem(4px); + line-height: normal; + backface-visibility: hidden; + will-change: transform; + transform-origin: top left; + color: var-get($theme, 'idle-secondary-color'); + transform: translateY(0); + top: calc(#{$input-top-padding} / 4); + font-size: rem(12px); +} + +[part='start'], +[part='end'] { + display: flex; + align-items: center; + min-width: pad(rem(10px), rem(12px), rem(14px)); + min-height: 100%; + overflow: hidden; +} + +[part='start'] { + grid-area: 1 / 1; +} + +[part='notch'] { + display: flex; + align-items: center; + width: auto; + min-width: 0; + height: 100%; + position: relative; + grid-area: 1 / 2; + padding-inline: rem(4px); +} + +[part='filler'] { + grid-area: 1 / 3; +} + +[part='end'] { + grid-area: 1 / 4; +} + +[part~='prefixed'] { + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color'); + background: var-get($theme, 'input-prefix-background'); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); + } +} + +[part~='suffixed'] { + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color'); + background: var-get($theme, 'input-suffix-background'); + padding-inline: pad-inline(rem(12px), rem(14px), rem(16px)); + } +} + +[part~='filled'] { + color: var-get($theme, 'input-prefix-color--filled'); + + [part~='prefix'] { + color: var-get($theme, 'input-prefix-color--filled'); + background: var-get($theme, 'input-prefix-background--filled'); + } + + [part~='suffix'] { + color: var-get($theme, 'input-suffix-color--filled'); + background: var-get($theme, 'input-suffix-background--filled'); + } +} + +[part~='helper-text'] { + @include type-style('caption'); + + color: var-get($theme, 'helper-text-color'); + padding-block-start: rem(5px); + padding-inline-start: rem(16px); +} + +// Outlined Textarea +:host([outlined]) { + align-items: initial; + padding: 0; + box-shadow: none; + border-radius: var-get($theme, 'border-border-radius'); + background: var-get($theme, 'border-background'); + overflow: initial; + + [part~='container'] { + grid-template-columns: auto auto 1fr auto; + display: grid; + } + + [part='start'] { + width: auto; + border: { + color: var-get($theme, 'border-color'); + style: solid; + inline: { + start-width: rem(1px); + end-width: 0; + }; + block: { + start-width: rem(1px); + end-width: rem(1px); + }; + start: { + start-radius: var-get($theme, 'border-border-radius'); + }; + end: { + start-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + [part~='label'] { + top: 0; + transform: translateY(-50%); + margin-block-end: auto; + padding-inline-end: 0; + display: inline-block; + position: relative; + background: transparent; + } + + [part='filler'] { + border: { + width: rem(1px); + style: solid; + color: var-get($theme, 'border-color'); + left: none; + right: none; + } + } + + [part='notch'] { + border-block-start-color: transparent; + border-block-end: rem(1px) solid var-get($theme, 'border-color'); + padding: 0 rem(4px); + + &:empty { + display: none; + } + } + + [part='end'] { + display: flex; + justify-content: flex-end; + flex-grow: 1; + height: 100%; + grid-area: 1 / 4; + border: { + color: var-get($theme, 'border-color'); + style: solid; + inline: { + start-width: 0; + end-width: rem(1px); + }; + block: { + start-width: rem(1px); + end-width: rem(1px); + }; + start: { + end-radius: var-get($theme, 'border-border-radius'); + }; + end: { + end-radius: var-get($theme, 'border-border-radius'); + }; + } + } + + textarea { + bottom: rem(2px); + } +} + +:host([outlined]:focus-within) { + [part='filler'], + [part='notch'] { + border-block-width: rem(2px); + } + + [part='filler'] { + border-block-color: var-get($theme, 'focused-border-color'); + } + + [part='notch'] { + border-block-end-color: var-get($theme, 'focused-border-color'); + } + + [part='start'] { + border: { + color: var-get($theme, 'focused-border-color'); + inline: { + start-width: rem(2px); + end-width: 0; + }; + block: { + start-width: rem(2px); + end-width: rem(2px); + }; + } + } + + [part='end'] { + border: { + color: var-get($theme, 'focused-border-color'); + inline: { + start-width: 0; + end-width: rem(2px); + }; + block: { + start-width: rem(2px); + end-width: rem(2px); + }; + } + } + + [part~='prefix'] { + margin-inline-start: rem(-1px); + } + + [part~='suffix'] { + margin-inline-end: rem(-1px); + } +} + +:host([invalid][outlined]:not(:disabled)), +:host([invalid][outlined]:not(:disabled):focus-within), +:host([invalid][outlined]:not([disabled])), +:host([invalid][outlined]:not([disabled]):focus-within) { + [part='start'], + [part='filler'], + [part='notch'], + [part='end'] { + border-color: var-get($theme, 'error-secondary-color'); + } +} + +:host(:disabled[outlined]), +:host([disabled][outlined]) { + [part~='container'] { + background: var-get($theme, 'border-disabled-background'); + } + + [part='start'], + [part='filler'], + [part='notch'], + [part='end'] { + border-color: var-get($theme, 'disabled-border-color'); + } +} diff --git a/src/components/textarea/themes/light/textarea.base.scss b/src/components/textarea/themes/textarea.base.scss similarity index 100% rename from src/components/textarea/themes/light/textarea.base.scss rename to src/components/textarea/themes/textarea.base.scss diff --git a/src/components/textarea/themes/themes.ts b/src/components/textarea/themes/themes.ts new file mode 100644 index 000000000..73db8f2fd --- /dev/null +++ b/src/components/textarea/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/textarea.bootstrap.css.js'; +import { styles as fluentDark } from './dark/textarea.fluent.css.js'; +import { styles as indigoDark } from './dark/textarea.indigo.css.js'; +import { styles as materialDark } from './dark/textarea.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/textarea.bootstrap.css.js'; +import { styles as fluentLight } from './light/textarea.fluent.css.js'; +import { styles as indigoLight } from './light/textarea.indigo.css.js'; +import { styles as materialLight } from './light/textarea.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/textarea.bootstrap.css.js'; +import { styles as fluent } from './shared/textarea.fluent.css.js'; +import { styles as indigo } from './shared/textarea.indigo.css.js'; +import { styles as material } from './shared/textarea.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/toast/themes/dark/toast.bootstrap.scss b/src/components/toast/themes/dark/toast.bootstrap.scss index 3e3a3bfd1..22aa42670 100644 --- a/src/components/toast/themes/dark/toast.bootstrap.scss +++ b/src/components/toast/themes/dark/toast.bootstrap.scss @@ -1,9 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $bootstrap; -igc-toast { +:host { @include css-vars-from-theme($theme, 'ig-toast'); } diff --git a/src/components/toast/themes/dark/toast.fluent.scss b/src/components/toast/themes/dark/toast.fluent.scss index 1ee1cef08..62aa3b040 100644 --- a/src/components/toast/themes/dark/toast.fluent.scss +++ b/src/components/toast/themes/dark/toast.fluent.scss @@ -1,9 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $fluent; -igc-toast { +:host { @include css-vars-from-theme($theme, 'ig-toast'); } diff --git a/src/components/toast/themes/dark/toast.indigo.scss b/src/components/toast/themes/dark/toast.indigo.scss index 7f6e98987..93125edaa 100644 --- a/src/components/toast/themes/dark/toast.indigo.scss +++ b/src/components/toast/themes/dark/toast.indigo.scss @@ -1,9 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $indigo; -igc-toast { +:host { @include css-vars-from-theme($theme, 'ig-toast'); } diff --git a/src/components/toast/themes/dark/toast.material.scss b/src/components/toast/themes/dark/toast.material.scss index 73fb7f29a..0d3d407d9 100644 --- a/src/components/toast/themes/dark/toast.material.scss +++ b/src/components/toast/themes/dark/toast.material.scss @@ -1,9 +1,8 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; $theme: $material; -igc-toast { +:host { @include css-vars-from-theme($theme, 'ig-toast'); } diff --git a/src/components/toast/themes/light/toast.bootstrap.scss b/src/components/toast/themes/light/toast.bootstrap.scss index 4a4795400..22aa42670 100644 --- a/src/components/toast/themes/light/toast.bootstrap.scss +++ b/src/components/toast/themes/light/toast.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,11 +5,4 @@ $theme: $bootstrap; :host { @include css-vars-from-theme($theme, 'ig-toast'); - - padding: rem(11px); - 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'); } diff --git a/src/components/toast/themes/light/toast.fluent.scss b/src/components/toast/themes/light/toast.fluent.scss index ff3803fc8..62aa3b040 100644 --- a/src/components/toast/themes/light/toast.fluent.scss +++ b/src/components/toast/themes/light/toast.fluent.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,12 +5,4 @@ $theme: $fluent; :host { @include css-vars-from-theme($theme, 'ig-toast'); - @include type-style('caption'); - - padding: rem(8px) rem(12px); - 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'); } diff --git a/src/components/toast/themes/light/toast.indigo.scss b/src/components/toast/themes/light/toast.indigo.scss index 1243f6066..93125edaa 100644 --- a/src/components/toast/themes/light/toast.indigo.scss +++ b/src/components/toast/themes/light/toast.indigo.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,11 +5,4 @@ $theme: $indigo; :host { @include css-vars-from-theme($theme, 'ig-toast'); - - 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'); } diff --git a/src/components/toast/themes/light/toast.material.scss b/src/components/toast/themes/light/toast.material.scss index 253aacb7c..0d3d407d9 100644 --- a/src/components/toast/themes/light/toast.material.scss +++ b/src/components/toast/themes/light/toast.material.scss @@ -1,4 +1,3 @@ -@use 'sass:map'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -6,11 +5,4 @@ $theme: $material; :host { @include css-vars-from-theme($theme, 'ig-toast'); - - padding: rem(16px) rem(24px); - 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'); } diff --git a/src/components/toast/themes/shared/toast.bootstrap.scss b/src/components/toast/themes/shared/toast.bootstrap.scss new file mode 100644 index 000000000..7a52cf758 --- /dev/null +++ b/src/components/toast/themes/shared/toast.bootstrap.scss @@ -0,0 +1,13 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + padding: rem(11px); + 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'); +} diff --git a/src/components/toast/themes/shared/toast.fluent.scss b/src/components/toast/themes/shared/toast.fluent.scss new file mode 100644 index 000000000..a05bdec3f --- /dev/null +++ b/src/components/toast/themes/shared/toast.fluent.scss @@ -0,0 +1,15 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + @include type-style('caption'); + + padding: rem(8px) rem(12px); + 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'); +} diff --git a/src/components/toast/themes/shared/toast.indigo.scss b/src/components/toast/themes/shared/toast.indigo.scss new file mode 100644 index 000000000..53cf11a5c --- /dev/null +++ b/src/components/toast/themes/shared/toast.indigo.scss @@ -0,0 +1,13 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + 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'); +} diff --git a/src/components/toast/themes/shared/toast.material.scss b/src/components/toast/themes/shared/toast.material.scss new file mode 100644 index 000000000..421f7e3d0 --- /dev/null +++ b/src/components/toast/themes/shared/toast.material.scss @@ -0,0 +1,13 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + 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'); +} diff --git a/src/components/toast/themes/themes.ts b/src/components/toast/themes/themes.ts new file mode 100644 index 000000000..9eb1e7408 --- /dev/null +++ b/src/components/toast/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/toast.bootstrap.css.js'; +import { styles as fluentDark } from './dark/toast.fluent.css.js'; +import { styles as indigoDark } from './dark/toast.indigo.css.js'; +import { styles as materialDark } from './dark/toast.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/toast.bootstrap.css.js'; +import { styles as fluentLight } from './light/toast.fluent.css.js'; +import { styles as indigoLight } from './light/toast.indigo.css.js'; +import { styles as materialLight } from './light/toast.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/toast.bootstrap.css.js'; +import { styles as fluent } from './shared/toast.fluent.css.js'; +import { styles as indigo } from './shared/toast.indigo.css.js'; +import { styles as material } from './shared/toast.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/toast/themes/light/toast.base.scss b/src/components/toast/themes/toast.base.scss similarity index 85% rename from src/components/toast/themes/light/toast.base.scss rename to src/components/toast/themes/toast.base.scss index 155cf1172..6fce6015f 100644 --- a/src/components/toast/themes/light/toast.base.scss +++ b/src/components/toast/themes/toast.base.scss @@ -1,12 +1,7 @@ -@use 'sass:map'; @use 'styles/common/component'; @use 'styles/utilities' as *; -@use 'themes' as *; - -$theme: $material; :host { - @include css-vars-from-theme($theme, 'ig-toast'); @include type-style('body-2'); position: fixed; diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index 53340d2d1..a2ac48bd1 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -1,13 +1,8 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/toast.base.css.js'; -import { styles as bootstrap } from './themes/light/toast.bootstrap.css.js'; -import { styles as fluent } from './themes/light/toast.fluent.css.js'; -import { - styles as indigo, - styles as material, -} from './themes/light/toast.indigo.css.js'; +import { all } from './themes/themes.js'; +import { styles } from './themes/toast.base.css.js'; import { AnimationPlayer } from '../../animations/player.js'; import { fadeIn, fadeOut } from '../../animations/presets/fade/index.js'; import { themes } from '../../theming/theming-decorator.js'; @@ -20,10 +15,7 @@ import { registerComponent } from '../common/definitions/register.js'; * * @csspart base - The base wrapper of the toast. */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all, true) export default class IgcToastComponent extends LitElement { public static readonly tagName = 'igc-toast'; public static override styles = [styles]; diff --git a/src/components/tree/themes/dark/tree-item.bootstrap.scss b/src/components/tree/themes/dark/tree-item.bootstrap.scss index a70e5c2d9..8f801fd48 100644 --- a/src/components/tree/themes/dark/tree-item.bootstrap.scss +++ b/src/components/tree/themes/dark/tree-item.bootstrap.scss @@ -1,10 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $bootstrap; - -@mixin theme() { - igc-tree-item { - @include css-vars-from-theme($theme, 'ig-tree'); - } +:host { + @include css-vars-from-theme($bootstrap, 'ig-tree'); } diff --git a/src/components/tree/themes/dark/tree-item.fluent.scss b/src/components/tree/themes/dark/tree-item.fluent.scss index 3bc02441f..ae1f67d20 100644 --- a/src/components/tree/themes/dark/tree-item.fluent.scss +++ b/src/components/tree/themes/dark/tree-item.fluent.scss @@ -1,10 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $fluent; - -@mixin theme() { - igc-tree-item { - @include css-vars-from-theme($theme, 'ig-tree'); - } +:host { + @include css-vars-from-theme($fluent, 'ig-tree'); } diff --git a/src/components/tree/themes/dark/tree-item.indigo.scss b/src/components/tree/themes/dark/tree-item.indigo.scss index 68fccd68d..1245668db 100644 --- a/src/components/tree/themes/dark/tree-item.indigo.scss +++ b/src/components/tree/themes/dark/tree-item.indigo.scss @@ -1,10 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $indigo; - -@mixin theme() { - igc-tree-item { - @include css-vars-from-theme($theme, 'ig-tree'); - } +:host { + @include css-vars-from-theme($indigo, 'ig-tree'); } diff --git a/src/components/tree/themes/dark/tree-item.material.scss b/src/components/tree/themes/dark/tree-item.material.scss index c5e344266..51700f269 100644 --- a/src/components/tree/themes/dark/tree-item.material.scss +++ b/src/components/tree/themes/dark/tree-item.material.scss @@ -1,10 +1,6 @@ @use 'styles/utilities' as *; @use 'themes' as *; -$theme: $material; - -@mixin theme() { - igc-tree-item { - @include css-vars-from-theme($theme, 'ig-tree'); - } +:host { + @include css-vars-from-theme($material, 'ig-tree'); } diff --git a/src/components/tree/themes/light/tree-item.bootstrap.scss b/src/components/tree/themes/light/tree-item.bootstrap.scss index 4f190bcc8..ef522acb6 100644 --- a/src/components/tree/themes/light/tree-item.bootstrap.scss +++ b/src/components/tree/themes/light/tree-item.bootstrap.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/tree/themes/light/tree-item.fluent.scss b/src/components/tree/themes/light/tree-item.fluent.scss index 08e993d60..22ec51690 100644 --- a/src/components/tree/themes/light/tree-item.fluent.scss +++ b/src/components/tree/themes/light/tree-item.fluent.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/tree/themes/light/tree-item.indigo.scss b/src/components/tree/themes/light/tree-item.indigo.scss index 8bc89749a..ee8997501 100644 --- a/src/components/tree/themes/light/tree-item.indigo.scss +++ b/src/components/tree/themes/light/tree-item.indigo.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; diff --git a/src/components/tree/themes/light/tree-item.material.scss b/src/components/tree/themes/light/tree-item.material.scss index c21a7a4ea..c2e521ce4 100644 --- a/src/components/tree/themes/light/tree-item.material.scss +++ b/src/components/tree/themes/light/tree-item.material.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; @use 'themes' as *; @@ -49,4 +48,3 @@ $theme: $material; background: var-get($theme, 'background-disabled'); } } - diff --git a/src/components/tree/themes/shared/tree-item.bootstrap.scss b/src/components/tree/themes/shared/tree-item.bootstrap.scss new file mode 100644 index 000000000..e6f1f3bd7 --- /dev/null +++ b/src/components/tree/themes/shared/tree-item.bootstrap.scss @@ -0,0 +1,63 @@ +@use 'styles/common/component'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +:host { + background: var(--node-disabled-background, var-get($theme, 'background')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground')); +} + +[part~='wrapper'] { + min-height: var-get($theme, 'size'); + + &:hover { + &::after { + background: var-get($theme, 'hover-color'); + } + } +} + +[part~='label'] { + max-height: var-get($theme, 'size'); +} + +:host(:not([disabled])[active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active')); +} + +:host(:not([disabled])[selected]) { + background: var(--node-disabled-background, var-get($theme, 'background-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-selected')); +} + +:host(:not([disabled])[selected][active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); +} + +:host(:not([disabled])[selected]), +:host(:not([disabled])[selected][active]) { + [part~='focused'] { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); + } +} + +[part~='select'] { + margin-inline-end: rem(8px); +} + +[part~='focused'] { + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); +} + +:host([disabled]) { + --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')}; + --node-disabled-background: #{var-get($theme, 'background-disabled')}; + + color: var(--node-disabled-foreground); + background: var(--node-disabled-background); +} diff --git a/src/components/tree/themes/shared/tree-item.fluent.scss b/src/components/tree/themes/shared/tree-item.fluent.scss new file mode 100644 index 000000000..fe037972a --- /dev/null +++ b/src/components/tree/themes/shared/tree-item.fluent.scss @@ -0,0 +1,64 @@ +@use 'styles/common/component'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $fluent; + +:host { + background: var(--node-disabled-background, var-get($theme, 'background')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground')); +} + + +[part~='wrapper'] { + min-height: var-get($theme, 'size'); + + &:hover { + &::after { + background: var-get($theme, 'hover-color'); + } + } +} + +[part~='label'] { + max-height: var-get($theme, 'size'); +} + +:host(:not([disabled])[active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active')); +} + +:host(:not([disabled])[selected]) { + background: var(--node-disabled-background, var-get($theme, 'background-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-selected')); +} + +:host(:not([disabled])[selected][active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); +} + +:host(:not([disabled])[selected]), +:host(:not([disabled])[selected][active]) { + [part~='focused'] { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); + } +} + +[part~='select'] { + margin-inline-end: rem(8px); +} + +[part~='focused'] { + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); +} + +:host([disabled]) { + --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')}; + --node-disabled-background: #{var-get($theme, 'background-disabled')}; + + color: var(--node-disabled-foreground); + background: var(--node-disabled-background); +} diff --git a/src/components/tree/themes/shared/tree-item.indigo.scss b/src/components/tree/themes/shared/tree-item.indigo.scss new file mode 100644 index 000000000..8018d9463 --- /dev/null +++ b/src/components/tree/themes/shared/tree-item.indigo.scss @@ -0,0 +1,74 @@ +@use 'styles/common/component'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $indigo; + +:host { + background: var(--node-disabled-background, var-get($theme, 'background')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground')); +} + +[part~='wrapper'] { + min-height: var-get($theme, 'size'); + + &:hover { + &::after { + background: var-get($theme, 'hover-color'); + opacity: .3; + } + } +} + +[part~='label'] { + max-height: var-get($theme, 'size'); +} + +:host(:not([disabled])[active]) { + background: var-get($theme, 'background-active'); + color: var-get($theme, 'foreground-active'); + + &:hover { + color: var-get($theme, 'foreground-active'); + } +} + +[part~='active'] { + &:hover { + color: var-get($theme, 'foreground-active'); + } +} + +:host(:not([disabled])[selected]) { + background: var-get($theme, 'background-selected'); + color: var-get($theme, 'foreground-selected'); +} + +:host(:not([disabled])[selected][active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); +} + +:host(:not([disabled])[selected]), +:host(:not([disabled])[selected][active]) { + [part~='focused'] { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); + } +} + +[part~='select'] { + margin-inline-end: rem(8px); +} + +[part~='focused'] { + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); +} + +:host([disabled]) { + --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')}; + --node-disabled-background: #{var-get($theme, 'background-disabled')}; + + color: var(--node-disabled-foreground); + background: var(--node-disabled-background); +} diff --git a/src/components/tree/themes/shared/tree-item.material.scss b/src/components/tree/themes/shared/tree-item.material.scss new file mode 100644 index 000000000..567d6bd84 --- /dev/null +++ b/src/components/tree/themes/shared/tree-item.material.scss @@ -0,0 +1,59 @@ +@use 'styles/common/component'; +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $material; + +:host { + background: var(--node-disabled-background, var-get($theme, 'background')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground')); +} + +[part~='wrapper'] { + min-height: var-get($theme, 'size'); + + &:hover { + &::after { + background: var-get($theme, 'hover-color'); + } + } +} + +[part~='label'] { + max-height: var-get($theme, 'size'); +} + +:host(:not([disabled])[active]) { + background: var-get($theme, 'background-active'); + color: var-get($theme, 'foreground-active'); +} + +:host(:not([disabled])[selected]) { + background: var-get($theme, 'background-selected'); + color: var-get($theme, 'foreground-selected'); +} + +:host(:not([disabled])[selected][active]) { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); +} + +:host(:not([disabled])[selected]), +:host(:not([disabled])[selected][active]) { + [part~='focused'] { + background: var(--node-disabled-background, var-get($theme, 'background-active-selected')); + color: var(--node-disabled-foreground, var-get($theme, 'foreground-active-selected')); + } +} + +[part~='focused'] { + box-shadow: inset 0 0 0 1px var-get($theme, 'border-color'); +} + +:host([disabled]) { + --node-disabled-foreground: #{var-get($theme, 'foreground-disabled')}; + --node-disabled-background: #{var-get($theme, 'background-disabled')}; + + color: var(--node-disabled-foreground); + background: var(--node-disabled-background); +} diff --git a/src/components/tree/themes/themes.ts b/src/components/tree/themes/themes.ts new file mode 100644 index 000000000..f5a7b1de0 --- /dev/null +++ b/src/components/tree/themes/themes.ts @@ -0,0 +1,50 @@ +import { css } from 'lit'; + +// Dark Overrides +import { styles as bootstrapDark } from './dark/tree-item.bootstrap.css.js'; +import { styles as fluentDark } from './dark/tree-item.fluent.css.js'; +import { styles as indigoDark } from './dark/tree-item.indigo.css.js'; +import { styles as materialDark } from './dark/tree-item.material.css.js'; +// Light Overrides +import { styles as bootstrapLight } from './light/tree-item.bootstrap.css.js'; +import { styles as fluentLight } from './light/tree-item.fluent.css.js'; +import { styles as indigoLight } from './light/tree-item.indigo.css.js'; +import { styles as materialLight } from './light/tree-item.material.css.js'; +// Shared Styles +import { styles as bootstrap } from './shared/tree-item.bootstrap.css.js'; +import { styles as fluent } from './shared/tree-item.fluent.css.js'; +import { styles as indigo } from './shared/tree-item.indigo.css.js'; +import { styles as material } from './shared/tree-item.material.css.js'; +import { Themes } from '../../../theming/types.js'; + +const light = { + bootstrap: css` + ${bootstrap} ${bootstrapLight} + `, + material: css` + ${material} ${materialLight} + `, + fluent: css` + ${fluent} ${fluentLight} + `, + indigo: css` + ${indigo} ${indigoLight} + `, +}; + +const dark = { + bootstrap: css` + ${bootstrap} ${bootstrapDark} + `, + material: css` + ${material} ${materialDark} + `, + fluent: css` + ${fluent} ${fluentDark} + `, + indigo: css` + ${indigo} ${indigoDark} + `, +}; + +export const all: Themes = { light, dark }; diff --git a/src/components/tree/themes/light/tree-item.base.scss b/src/components/tree/themes/tree-item.base.scss similarity index 98% rename from src/components/tree/themes/light/tree-item.base.scss rename to src/components/tree/themes/tree-item.base.scss index 85fb4ab18..f1d32999b 100644 --- a/src/components/tree/themes/light/tree-item.base.scss +++ b/src/components/tree/themes/tree-item.base.scss @@ -1,4 +1,3 @@ -@use 'styles/common/component'; @use 'styles/utilities' as *; :host { @@ -34,6 +33,7 @@ align-items: center; position: relative; padding: 0 pad(12px, 16px, 24px); + cursor: pointer; background: inherit; color: inherit; diff --git a/src/components/tree/themes/light/tree.base.scss b/src/components/tree/themes/tree.base.scss similarity index 100% rename from src/components/tree/themes/light/tree.base.scss rename to src/components/tree/themes/tree.base.scss diff --git a/src/components/tree/tree-item.ts b/src/components/tree/tree-item.ts index d6c34edc3..6f05d6c05 100644 --- a/src/components/tree/tree-item.ts +++ b/src/components/tree/tree-item.ts @@ -6,11 +6,8 @@ import { state, } from 'lit/decorators.js'; -import { styles } from './themes/light/tree-item.base.css.js'; -import { styles as bootstrap } from './themes/light/tree-item.bootstrap.css.js'; -import { styles as fluent } from './themes/light/tree-item.fluent.css.js'; -import { styles as indigo } from './themes/light/tree-item.indigo.css.js'; -import { styles as material } from './themes/light/tree-item.material.css.js'; +import { all } from './themes/themes'; +import { styles } from './themes/tree-item.base.css.js'; import type IgcTreeComponent from './tree.js'; import { IgcTreeNavigationService } from './tree.navigation.js'; import { IgcTreeSelectionService } from './tree.selection.js'; @@ -45,10 +42,7 @@ import IgcCircularProgressComponent from '../progress/circular-progress.js'; * @csspart text - The tree item displayed text. * @csspart select - The checkbox of the tree item when selection is enabled. */ -@themes({ - light: { bootstrap, fluent, indigo, material }, - dark: { bootstrap, fluent, indigo, material }, -}) +@themes(all, true) export default class IgcTreeItemComponent extends LitElement { public static readonly tagName = 'igc-tree-item'; public static override styles = styles; diff --git a/src/components/tree/tree.ts b/src/components/tree/tree.ts index ac0b7b3af..9e91706a5 100644 --- a/src/components/tree/tree.ts +++ b/src/components/tree/tree.ts @@ -1,7 +1,7 @@ import { LitElement, html } from 'lit'; import { property } from 'lit/decorators.js'; -import { styles } from './themes/light/tree.base.css.js'; +import { styles } from './themes/tree.base.css.js'; import IgcTreeItemComponent from './tree-item.js'; import { IgcTreeEventMap } from './tree.common.js'; import { IgcTreeNavigationService } from './tree.navigation.js'; diff --git a/src/styles/themes/dark/bootstrap.scss b/src/styles/themes/dark/bootstrap.scss index 6aa694519..1c7b98549 100644 --- a/src/styles/themes/dark/bootstrap.scss +++ b/src/styles/themes/dark/bootstrap.scss @@ -2,55 +2,4 @@ @use '../base/bootstrap' as base; @use '../base/scrollbars'; @use '../third-party/grid/bootstrap.dark' as grid; -@use '../../../components/badge/themes/dark/badge.bootstrap' as badge; -@use '../../../components/card/themes/dark/card.bootstrap' as card; -@use '../../../components/chip/themes/dark/chip.bootstrap' as chip; -@use '../../../components/dialog/themes/dark/dialog.bootstrap' as dialog; -@use '../../../components/dropdown/themes/dark/dropdown.bootstrap' as dropdown; -@use '../../../components/expansion-panel/themes/dark/expansion-panel.bootstrap' as expansion-panel; -@use '../../../components/input/themes/dark/input.dark.bootstrap' as input; -@use '../../../components/slider/themes/dark/slider.bootstrap' as slider; -@use '../../../components/list/themes/dark/list.bootstrap' as list; -@use '../../../components/list/themes/dark/list-header.bootstrap' as list-header; -@use '../../../components/list/themes/dark/list-item.bootstrap' as list-item; -@use '../../../components/tabs/themes/dark/tab.bootstrap' as tab; -@use '../../../components/tree/themes/dark/tree-item.bootstrap' as tree-item; -@use '../../../components/select/themes/dark/select.bootstrap' as select; -@use '../../../components/combo/themes/dark/combo.bootstrap' as combo; -@use '../../../components/button/themes/button/dark/button.bootstrap' as button; -@use '../../../components/icon/dark/icon.bootstrap' as icon; -@use '../../../components/navbar/themes/dark/navbar.bootstrap' as navbar; -@use '../../../components/checkbox/themes/dark/checkbox.bootstrap' as checkbox; -@use '../../../components/checkbox/themes/dark/switch.bootstrap' as switch; -@use '../../../components/radio/themes/dark/radio.bootstrap' as radio; -@use '../../../components/stepper/themes/step/dark/step.bootstrap' as stepper; -@use '../../../components/nav-drawer/themes/dark/nav-drawer.bootstrap' as nav-drawer; -@use '../../../components/button-group/themes/dark/button-group-bootstrap' as button-group; -@use '../../../components/button-group/themes/dark/toggle-button/toggle-button-bootstrap' as toggle-button; @include base.root-styles($palette, 'dark'); -@include badge.theme(); -@include card.theme(); -@include chip.theme(); -@include dialog.theme(); -@include dropdown.theme(); -@include expansion-panel.theme(); -@include input.theme(); -@include slider.theme(); -@include list.theme(); -@include list-header.theme(); -@include list-item.theme(); -@include tab.theme(); -@include tree-item.theme(); -@include select.theme(); -@include grid.theme(); -@include combo.theme(); -@include button.theme(); -@include icon.theme(); -@include navbar.theme(); -@include checkbox.theme(); -@include switch.theme(); -@include radio.theme(); -@include stepper.theme(); -@include nav-drawer.theme(); -@include button-group.theme(); -@include toggle-button.theme(); diff --git a/src/styles/themes/dark/fluent.scss b/src/styles/themes/dark/fluent.scss index 009d79e23..144e1e71a 100644 --- a/src/styles/themes/dark/fluent.scss +++ b/src/styles/themes/dark/fluent.scss @@ -2,57 +2,4 @@ @use '../base/fluent' as base; @use '../base/scrollbars'; @use '../third-party/grid/fluent.dark' as grid; -@use '../../../components/button/themes/button/dark/button.fluent' as button; -@use '../../../components/button/themes/icon-button/dark/icon-button.fluent' as icon-button; -@use '../../../components/calendar/themes/dark/fluent/index' as calendar; -@use '../../../components/card/themes/dark/card.fluent' as card; -@use '../../../components/checkbox/themes/dark/checkbox.fluent' as checkbox; -@use '../../../components/chip/themes/dark/chip.fluent' as chip; -@use '../../../components/dialog/themes/dark/dialog.fluent' as dialog; -@use '../../../components/dropdown/themes/dark/dropdown.fluent' as dropdown; -@use '../../../components/expansion-panel/themes/dark/expansion-panel.fluent' as expansion-panel; -@use '../../../components/checkbox/themes/dark/switch.fluent' as switch; -@use '../../../components/input/themes/dark/input.dark.fluent' as input; -@use '../../../components/radio/themes/dark/radio.fluent' as radio; -@use '../../../components/slider/themes/dark/slider.fluent.scss' as slider; -@use '../../../components/list/themes/dark/list.fluent' as list; -@use '../../../components/list/themes/dark/list-item.fluent' as list-item; -@use '../../../components/select/themes/dark/select.fluent' as select; -@use '../../../components/tabs/themes/dark/tab.fluent' as tab; -@use '../../../components/tree/themes/dark/tree-item.fluent' as tree-item; -@use '../../../components/combo/themes/dark/combo.fluent' as combo; -@use '../../../components/icon/dark/icon.fluent' as icon; -@use '../../../components/navbar/themes/dark/navbar.fluent' as navbar; -@use '../../../components/rating/dark/rating.fluent' as rating; -@use '../../../components/stepper/themes/step/dark/step.fluent' as stepper; -@use '../../../components/nav-drawer/themes/dark/nav-drawer.fluent' as nav-drawer; -@use '../../../components/button-group/themes/dark/button-group-fluent' as button-group; -@use '../../../components/button-group/themes/dark/toggle-button/toggle-button-fluent' as toggle-button; @include base.root-styles($palette, 'dark'); -@include button.theme(); -@include icon-button.theme(); -@include calendar.theme(); -@include card.theme(); -@include checkbox.theme(); -@include chip.theme(); -@include dropdown.theme(); -@include dialog.theme(); -@include expansion-panel.theme(); -@include switch.theme(); -@include input.theme(); -@include radio.theme(); -@include slider.theme(); -@include list.theme(); -@include list-item.theme(); -@include tab.theme(); -@include select.theme(); -@include tree-item.theme(); -@include grid.theme(); -@include combo.theme(); -@include icon.theme(); -@include navbar.theme(); -@include rating.theme(); -@include stepper.theme(); -@include nav-drawer.theme(); -@include button-group.theme(); -@include toggle-button.theme(); diff --git a/src/styles/themes/dark/indigo.scss b/src/styles/themes/dark/indigo.scss index f346699cc..8f8c55e2d 100644 --- a/src/styles/themes/dark/indigo.scss +++ b/src/styles/themes/dark/indigo.scss @@ -2,55 +2,4 @@ @use '../base/indigo' as base; @use '../base/scrollbars'; @use '../third-party/grid/indigo.dark' as grid; -@use '../../../components/card/themes/dark/card.indigo' as card; -@use '../../../components/checkbox/themes/dark/checkbox.indigo' as checkbox; -@use '../../../components/chip/themes/dark/chip.indigo' as chip; -@use '../../../components/checkbox/themes/dark/switch.indigo' as switch; -@use '../../../components/input/themes/dark/input.dark.indigo' as input; -@use '../../../components/radio/themes/dark/radio.indigo' as radio; -@use '../../../components/slider/themes/dark/slider.indigo' as slider; -@use '../../../components/list/themes/dark/list.indigo' as list; -@use '../../../components/list/themes/dark/list-header.indigo' as list-header; -@use '../../../components/list/themes/dark/list-item.indigo' as list-item; -@use '../../../components/tree/themes/dark/tree-item.indigo' as tree-item; -@use '../../../components/dialog/themes/dark/dialog.indigo' as dialog; -@use '../../../components/dropdown/themes/dark/dropdown.indigo' as dropdown; -@use '../../../components/expansion-panel/themes/dark/expansion-panel.indigo' as expansion-panel; -@use '../../../components/select/themes/dark/select.indigo' as select; -@use '../../../components/snackbar/themes/dark/snackbar.indigo' as snackbar; -@use '../../../components/tabs/themes/dark/tab.indigo' as tab; -@use '../../../components/combo/themes/dark/combo.indigo' as combo; -@use '../../../components/button/themes/button/dark/button.indigo' as button; -@use '../../../components/icon/dark/icon.indigo' as icon; -@use '../../../components/navbar/themes/dark/navbar.indigo' as navbar; -@use '../../../components/stepper/themes/step/dark/step.indigo' as stepper; -@use '../../../components/nav-drawer/themes/dark/nav-drawer.indigo' as nav-drawer; -@use '../../../components/button-group/themes/dark/button-group-indigo' as button-group; -@use '../../../components/button-group/themes/dark/toggle-button/toggle-button-indigo' as toggle-button; @include base.root-styles($palette, 'dark'); -@include card.theme(); -@include checkbox.theme(); -@include chip.theme(); -@include switch.theme(); -@include input.theme(); -@include radio.theme(); -@include slider.theme(); -@include list.theme(); -@include list-header.theme(); -@include list-item.theme(); -@include tree-item.theme(); -@include dialog.theme(); -@include dropdown.theme(); -@include expansion-panel.theme(); -@include select.theme(); -@include snackbar.theme(); -@include tab.theme(); -@include grid.theme(); -@include combo.theme(); -@include button.theme(); -@include icon.theme(); -@include navbar.theme(); -@include stepper.theme(); -@include nav-drawer.theme(); -@include button-group.theme(); -@include toggle-button.theme(); diff --git a/src/styles/themes/dark/material.scss b/src/styles/themes/dark/material.scss index 25ef798d8..d7fa90a42 100644 --- a/src/styles/themes/dark/material.scss +++ b/src/styles/themes/dark/material.scss @@ -2,47 +2,4 @@ @use '../base/material' as base; @use '../base/scrollbars'; @use '../third-party/grid/material.dark' as grid; -@use '../../../components/dialog/themes/dark/dialog.material' as dialog; -@use '../../../components/expansion-panel/themes/dark/expansion-panel.material' as expansion-panel; -@use '../../../components/radio/themes/dark/radio.material' as radio; -@use '../../../components/input/themes/dark/input.dark.material' as input; -@use '../../../components/select/themes/dark/select.material' as select; -@use '../../../components/tabs/themes/dark/tab.material' as tab; -@use '../../../components/chip/themes/dark/chip.material' as chip; -@use '../../../components/combo/themes/dark/combo.material' as combo; -@use '../../../components/button/themes/button/dark/button.material' as button; -@use '../../../components/icon/dark/icon.material' as icon; -@use '../../../components/list/themes/dark/list-item.material' as list-item; -@use '../../../components/navbar/themes/dark/navbar.material' as navbar; -@use '../../../components/card/themes/dark/card.material' as card; -@use '../../../components/checkbox/themes/dark/checkbox.material' as checkbox; -@use '../../../components/slider/themes/dark/slider.material' as slider; -@use '../../../components/checkbox/themes/dark/switch.material' as switch; -@use '../../../components/stepper/themes/step/dark/step.material' as stepper; -@use '../../../components/nav-drawer/themes/dark/nav-drawer.material' as nav-drawer; -@use '../../../components/button-group/themes/dark/button-group-material' as button-group; -@use '../../../components/button-group/themes/dark/toggle-button/toggle-button-material' as toggle-button; -@use '../../../components/tree/themes/dark/tree-item.material' as tree-item; @include base.root-styles($palette, 'dark'); -@include dialog.theme(); -@include radio.theme(); -@include input.theme(); -@include select.theme(); -@include tab.theme(); -@include grid.theme(); -@include chip.theme(); -@include combo.theme(); -@include expansion-panel.theme(); -@include button.theme(); -@include icon.theme(); -@include list-item.theme(); -@include navbar.theme(); -@include card.theme(); -@include checkbox.theme(); -@include slider.theme(); -@include switch.theme(); -@include stepper.theme(); -@include nav-drawer.theme(); -@include button-group.theme(); -@include toggle-button.theme(); -@include tree-item.theme(); diff --git a/stories/snackbar.stories.ts b/stories/snackbar.stories.ts index 7adb76c2c..8f58bca5f 100644 --- a/stories/snackbar.stories.ts +++ b/stories/snackbar.stories.ts @@ -14,14 +14,7 @@ defineComponents(IgcSnackbarComponent, IgcButtonComponent); const metadata: Meta = { title: 'Snackbar', component: 'igc-snackbar', - parameters: { - docs: { - description: { - component: - 'A snackbar component is used to provide feedback about an operation\nby showing a brief message at the bottom of the screen.', - }, - }, - }, + parameters: { docs: { description: {} } }, argTypes: { open: { type: 'boolean', diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs index 61bf3cd6b..d432bf4c1 100644 --- a/web-test-runner.config.mjs +++ b/web-test-runner.config.mjs @@ -12,18 +12,10 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({ exportConditions: ['browser', 'production'], }, - /** Amount of browsers to run concurrently */ - // concurrentBrowsers: 2, - - /** Amount of test files per browser to test concurrently */ - // concurrency: 1, - - /** Browsers to run tests on */ - // browsers: [ - // playwrightLauncher({ product: 'chromium' }), - // playwrightLauncher({ product: 'firefox' }), - // playwrightLauncher({ product: 'webkit' }), - // ], + coverageConfig: { + exclude: ['node_modules/**/*', '**/themes/**'], + }, // See documentation for all available options + // https://modern-web.dev/docs/test-runner/cli-and-configuration/#configuration-file });