From c89821a8f1ff07d21ce223670a2711e636ab9030 Mon Sep 17 00:00:00 2001 From: Guillaume Cornut Date: Wed, 10 Sep 2025 21:03:52 +0200 Subject: [PATCH 1/3] refactor(core): inline lumx class prefix --- .../src/scss/components/avatar/_index.scss | 4 +- .../src/scss/components/badge/_index.scss | 6 +- .../src/scss/components/button/_index.scss | 58 +++++----- .../src/scss/components/checkbox/_index.scss | 108 +++++++++--------- .../src/scss/components/chip/_index.scss | 40 +++---- .../scss/components/comment-block/_index.scss | 2 +- .../scss/components/date-picker/_index.scss | 2 +- .../src/scss/components/dialog/_index.scss | 6 +- .../src/scss/components/divider/_index.scss | 6 +- .../scss/components/drag-handle/_index.scss | 2 +- .../src/scss/components/dropdown/_index.scss | 2 +- .../components/expansion-panel/_index.scss | 2 +- .../src/scss/components/flag/_index.scss | 8 +- .../src/scss/components/flex-box/_index.scss | 68 +++++------ .../scss/components/generic-block/_index.scss | 2 +- .../scss/components/grid-column/_index.scss | 2 +- .../src/scss/components/grid/_index.scss | 60 +++++----- .../src/scss/components/icon/_index.scss | 18 +-- .../scss/components/image-block/_index.scss | 4 +- .../components/image-lightbox/_index.scss | 14 +-- .../scss/components/inline-list/_index.scss | 2 +- .../scss/components/input-helper/_index.scss | 2 +- .../scss/components/input-label/_index.scss | 4 +- .../src/scss/components/lightbox/_index.scss | 2 +- .../scss/components/link-preview/_index.scss | 2 +- .../src/scss/components/link/_index.scss | 10 +- .../src/scss/components/list/_index.scss | 32 +++--- .../src/scss/components/message/_index.scss | 6 +- .../src/scss/components/mosaic/_index.scss | 2 +- .../scss/components/navigation/_index.scss | 20 ++-- .../components/notification-block/_index.scss | 2 +- .../scss/components/notification/_index.scss | 4 +- .../src/scss/components/popover/_index.scss | 4 +- .../scss/components/post-block/_index.scss | 2 +- .../components/progress-tracker/_index.scss | 12 +- .../src/scss/components/progress/_index.scss | 28 ++--- .../scss/components/radio-button/_index.scss | 78 ++++++------- .../src/scss/components/select/_index.scss | 62 +++++----- .../components/side-navigation/_index.scss | 10 +- .../src/scss/components/skeleton/_index.scss | 26 ++--- .../src/scss/components/slider/_index.scss | 20 ++-- .../src/scss/components/slideshow/_index.scss | 14 +-- .../src/scss/components/switch/_index.scss | 108 +++++++++--------- .../src/scss/components/table/_index.scss | 14 +-- .../src/scss/components/tabs/_index.scss | 26 ++--- .../scss/components/text-field/_index.scss | 86 +++++++------- .../src/scss/components/text/_index.scss | 4 +- .../src/scss/components/thumbnail/_index.scss | 58 +++++----- .../src/scss/components/toolbar/_index.scss | 2 +- .../src/scss/components/tooltip/_index.scss | 4 +- .../src/scss/components/uploader/_index.scss | 6 +- .../scss/components/user-block/_index.scss | 2 +- .../src/scss/core/base/_helpers.scss | 8 +- .../lumx-core/src/scss/core/color/_index.scss | 4 +- .../src/scss/core/spacing/_index.scss | 2 +- .../src/scss/core/typography/_index.scss | 6 +- 56 files changed, 544 insertions(+), 544 deletions(-) diff --git a/packages/lumx-core/src/scss/components/avatar/_index.scss b/packages/lumx-core/src/scss/components/avatar/_index.scss index 6521567a9d..cc60cbddda 100644 --- a/packages/lumx-core/src/scss/components/avatar/_index.scss +++ b/packages/lumx-core/src/scss/components/avatar/_index.scss @@ -4,7 +4,7 @@ Avatar ========================================================================== */ -.#{$lumx-base-prefix}-avatar { +.lumx-avatar { position: relative; background-repeat: no-repeat; background-position: center; @@ -35,7 +35,7 @@ ========================================================================== */ @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-avatar--size-#{$key} { + .lumx-avatar--size-#{$key} { width: $size; height: $size; } diff --git a/packages/lumx-core/src/scss/components/badge/_index.scss b/packages/lumx-core/src/scss/components/badge/_index.scss index c98f9fc767..58a6632e1b 100644 --- a/packages/lumx-core/src/scss/components/badge/_index.scss +++ b/packages/lumx-core/src/scss/components/badge/_index.scss @@ -5,7 +5,7 @@ Badge ========================================================================== */ -.#{$lumx-base-prefix}-badge { +.lumx-badge { display: inline-flex; align-items: center; justify-content: center; @@ -32,7 +32,7 @@ ========================================================================== */ @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-badge--color-#{$key} { + .lumx-badge--color-#{$key} { background-color: lumx-color-variant($key, "N"); @if $key == "light" { @@ -50,7 +50,7 @@ /* Badge wrapper ========================================================================== */ -.#{$lumx-base-prefix}-badge-wrapper { +.lumx-badge-wrapper { position: relative; display: inline-block; outline: none; diff --git a/packages/lumx-core/src/scss/components/button/_index.scss b/packages/lumx-core/src/scss/components/button/_index.scss index 2895e29d97..0461b1394d 100644 --- a/packages/lumx-core/src/scss/components/button/_index.scss +++ b/packages/lumx-core/src/scss/components/button/_index.scss @@ -4,10 +4,10 @@ Button ========================================================================== */ -.#{$lumx-base-prefix}-button { +.lumx-button { @include lumx-button-base; - .#{$lumx-base-prefix}-badge { + .lumx-badge { position: absolute; top: math.div(-$lumx-spacing-unit, 2); right: math.div(-$lumx-spacing-unit, 2); @@ -19,38 +19,38 @@ @each $key, $size in $lumx-sizes { @if $key == lumx-base-const("size", "S") or $key == lumx-base-const("size", "M") { - .#{$lumx-base-prefix}-button--size-#{$key} { - &.#{$lumx-base-prefix}-button--emphasis-high { - &.#{$lumx-base-prefix}-button--variant-button { + .lumx-button--size-#{$key} { + &.lumx-button--emphasis-high { + &.lumx-button--variant-button { @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "button", $key); } - &.#{$lumx-base-prefix}-button--variant-icon { + &.lumx-button--variant-icon { @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "icon", $key); } } - &.#{$lumx-base-prefix}-button--emphasis-medium { - &.#{$lumx-base-prefix}-button--variant-button { + &.lumx-button--emphasis-medium { + &.lumx-button--variant-button { @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key); } - &.#{$lumx-base-prefix}-button--variant-icon { + &.lumx-button--variant-icon { @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "icon", $key); } } - &.#{$lumx-base-prefix}-button--emphasis-low { - &.#{$lumx-base-prefix}-button--variant-button { + &.lumx-button--emphasis-low { + &.lumx-button--variant-button { @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key); } - &.#{$lumx-base-prefix}-button--variant-icon { + &.lumx-button--variant-icon { @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "icon", $key); } } - &.#{$lumx-base-prefix}-button--variant-button { + &.lumx-button--variant-button { i:first-child { @include lumx-button-icon("button", $key, lumx-base-const("position", "LEFT")); } @@ -60,7 +60,7 @@ } } - &.#{$lumx-base-prefix}-button--variant-icon { + &.lumx-button--variant-icon { & > i, & > img { @include lumx-button-icon("icon", $key); @@ -79,8 +79,8 @@ @each $key, $color in $lumx-color-palette { @if $key != "dark" and $key != "light" { - .#{$lumx-base-prefix}-button--color-#{$key} { - &.#{$lumx-base-prefix}-button--emphasis-high.#{$lumx-base-prefix}-button--theme-light { + .lumx-button--color-#{$key} { + &.lumx-button--emphasis-high.lumx-button--theme-light { @include lumx-button-color( lumx-base-const("emphasis", "HIGH"), $key, @@ -88,7 +88,7 @@ ); } - &.#{$lumx-base-prefix}-button--emphasis-high.#{$lumx-base-prefix}-button--theme-dark { + &.lumx-button--emphasis-high.lumx-button--theme-dark { @include lumx-button-color(lumx-base-const("emphasis", "HIGH"), $key, lumx-base-const("theme", "DARK")); } } @@ -96,12 +96,12 @@ } @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-button--color-#{$key} { - &.#{$lumx-base-prefix}-button--emphasis-medium { + .lumx-button--color-#{$key} { + &.lumx-button--emphasis-medium { @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key); } - &.#{$lumx-base-prefix}-button--emphasis-low { + &.lumx-button--emphasis-low { @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key); } } @@ -111,13 +111,13 @@ /* Button selected ========================================================================== */ -.#{$lumx-base-prefix}-button.#{$lumx-base-prefix}-button--is-selected.#{$lumx-base-prefix}-button--emphasis-medium, -.#{$lumx-base-prefix}-button.#{$lumx-base-prefix}-button--is-selected.#{$lumx-base-prefix}-button--emphasis-low, { +.lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium, +.lumx-button.lumx-button--is-selected.lumx-button--emphasis-low, { @include lumx-button-size(lumx-base-const("emphasis", "SELECTED")); @each $key, $color in $lumx-color-palette { - &.#{$lumx-base-prefix}-button--color-#{$key} { - &.#{$lumx-base-prefix}-button--is-selected { + &.lumx-button--color-#{$key} { + &.lumx-button--is-selected { @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key); } } @@ -127,7 +127,7 @@ /* Button wrapper ========================================================================== */ -.#{$lumx-base-prefix}-button-wrapper { +.lumx-button-wrapper { width: fit-content; &--variant-button { @@ -150,12 +150,12 @@ /* Button group ========================================================================== */ -.#{$lumx-base-prefix}-button-group { +.lumx-button-group { display: inline-flex; vertical-align: top; gap: 1px; - .#{$lumx-base-prefix}-button { + .lumx-button { // Remove border radius on the right on the first button (if not hidden and not also the last button) &:not(:last-of-type:not(.visually-hidden)) { &, &::before { @@ -177,8 +177,8 @@ /* Button full width ========================================================================== */ -.#{$lumx-base-prefix}-button--is-full-width:not(.#{$lumx-base-prefix}-button--variant-icon), -.#{$lumx-base-prefix}-button-wrapper--is-full-width:not(.#{$lumx-base-prefix}-button-wrapper--variant-icon) { +.lumx-button--is-full-width:not(.lumx-button--variant-icon), +.lumx-button-wrapper--is-full-width:not(.lumx-button-wrapper--variant-icon) { flex-grow: 1; width: 100%; } diff --git a/packages/lumx-core/src/scss/components/checkbox/_index.scss b/packages/lumx-core/src/scss/components/checkbox/_index.scss index 9f77048c43..548f1e2abc 100644 --- a/packages/lumx-core/src/scss/components/checkbox/_index.scss +++ b/packages/lumx-core/src/scss/components/checkbox/_index.scss @@ -4,7 +4,7 @@ Checkbox ========================================================================== */ -.#{$lumx-base-prefix}-checkbox { +.lumx-checkbox { $self: &; display: flex; @@ -85,51 +85,51 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-checkbox--is-disabled { - .#{$lumx-base-prefix}-checkbox__input-native { +.lumx-checkbox--is-disabled { + .lumx-checkbox__input-native { pointer-events: none; } - .#{$lumx-base-prefix}-checkbox__input-placeholder { + .lumx-checkbox__input-placeholder { @include lumx-state-disabled-input; } - &.#{$lumx-base-prefix}-checkbox--theme-light { - .#{$lumx-base-prefix}-checkbox__label, - .#{$lumx-base-prefix}-checkbox__helper { + &.lumx-checkbox--theme-light { + .lumx-checkbox__label, + .lumx-checkbox__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } } - &.#{$lumx-base-prefix}-checkbox--theme-dark { - .#{$lumx-base-prefix}-checkbox__label, - .#{$lumx-base-prefix}-checkbox__helper { + &.lumx-checkbox--theme-dark { + .lumx-checkbox__label, + .lumx-checkbox__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } } } // Hover state -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native:hover -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-background { +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native:hover ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native:hover -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-background { +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native:hover ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); } } -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native:hover -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-indicator { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked +.lumx-checkbox__input-native:hover ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-indicator { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -139,10 +139,10 @@ } } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native:hover -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-indicator { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked +.lumx-checkbox__input-native:hover ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-indicator { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -153,26 +153,26 @@ } // Active state -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native:active -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-background { +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native:active ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native:active -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-background { +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native:active ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); } } -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native:active -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-indicator { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked +.lumx-checkbox__input-native:active ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-indicator { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -182,10 +182,10 @@ } } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native:active -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { - .#{$lumx-base-prefix}-checkbox__input-indicator { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked +.lumx-checkbox__input-native:active ++ .lumx-checkbox__input-placeholder { + .lumx-checkbox__input-indicator { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -196,21 +196,21 @@ } // Focus state -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native[data-focus-visible-added] ++ .lumx-checkbox__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-unchecked -.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked +.lumx-checkbox__input-native[data-focus-visible-added] ++ .lumx-checkbox__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); } -.#{$lumx-base-prefix}-checkbox--theme-light.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked +.lumx-checkbox__input-native[data-focus-visible-added] ++ .lumx-checkbox__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), @@ -219,9 +219,9 @@ ); } -.#{$lumx-base-prefix}-checkbox--theme-dark.#{$lumx-base-prefix}-checkbox--is-checked -.#{$lumx-base-prefix}-checkbox__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked +.lumx-checkbox__input-native[data-focus-visible-added] ++ .lumx-checkbox__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), diff --git a/packages/lumx-core/src/scss/components/chip/_index.scss b/packages/lumx-core/src/scss/components/chip/_index.scss index 5934b9d2fb..d8a5147445 100644 --- a/packages/lumx-core/src/scss/components/chip/_index.scss +++ b/packages/lumx-core/src/scss/components/chip/_index.scss @@ -2,7 +2,7 @@ Chip ========================================================================== */ -.#{$lumx-base-prefix}-chip { +.lumx-chip { $self: &; @include lumx-chip-base; @@ -29,30 +29,30 @@ /* Chip size ========================================================================== */ -.#{$lumx-base-prefix}-chip--size-m { +.lumx-chip--size-m { @include lumx-chip-size(lumx-base-const("size", "M")); padding: 0 var(--lumx-material-chip-size-m-padding-vertical); - &.#{$lumx-base-prefix}-chip--has-before { + &.lumx-chip--has-before { padding-left: $lumx-spacing-unit * 1.5; } - &.#{$lumx-base-prefix}-chip--has-after { + &.lumx-chip--has-after { padding-right: $lumx-spacing-unit * 1.5; } } -.#{$lumx-base-prefix}-chip--size-s { +.lumx-chip--size-s { @include lumx-chip-size(lumx-base-const("size", "S")); padding: 0 var(--lumx-material-chip-size-s-padding-vertical); - &.#{$lumx-base-prefix}-chip--has-before { + &.lumx-chip--has-before { padding-left: $lumx-spacing-unit; } - &.#{$lumx-base-prefix}-chip--has-after { + &.lumx-chip--has-after { padding-right: $lumx-spacing-unit; } } @@ -60,17 +60,17 @@ /* Chip states ========================================================================== */ -.#{$lumx-base-prefix}-chip--is-clickable { +.lumx-chip--is-clickable { @include lumx-state-transition; cursor: pointer; } @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-chip--is-unselected.#{$lumx-base-prefix}-chip--color-#{$key} { + .lumx-chip--is-unselected.lumx-chip--color-#{$key} { @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), $key); - &.#{$lumx-base-prefix}-chip--is-clickable { + &.lumx-chip--is-clickable { &:hover, &[data-lumx-hover] { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key); @@ -83,28 +83,28 @@ } @if $key == "dark" { - .#{$lumx-base-prefix}-chip__label { + .lumx-chip__label { color: lumx-color-variant("dark", "L1"); } } } - .#{$lumx-base-prefix}-chip--color-#{$key} { - &[data-focus-visible-added], &.#{$lumx-base-prefix}-chip--is-highlighted { + .lumx-chip--color-#{$key} { + &[data-focus-visible-added], &.lumx-chip--is-highlighted { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), $key); } } } -.#{$lumx-base-prefix}-chip--is-selected { - &.#{$lumx-base-prefix}-chip--color-dark { +.lumx-chip--is-selected { + &.lumx-chip--color-dark { @include lumx-state-as-selected( lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"), "chip" ); - &.#{$lumx-base-prefix}-chip--is-clickable { + &.lumx-chip--is-clickable { &:hover, &[data-lumx-hover] { @include lumx-state-as-selected( @@ -133,14 +133,14 @@ } } - &.#{$lumx-base-prefix}-chip--color-light { + &.lumx-chip--color-light { @include lumx-state-as-selected( lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK"), "chip" ); - &.#{$lumx-base-prefix}-chip--is-clickable { + &.lumx-chip--is-clickable { &:hover, &[data-lumx-hover] { @include lumx-state-as-selected( @@ -170,14 +170,14 @@ } } -.#{$lumx-base-prefix}-chip--is-disabled { +.lumx-chip--is-disabled { @include lumx-state-disabled-input; } /* Chip group ========================================================================== */ -.#{$lumx-base-prefix}-chip-group { +.lumx-chip-group { display: flex; flex-wrap: wrap; gap: $lumx-chip-group-spacing * 2; diff --git a/packages/lumx-core/src/scss/components/comment-block/_index.scss b/packages/lumx-core/src/scss/components/comment-block/_index.scss index 98949ffc7a..00ce38e2fd 100644 --- a/packages/lumx-core/src/scss/components/comment-block/_index.scss +++ b/packages/lumx-core/src/scss/components/comment-block/_index.scss @@ -4,7 +4,7 @@ Comment block ========================================================================== */ -.#{$lumx-base-prefix}-comment-block { +.lumx-comment-block { $self: &; position: relative; diff --git a/packages/lumx-core/src/scss/components/date-picker/_index.scss b/packages/lumx-core/src/scss/components/date-picker/_index.scss index ef2436769b..bea7427fb3 100644 --- a/packages/lumx-core/src/scss/components/date-picker/_index.scss +++ b/packages/lumx-core/src/scss/components/date-picker/_index.scss @@ -6,7 +6,7 @@ Date picker ========================================================================== */ -.#{$lumx-base-prefix}-date-picker { +.lumx-date-picker { &__month { @include lumx-typography("subtitle1"); diff --git a/packages/lumx-core/src/scss/components/dialog/_index.scss b/packages/lumx-core/src/scss/components/dialog/_index.scss index 62dc900216..d5ca0894ce 100644 --- a/packages/lumx-core/src/scss/components/dialog/_index.scss +++ b/packages/lumx-core/src/scss/components/dialog/_index.scss @@ -5,7 +5,7 @@ Dialog ========================================================================== */ -.#{$lumx-base-prefix}-dialog { +.lumx-dialog { $self: &; position: fixed; @@ -171,7 +171,7 @@ ========================================================================== */ @each $key, $size in $lumx-dialog-sizes { - .#{$lumx-base-prefix}-dialog--size-#{$key} .#{$lumx-base-prefix}-dialog__container { + .lumx-dialog--size-#{$key} .lumx-dialog__container { @include mq($until: desktop) { top: 0; right: 0; @@ -189,7 +189,7 @@ } } -.#{$lumx-base-prefix}-dialog--size-huge .#{$lumx-base-prefix}-dialog__container { +.lumx-dialog--size-huge .lumx-dialog__container { @include mq($until: desktop) { top: 0; right: 0; diff --git a/packages/lumx-core/src/scss/components/divider/_index.scss b/packages/lumx-core/src/scss/components/divider/_index.scss index fbb9a56eed..81b6a64c29 100644 --- a/packages/lumx-core/src/scss/components/divider/_index.scss +++ b/packages/lumx-core/src/scss/components/divider/_index.scss @@ -2,7 +2,7 @@ Divider ========================================================================== */ -.#{$lumx-base-prefix}-divider { +.lumx-divider { &--theme-light { @include lumx-divider(lumx-base-const("theme", "LIGHT")); } @@ -12,7 +12,7 @@ } } -.#{$lumx-base-prefix}-has-divider { +.lumx-has-divider { @include lumx-has-divider; &--theme-light { @@ -25,7 +25,7 @@ } @each $key, $positon in $lumx-divider-positions { - .#{$lumx-base-prefix}-has-divider.#{$lumx-base-prefix}-has-divider--position-#{$key} { + .lumx-has-divider.lumx-has-divider--position-#{$key} { @include lumx-divider-position($positon); &--theme-light { diff --git a/packages/lumx-core/src/scss/components/drag-handle/_index.scss b/packages/lumx-core/src/scss/components/drag-handle/_index.scss index b0bf8a7134..725366d14f 100644 --- a/packages/lumx-core/src/scss/components/drag-handle/_index.scss +++ b/packages/lumx-core/src/scss/components/drag-handle/_index.scss @@ -2,6 +2,6 @@ Drag handle ========================================================================== */ -.#{$lumx-base-prefix}-drag-handle { +.lumx-drag-handle { cursor: move; } diff --git a/packages/lumx-core/src/scss/components/dropdown/_index.scss b/packages/lumx-core/src/scss/components/dropdown/_index.scss index ec30cb0117..8e373af58e 100644 --- a/packages/lumx-core/src/scss/components/dropdown/_index.scss +++ b/packages/lumx-core/src/scss/components/dropdown/_index.scss @@ -4,7 +4,7 @@ Dropdown ========================================================================== */ -.#{$lumx-base-prefix}-dropdown { +.lumx-dropdown { z-index: map.get($lumx-base-layers, "high"); &--has-toggle { diff --git a/packages/lumx-core/src/scss/components/expansion-panel/_index.scss b/packages/lumx-core/src/scss/components/expansion-panel/_index.scss index e23fb79115..5e54427ff0 100644 --- a/packages/lumx-core/src/scss/components/expansion-panel/_index.scss +++ b/packages/lumx-core/src/scss/components/expansion-panel/_index.scss @@ -2,7 +2,7 @@ Expansion panel ========================================================================== */ -.#{$lumx-base-prefix}-expansion-panel { +.lumx-expansion-panel { $self: &; border-radius: $lumx-expansion-panel-radius; diff --git a/packages/lumx-core/src/scss/components/flag/_index.scss b/packages/lumx-core/src/scss/components/flag/_index.scss index d9942fee6b..3e0e63332b 100644 --- a/packages/lumx-core/src/scss/components/flag/_index.scss +++ b/packages/lumx-core/src/scss/components/flag/_index.scss @@ -5,7 +5,7 @@ Flag ========================================================================== */ -.#{$lumx-base-prefix}-flag { +.lumx-flag { display: inline-flex; align-items: center; height: map.get($lumx-sizes, lumx-base-const("size", "XS")); @@ -26,11 +26,11 @@ ========================================================================== */ @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-flag--color-#{$key} { + .lumx-flag--color-#{$key} { border: 2px solid lumx-color-variant($key, "L4"); - .#{$lumx-base-prefix}-flag__label, - .#{$lumx-base-prefix}-flag__icon { + .lumx-flag__label, + .lumx-flag__icon { @if $key == "dark" or $key == "yellow" { color: lumx-color-variant("dark", "L1"); } @else { diff --git a/packages/lumx-core/src/scss/components/flex-box/_index.scss b/packages/lumx-core/src/scss/components/flex-box/_index.scss index a7ed8f2c91..ea28e93adc 100644 --- a/packages/lumx-core/src/scss/components/flex-box/_index.scss +++ b/packages/lumx-core/src/scss/components/flex-box/_index.scss @@ -5,16 +5,16 @@ /* Orientation ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--orientation-horizontal, -.#{$lumx-base-prefix}-flex-box--orientation-vertical { +.lumx-flex-box--orientation-horizontal, +.lumx-flex-box--orientation-vertical { display: flex; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal { +.lumx-flex-box--orientation-horizontal { flex-direction: row; } -.#{$lumx-base-prefix}-flex-box--orientation-vertical { +.lumx-flex-box--orientation-vertical { flex-direction: column; min-height: 0; } @@ -22,48 +22,48 @@ /* Alignment ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-top, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-left { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-top, +.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-left { align-items: flex-start; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-center, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-center { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-center, +.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-center { align-items: center; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--h-align-bottom, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--v-align-right { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--h-align-bottom, +.lumx-flex-box--orientation-vertical.lumx-flex-box--v-align-right { align-items: flex-end; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-left, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-top { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-left, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-top { justify-content: flex-start; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-center, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-center { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-center, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-center { justify-content: center; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-right, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-bottom { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-right, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-bottom { justify-content: flex-end; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-between, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-between { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-between, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-between { justify-content: space-between; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-around, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-around { +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-around, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-around { justify-content: space-around; } -.#{$lumx-base-prefix}-flex-box--orientation-horizontal.#{$lumx-base-prefix}-flex-box--v-align-space-evenly, -.#{$lumx-base-prefix}-flex-box--orientation-vertical.#{$lumx-base-prefix}-flex-box--h-align-space-evenly +.lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-evenly, +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-evenly { justify-content: space-evenly; } @@ -71,62 +71,62 @@ /* Wrap ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--wrap { +.lumx-flex-box--wrap { flex-wrap: wrap; } /* Fill space ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--fill-space { +.lumx-flex-box--fill-space { flex: 1 1 auto; } /* No shrink ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--no-shrink { +.lumx-flex-box--no-shrink { flex-shrink: 0; } /* Margin ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--margin-auto-top { +.lumx-flex-box--margin-auto-top { margin-top: auto; } -.#{$lumx-base-prefix}-flex-box--margin-auto-right { +.lumx-flex-box--margin-auto-right { margin-right: auto; } -.#{$lumx-base-prefix}-flex-box--margin-auto-bottom { +.lumx-flex-box--margin-auto-bottom { margin-bottom: auto; } -.#{$lumx-base-prefix}-flex-box--margin-auto-left { +.lumx-flex-box--margin-auto-left { margin-left: auto; } /* Gap ========================================================================== */ -.#{$lumx-base-prefix}-flex-box--gap-tiny { +.lumx-flex-box--gap-tiny { gap: $lumx-spacing-unit-tiny; } -.#{$lumx-base-prefix}-flex-box--gap-regular { +.lumx-flex-box--gap-regular { gap: $lumx-spacing-unit; } -.#{$lumx-base-prefix}-flex-box--gap-medium { +.lumx-flex-box--gap-medium { gap: $lumx-spacing-unit-medium; } -.#{$lumx-base-prefix}-flex-box--gap-big { +.lumx-flex-box--gap-big { gap: $lumx-spacing-unit-big; } -.#{$lumx-base-prefix}-flex-box--gap-huge { +.lumx-flex-box--gap-huge { gap: $lumx-spacing-unit-huge; } diff --git a/packages/lumx-core/src/scss/components/generic-block/_index.scss b/packages/lumx-core/src/scss/components/generic-block/_index.scss index 29f9d412cc..c44f468924 100644 --- a/packages/lumx-core/src/scss/components/generic-block/_index.scss +++ b/packages/lumx-core/src/scss/components/generic-block/_index.scss @@ -2,7 +2,7 @@ Generic Block ========================================================================== */ -.#{$lumx-base-prefix}-generic-block { +.lumx-generic-block { &__content { // Prevent blocks in content from overflowing overflow: clip; diff --git a/packages/lumx-core/src/scss/components/grid-column/_index.scss b/packages/lumx-core/src/scss/components/grid-column/_index.scss index dc2739d8fa..56d970e292 100644 --- a/packages/lumx-core/src/scss/components/grid-column/_index.scss +++ b/packages/lumx-core/src/scss/components/grid-column/_index.scss @@ -4,7 +4,7 @@ Grid Column ========================================================================== */ -.#{$lumx-base-prefix}-grid-column { +.lumx-grid-column { --lumx-grid-column-gap: var(--lumx-spacing-unit-regular); --lumx-grid-column-columns: 1; --lumx-grid-column-item-min-width: 100%; diff --git a/packages/lumx-core/src/scss/components/grid/_index.scss b/packages/lumx-core/src/scss/components/grid/_index.scss index 0c7d355344..a043e55c1b 100644 --- a/packages/lumx-core/src/scss/components/grid/_index.scss +++ b/packages/lumx-core/src/scss/components/grid/_index.scss @@ -5,7 +5,7 @@ Grid ========================================================================== */ -.#{$lumx-base-prefix}-grid { +.lumx-grid { display: flex; &--orientation-horizontal { @@ -20,65 +20,65 @@ /* Grid wrap ========================================================================== */ -.#{$lumx-base-prefix}-grid--wrap-nowrap { +.lumx-grid--wrap-nowrap { flex-wrap: nowrap; } -.#{$lumx-base-prefix}-grid--wrap-wrap { +.lumx-grid--wrap-wrap { flex-wrap: wrap; } -.#{$lumx-base-prefix}-grid--wrap-wrap-reverse { +.lumx-grid--wrap-wrap-reverse { flex-wrap: wrap-reverse; } /* Grid alignment ========================================================================== */ -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-top, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-left { +.lumx-grid--orientation-horizontal.lumx-grid--h-align-top, +.lumx-grid--orientation-vertical.lumx-grid--v-align-left { align-items: flex-start; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-center, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-center { +.lumx-grid--orientation-horizontal.lumx-grid--h-align-center, +.lumx-grid--orientation-vertical.lumx-grid--v-align-center { align-items: center; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--h-align-bottom, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--v-align-right { +.lumx-grid--orientation-horizontal.lumx-grid--h-align-bottom, +.lumx-grid--orientation-vertical.lumx-grid--v-align-right { align-items: flex-end; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-left, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-top { +.lumx-grid--orientation-horizontal.lumx-grid--v-align-left, +.lumx-grid--orientation-vertical.lumx-grid--h-align-top { justify-content: flex-start; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-center, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-center { +.lumx-grid--orientation-horizontal.lumx-grid--v-align-center, +.lumx-grid--orientation-vertical.lumx-grid--h-align-center { justify-content: center; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-right, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-bottom { +.lumx-grid--orientation-horizontal.lumx-grid--v-align-right, +.lumx-grid--orientation-vertical.lumx-grid--h-align-bottom { justify-content: flex-end; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-space-around, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-space-around { +.lumx-grid--orientation-horizontal.lumx-grid--v-align-space-around, +.lumx-grid--orientation-vertical.lumx-grid--h-align-space-around { justify-content: space-around; } -.#{$lumx-base-prefix}-grid--orientation-horizontal.#{$lumx-base-prefix}-grid--v-align-space-between, -.#{$lumx-base-prefix}-grid--orientation-vertical.#{$lumx-base-prefix}-grid--h-align-space-between { +.lumx-grid--orientation-horizontal.lumx-grid--v-align-space-between, +.lumx-grid--orientation-vertical.lumx-grid--h-align-space-between { justify-content: space-between; } /* Grid item ========================================================================== */ -.#{$lumx-base-prefix}-grid-item { +.lumx-grid-item { position: relative; flex: 1 1 auto; @@ -99,7 +99,7 @@ ========================================================================== */ @for $i from 1 through 12 { - .#{$lumx-base-prefix}-grid-item--order-#{$i} { + .lumx-grid-item--order-#{$i} { order: $i; } } @@ -107,26 +107,26 @@ /* Grid spacings ========================================================================== */ -.#{$lumx-base-prefix}-grid--gutter-regular { +.lumx-grid--gutter-regular { margin: 0 (math.div($lumx-spacing-unit, 2) * -1); - & > .#{$lumx-base-prefix}-grid-item { + & > .lumx-grid-item { padding: 0 math.div($lumx-spacing-unit, 2); } } -.#{$lumx-base-prefix}-grid--gutter-big { +.lumx-grid--gutter-big { margin: 0 ($lumx-spacing-unit * -1); - & > .#{$lumx-base-prefix}-grid-item { + & > .lumx-grid-item { padding: 0 $lumx-spacing-unit; } } -.#{$lumx-base-prefix}-grid--gutter-huge { +.lumx-grid--gutter-huge { margin: 0 ($lumx-spacing-unit * 1.5) * -1; - & > .#{$lumx-base-prefix}-grid-item { + & > .lumx-grid-item { padding: 0 $lumx-spacing-unit * 1.5; } } @@ -135,12 +135,12 @@ ========================================================================== */ @for $i from 1 through 12 { - .#{$lumx-base-prefix}-grid--orientation-horizontal > .#{$lumx-base-prefix}-grid-item--width-#{$i} { + .lumx-grid--orientation-horizontal > .lumx-grid-item--width-#{$i} { flex: string.unquote("0 0 #{math.div(100, 12) * $i + "%"}"); max-width: #{math.div(100, 12) * $i + "%"}; } - .#{$lumx-base-prefix}-grid--orientation-vertical > .#{$lumx-base-prefix}-grid-item--width-#{$i} { + .lumx-grid--orientation-vertical > .lumx-grid-item--width-#{$i} { flex: string.unquote("0 0 #{math.div(100, 12) * $i + "%"}"); max-height: #{math.div(100, 12) * $i + "%"}; } diff --git a/packages/lumx-core/src/scss/components/icon/_index.scss b/packages/lumx-core/src/scss/components/icon/_index.scss index bad2d07622..0365de996f 100644 --- a/packages/lumx-core/src/scss/components/icon/_index.scss +++ b/packages/lumx-core/src/scss/components/icon/_index.scss @@ -4,7 +4,7 @@ Icon ========================================================================== */ -.#{$lumx-base-prefix}-icon { +.lumx-icon { &--no-shape { display: block; } @@ -63,13 +63,13 @@ ========================================================================== */ @each $size-key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-icon--no-shape.#{$lumx-base-prefix}-icon--size-#{$size-key} { + .lumx-icon--no-shape.lumx-icon--size-#{$size-key} { @include lumx-icon-size($size-key, false); } } @each $size-key, $size in $lumx-icon-has-shape-size-map { - .#{$lumx-base-prefix}-icon--has-shape.#{$lumx-base-prefix}-icon--size-#{$size-key} { + .lumx-icon--has-shape.lumx-icon--size-#{$size-key} { @include lumx-icon-size($size-key, true); } } @@ -78,24 +78,24 @@ ========================================================================== */ @each $color-key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-icon--color-#{$color-key} { - &.#{$lumx-base-prefix}-icon--no-shape { + .lumx-icon--color-#{$color-key} { + &.lumx-icon--no-shape { @include lumx-icon-color($color-key, false); } - &.#{$lumx-base-prefix}-icon--has-shape { + &.lumx-icon--has-shape { @include lumx-icon-color($color-key, true, lumx-base-const("theme", "LIGHT")); - &.#{$lumx-base-prefix}-icon--theme-dark { + &.lumx-icon--theme-dark { @include lumx-icon-color($color-key, true, lumx-base-const("theme", "DARK")); } } } @each $color-variant in $lumx-color-variants { - .#{$lumx-base-prefix}-icon--color-#{$color-key}.#{$lumx-base-prefix}-icon--color-variant-#{$color-variant} { + .lumx-icon--color-#{$color-key}.lumx-icon--color-variant-#{$color-variant} { @if $color-key == "yellow" { - &.#{$lumx-base-prefix}-icon--has-shape { + &.lumx-icon--has-shape { color: lumx-color-variant("dark", "L1"); } } diff --git a/packages/lumx-core/src/scss/components/image-block/_index.scss b/packages/lumx-core/src/scss/components/image-block/_index.scss index fb0e3cffc9..221a17d65a 100644 --- a/packages/lumx-core/src/scss/components/image-block/_index.scss +++ b/packages/lumx-core/src/scss/components/image-block/_index.scss @@ -2,7 +2,7 @@ Image block ========================================================================== */ -.#{$lumx-base-prefix}-image-block { +.lumx-image-block { $self: &; position: relative; @@ -54,7 +54,7 @@ ========================================================================== */ @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-image-block--size-#{$key} { + .lumx-image-block--size-#{$key} { width: $size; } } diff --git a/packages/lumx-core/src/scss/components/image-lightbox/_index.scss b/packages/lumx-core/src/scss/components/image-lightbox/_index.scss index fb13a5e383..a9b9856c23 100644 --- a/packages/lumx-core/src/scss/components/image-lightbox/_index.scss +++ b/packages/lumx-core/src/scss/components/image-lightbox/_index.scss @@ -4,16 +4,16 @@ Image Lightbox ========================================================================== */ -.#{$lumx-base-prefix}-image-lightbox { +.lumx-image-lightbox { // Remove lightbox animation & transition (use view transition instead) @supports (view-transition-name: name) { - &.#{$lumx-base-prefix}-lightbox { + &.lumx-lightbox { transition: none; animation: none; } } - .#{$lumx-base-prefix}-lightbox__wrapper { + .lumx-lightbox__wrapper { inset: 0; } @@ -52,14 +52,14 @@ } // Crop & scale transitioning pair of trigger image + opening image -::view-transition-image-pair(#{$lumx-base-prefix}-image-lightbox) { +::view-transition-image-pair(lumx-image-lightbox) { overflow: hidden; } -::view-transition-old(#{$lumx-base-prefix}-image-lightbox), -::view-transition-new(#{$lumx-base-prefix}-image-lightbox) { +::view-transition-old(lumx-image-lightbox), +::view-transition-new(lumx-image-lightbox) { height: 100%; } -::view-transition-group(#{$lumx-base-prefix}-image-lightbox) { +::view-transition-group(lumx-image-lightbox) { animation-duration: $lumx-lightbox-transition-duration; @media (prefers-reduced-motion: reduce) { diff --git a/packages/lumx-core/src/scss/components/inline-list/_index.scss b/packages/lumx-core/src/scss/components/inline-list/_index.scss index 36cbea91a5..c3000e12da 100644 --- a/packages/lumx-core/src/scss/components/inline-list/_index.scss +++ b/packages/lumx-core/src/scss/components/inline-list/_index.scss @@ -4,7 +4,7 @@ Inline list ========================================================================== */ -.#{$lumx-base-prefix}-inline-list { +.lumx-inline-list { display: flex; align-items: center; list-style: none; diff --git a/packages/lumx-core/src/scss/components/input-helper/_index.scss b/packages/lumx-core/src/scss/components/input-helper/_index.scss index fd2e57e364..1a5217831d 100644 --- a/packages/lumx-core/src/scss/components/input-helper/_index.scss +++ b/packages/lumx-core/src/scss/components/input-helper/_index.scss @@ -4,7 +4,7 @@ Input helper ========================================================================== */ -.#{$lumx-base-prefix}-input-helper { +.lumx-input-helper { $self: &; &--theme-light { diff --git a/packages/lumx-core/src/scss/components/input-label/_index.scss b/packages/lumx-core/src/scss/components/input-label/_index.scss index 6354e6e809..4e3d406011 100644 --- a/packages/lumx-core/src/scss/components/input-label/_index.scss +++ b/packages/lumx-core/src/scss/components/input-label/_index.scss @@ -2,7 +2,7 @@ Input label ========================================================================== */ -.#{$lumx-base-prefix}-input-label { +.lumx-input-label { &--is-required::before { margin-right: $lumx-spacing-unit-tiny; font-weight: 700; @@ -24,7 +24,7 @@ /** When there is a custom typography, we create a more specific selector so that it overrides the typo added by the mixin `lumx-input-label` */ &--has-custom-typography { @each $key, $style in $lumx-typography-interface { - &.#{$lumx-base-prefix}-typography-#{$key} { + &.lumx-typography-#{$key} { @include lumx-typography($key); } } diff --git a/packages/lumx-core/src/scss/components/lightbox/_index.scss b/packages/lumx-core/src/scss/components/lightbox/_index.scss index 43e5fc672b..e6796e3624 100644 --- a/packages/lumx-core/src/scss/components/lightbox/_index.scss +++ b/packages/lumx-core/src/scss/components/lightbox/_index.scss @@ -4,7 +4,7 @@ Lightbox ========================================================================== */ -.#{$lumx-base-prefix}-lightbox { +.lumx-lightbox { position: fixed; top: 0; right: 0; diff --git a/packages/lumx-core/src/scss/components/link-preview/_index.scss b/packages/lumx-core/src/scss/components/link-preview/_index.scss index 6e0dfe5378..775e8a145f 100644 --- a/packages/lumx-core/src/scss/components/link-preview/_index.scss +++ b/packages/lumx-core/src/scss/components/link-preview/_index.scss @@ -4,7 +4,7 @@ Web bookmark ========================================================================== */ -.#{$lumx-base-prefix}-link-preview { +.lumx-link-preview { $self: &; &--size-big { diff --git a/packages/lumx-core/src/scss/components/link/_index.scss b/packages/lumx-core/src/scss/components/link/_index.scss index ffc8637686..12bf9d41bd 100644 --- a/packages/lumx-core/src/scss/components/link/_index.scss +++ b/packages/lumx-core/src/scss/components/link/_index.scss @@ -2,7 +2,7 @@ Index ========================================================================== */ -.#{$lumx-base-prefix}-link { +.lumx-link { @include lumx-link; &:disabled, @@ -11,8 +11,8 @@ } // Fix icon alignment - & > .#{$lumx-base-prefix}-icon, - &__content > .#{$lumx-base-prefix}-icon + & > .lumx-icon, + &__content > .lumx-icon { &, & svg { display: inline; @@ -25,12 +25,12 @@ ========================================================================== */ @each $color-key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-link.#{$lumx-base-prefix}-link--color-#{$color-key} { + .lumx-link.lumx-link--color-#{$color-key} { @include lumx-link-color($color-key, "N"); } @each $color-variant in $lumx-color-variants { - .#{$lumx-base-prefix}-link.#{$lumx-base-prefix}-link--color-#{$color-key}.#{$lumx-base-prefix}-link--color-variant-#{$color-variant} { + .lumx-link.lumx-link--color-#{$color-key}.lumx-link--color-variant-#{$color-variant} { @include lumx-link-color($color-key, $color-variant); } } diff --git a/packages/lumx-core/src/scss/components/list/_index.scss b/packages/lumx-core/src/scss/components/list/_index.scss index e8fe03dc9b..1cd64fc4b3 100644 --- a/packages/lumx-core/src/scss/components/list/_index.scss +++ b/packages/lumx-core/src/scss/components/list/_index.scss @@ -2,7 +2,7 @@ List ========================================================================== */ -.#{$lumx-base-prefix}-list { +.lumx-list { @include lumx-list; } @@ -10,17 +10,17 @@ ========================================================================== */ @each $key, $size in $lumx-list-item-sizes { - .#{$lumx-base-prefix}-list-item--size-#{$key} { - .#{$lumx-base-prefix}-list-item__wrapper, - .#{$lumx-base-prefix}-list-item__link { + .lumx-list-item--size-#{$key} { + .lumx-list-item__wrapper, + .lumx-list-item__link { @include lumx-list-item($key); } - .#{$lumx-base-prefix}-list-item__before { + .lumx-list-item__before { @include lumx-list-item-before($key); } - .#{$lumx-base-prefix}-list-item__after { + .lumx-list-item__after { @include lumx-list-item-after($key); } } @@ -29,7 +29,7 @@ /* Item link ========================================================================== */ -.#{$lumx-base-prefix}-list-item { +.lumx-list-item { &__link { @include lumx-list-item-clickable; } @@ -51,13 +51,13 @@ /* Item spacing ========================================================================== */ -.#{$lumx-base-prefix}-list-item__link, -.#{$lumx-base-prefix}-list-item__wrapper { - .#{$lumx-base-prefix}-list--item-padding-big & { +.lumx-list-item__link, +.lumx-list-item__wrapper { + .lumx-list--item-padding-big & { @include lumx-list-item-padding("big"); } - .#{$lumx-base-prefix}-list--item-padding-huge & { + .lumx-list--item-padding-huge & { @include lumx-list-item-padding("huge"); } } @@ -65,25 +65,25 @@ /* Item content ========================================================================== */ -.#{$lumx-base-prefix}-list-item__content { +.lumx-list-item__content { @include lumx-list-item-content; } /* Subheader ========================================================================== */ -.#{$lumx-base-prefix}-list-subheader { +.lumx-list-subheader { @include lumx-list-subheader; i { @include lumx-list-subheader-icon; } - .#{$lumx-base-prefix}-list--item-padding-big & { + .lumx-list--item-padding-big & { @include lumx-list-item-padding("big"); } - .#{$lumx-base-prefix}-list--item-padding-huge & { + .lumx-list--item-padding-huge & { @include lumx-list-item-padding("huge"); } } @@ -91,6 +91,6 @@ /* Divider ========================================================================== */ -.#{$lumx-base-prefix}-list-divider { +.lumx-list-divider { @include lumx-list-divider; } diff --git a/packages/lumx-core/src/scss/components/message/_index.scss b/packages/lumx-core/src/scss/components/message/_index.scss index 9bbd8addc7..12974d7c28 100644 --- a/packages/lumx-core/src/scss/components/message/_index.scss +++ b/packages/lumx-core/src/scss/components/message/_index.scss @@ -2,7 +2,7 @@ Message ========================================================================== */ -.#{$lumx-base-prefix}-message { +.lumx-message { display: flex; align-items: flex-start; @@ -32,8 +32,8 @@ ========================================================================== */ @each $color in $lumx-notification-color-palette { - .#{$lumx-base-prefix}-message--color-#{$color} { - &.#{$lumx-base-prefix}-message--has-background { + .lumx-message--color-#{$color} { + &.lumx-message--has-background { background-color: lumx-color-variant($color, "L6"); } } diff --git a/packages/lumx-core/src/scss/components/mosaic/_index.scss b/packages/lumx-core/src/scss/components/mosaic/_index.scss index c784794450..9679dc0f62 100644 --- a/packages/lumx-core/src/scss/components/mosaic/_index.scss +++ b/packages/lumx-core/src/scss/components/mosaic/_index.scss @@ -4,7 +4,7 @@ Mosaic ========================================================================== */ -.#{$lumx-base-prefix}-mosaic { +.lumx-mosaic { $self: &; position: relative; diff --git a/packages/lumx-core/src/scss/components/navigation/_index.scss b/packages/lumx-core/src/scss/components/navigation/_index.scss index dae5df9b95..f02500a207 100644 --- a/packages/lumx-core/src/scss/components/navigation/_index.scss +++ b/packages/lumx-core/src/scss/components/navigation/_index.scss @@ -6,7 +6,7 @@ /* Navigation Item ========================================================================== */ -.#{$lumx-base-prefix}-navigation-item { +.lumx-navigation-item { display: flex; flex-direction: row; align-items: center; @@ -54,11 +54,11 @@ // Variants on emphasis, theme and states @each $emphasis, $selector in ( - "emphasis-low": ".#{$lumx-base-prefix}-navigation-item__link", - "emphasis-selected": ".#{$lumx-base-prefix}-navigation-item__link--is-selected", + "emphasis-low": ".lumx-navigation-item__link", + "emphasis-selected": ".lumx-navigation-item__link--is-selected", ) { @each $theme in ("theme-light", "theme-dark") { - .#{$lumx-base-prefix}-navigation-item--#{$theme} > #{$selector} { + .lumx-navigation-item--#{$theme} > #{$selector} { // Default state @include lumx-navigation-link-colors( $emphasis, @@ -112,7 +112,7 @@ /* Navigation Section ========================================================================== */ -.#{$lumx-base-prefix}-navigation-section { +.lumx-navigation-section { flex-direction: column; align-items: normal; @@ -129,30 +129,30 @@ /* Navigation ========================================================================== */ -.#{$lumx-base-prefix}-navigation { +.lumx-navigation { padding: 0; margin: 0; list-style: none; outline: none; &--orientation-horizontal { - .#{$lumx-base-prefix}-navigation__list { + .lumx-navigation__list { display: flex; flex-direction: row; gap: $lumx-spacing-unit; overflow: hidden; } - .#{$lumx-base-prefix}-navigation-item { + .lumx-navigation-item { max-width: 216px; } - .#{$lumx-base-prefix}-navigation-section__drawer--popover { + .lumx-navigation-section__drawer--popover { flex-direction: column; min-width: $lumx-size-xxl; max-width: 400px; padding: $lumx-spacing-unit-regular; - .#{$lumx-base-prefix}-navigation-item { + .lumx-navigation-item { width: 100%; max-width: 100%; } diff --git a/packages/lumx-core/src/scss/components/notification-block/_index.scss b/packages/lumx-core/src/scss/components/notification-block/_index.scss index bda776b418..47a92d9e73 100644 --- a/packages/lumx-core/src/scss/components/notification-block/_index.scss +++ b/packages/lumx-core/src/scss/components/notification-block/_index.scss @@ -4,7 +4,7 @@ Notification block ========================================================================== */ -.#{$lumx-base-prefix}-notification-block { +.lumx-notification-block { display: flex; align-items: flex-start; diff --git a/packages/lumx-core/src/scss/components/notification/_index.scss b/packages/lumx-core/src/scss/components/notification/_index.scss index ede01cebb6..0825d790f9 100644 --- a/packages/lumx-core/src/scss/components/notification/_index.scss +++ b/packages/lumx-core/src/scss/components/notification/_index.scss @@ -4,7 +4,7 @@ Notification ========================================================================== */ -.#{$lumx-base-prefix}-notification { +.lumx-notification { $self: &; @include lumx-elevation(4); @@ -66,7 +66,7 @@ ========================================================================== */ @each $color in $lumx-notification-color-palette { - .#{$lumx-base-prefix}-notification--color-#{$color} .#{$lumx-base-prefix}-notification__icon { + .lumx-notification--color-#{$color} .lumx-notification__icon { background-color: lumx-color-variant($color, "N"); @if $color == "yellow" { diff --git a/packages/lumx-core/src/scss/components/popover/_index.scss b/packages/lumx-core/src/scss/components/popover/_index.scss index 5177271a1e..ecef6144ba 100644 --- a/packages/lumx-core/src/scss/components/popover/_index.scss +++ b/packages/lumx-core/src/scss/components/popover/_index.scss @@ -5,7 +5,7 @@ Popover ========================================================================== */ -.#{$lumx-base-prefix}-popover { +.lumx-popover { $self: &; z-index: map.get($lumx-base-layers, "high"); @@ -79,7 +79,7 @@ ========================================================================== */ @each $depth, $shadow in $lumx-elevation-shadows { - .#{$lumx-base-prefix}-popover--elevation-#{$depth} { + .lumx-popover--elevation-#{$depth} { @include lumx-elevation-drop-shadow($depth); } } diff --git a/packages/lumx-core/src/scss/components/post-block/_index.scss b/packages/lumx-core/src/scss/components/post-block/_index.scss index 8ecbd5f089..af49036d97 100644 --- a/packages/lumx-core/src/scss/components/post-block/_index.scss +++ b/packages/lumx-core/src/scss/components/post-block/_index.scss @@ -2,7 +2,7 @@ Post block ========================================================================== */ -.#{$lumx-base-prefix}-post-block { +.lumx-post-block { $self: &; &--orientation-horizontal { diff --git a/packages/lumx-core/src/scss/components/progress-tracker/_index.scss b/packages/lumx-core/src/scss/components/progress-tracker/_index.scss index 1f5adfc52e..a21e9317b5 100644 --- a/packages/lumx-core/src/scss/components/progress-tracker/_index.scss +++ b/packages/lumx-core/src/scss/components/progress-tracker/_index.scss @@ -2,7 +2,7 @@ Progress tracker ========================================================================== */ -.#{$lumx-base-prefix}-progress-tracker { +.lumx-progress-tracker { position: relative; &__steps { @@ -37,7 +37,7 @@ /* Step ========================================================================== */ -.#{$lumx-base-prefix}-progress-tracker-step { +.lumx-progress-tracker-step { $self: &; display: flex; @@ -98,24 +98,24 @@ ========================================================================== */ // Hover state -.#{$lumx-base-prefix}-progress-tracker-step--is-clickable:hover { +.lumx-progress-tracker-step--is-clickable:hover { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); } // Active state -.#{$lumx-base-prefix}-progress-tracker-step--is-clickable:active { +.lumx-progress-tracker-step--is-clickable:active { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); } // Focus state -.#{$lumx-base-prefix}-progress-tracker-step[data-focus-visible-added] { +.lumx-progress-tracker-step[data-focus-visible-added] { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); } /* Step panel ========================================================================== */ -.#{$lumx-base-prefix}-step-panel { +.lumx-step-panel { display: none; outline: none; diff --git a/packages/lumx-core/src/scss/components/progress/_index.scss b/packages/lumx-core/src/scss/components/progress/_index.scss index 14e54ab73e..3106c2f4c2 100644 --- a/packages/lumx-core/src/scss/components/progress/_index.scss +++ b/packages/lumx-core/src/scss/components/progress/_index.scss @@ -4,7 +4,7 @@ Progress ========================================================================== */ -.#{$lumx-base-prefix}-progress { +.lumx-progress { &--variant-circular { width: $lumx-progress-circular-size; height: $lumx-progress-circular-size; @@ -14,7 +14,7 @@ /* Circular ========================================================================== */ -.#{$lumx-base-prefix}-progress-circular { +.lumx-progress-circular { position: relative; width: $lumx-progress-circular-size; height: $lumx-progress-circular-size; @@ -37,15 +37,15 @@ &--theme-light &__double-bounce1, &--theme-light &__double-bounce2, - .#{$lumx-base-prefix}-progress--theme-light &__double-bounce1, - .#{$lumx-base-prefix}-progress--theme-light &__double-bounce2 { + .lumx-progress--theme-light &__double-bounce1, + .lumx-progress--theme-light &__double-bounce2 { background-color: lumx-color-variant("primary", "L3"); } &--theme-dark &__double-bounce1, &--theme-dark &__double-bounce2, - .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce1, - .#{$lumx-base-prefix}-progress--theme-dark &__double-bounce2 { + .lumx-progress--theme-dark &__double-bounce1, + .lumx-progress--theme-dark &__double-bounce2 { background-color: lumx-color-variant("light", "L3"); } @@ -75,18 +75,18 @@ } &--theme-light &__path, - .#{$lumx-base-prefix}-progress--theme-light &__path { + .lumx-progress--theme-light &__path { stroke: lumx-color-variant("primary", "N"); } &--theme-dark &__path, - .#{$lumx-base-prefix}-progress--theme-dark &__path { + .lumx-progress--theme-dark &__path { stroke: lumx-color-variant("light", "N"); } /* Circular sizes */ @each $key, $size in $lumx-progress-circular-size-map { - &--size-#{$key}, &--size-#{$key} .#{$lumx-base-prefix}-progress-circular__svg { + &--size-#{$key}, &--size-#{$key} .lumx-progress-circular__svg { width: $size; height: $size; } @@ -130,7 +130,7 @@ /* Linear ========================================================================== */ -.#{$lumx-base-prefix}-progress-linear { +.lumx-progress-linear { position: relative; height: $lumx-progress-linear-size; overflow: hidden; @@ -147,15 +147,15 @@ &--theme-light &__line1, &--theme-light &__line2, - .#{$lumx-base-prefix}-progress--theme-light &__line1, - .#{$lumx-base-prefix}-progress--theme-light &__line2 { + .lumx-progress--theme-light &__line1, + .lumx-progress--theme-light &__line2 { background-color: lumx-color-variant("primary", "L3"); } &--theme-dark &__line1, &--theme-dark &__line2, - .#{$lumx-base-prefix}-progress--theme-dark &__line1, - .#{$lumx-base-prefix}-progress--theme-dark &__line2 { + .lumx-progress--theme-dark &__line1, + .lumx-progress--theme-dark &__line2 { background-color: lumx-color-variant("light", "L3"); } diff --git a/packages/lumx-core/src/scss/components/radio-button/_index.scss b/packages/lumx-core/src/scss/components/radio-button/_index.scss index 3969a78637..c1ca23981c 100644 --- a/packages/lumx-core/src/scss/components/radio-button/_index.scss +++ b/packages/lumx-core/src/scss/components/radio-button/_index.scss @@ -4,7 +4,7 @@ Radio button ========================================================================== */ -.#{$lumx-base-prefix}-radio-button { +.lumx-radio-button { $self: &; display: flex; @@ -75,80 +75,80 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-radio-button--is-disabled { - .#{$lumx-base-prefix}-radio-button__input-native { +.lumx-radio-button--is-disabled { + .lumx-radio-button__input-native { pointer-events: none; } - .#{$lumx-base-prefix}-radio-button__input-placeholder { + .lumx-radio-button__input-placeholder { @include lumx-state-disabled-input; } - &.#{$lumx-base-prefix}-radio-button--theme-light { - .#{$lumx-base-prefix}-radio-button__label, - .#{$lumx-base-prefix}-radio-button__helper { + &.lumx-radio-button--theme-light { + .lumx-radio-button__label, + .lumx-radio-button__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } } - &.#{$lumx-base-prefix}-radio-button--theme-dark { - .#{$lumx-base-prefix}-radio-button__label, - .#{$lumx-base-prefix}-radio-button__helper { + &.lumx-radio-button--theme-dark { + .lumx-radio-button__label, + .lumx-radio-button__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } } } // Hover state -.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native:hover -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { - .#{$lumx-base-prefix}-radio-button__input-background { +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native:hover ++ .lumx-radio-button__input-placeholder { + .lumx-radio-button__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native:hover -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { - .#{$lumx-base-prefix}-radio-button__input-background { +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native:hover ++ .lumx-radio-button__input-placeholder { + .lumx-radio-button__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); } } // Active state -.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native:active -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { - .#{$lumx-base-prefix}-radio-button__input-background { +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native:active ++ .lumx-radio-button__input-placeholder { + .lumx-radio-button__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native:active -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { - .#{$lumx-base-prefix}-radio-button__input-background { +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native:active ++ .lumx-radio-button__input-placeholder { + .lumx-radio-button__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); } } // Focus state -.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native[data-focus-visible-added] ++ .lumx-radio-button__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); } -.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-unchecked -.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked +.lumx-radio-button__input-native[data-focus-visible-added] ++ .lumx-radio-button__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); } -.#{$lumx-base-prefix}-radio-button--theme-light.#{$lumx-base-prefix}-radio-button--is-checked -.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { +.lumx-radio-button--theme-light.lumx-radio-button--is-checked +.lumx-radio-button__input-native[data-focus-visible-added] ++ .lumx-radio-button__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), @@ -157,9 +157,9 @@ ); } -.#{$lumx-base-prefix}-radio-button--theme-dark.#{$lumx-base-prefix}-radio-button--is-checked -.#{$lumx-base-prefix}-radio-button__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-radio-button__input-placeholder { +.lumx-radio-button--theme-dark.lumx-radio-button--is-checked +.lumx-radio-button__input-native[data-focus-visible-added] ++ .lumx-radio-button__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), @@ -171,7 +171,7 @@ /* Radio group ========================================================================== */ -.#{$lumx-base-prefix}-radio-group > .#{$lumx-base-prefix}-radio-button { +.lumx-radio-group > .lumx-radio-button { margin-bottom: $lumx-spacing-unit * 1.5; &:last-child { diff --git a/packages/lumx-core/src/scss/components/select/_index.scss b/packages/lumx-core/src/scss/components/select/_index.scss index 9c7a528d01..2cfba50f54 100644 --- a/packages/lumx-core/src/scss/components/select/_index.scss +++ b/packages/lumx-core/src/scss/components/select/_index.scss @@ -2,7 +2,7 @@ Select ========================================================================== */ -.#{$lumx-base-prefix}-select { +.lumx-select { $self: &; --lumx-text-field-wrapper-padding-vertical: @@ -153,31 +153,31 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-select--is-disabled { - .#{$lumx-base-prefix}-select__wrapper { +.lumx-select--is-disabled { + .lumx-select__wrapper { @include lumx-state-disabled-input; } - &.#{$lumx-base-prefix}-select--theme-light { - .#{$lumx-base-prefix}-select__label { + &.lumx-select--theme-light { + .lumx-select__label { @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } } - &.#{$lumx-base-prefix}-select--theme-dark { - .#{$lumx-base-prefix}-select__label { + &.lumx-select--theme-dark { + .lumx-select__label { @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } } } // Hover state -.#{$lumx-base-prefix}-select--theme-light { - .#{$lumx-base-prefix}-select__wrapper:hover { +.lumx-select--theme-light { + .lumx-select__wrapper:hover { @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT") @@ -192,12 +192,12 @@ } } -.#{$lumx-base-prefix}-select--theme-dark { - .#{$lumx-base-prefix}-select__wrapper:hover { +.lumx-select--theme-dark { + .lumx-select__wrapper:hover { @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK") @@ -213,11 +213,11 @@ } // Focus state -.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper, -.#{$lumx-base-prefix}-select--theme-light .#{$lumx-base-prefix}-select__wrapper:focus { +.lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper, +.lumx-select--theme-light .lumx-select__wrapper:focus { @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT") @@ -232,11 +232,11 @@ } } -.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-open .#{$lumx-base-prefix}-select__wrapper, -.#{$lumx-base-prefix}-select--theme-dark .#{$lumx-base-prefix}-select__wrapper:focus { +.lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper, +.lumx-select--theme-dark .lumx-select__wrapper:focus { @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK") @@ -254,42 +254,42 @@ /* Select validity ========================================================================== */ -.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--is-valid { - .#{$lumx-base-prefix}-select__wrapper { +.lumx-select--theme-light.lumx-select--is-valid { + .lumx-select__wrapper { @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-select__input-validity { + .lumx-select__input-validity { @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT")); } } -.#{$lumx-base-prefix}-select--theme-light.#{$lumx-base-prefix}-select--has-error { - .#{$lumx-base-prefix}-select__wrapper { +.lumx-select--theme-light.lumx-select--has-error { + .lumx-select__wrapper { @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-select__input-validity { + .lumx-select__input-validity { @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT")); } } -.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--is-valid { - .#{$lumx-base-prefix}-select__wrapper { +.lumx-select--theme-dark.lumx-select--is-valid { + .lumx-select__wrapper { @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-select__input-validity { + .lumx-select__input-validity { @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK")); } } -.#{$lumx-base-prefix}-select--theme-dark.#{$lumx-base-prefix}-select--has-error { - .#{$lumx-base-prefix}-select__wrapper { +.lumx-select--theme-dark.lumx-select--has-error { + .lumx-select__wrapper { @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-select__input-validity { + .lumx-select__input-validity { @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK")); } } diff --git a/packages/lumx-core/src/scss/components/side-navigation/_index.scss b/packages/lumx-core/src/scss/components/side-navigation/_index.scss index 9de7e8cdb4..a54df93c87 100644 --- a/packages/lumx-core/src/scss/components/side-navigation/_index.scss +++ b/packages/lumx-core/src/scss/components/side-navigation/_index.scss @@ -2,14 +2,14 @@ Side navigation ========================================================================== */ -.#{$lumx-base-prefix}-side-navigation { +.lumx-side-navigation { @include lumx-list; } /* Item ========================================================================== */ -.#{$lumx-base-prefix}-side-navigation-item { +.lumx-side-navigation-item { $self: &; @include lumx-side-navigation-item; @@ -60,11 +60,11 @@ /* Item link states ========================================================================== */ -.#{$lumx-base-prefix}-side-navigation-item .#{$lumx-base-prefix}-side-navigation-item__link { +.lumx-side-navigation-item .lumx-side-navigation-item__link { @include lumx-list-item-clickable; } -.#{$lumx-base-prefix}-side-navigation-item--is-selected > .#{$lumx-base-prefix}-side-navigation-item__link, -.#{$lumx-base-prefix}-side-navigation-item--is-selected > .#{$lumx-base-prefix}-side-navigation-item__wrapper > .#{$lumx-base-prefix}-side-navigation-item__link { +.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link, +.lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link { @include lumx-list-item-selected('side-navigation-item'); } diff --git a/packages/lumx-core/src/scss/components/skeleton/_index.scss b/packages/lumx-core/src/scss/components/skeleton/_index.scss index 3012670616..95bfeb70c2 100644 --- a/packages/lumx-core/src/scss/components/skeleton/_index.scss +++ b/packages/lumx-core/src/scss/components/skeleton/_index.scss @@ -22,7 +22,7 @@ /* Circle ========================================================================== */ -.#{$lumx-base-prefix}-skeleton-circle { +.lumx-skeleton-circle { border-radius: 50%; &--theme-light { @@ -35,14 +35,14 @@ } @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-skeleton-circle--size-#{$key} { + .lumx-skeleton-circle--size-#{$key} { width: map.get($lumx-sizes, $key); height: map.get($lumx-sizes, $key); } } @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-skeleton-circle--color-#{$key} { + .lumx-skeleton-circle--color-#{$key} { background-color: lumx-color-variant($key, "L5"); } } @@ -50,7 +50,7 @@ /* Rectangle ========================================================================== */ -.#{$lumx-base-prefix}-skeleton-rectangle { +.lumx-skeleton-rectangle { &--variant-rounded { border-radius: var(--lumx-border-radius); } @@ -65,27 +65,27 @@ } @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-skeleton-rectangle--width-#{$key} { + .lumx-skeleton-rectangle--width-#{$key} { width: map.get($lumx-sizes, $key); } - .#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} { + .lumx-skeleton-rectangle--height-#{$key} { height: map.get($lumx-sizes, $key); } - .#{$lumx-base-prefix}-skeleton-rectangle--variant-pill.#{$lumx-base-prefix}-skeleton-rectangle--height-#{$key} { + .lumx-skeleton-rectangle--variant-pill.lumx-skeleton-rectangle--height-#{$key} { border-radius: math.div(map.get($lumx-sizes, $key), 2); } } @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio { - .#{$lumx-base-prefix}-skeleton-rectangle--aspect-ratio-#{$key} .#{$lumx-base-prefix}-skeleton-rectangle__inner { + .lumx-skeleton-rectangle--aspect-ratio-#{$key} .lumx-skeleton-rectangle__inner { padding-top: $aspect-ratio; } } @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-skeleton-rectangle--color-#{$key} { + .lumx-skeleton-rectangle--color-#{$key} { background-color: lumx-color-variant($key, "L5"); } } @@ -105,7 +105,7 @@ $typography-skeleton-size: ( "overline": 8px, ); -.#{$lumx-base-prefix}-skeleton-typography { +.lumx-skeleton-typography { $self: &; display: flex; @@ -127,17 +127,17 @@ $typography-skeleton-size: ( } @each $key, $style in $lumx-typography-interface { - .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} { + .lumx-skeleton-typography--typography-#{$key} { height: map.get(map.get($lumx-typography-interface, $key), "line-height"); } - .#{$lumx-base-prefix}-skeleton-typography--typography-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner { + .lumx-skeleton-typography--typography-#{$key} .lumx-skeleton-typography__inner { height: map.get($typography-skeleton-size, $key); } } @each $key, $color in $lumx-color-palette { - .#{$lumx-base-prefix}-skeleton-typography--color-#{$key} .#{$lumx-base-prefix}-skeleton-typography__inner { + .lumx-skeleton-typography--color-#{$key} .lumx-skeleton-typography__inner { background-color: lumx-color-variant($key, "L5"); } } diff --git a/packages/lumx-core/src/scss/components/slider/_index.scss b/packages/lumx-core/src/scss/components/slider/_index.scss index bbee7132e6..a2ce9a4de7 100644 --- a/packages/lumx-core/src/scss/components/slider/_index.scss +++ b/packages/lumx-core/src/scss/components/slider/_index.scss @@ -5,7 +5,7 @@ Slider ========================================================================== */ -.#{$lumx-base-prefix}-slider { +.lumx-slider { $self: &; user-select: none; @@ -146,8 +146,8 @@ ========================================================================== */ // Hover state -.#{$lumx-base-prefix}-slider__handle:hover { - .#{$lumx-base-prefix}-slider--theme-light & { +.lumx-slider__handle:hover { + .lumx-slider--theme-light & { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -156,7 +156,7 @@ ); } - .#{$lumx-base-prefix}-slider--theme-dark & { + .lumx-slider--theme-dark & { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -167,8 +167,8 @@ } // Active state -.#{$lumx-base-prefix}-slider__handle:active { - .#{$lumx-base-prefix}-slider--theme-light & { +.lumx-slider__handle:active { + .lumx-slider--theme-light & { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -177,7 +177,7 @@ ); } - .#{$lumx-base-prefix}-slider--theme-dark & { + .lumx-slider--theme-dark & { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -188,8 +188,8 @@ } // Focus state -.#{$lumx-base-prefix}-slider__handle[data-focus-visible-added] { - .#{$lumx-base-prefix}-slider--theme-light & { +.lumx-slider__handle[data-focus-visible-added] { + .lumx-slider--theme-light & { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), @@ -198,7 +198,7 @@ ); } - .#{$lumx-base-prefix}-slider--theme-dark & { + .lumx-slider--theme-dark & { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), diff --git a/packages/lumx-core/src/scss/components/slideshow/_index.scss b/packages/lumx-core/src/scss/components/slideshow/_index.scss index 753d2f97be..f2ce860e1b 100644 --- a/packages/lumx-core/src/scss/components/slideshow/_index.scss +++ b/packages/lumx-core/src/scss/components/slideshow/_index.scss @@ -4,7 +4,7 @@ Slideshow ========================================================================== */ -.#{$lumx-base-prefix}-slideshow { +.lumx-slideshow { $self: &; outline: none; @@ -52,7 +52,7 @@ /* Slideshow item group ========================================================================== */ -.#{$lumx-base-prefix}-slideshow-item-group { +.lumx-slideshow-item-group { display: flex; overflow: hidden; max-width: 100%; @@ -62,15 +62,15 @@ /* Slideshow item ========================================================================== */ -.#{$lumx-base-prefix}-slideshow-item { - .#{$lumx-base-prefix}-slideshow--fill-height & { +.lumx-slideshow-item { + .lumx-slideshow--fill-height & { display: flex; } } @for $i from 1 through 12 { - .#{$lumx-base-prefix}-slideshow--group-by-#{$i} .#{$lumx-base-prefix}-slideshow-item { + .lumx-slideshow--group-by-#{$i} .lumx-slideshow-item { flex: 0 0 #{math.div(100, $i) + "%"}; max-width: #{math.div(100, $i) + "%"}; overflow: hidden; @@ -79,7 +79,7 @@ /* Slideshow controls ========================================================================== */ -.#{$lumx-base-prefix}-slideshow-controls { +.lumx-slideshow-controls { $item-max-count: 6; $item-size: $lumx-spacing-unit; $item-margin-inline: 2px; @@ -147,7 +147,7 @@ width: $item-size*2; border-radius: $lumx-border-radius; border-width: 0; - + &[data-focus-visible-added] { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary"); } diff --git a/packages/lumx-core/src/scss/components/switch/_index.scss b/packages/lumx-core/src/scss/components/switch/_index.scss index 0602c1e212..eb6359141b 100644 --- a/packages/lumx-core/src/scss/components/switch/_index.scss +++ b/packages/lumx-core/src/scss/components/switch/_index.scss @@ -4,7 +4,7 @@ Switch ========================================================================== */ -.#{$lumx-base-prefix}-switch { +.lumx-switch { $self: &; display: flex; @@ -111,51 +111,51 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-switch--is-disabled { - .#{$lumx-base-prefix}-switch__input-native { +.lumx-switch--is-disabled { + .lumx-switch__input-native { pointer-events: none; } - .#{$lumx-base-prefix}-switch__input-placeholder { + .lumx-switch__input-placeholder { @include lumx-state-disabled-input; } - &.#{$lumx-base-prefix}-switch--theme-light { - .#{$lumx-base-prefix}-switch__label, - .#{$lumx-base-prefix}-switch__helper { + &.lumx-switch--theme-light { + .lumx-switch__label, + .lumx-switch__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } } - &.#{$lumx-base-prefix}-switch--theme-dark { - .#{$lumx-base-prefix}-switch__label, - .#{$lumx-base-prefix}-switch__helper { + &.lumx-switch--theme-dark { + .lumx-switch__label, + .lumx-switch__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } } } // Hover state -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native:hover -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-light.lumx-switch--is-unchecked +.lumx-switch__input-native:hover ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native:hover -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-dark.lumx-switch--is-unchecked +.lumx-switch__input-native:hover ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); } } -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native:hover -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-light.lumx-switch--is-checked +.lumx-switch__input-native:hover ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -165,10 +165,10 @@ } } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native:hover -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-dark.lumx-switch--is-checked +.lumx-switch__input-native:hover ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state( lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "HIGH"), @@ -179,26 +179,26 @@ } // Active state -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native:active -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-light.lumx-switch--is-unchecked +.lumx-switch__input-native:active ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); } } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native:active -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-dark.lumx-switch--is-unchecked +.lumx-switch__input-native:active ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); } } -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native:active -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-light.lumx-switch--is-checked +.lumx-switch__input-native:active ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -208,10 +208,10 @@ } } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native:active -+ .#{$lumx-base-prefix}-switch__input-placeholder { - .#{$lumx-base-prefix}-switch__input-background { +.lumx-switch--theme-dark.lumx-switch--is-checked +.lumx-switch__input-native:active ++ .lumx-switch__input-placeholder { + .lumx-switch__input-background { @include lumx-state( lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "HIGH"), @@ -222,21 +222,21 @@ } // Focus state -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-unchecked +.lumx-switch__input-native[data-focus-visible-added] ++ .lumx-switch__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-unchecked -.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-unchecked +.lumx-switch__input-native[data-focus-visible-added] ++ .lumx-switch__input-placeholder { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); } -.#{$lumx-base-prefix}-switch--theme-light.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-checked +.lumx-switch__input-native[data-focus-visible-added] ++ .lumx-switch__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), @@ -245,9 +245,9 @@ ); } -.#{$lumx-base-prefix}-switch--theme-dark.#{$lumx-base-prefix}-switch--is-checked -.#{$lumx-base-prefix}-switch__input-native[data-focus-visible-added] -+ .#{$lumx-base-prefix}-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-checked +.lumx-switch__input-native[data-focus-visible-added] ++ .lumx-switch__input-placeholder { @include lumx-state( lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "HIGH"), diff --git a/packages/lumx-core/src/scss/components/table/_index.scss b/packages/lumx-core/src/scss/components/table/_index.scss index 439e2fd621..a9f91bafa0 100644 --- a/packages/lumx-core/src/scss/components/table/_index.scss +++ b/packages/lumx-core/src/scss/components/table/_index.scss @@ -2,7 +2,7 @@ Data table ========================================================================== */ -.#{$lumx-base-prefix}-table { +.lumx-table { $self: &; @include lumx-table; @@ -117,22 +117,22 @@ /* Clickable row ========================================================================== */ -.#{$lumx-base-prefix}-table__row--is-clickable:not(.#{$lumx-base-prefix}-table__row--is-selected) { - .#{$lumx-base-prefix}-table--theme-light & { +.lumx-table__row--is-clickable:not(.lumx-table__row--is-selected) { + .lumx-table--theme-light & { @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), false); } - .#{$lumx-base-prefix}-table--theme-dark & { + .lumx-table--theme-dark & { @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), false); } } -.#{$lumx-base-prefix}-table__row--is-clickable.#{$lumx-base-prefix}-table__row--is-selected { - .#{$lumx-base-prefix}-table--theme-light & { +.lumx-table__row--is-clickable.lumx-table__row--is-selected { + .lumx-table--theme-light & { @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), true); } - .#{$lumx-base-prefix}-table--theme-dark & { + .lumx-table--theme-dark & { @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), true); } } diff --git a/packages/lumx-core/src/scss/components/tabs/_index.scss b/packages/lumx-core/src/scss/components/tabs/_index.scss index c332ae87cf..3d84e1748a 100644 --- a/packages/lumx-core/src/scss/components/tabs/_index.scss +++ b/packages/lumx-core/src/scss/components/tabs/_index.scss @@ -2,7 +2,7 @@ Tabs ========================================================================== */ -.#{$lumx-base-prefix}-tabs { +.lumx-tabs { $self: &; &__links { @@ -51,8 +51,8 @@ /* Tabs layout ========================================================================== */ -.#{$lumx-base-prefix}-tabs--layout-fixed { - .#{$lumx-base-prefix}-tabs__link { +.lumx-tabs--layout-fixed { + .lumx-tabs__link { @include lumx-tabs-link-layout("fixed"); } } @@ -60,20 +60,20 @@ /* Tabs position ========================================================================== */ -.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-left { - .#{$lumx-base-prefix}-tabs__links { +.lumx-tabs--layout-clustered.lumx-tabs--position-left { + .lumx-tabs__links { @include lumx-tabs-links-position(lumx-base-const("position", "LEFT")); } } -.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-center { - .#{$lumx-base-prefix}-tabs__links { +.lumx-tabs--layout-clustered.lumx-tabs--position-center { + .lumx-tabs__links { @include lumx-tabs-links-position(lumx-base-const("position", "CENTER")); } } -.#{$lumx-base-prefix}-tabs--layout-clustered.#{$lumx-base-prefix}-tabs--position-right { - .#{$lumx-base-prefix}-tabs__links { +.lumx-tabs--layout-clustered.lumx-tabs--position-right { + .lumx-tabs__links { @include lumx-tabs-links-position(lumx-base-const("position", "RIGHT")); } } @@ -82,15 +82,15 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-tabs__link--is-disabled { +.lumx-tabs__link--is-disabled { @include lumx-tabs-link(lumx-base-const("emphasis", "LOW")); - .#{$lumx-base-prefix}-tabs--theme-light & { + .lumx-tabs--theme-light & { @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT")); @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-tabs--theme-dark & { + .lumx-tabs--theme-dark & { @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK")); @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } @@ -99,7 +99,7 @@ /* Tab panel ========================================================================== */ -.#{$lumx-base-prefix}-tab-panel { +.lumx-tab-panel { display: none; outline: none; diff --git a/packages/lumx-core/src/scss/components/text-field/_index.scss b/packages/lumx-core/src/scss/components/text-field/_index.scss index 5a1eb1cb66..4b505e8938 100644 --- a/packages/lumx-core/src/scss/components/text-field/_index.scss +++ b/packages/lumx-core/src/scss/components/text-field/_index.scss @@ -4,7 +4,7 @@ Text field ========================================================================== */ -.#{$lumx-base-prefix}-text-field { +.lumx-text-field { $self: &; --lumx-text-field-wrapper-padding-vertical: @@ -164,41 +164,41 @@ ========================================================================== */ // Disabled state -.#{$lumx-base-prefix}-text-field--is-disabled { - .#{$lumx-base-prefix}-text-field__wrapper { +.lumx-text-field--is-disabled { + .lumx-text-field__wrapper { @include lumx-state-disabled-input; } - &.#{$lumx-base-prefix}-text-field--theme-light { - .#{$lumx-base-prefix}-text-field__label, - .#{$lumx-base-prefix}-text-field__helper { + &.lumx-text-field--theme-light { + .lumx-text-field__label, + .lumx-text-field__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); } } - &.#{$lumx-base-prefix}-text-field--theme-dark { - .#{$lumx-base-prefix}-text-field__label, - .#{$lumx-base-prefix}-text-field__helper { + &.lumx-text-field--theme-dark { + .lumx-text-field__label, + .lumx-text-field__helper { @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); } } } // Hover state -.#{$lumx-base-prefix}-text-field--theme-light { - .#{$lumx-base-prefix}-text-field__wrapper:hover { +.lumx-text-field--theme-light { + .lumx-text-field__wrapper:hover { @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__input-icon, - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-icon, + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT") ); } - .#{$lumx-base-prefix}-text-field__input-native::placeholder { + .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT") @@ -206,20 +206,20 @@ } } -.#{$lumx-base-prefix}-text-field--theme-dark { - .#{$lumx-base-prefix}-text-field__wrapper:hover { +.lumx-text-field--theme-dark { + .lumx-text-field__wrapper:hover { @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__input-icon, - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-icon, + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK") ); } - .#{$lumx-base-prefix}-text-field__input-native::placeholder { + .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK") @@ -228,24 +228,24 @@ } // Focus state -.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-focus { - .#{$lumx-base-prefix}-text-field__label { +.lumx-text-field--theme-light.lumx-text-field--is-focus { + .lumx-text-field__label { @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__wrapper { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__input-icon, - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-icon, + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT") ); } - .#{$lumx-base-prefix}-text-field__input-native::placeholder { + .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT") @@ -253,24 +253,24 @@ } } -.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-focus { - .#{$lumx-base-prefix}-text-field__label { +.lumx-text-field--theme-dark.lumx-text-field--is-focus { + .lumx-text-field__label { @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__wrapper { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__input-icon, - .#{$lumx-base-prefix}-text-field__input-native { + .lumx-text-field__input-icon, + .lumx-text-field__input-native { @include lumx-text-field-input-content-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK") ); } - .#{$lumx-base-prefix}-text-field__input-native::placeholder { + .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK") @@ -281,42 +281,42 @@ /* Text field validity ========================================================================== */ -.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--is-valid { - .#{$lumx-base-prefix}-text-field__wrapper { +.lumx-text-field--theme-light.lumx-text-field--is-valid { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__input-validity { + .lumx-text-field__input-validity { @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT")); } } -.#{$lumx-base-prefix}-text-field--theme-light.#{$lumx-base-prefix}-text-field--has-error { - .#{$lumx-base-prefix}-text-field__wrapper { +.lumx-text-field--theme-light.lumx-text-field--has-error { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT")); } - .#{$lumx-base-prefix}-text-field__input-validity { + .lumx-text-field__input-validity { @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT")); } } -.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--is-valid { - .#{$lumx-base-prefix}-text-field__wrapper { +.lumx-text-field--theme-dark.lumx-text-field--is-valid { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__input-validity { + .lumx-text-field__input-validity { @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK")); } } -.#{$lumx-base-prefix}-text-field--theme-dark.#{$lumx-base-prefix}-text-field--has-error { - .#{$lumx-base-prefix}-text-field__wrapper { +.lumx-text-field--theme-dark.lumx-text-field--has-error { + .lumx-text-field__wrapper { @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK")); } - .#{$lumx-base-prefix}-text-field__input-validity { + .lumx-text-field__input-validity { @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK")); } } diff --git a/packages/lumx-core/src/scss/components/text/_index.scss b/packages/lumx-core/src/scss/components/text/_index.scss index 6bb9317bf6..b2d1e0b970 100644 --- a/packages/lumx-core/src/scss/components/text/_index.scss +++ b/packages/lumx-core/src/scss/components/text/_index.scss @@ -2,7 +2,7 @@ Text ========================================================================== */ -.#{$lumx-base-prefix}-text { +.lumx-text { white-space: var(--lumx-text-white-space); &--is-truncated { @@ -26,7 +26,7 @@ } // Fix icon alignment - .#{$lumx-base-prefix}-icon, .#{$lumx-base-prefix}-icon > svg { + .lumx-icon, .lumx-icon > svg { display: inline; } } diff --git a/packages/lumx-core/src/scss/components/thumbnail/_index.scss b/packages/lumx-core/src/scss/components/thumbnail/_index.scss index 59e535635e..f696c71801 100644 --- a/packages/lumx-core/src/scss/components/thumbnail/_index.scss +++ b/packages/lumx-core/src/scss/components/thumbnail/_index.scss @@ -6,7 +6,7 @@ Thumbnail ========================================================================== */ -.#{$lumx-base-prefix}-thumbnail { +.lumx-thumbnail { $self: &; position: relative; @@ -31,7 +31,7 @@ width: unset; } - &:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) { + &:not(.lumx-thumbnail--aspect-ratio-original) { #{$self}__image { position: absolute; top: 0; @@ -98,7 +98,7 @@ ========================================================================== */ @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-thumbnail--size-#{$key} { + .lumx-thumbnail--size-#{$key} { width: $size; } } @@ -106,8 +106,8 @@ /* Thumbnail aspect ratio ========================================================================== */ -.#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) { - .#{$lumx-base-prefix}-thumbnail__image { +.lumx-thumbnail:not(.lumx-thumbnail--aspect-ratio-original) { + .lumx-thumbnail__image { object-fit: var(--lumx-thumbnail-image-object-fit, cover); object-position: center; width: 100%; @@ -130,8 +130,8 @@ @supports (aspect-ratio: 1 / 1) { @each $key, $aspect-ratio-fraction in $lumx-thumbnail-aspect-ratio-fraction { - .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height) - .#{$lumx-base-prefix}-thumbnail__image { + .lumx-thumbnail--aspect-ratio-#{$key}:not(.lumx-thumbnail--fill-height) + .lumx-thumbnail__image { aspect-ratio: var(--lumx-thumbnail-aspect-ratio, string.unquote($aspect-ratio-fraction)); } } @@ -139,8 +139,8 @@ @supports not (aspect-ratio: 1 / 1) { @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio { - .#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height) - .#{$lumx-base-prefix}-thumbnail__background { + .lumx-thumbnail--aspect-ratio-#{$key}:not(.lumx-thumbnail--fill-height) + .lumx-thumbnail__background { padding-top: $aspect-ratio; } } @@ -149,19 +149,19 @@ /* Thumbnail object fit ========================================================================== */ -.#{$lumx-base-prefix}-thumbnail--object-fit-cover { +.lumx-thumbnail--object-fit-cover { --lumx-thumbnail-image-object-fit: cover; } -.#{$lumx-base-prefix}-thumbnail--object-fit-contain { +.lumx-thumbnail--object-fit-contain { --lumx-thumbnail-image-object-fit: contain; } /* Thumbnail states ========================================================================== */ -.#{$lumx-base-prefix}-thumbnail--is-clickable { - &:not(.#{$lumx-base-prefix}-thumbnail--fill-height) { +.lumx-thumbnail--is-clickable { + &:not(.lumx-thumbnail--fill-height) { display: block; } @@ -193,42 +193,42 @@ } /* Focused (variant rounded) */ -.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail--is-clickable { +.lumx-thumbnail--variant-rounded.lumx-thumbnail--is-clickable { &[data-focus-visible-added]::after { border-radius: var(--lumx-border-radius); } } /* Focused (light theme) */ -.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail--is-clickable { +.lumx-thumbnail--theme-light.lumx-thumbnail--is-clickable { &[data-focus-visible-added]::after { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); } } /* Focused (dark theme) */ -.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail--is-clickable { +.lumx-thumbnail--theme-dark.lumx-thumbnail--is-clickable { &[data-focus-visible-added]::after { @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); } } /* Loading state */ -.#{$lumx-base-prefix}-thumbnail--is-loading { - &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background { +.lumx-thumbnail--is-loading { + &.lumx-thumbnail--theme-light .lumx-thumbnail__background { @include lumx-skeleton("light"); } - &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__background { + &.lumx-thumbnail--theme-dark .lumx-thumbnail__background { @include lumx-skeleton("dark"); } } /* Error state */ -.#{$lumx-base-prefix}-thumbnail--has-error { +.lumx-thumbnail--has-error { /** Icon fallback */ - &.#{$lumx-base-prefix}-thumbnail--has-icon-error-fallback { - .#{$lumx-base-prefix}-thumbnail__fallback { + &.lumx-thumbnail--has-icon-error-fallback { + .lumx-thumbnail__fallback { position: absolute; top: 0; right: 0; @@ -239,19 +239,19 @@ justify-content: center; } - &.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__fallback { + &.lumx-thumbnail--theme-light .lumx-thumbnail__fallback { background-color: lumx-color-variant("dark", "L6"); } - &.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__fallback { + &.lumx-thumbnail--theme-dark .lumx-thumbnail__fallback { background-color: lumx-color-variant("light", "L6"); } } /* Custom fallback */ - &.#{$lumx-base-prefix}-thumbnail--has-custom-error-fallback { + &.lumx-thumbnail--has-custom-error-fallback { /* Disable aspect ratio */ - .#{$lumx-base-prefix}-thumbnail__background { + .lumx-thumbnail__background { padding-top: 0; } } @@ -262,9 +262,9 @@ $badge-radius-size: math.div(map.get($lumx-sizes, lumx-base-const("size", "XS")), 2) + 2; -.#{$lumx-base-prefix}-thumbnail--has-badge { - .#{$lumx-base-prefix}-thumbnail__background, - .#{$lumx-base-prefix}-thumbnail__fallback { +.lumx-thumbnail--has-badge { + .lumx-thumbnail__background, + .lumx-thumbnail__fallback { mask-image: radial-gradient( circle at calc(100% - #{$badge-radius-size - 6}) calc(100% - #{$badge-radius-size - 6}), diff --git a/packages/lumx-core/src/scss/components/toolbar/_index.scss b/packages/lumx-core/src/scss/components/toolbar/_index.scss index 393906a472..d67b485104 100644 --- a/packages/lumx-core/src/scss/components/toolbar/_index.scss +++ b/packages/lumx-core/src/scss/components/toolbar/_index.scss @@ -2,7 +2,7 @@ Toolbar ========================================================================== */ -.#{$lumx-base-prefix}-toolbar { +.lumx-toolbar { $self: &; display: flex; diff --git a/packages/lumx-core/src/scss/components/tooltip/_index.scss b/packages/lumx-core/src/scss/components/tooltip/_index.scss index 43d6530b90..ab19523aff 100644 --- a/packages/lumx-core/src/scss/components/tooltip/_index.scss +++ b/packages/lumx-core/src/scss/components/tooltip/_index.scss @@ -5,7 +5,7 @@ Tooltip ========================================================================== */ -.#{$lumx-base-prefix}-tooltip { +.lumx-tooltip { $self: &; position: absolute; @@ -86,7 +86,7 @@ } } -.#{$lumx-base-prefix}-tooltip-anchor-wrapper { +.lumx-tooltip-anchor-wrapper { width: fit-content; // Prevent text selection on mobile device that would hinder long press. diff --git a/packages/lumx-core/src/scss/components/uploader/_index.scss b/packages/lumx-core/src/scss/components/uploader/_index.scss index 955c2a4c40..7ee97654f2 100644 --- a/packages/lumx-core/src/scss/components/uploader/_index.scss +++ b/packages/lumx-core/src/scss/components/uploader/_index.scss @@ -2,7 +2,7 @@ Uploader ========================================================================== */ -.#{$lumx-base-prefix}-uploader { +.lumx-uploader { $self: &; @include lumx-state-transition; @@ -115,7 +115,7 @@ ========================================================================== */ @each $key, $size in $lumx-sizes { - .#{$lumx-base-prefix}-uploader--size-#{$key} { + .lumx-uploader--size-#{$key} { width: $size; } } @@ -124,7 +124,7 @@ ========================================================================== */ @each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio { - .#{$lumx-base-prefix}-uploader--aspect-ratio-#{$key} .#{$lumx-base-prefix}-uploader__background { + .lumx-uploader--aspect-ratio-#{$key} .lumx-uploader__background { padding-top: $aspect-ratio; } } diff --git a/packages/lumx-core/src/scss/components/user-block/_index.scss b/packages/lumx-core/src/scss/components/user-block/_index.scss index a57009c0b7..19343241e1 100644 --- a/packages/lumx-core/src/scss/components/user-block/_index.scss +++ b/packages/lumx-core/src/scss/components/user-block/_index.scss @@ -4,7 +4,7 @@ User block ========================================================================== */ -.#{$lumx-base-prefix}-user-block { +.lumx-user-block { $self: &; display: flex; diff --git a/packages/lumx-core/src/scss/core/base/_helpers.scss b/packages/lumx-core/src/scss/core/base/_helpers.scss index 4658cbaecc..c6ea04b5ec 100644 --- a/packages/lumx-core/src/scss/core/base/_helpers.scss +++ b/packages/lumx-core/src/scss/core/base/_helpers.scss @@ -1,22 +1,22 @@ /* Align ========================================================================== */ -.#{$lumx-base-prefix}-base-text-left { +.lumx-base-text-left { text-align: left; } -.#{$lumx-base-prefix}-base-text-right { +.lumx-base-text-right { text-align: right; } -.#{$lumx-base-prefix}-base-text-center { +.lumx-base-text-center { text-align: center; } /* Display ========================================================================== */ -.#{$lumx-base-prefix}-base-display-block { +.lumx-base-display-block { display: block; } diff --git a/packages/lumx-core/src/scss/core/color/_index.scss b/packages/lumx-core/src/scss/core/color/_index.scss index 40a00711ba..2dbc5cf437 100644 --- a/packages/lumx-core/src/scss/core/color/_index.scss +++ b/packages/lumx-core/src/scss/core/color/_index.scss @@ -4,11 +4,11 @@ @each $color-key, $color in $lumx-color-palette { @each $color-variant in $lumx-color-variants { - .#{$lumx-base-prefix}-color-background-#{$color-key}-#{$color-variant} { + .lumx-color-background-#{$color-key}-#{$color-variant} { background-color: lumx-color-variant($color-key, $color-variant); } - .#{$lumx-base-prefix}-color-font-#{$color-key}-#{$color-variant} { + .lumx-color-font-#{$color-key}-#{$color-variant} { color: lumx-color-variant($color-key, $color-variant); } } diff --git a/packages/lumx-core/src/scss/core/spacing/_index.scss b/packages/lumx-core/src/scss/core/spacing/_index.scss index adf1d8beec..9d7d0404a2 100644 --- a/packages/lumx-core/src/scss/core/spacing/_index.scss +++ b/packages/lumx-core/src/scss/core/spacing/_index.scss @@ -5,7 +5,7 @@ @each $property-namespace, $property in $lumx-spacing-properties { @each $direction-namespace, $direction-rules in $lumx-spacing-directions { @each $size-namespace, $size in $lumx-spacing-sizes { - .#{$lumx-base-prefix}-spacing-#{$property-namespace}#{$direction-namespace}#{$size-namespace} { + .lumx-spacing-#{$property-namespace}#{$direction-namespace}#{$size-namespace} { @each $direction in $direction-rules { #{$property}#{$direction}: $size !important; } diff --git a/packages/lumx-core/src/scss/core/typography/_index.scss b/packages/lumx-core/src/scss/core/typography/_index.scss index f5d17ba16e..7ecf252ff1 100644 --- a/packages/lumx-core/src/scss/core/typography/_index.scss +++ b/packages/lumx-core/src/scss/core/typography/_index.scss @@ -3,14 +3,14 @@ ========================================================================== */ @each $key, $style in $lumx-typography-interface { - .#{$lumx-base-prefix}-typography-#{$key}, - .#{$lumx-base-prefix}-typography-interface-#{$key} { + .lumx-typography-#{$key}, + .lumx-typography-interface-#{$key} { @include lumx-typography($key); } } @each $key, $style in $lumx-typography-custom { - .#{$lumx-base-prefix}-typography-custom-#{$key} { + .lumx-typography-custom-#{$key} { @include lumx-typography($key, "custom"); } } From 1182bc407fdc172f9c70593f42ba2ebb08e31129 Mon Sep 17 00:00:00 2001 From: Guillaume Cornut Date: Wed, 10 Sep 2025 21:17:54 +0200 Subject: [PATCH 2/3] refactor(core): inline lumx-base-const values --- .../src/scss/components/badge/_index.scss | 6 +- .../src/scss/components/button/_index.scss | 97 ++++++------ .../src/scss/components/button/_mixins.scss | 89 +++++------ .../scss/components/button/_variables.scss | 4 +- .../src/scss/components/checkbox/_index.scss | 116 ++++++-------- .../src/scss/components/chip/_index.scss | 51 +++---- .../src/scss/components/chip/_mixins.scss | 4 +- .../scss/components/comment-block/_index.scss | 2 +- .../scss/components/date-picker/_index.scss | 12 +- .../src/scss/components/dialog/_index.scss | 4 +- .../src/scss/components/divider/_index.scss | 12 +- .../src/scss/components/divider/_mixins.scss | 40 ++--- .../scss/components/divider/_variables.scss | 8 +- .../components/expansion-panel/_index.scss | 4 +- .../src/scss/components/flag/_index.scss | 4 +- .../src/scss/components/flex-box/_index.scss | 3 +- .../src/scss/components/icon/_index.scss | 4 +- .../src/scss/components/icon/_mixins.scss | 2 +- .../src/scss/components/icon/_variables.scss | 8 +- .../components/image-lightbox/_index.scss | 2 + .../scss/components/input-helper/_index.scss | 4 +- .../scss/components/input-helper/_mixins.scss | 4 +- .../scss/components/input-label/_index.scss | 4 +- .../scss/components/input-label/_mixins.scss | 4 +- .../src/scss/components/lightbox/_index.scss | 8 +- .../src/scss/components/link/_index.scss | 6 +- .../src/scss/components/list/_mixins.scss | 22 +-- .../scss/components/navigation/_index.scss | 15 +- .../components/progress-tracker/_index.scss | 8 +- .../scss/components/radio-button/_index.scss | 76 ++++------ .../scss/components/radio-button/_mixins.scss | 12 +- .../src/scss/components/select/_index.scss | 110 +++++++------- .../src/scss/components/select/_mixins.scss | 6 +- .../components/side-navigation/_index.scss | 12 +- .../components/side-navigation/_mixins.scss | 12 +- .../src/scss/components/slider/_index.scss | 50 +++---- .../src/scss/components/slideshow/_index.scss | 15 +- .../src/scss/components/switch/_index.scss | 124 +++++++-------- .../src/scss/components/switch/_mixins.scss | 12 +- .../src/scss/components/table/_index.scss | 28 ++-- .../src/scss/components/table/_mixins.scss | 32 ++-- .../src/scss/components/tabs/_index.scss | 34 ++--- .../src/scss/components/tabs/_mixins.scss | 14 +- .../scss/components/text-field/_index.scss | 106 ++++++------- .../scss/components/text-field/_mixins.scss | 21 ++- .../src/scss/components/text/_index.scss | 3 +- .../src/scss/components/thumbnail/_index.scss | 10 +- .../src/scss/components/uploader/_index.scss | 16 +- .../scss/components/user-block/_index.scss | 3 +- .../src/scss/core/base/_helpers.scss | 3 +- .../src/scss/core/state/_mixins.scss | 141 ++++++++++-------- .../content/design-tokens/DesignToken.scss | 4 +- 52 files changed, 673 insertions(+), 718 deletions(-) diff --git a/packages/lumx-core/src/scss/components/badge/_index.scss b/packages/lumx-core/src/scss/components/badge/_index.scss index 58a6632e1b..c091958ff3 100644 --- a/packages/lumx-core/src/scss/components/badge/_index.scss +++ b/packages/lumx-core/src/scss/components/badge/_index.scss @@ -9,15 +9,15 @@ display: inline-flex; align-items: center; justify-content: center; - width: map.get($lumx-sizes, lumx-base-const("size", "XS")); - height: map.get($lumx-sizes, lumx-base-const("size", "XS")); + width: map.get($lumx-sizes, "xs"); + height: map.get($lumx-sizes, "xs"); pointer-events: none; border-radius: 50%; span { @include lumx-typography("overline"); - line-height: map.get($lumx-sizes, lumx-base-const("size", "XS")); + line-height: map.get($lumx-sizes, "xs"); } i { diff --git a/packages/lumx-core/src/scss/components/button/_index.scss b/packages/lumx-core/src/scss/components/button/_index.scss index 0461b1394d..b3a34fe331 100644 --- a/packages/lumx-core/src/scss/components/button/_index.scss +++ b/packages/lumx-core/src/scss/components/button/_index.scss @@ -17,60 +17,58 @@ /* Button sizes ========================================================================== */ -@each $key, $size in $lumx-sizes { - @if $key == lumx-base-const("size", "S") or $key == lumx-base-const("size", "M") { - .lumx-button--size-#{$key} { - &.lumx-button--emphasis-high { - &.lumx-button--variant-button { - @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "button", $key); - } - - &.lumx-button--variant-icon { - @include lumx-button-size(lumx-base-const("emphasis", "HIGH"), "icon", $key); - } +@each $size in ("s", "m") { + .lumx-button--size-#{$size} { + &.lumx-button--emphasis-high { + &.lumx-button--variant-button { + @include lumx-button-size("emphasis-high", "button", $size); } - &.lumx-button--emphasis-medium { - &.lumx-button--variant-button { - @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "button", $key); - } - - &.lumx-button--variant-icon { - @include lumx-button-size(lumx-base-const("emphasis", "MEDIUM"), "icon", $key); - } + &.lumx-button--variant-icon { + @include lumx-button-size("emphasis-high", "icon", $size); } + } - &.lumx-button--emphasis-low { - &.lumx-button--variant-button { - @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "button", $key); - } + &.lumx-button--emphasis-medium { + &.lumx-button--variant-button { + @include lumx-button-size("emphasis-medium", "button", $size); + } - &.lumx-button--variant-icon { - @include lumx-button-size(lumx-base-const("emphasis", "LOW"), "icon", $key); - } + &.lumx-button--variant-icon { + @include lumx-button-size("emphasis-medium", "icon", $size); } + } + &.lumx-button--emphasis-low { &.lumx-button--variant-button { - i:first-child { - @include lumx-button-icon("button", $key, lumx-base-const("position", "LEFT")); - } - - i:last-child { - @include lumx-button-icon("button", $key, lumx-base-const("position", "RIGHT")); - } + @include lumx-button-size("emphasis-low", "button", $size); } &.lumx-button--variant-icon { - & > i, - & > img { - @include lumx-button-icon("icon", $key); - } + @include lumx-button-size("emphasis-low", "icon", $size); + } + } + + &.lumx-button--variant-button { + i:first-child { + @include lumx-button-icon("button", $size, "position-left"); + } + + i:last-child { + @include lumx-button-icon("button", $size, "position-right"); } + } - & > span { - @include lumx-button-text($key); + &.lumx-button--variant-icon { + & > i, + & > img { + @include lumx-button-icon("icon", $size); } } + + & > span { + @include lumx-button-text($size); + } } } @@ -82,14 +80,14 @@ .lumx-button--color-#{$key} { &.lumx-button--emphasis-high.lumx-button--theme-light { @include lumx-button-color( - lumx-base-const("emphasis", "HIGH"), + "emphasis-high", $key, - lumx-base-const("theme", "LIGHT") + "theme-light" ); } &.lumx-button--emphasis-high.lumx-button--theme-dark { - @include lumx-button-color(lumx-base-const("emphasis", "HIGH"), $key, lumx-base-const("theme", "DARK")); + @include lumx-button-color("emphasis-high", $key, "theme-dark"); } } } @@ -98,27 +96,26 @@ @each $key, $color in $lumx-color-palette { .lumx-button--color-#{$key} { &.lumx-button--emphasis-medium { - @include lumx-button-color(lumx-base-const("emphasis", "MEDIUM"), $key); + @include lumx-button-color("emphasis-medium", $key); } &.lumx-button--emphasis-low { - @include lumx-button-color(lumx-base-const("emphasis", "LOW"), $key); + @include lumx-button-color("emphasis-low", $key); } } } - /* Button selected ========================================================================== */ .lumx-button.lumx-button--is-selected.lumx-button--emphasis-medium, .lumx-button.lumx-button--is-selected.lumx-button--emphasis-low, { - @include lumx-button-size(lumx-base-const("emphasis", "SELECTED")); + @include lumx-button-size("emphasis-selected"); @each $key, $color in $lumx-color-palette { &.lumx-button--color-#{$key} { &.lumx-button--is-selected { - @include lumx-button-color(lumx-base-const("emphasis", "SELECTED"), $key); + @include lumx-button-color("emphasis-selected", $key); } } } @@ -158,7 +155,8 @@ .lumx-button { // Remove border radius on the right on the first button (if not hidden and not also the last button) &:not(:last-of-type:not(.visually-hidden)) { - &, &::before { + &, + &::before { border-top-right-radius: 0; border-bottom-right-radius: 0; } @@ -166,7 +164,8 @@ // Remove border radius on the left on the last button (if not hidden and not also the first button) &:not(:first-of-type:not(.visually-hidden)) { - &, &::before { + &, + &::before { border-top-left-radius: 0; border-bottom-left-radius: 0; } diff --git a/packages/lumx-core/src/scss/components/button/_mixins.scss b/packages/lumx-core/src/scss/components/button/_mixins.scss index fcfa361fb1..9f4ef88eeb 100644 --- a/packages/lumx-core/src/scss/components/button/_mixins.scss +++ b/packages/lumx-core/src/scss/components/button/_mixins.scss @@ -30,9 +30,9 @@ @mixin lumx-button-size($emphasis, $variant: null, $size: null) { @if $variant { - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { height: var(--lumx-button-height); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { height: calc(var(--lumx-button-height) / 1.5); } } @@ -40,9 +40,9 @@ @if $variant == "button" { border-radius: var(--lumx-button-border-radius); } @else if $variant == "icon" { - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { width: var(--lumx-button-height); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { width: calc(var(--lumx-button-height) / 1.5); } @@ -68,9 +68,9 @@ } @if $variant == "button" { - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { padding: 0 var(--lumx-button-#{$emphasis}-state-default-padding-horizontal); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { padding: 0 calc(var(--lumx-button-#{$emphasis}-state-default-padding-horizontal) / 1.5); } } @@ -78,9 +78,9 @@ &:hover, &[class*="--is-hovered"] { @if $variant == "button" { - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { padding: 0 var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { padding: 0 calc(var(--lumx-button-#{$emphasis}-state-hover-padding-horizontal) / 1.5); } } @@ -93,9 +93,9 @@ &:active, &[class*="--is-active"] { @if $variant == "button" { - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { padding: 0 var(--lumx-button-#{$emphasis}-state-active-padding-horizontal); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { padding: 0 calc(var(--lumx-button-#{$emphasis}-state-active-padding-horizontal) / 1.5); } } @@ -107,25 +107,25 @@ } @mixin lumx-button-color($emphasis, $color, $theme: null) { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-color); background-color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-background-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-default-theme-light-color); background-color: var(--lumx-button-#{$emphasis}-state-default-theme-light-background-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-color); background-color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-background-color); } @else { - @include lumx-state(lumx-base-const("state", "DEFAULT"), $emphasis, $color, $theme); + @include lumx-state("state-default", $emphasis, $color, $theme); } &::before { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-default-#{$theme}-border-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-default-theme-light-border-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-default-theme-dark-border-color); } @else { border-color: transparent; @@ -134,25 +134,25 @@ &:hover:not([aria-disabled="true"]), &[class*="--is-hovered"] { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-color); background-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-background-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-color); background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-background-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-color); background-color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-background-color); } @else { - @include lumx-state(lumx-base-const("state", "HOVER"), $emphasis, $color, $theme); + @include lumx-state("state-hover", $emphasis, $color, $theme); } &::before { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-hover-#{$theme}-border-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-hover-theme-light-border-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-hover-theme-dark-border-color); } } @@ -160,25 +160,25 @@ &:active:not([aria-disabled="true"]), &[class*="--is-active"] { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-color); background-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-background-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-active-theme-light-color); background-color: var(--lumx-button-#{$emphasis}-state-active-theme-light-background-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-color); background-color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-background-color); } @else { - @include lumx-state(lumx-base-const("state", "ACTIVE"), $emphasis, $color, $theme); + @include lumx-state("state-active", $emphasis, $color, $theme); } &::before { - @if $color == "primary" and $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $color == "primary" and $emphasis == "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-active-#{$theme}-border-color); - } @else if $color == "dark" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "dark" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-active-theme-light-border-color); - } @else if $color == "light" and $emphasis != lumx-base-const("emphasis", "HIGH") { + } @else if $color == "light" and $emphasis != "emphasis-high" { border-color: var(--lumx-button-#{$emphasis}-state-active-theme-dark-border-color); } } @@ -186,12 +186,13 @@ &[data-focus-visible-added], &[class*="--is-focused"] { - @include lumx-state(lumx-base-const("state", "FOCUS"), $emphasis, $color, $theme); + @include lumx-state("state-focus", $emphasis, $color, $theme); } &:disabled, &[aria-disabled="true"] { @include lumx-state-disabled-input; + // Enabling pointer-events to display label tooltips on hover // @TODO: should be moved in the mixin when all disabled states will be aligned pointer-events: all; @@ -199,21 +200,21 @@ } @mixin lumx-button-is-selected($theme) { - @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), $theme); + @include lumx-state-as-selected("state-default", $theme); &:hover, &[class*="--is-hovered"] { - @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), $theme); + @include lumx-state-as-selected("state-hover", $theme); } &:active, &[class*="--is-active"] { - @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), $theme); + @include lumx-state-as-selected("state-active", $theme); } &[data-focus-visible-added], &[class*="--is-focused"] { - @include lumx-state-as-selected(lumx-base-const("state", "FOCUS"), $theme); + @include lumx-state-as-selected("state-focus", $theme); } } @@ -245,16 +246,16 @@ pointer-events: none; @if $variant == "button" { - @if $position == lumx-base-const("position", "LEFT") { - @if $size == lumx-base-const("size", "M") { + @if $position == "position-left" { + @if $size == "m" { margin-right: $lumx-spacing-unit; - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { margin-right: math.div($lumx-spacing-unit, 2); } - } @else if $position == lumx-base-const("position", "RIGHT") { - @if $size == lumx-base-const("size", "M") { + } @else if $position == "position-right" { + @if $size == "m" { margin-left: $lumx-spacing-unit; - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { margin-left: math.div($lumx-spacing-unit, 2); } } @@ -268,9 +269,9 @@ text-transform: var(--lumx-material-button-text-transform); pointer-events: none; - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { line-height: var(--lumx-button-height); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { line-height: calc(var(--lumx-button-height) / 1.5); } } diff --git a/packages/lumx-core/src/scss/components/button/_variables.scss b/packages/lumx-core/src/scss/components/button/_variables.scss index 2066e6160c..21f4448730 100644 --- a/packages/lumx-core/src/scss/components/button/_variables.scss +++ b/packages/lumx-core/src/scss/components/button/_variables.scss @@ -1,6 +1,6 @@ @use "sass:map"; $lumx-button-icon-sizes: ( - "m": map.get($lumx-sizes, lumx-base-const("size", "XS")), - "s": map.get($lumx-sizes, lumx-base-const("size", "XXS")), + "s": map.get($lumx-sizes, "xxs"), + "m": map.get($lumx-sizes, "xs"), ); diff --git a/packages/lumx-core/src/scss/components/checkbox/_index.scss b/packages/lumx-core/src/scss/components/checkbox/_index.scss index 548f1e2abc..9704fba517 100644 --- a/packages/lumx-core/src/scss/components/checkbox/_index.scss +++ b/packages/lumx-core/src/scss/components/checkbox/_index.scss @@ -25,11 +25,11 @@ @include lumx-checkbox-input-background; #{$self}--theme-light & { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-default", "emphasis-low", "dark"); } #{$self}--theme-dark & { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-default", "emphasis-low", "light"); } #{$self}--is-unchecked & { @@ -46,19 +46,19 @@ #{$self}--theme-light & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } #{$self}--theme-dark & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } @@ -97,135 +97,111 @@ &.lumx-checkbox--theme-light { .lumx-checkbox__label, .lumx-checkbox__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-state-disabled-text("theme-light"); } } &.lumx-checkbox--theme-dark { .lumx-checkbox__label, .lumx-checkbox__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-state-disabled-text("theme-dark"); } } } // Hover state -.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native:hover -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } } -.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native:hover -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-hover", "emphasis-low", "light"); } } -.lumx-checkbox--theme-light.lumx-checkbox--is-checked -.lumx-checkbox__input-native:hover -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-indicator { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } } -.lumx-checkbox--theme-dark.lumx-checkbox--is-checked -.lumx-checkbox__input-native:hover -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native:hover + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-indicator { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } // Active state -.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native:active -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } -.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native:active -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-active", "emphasis-low", "light"); } } -.lumx-checkbox--theme-light.lumx-checkbox--is-checked -.lumx-checkbox__input-native:active -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-indicator { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } } -.lumx-checkbox--theme-dark.lumx-checkbox--is-checked -.lumx-checkbox__input-native:active -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native:active + .lumx-checkbox__input-placeholder { .lumx-checkbox__input-indicator { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } // Focus state -.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native[data-focus-visible-added] -+ .lumx-checkbox__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); +.lumx-checkbox--theme-light.lumx-checkbox--is-unchecked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "dark"); } -.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked -.lumx-checkbox__input-native[data-focus-visible-added] -+ .lumx-checkbox__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); +.lumx-checkbox--theme-dark.lumx-checkbox--is-unchecked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "light"); } -.lumx-checkbox--theme-light.lumx-checkbox--is-checked -.lumx-checkbox__input-native[data-focus-visible-added] -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-light.lumx-checkbox--is-checked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } -.lumx-checkbox--theme-dark.lumx-checkbox--is-checked -.lumx-checkbox__input-native[data-focus-visible-added] -+ .lumx-checkbox__input-placeholder { +.lumx-checkbox--theme-dark.lumx-checkbox--is-checked .lumx-checkbox__input-native[data-focus-visible-added] + .lumx-checkbox__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } diff --git a/packages/lumx-core/src/scss/components/chip/_index.scss b/packages/lumx-core/src/scss/components/chip/_index.scss index d8a5147445..7e7e4dfb8d 100644 --- a/packages/lumx-core/src/scss/components/chip/_index.scss +++ b/packages/lumx-core/src/scss/components/chip/_index.scss @@ -13,11 +13,11 @@ &__label { #{$self}--size-m & { - @include lumx-chip-label(lumx-base-const("size", "M")); + @include lumx-chip-label("m"); } #{$self}--size-s & { - @include lumx-chip-label(lumx-base-const("size", "S")); + @include lumx-chip-label("s"); } } @@ -30,7 +30,7 @@ ========================================================================== */ .lumx-chip--size-m { - @include lumx-chip-size(lumx-base-const("size", "M")); + @include lumx-chip-size("m"); padding: 0 var(--lumx-material-chip-size-m-padding-vertical); @@ -44,7 +44,7 @@ } .lumx-chip--size-s { - @include lumx-chip-size(lumx-base-const("size", "S")); + @include lumx-chip-size("s"); padding: 0 var(--lumx-material-chip-size-s-padding-vertical); @@ -68,17 +68,17 @@ @each $key, $color in $lumx-color-palette { .lumx-chip--is-unselected.lumx-chip--color-#{$key} { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), $key); + @include lumx-state("state-default", "emphasis-medium", $key); &.lumx-chip--is-clickable { &:hover, &[data-lumx-hover] { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), $key); + @include lumx-state("state-hover", "emphasis-medium", $key); } &:active, &[data-lumx-active] { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), $key); + @include lumx-state("state-active", "emphasis-medium", $key); } } @@ -90,8 +90,9 @@ } .lumx-chip--color-#{$key} { - &[data-focus-visible-added], &.lumx-chip--is-highlighted { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), $key); + &[data-focus-visible-added], + &.lumx-chip--is-highlighted { + @include lumx-state("state-focus", "emphasis-medium", $key); } } } @@ -99,8 +100,8 @@ .lumx-chip--is-selected { &.lumx-chip--color-dark { @include lumx-state-as-selected( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT"), + "state-default", + "theme-light", "chip" ); @@ -108,8 +109,8 @@ &:hover, &[data-lumx-hover] { @include lumx-state-as-selected( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "LIGHT"), + "state-hover", + "theme-light", "chip" ); } @@ -117,16 +118,16 @@ &:active, &[data-lumx-active] { @include lumx-state-as-selected( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("theme", "LIGHT"), + "state-active", + "theme-light", "chip" ); } &[data-focus-visible-added] { @include lumx-state-as-selected( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "LIGHT"), + "state-focus", + "theme-light", "chip" ); } @@ -135,8 +136,8 @@ &.lumx-chip--color-light { @include lumx-state-as-selected( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK"), + "state-default", + "theme-dark", "chip" ); @@ -144,8 +145,8 @@ &:hover, &[data-lumx-hover] { @include lumx-state-as-selected( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "DARK"), + "state-hover", + "theme-dark", "chip" ); } @@ -153,16 +154,16 @@ &:active, &[data-lumx-active] { @include lumx-state-as-selected( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("theme", "DARK"), + "state-active", + "theme-dark", "chip" ); } &[data-focus-visible-added] { @include lumx-state-as-selected( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "DARK"), + "state-focus", + "theme-dark", "chip" ); } diff --git a/packages/lumx-core/src/scss/components/chip/_mixins.scss b/packages/lumx-core/src/scss/components/chip/_mixins.scss index 87aed856c9..153a5b557b 100644 --- a/packages/lumx-core/src/scss/components/chip/_mixins.scss +++ b/packages/lumx-core/src/scss/components/chip/_mixins.scss @@ -24,9 +24,9 @@ flex: 1 1 auto; white-space: nowrap; - @if $size == lumx-base-const("size", "M") { + @if $size == "m" { @include lumx-typography("body1"); - } @else if $size == lumx-base-const("size", "S") { + } @else if $size == "s" { @include lumx-typography("caption"); } } diff --git a/packages/lumx-core/src/scss/components/comment-block/_index.scss b/packages/lumx-core/src/scss/components/comment-block/_index.scss index 00ce38e2fd..ee57640ab4 100644 --- a/packages/lumx-core/src/scss/components/comment-block/_index.scss +++ b/packages/lumx-core/src/scss/components/comment-block/_index.scss @@ -164,7 +164,7 @@ margin-top: $lumx-spacing-unit * 2; #{$self}--has-indented-children & { - margin-left: map.get($lumx-sizes, lumx-base-const("size", "M")) + $lumx-spacing-unit * 2; + margin-left: map.get($lumx-sizes, "m") + $lumx-spacing-unit * 2; } } } diff --git a/packages/lumx-core/src/scss/components/date-picker/_index.scss b/packages/lumx-core/src/scss/components/date-picker/_index.scss index bea7427fb3..975c31bf70 100644 --- a/packages/lumx-core/src/scss/components/date-picker/_index.scss +++ b/packages/lumx-core/src/scss/components/date-picker/_index.scss @@ -28,7 +28,7 @@ &__days-wrapper { display: flex; flex-wrap: wrap; - width: map.get($lumx-sizes, lumx-base-const("size", "M")) * 7; + width: map.get($lumx-sizes, "m") * 7; } &__day-wrapper { @@ -37,7 +37,7 @@ align-items: center; justify-content: center; max-width: #{math.div(100, 7) + "%"}; - height: map.get($lumx-sizes, lumx-base-const("size", "M")); + height: map.get($lumx-sizes, "m"); } &__week-day { @@ -50,11 +50,11 @@ &__month-day { @include lumx-state-transition; @include lumx-button-base; - @include lumx-button-color(lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-button-color("emphasis-low", "dark"); - width: map.get($lumx-sizes, lumx-base-const("size", "M")); - height: map.get($lumx-sizes, lumx-base-const("size", "M")); - line-height: map.get($lumx-sizes, lumx-base-const("size", "M")); + width: map.get($lumx-sizes, "m"); + height: map.get($lumx-sizes, "m"); + line-height: map.get($lumx-sizes, "m"); text-align: center; border-radius: 50%; diff --git a/packages/lumx-core/src/scss/components/dialog/_index.scss b/packages/lumx-core/src/scss/components/dialog/_index.scss index d5ca0894ce..2dce8f3e6c 100644 --- a/packages/lumx-core/src/scss/components/dialog/_index.scss +++ b/packages/lumx-core/src/scss/components/dialog/_index.scss @@ -106,11 +106,11 @@ } &__header--has-divider { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT"), lumx-base-const("position", "BOTTOM")); + @include lumx-has-divider("theme-light", "position-bottom"); } &__footer--has-divider { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT"), lumx-base-const("position", "TOP")); + @include lumx-has-divider("theme-light", "position-top"); } &__content { diff --git a/packages/lumx-core/src/scss/components/divider/_index.scss b/packages/lumx-core/src/scss/components/divider/_index.scss index 81b6a64c29..ccaad6c784 100644 --- a/packages/lumx-core/src/scss/components/divider/_index.scss +++ b/packages/lumx-core/src/scss/components/divider/_index.scss @@ -4,11 +4,11 @@ .lumx-divider { &--theme-light { - @include lumx-divider(lumx-base-const("theme", "LIGHT")); + @include lumx-divider("theme-light"); } &--theme-dark { - @include lumx-divider(lumx-base-const("theme", "DARK")); + @include lumx-divider("theme-dark"); } } @@ -16,11 +16,11 @@ @include lumx-has-divider; &--theme-light { - @include lumx-divider-color(lumx-base-const("theme", "LIGHT")); + @include lumx-divider-color("theme-light"); } &--theme-dark { - @include lumx-divider-color(lumx-base-const("theme", "DARK")); + @include lumx-divider-color("theme-dark"); } } @@ -29,11 +29,11 @@ @include lumx-divider-position($positon); &--theme-light { - @include lumx-divider-color(lumx-base-const("theme", "LIGHT"), $positon); + @include lumx-divider-color("theme-light", $positon); } &--theme-dark { - @include lumx-divider-color(lumx-base-const("theme", "DARK"), $positon); + @include lumx-divider-color("theme-dark", $positon); } } } diff --git a/packages/lumx-core/src/scss/components/divider/_mixins.scss b/packages/lumx-core/src/scss/components/divider/_mixins.scss index f0c8a81083..77ac7dc047 100644 --- a/packages/lumx-core/src/scss/components/divider/_mixins.scss +++ b/packages/lumx-core/src/scss/components/divider/_mixins.scss @@ -3,58 +3,58 @@ margin: 0; border: none; - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("dark", $lumx-divider-color-variant); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", $lumx-divider-color-variant); } } -@mixin lumx-divider-color($theme, $position: lumx-base-const("position", "BOTTOM")) { - @if $position == lumx-base-const("position", "TOP") { - @if $theme == lumx-base-const("theme", "LIGHT") { +@mixin lumx-divider-color($theme, $position: "position-bottom") { + @if $position == "position-top" { + @if $theme == "theme-light" { border-top-color: lumx-color-variant("dark", $lumx-divider-color-variant); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { border-top-color: lumx-color-variant("light", $lumx-divider-color-variant); } - } @else if $position == lumx-base-const("position", "RIGHT") { - @if $theme == lumx-base-const("theme", "LIGHT") { + } @else if $position == "position-right" { + @if $theme == "theme-light" { border-right-color: lumx-color-variant("dark", $lumx-divider-color-variant); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { border-right-color: lumx-color-variant("light", $lumx-divider-color-variant); } - } @else if $position == lumx-base-const("position", "BOTTOM") { - @if $theme == lumx-base-const("theme", "LIGHT") { + } @else if $position == "position-bottom" { + @if $theme == "theme-light" { border-bottom-color: lumx-color-variant("dark", $lumx-divider-color-variant); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { border-bottom-color: lumx-color-variant("light", $lumx-divider-color-variant); } - } @else if $position == lumx-base-const("position", "LEFT") { - @if $theme == lumx-base-const("theme", "LIGHT") { + } @else if $position == "position-left" { + @if $theme == "theme-light" { border-left-color: lumx-color-variant("dark", $lumx-divider-color-variant); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { border-left-color: lumx-color-variant("light", $lumx-divider-color-variant); } } } @mixin lumx-divider-position($position) { - @if $position == lumx-base-const("position", "TOP") { + @if $position == "position-top" { border-top-style: solid; border-top-width: 1px; - } @else if $position == lumx-base-const("position", "RIGHT") { + } @else if $position == "position-right" { border-right-style: solid; border-right-width: 1px; - } @else if $position == lumx-base-const("position", "BOTTOM") { + } @else if $position == "position-bottom" { border-bottom-style: solid; border-bottom-width: 1px; - } @else if $position == lumx-base-const("position", "LEFT") { + } @else if $position == "position-left" { border-left-style: solid; border-left-width: 1px; } } -@mixin lumx-has-divider($theme: lumx-base-const("theme", "LIGHT"), $position: lumx-base-const("position", "BOTTOM")) { +@mixin lumx-has-divider($theme: "theme-light", $position: "position-bottom") { @include lumx-divider-color($theme, $position); @include lumx-divider-position($position); } diff --git a/packages/lumx-core/src/scss/components/divider/_variables.scss b/packages/lumx-core/src/scss/components/divider/_variables.scss index 0a888d3400..8f868bded9 100644 --- a/packages/lumx-core/src/scss/components/divider/_variables.scss +++ b/packages/lumx-core/src/scss/components/divider/_variables.scss @@ -1,7 +1,7 @@ $lumx-divider-color-variant: "L5"; $lumx-divider-positions: ( - "top": lumx-base-const("position", "TOP"), - "right": lumx-base-const("position", "RIGHT"), - "bottom": lumx-base-const("position", "BOTTOM"), - "left": lumx-base-const("position", "LEFT"), + "top": "position-top", + "right": "position-right", + "bottom": "position-bottom", + "left": "position-left", ); diff --git a/packages/lumx-core/src/scss/components/expansion-panel/_index.scss b/packages/lumx-core/src/scss/components/expansion-panel/_index.scss index 5e54427ff0..0f597fb0dc 100644 --- a/packages/lumx-core/src/scss/components/expansion-panel/_index.scss +++ b/packages/lumx-core/src/scss/components/expansion-panel/_index.scss @@ -22,11 +22,11 @@ align-items: center; #{$self}--theme-light#{$self}--is-open#{$self}--has-header-divider & { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT")); + @include lumx-has-divider("theme-light"); } #{$self}--theme-dark#{$self}--is-open#{$self}--has-header-divider & { - @include lumx-has-divider(lumx-base-const("theme", "DARK")); + @include lumx-has-divider("theme-dark"); } } diff --git a/packages/lumx-core/src/scss/components/flag/_index.scss b/packages/lumx-core/src/scss/components/flag/_index.scss index 3e0e63332b..5a1afc8dd4 100644 --- a/packages/lumx-core/src/scss/components/flag/_index.scss +++ b/packages/lumx-core/src/scss/components/flag/_index.scss @@ -8,10 +8,10 @@ .lumx-flag { display: inline-flex; align-items: center; - height: map.get($lumx-sizes, lumx-base-const("size", "XS")); + height: map.get($lumx-sizes, "xs"); padding: 0 $lumx-spacing-unit; margin: 0; - border-radius: math.div(map.get($lumx-sizes, lumx-base-const("size", "XS")), 2); + border-radius: math.div(map.get($lumx-sizes, "xs"), 2); &--is-truncated { max-width: 100%; diff --git a/packages/lumx-core/src/scss/components/flex-box/_index.scss b/packages/lumx-core/src/scss/components/flex-box/_index.scss index ea28e93adc..d43b6c40d3 100644 --- a/packages/lumx-core/src/scss/components/flex-box/_index.scss +++ b/packages/lumx-core/src/scss/components/flex-box/_index.scss @@ -63,8 +63,7 @@ } .lumx-flex-box--orientation-horizontal.lumx-flex-box--v-align-space-evenly, -.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-evenly - { +.lumx-flex-box--orientation-vertical.lumx-flex-box--h-align-space-evenly { justify-content: space-evenly; } diff --git a/packages/lumx-core/src/scss/components/icon/_index.scss b/packages/lumx-core/src/scss/components/icon/_index.scss index 0365de996f..08f2e3148d 100644 --- a/packages/lumx-core/src/scss/components/icon/_index.scss +++ b/packages/lumx-core/src/scss/components/icon/_index.scss @@ -84,10 +84,10 @@ } &.lumx-icon--has-shape { - @include lumx-icon-color($color-key, true, lumx-base-const("theme", "LIGHT")); + @include lumx-icon-color($color-key, true, "theme-light"); &.lumx-icon--theme-dark { - @include lumx-icon-color($color-key, true, lumx-base-const("theme", "DARK")); + @include lumx-icon-color($color-key, true, "theme-dark"); } } } diff --git a/packages/lumx-core/src/scss/components/icon/_mixins.scss b/packages/lumx-core/src/scss/components/icon/_mixins.scss index 471aa90d98..f9778b0c83 100644 --- a/packages/lumx-core/src/scss/components/icon/_mixins.scss +++ b/packages/lumx-core/src/scss/components/icon/_mixins.scss @@ -17,7 +17,7 @@ @if $has-shape == true { $base-color: lumx-color-variant($color, "L6"); - @if $theme == lumx-base-const("theme", "DARK") and $color != "light" { + @if $theme == "theme-dark" and $color != "light" { // adds a white background for dark theme background-color: lumx-color-variant("light", "N"); diff --git a/packages/lumx-core/src/scss/components/icon/_variables.scss b/packages/lumx-core/src/scss/components/icon/_variables.scss index 7f0c943951..d497c1a38c 100644 --- a/packages/lumx-core/src/scss/components/icon/_variables.scss +++ b/packages/lumx-core/src/scss/components/icon/_variables.scss @@ -1,6 +1,6 @@ $lumx-icon-has-shape-size-map: ( - "s": lumx-base-const("size", "XXS"), - "m": lumx-base-const("size", "XS"), - "l": lumx-base-const("size", "M"), - "xl": lumx-base-const("size", "L"), + "s": "xxs", + "m": "xs", + "l": "m", + "xl": "l", ); diff --git a/packages/lumx-core/src/scss/components/image-lightbox/_index.scss b/packages/lumx-core/src/scss/components/image-lightbox/_index.scss index a9b9856c23..2d7ccfc6d8 100644 --- a/packages/lumx-core/src/scss/components/image-lightbox/_index.scss +++ b/packages/lumx-core/src/scss/components/image-lightbox/_index.scss @@ -55,10 +55,12 @@ ::view-transition-image-pair(lumx-image-lightbox) { overflow: hidden; } + ::view-transition-old(lumx-image-lightbox), ::view-transition-new(lumx-image-lightbox) { height: 100%; } + ::view-transition-group(lumx-image-lightbox) { animation-duration: $lumx-lightbox-transition-duration; diff --git a/packages/lumx-core/src/scss/components/input-helper/_index.scss b/packages/lumx-core/src/scss/components/input-helper/_index.scss index 1a5217831d..b89a4ba901 100644 --- a/packages/lumx-core/src/scss/components/input-helper/_index.scss +++ b/packages/lumx-core/src/scss/components/input-helper/_index.scss @@ -8,7 +8,7 @@ $self: &; &--theme-light { - @include lumx-input-helper(lumx-base-const("theme", "LIGHT")); + @include lumx-input-helper("theme-light"); @each $color in $lumx-input-helper-color-palette { &#{$self}--color-#{$color} { @@ -18,7 +18,7 @@ } &--theme-dark { - @include lumx-input-helper(lumx-base-const("theme", "DARK")); + @include lumx-input-helper("theme-dark"); } &__icon { diff --git a/packages/lumx-core/src/scss/components/input-helper/_mixins.scss b/packages/lumx-core/src/scss/components/input-helper/_mixins.scss index 759e7a79f1..c1c6ab612d 100644 --- a/packages/lumx-core/src/scss/components/input-helper/_mixins.scss +++ b/packages/lumx-core/src/scss/components/input-helper/_mixins.scss @@ -4,9 +4,9 @@ font-weight: var(--lumx-material-input-helper-font-weight); line-height: var(--lumx-material-input-helper-line-height); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "L2"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "L2"); } } diff --git a/packages/lumx-core/src/scss/components/input-label/_index.scss b/packages/lumx-core/src/scss/components/input-label/_index.scss index 4e3d406011..ca58ef6604 100644 --- a/packages/lumx-core/src/scss/components/input-label/_index.scss +++ b/packages/lumx-core/src/scss/components/input-label/_index.scss @@ -10,7 +10,7 @@ } &--theme-light { - @include lumx-input-label(lumx-base-const("theme", "LIGHT")); + @include lumx-input-label("theme-light"); &::before { color: lumx-color-variant("red", "N"); @@ -18,7 +18,7 @@ } &--theme-dark { - @include lumx-input-label(lumx-base-const("theme", "DARK")); + @include lumx-input-label("theme-dark"); } /** When there is a custom typography, we create a more specific selector so that it overrides the typo added by the mixin `lumx-input-label` */ diff --git a/packages/lumx-core/src/scss/components/input-label/_mixins.scss b/packages/lumx-core/src/scss/components/input-label/_mixins.scss index c84f14ef7c..c6f270e289 100644 --- a/packages/lumx-core/src/scss/components/input-label/_mixins.scss +++ b/packages/lumx-core/src/scss/components/input-label/_mixins.scss @@ -4,9 +4,9 @@ font-weight: var(--lumx-material-input-label-font-weight); line-height: var(--lumx-material-input-label-line-height); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } diff --git a/packages/lumx-core/src/scss/components/lightbox/_index.scss b/packages/lumx-core/src/scss/components/lightbox/_index.scss index e6796e3624..376b5ab3c7 100644 --- a/packages/lumx-core/src/scss/components/lightbox/_index.scss +++ b/packages/lumx-core/src/scss/components/lightbox/_index.scss @@ -40,10 +40,10 @@ &__wrapper { position: absolute; - top: map.get($lumx-sizes, lumx-base-const("size", "L")); - right: map.get($lumx-sizes, lumx-base-const("size", "L")); - bottom: map.get($lumx-sizes, lumx-base-const("size", "L")); - left: map.get($lumx-sizes, lumx-base-const("size", "L")); + top: map.get($lumx-sizes, "l"); + right: map.get($lumx-sizes, "l"); + bottom: map.get($lumx-sizes, "l"); + left: map.get($lumx-sizes, "l"); display: flex; flex-direction: column; } diff --git a/packages/lumx-core/src/scss/components/link/_index.scss b/packages/lumx-core/src/scss/components/link/_index.scss index 12bf9d41bd..18d4b505c1 100644 --- a/packages/lumx-core/src/scss/components/link/_index.scss +++ b/packages/lumx-core/src/scss/components/link/_index.scss @@ -12,9 +12,9 @@ // Fix icon alignment & > .lumx-icon, - &__content > .lumx-icon - { - &, & svg { + &__content > .lumx-icon { + &, + & svg { display: inline; line-height: initial; } diff --git a/packages/lumx-core/src/scss/components/list/_mixins.scss b/packages/lumx-core/src/scss/components/list/_mixins.scss index 0543b2825c..409feeceb9 100644 --- a/packages/lumx-core/src/scss/components/list/_mixins.scss +++ b/packages/lumx-core/src/scss/components/list/_mixins.scss @@ -25,7 +25,7 @@ } @mixin lumx-list-item-clickable() { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-default", "emphasis-low", "dark"); cursor: pointer; @@ -37,37 +37,37 @@ &:hover, &[data-lumx-hover], &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } &:active, &[data-lumx-active], { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } @mixin lumx-list-item-highlighted() { cursor: pointer; - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); &:active { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } @mixin lumx-list-item-selected($component: null) { - @include lumx-state-as-selected(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "LIGHT"), $component); + @include lumx-state-as-selected("state-default", "theme-light", $component); &:hover, &[data-lumx-hover], &[data-focus-visible-added] { - @include lumx-state-as-selected(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT"), $component); + @include lumx-state-as-selected("state-hover", "theme-light", $component); } &:active, &[data-lumx-active], { - @include lumx-state-as-selected(lumx-base-const("state", "ACTIVE"), lumx-base-const("theme", "LIGHT"), $component); + @include lumx-state-as-selected("state-active", "theme-light", $component); } } @@ -81,10 +81,10 @@ @include lumx-list-item-edge($size); @if $size == "tiny" { - width: map.get($lumx-sizes, lumx-base-const("size", "S")); + width: map.get($lumx-sizes, "s"); margin-right: $lumx-spacing-unit; } @else { - width: map.get($lumx-sizes, lumx-base-const("size", "M")); + width: map.get($lumx-sizes, "m"); margin-right: $lumx-spacing-unit * 2; } } @@ -115,7 +115,7 @@ } @mixin lumx-list-subheader-icon { - @include lumx-icon-size(lumx-base-const("size", "XXS")); + @include lumx-icon-size("xxs"); margin-right: $lumx-spacing-unit; } diff --git a/packages/lumx-core/src/scss/components/navigation/_index.scss b/packages/lumx-core/src/scss/components/navigation/_index.scss index f02500a207..515293a0a4 100644 --- a/packages/lumx-core/src/scss/components/navigation/_index.scss +++ b/packages/lumx-core/src/scss/components/navigation/_index.scss @@ -62,18 +62,18 @@ // Default state @include lumx-navigation-link-colors( $emphasis, - lumx-base-const("state", "DEFAULT"), + "state-default", $theme ); @include lumx-navigation-link-borders( $emphasis, - lumx-base-const("state", "DEFAULT") + "state-default" ); // Focus state &[data-focus-visible-added] { @include lumx-state-as-selected( - lumx-base-const("state", "FOCUS"), + "state-focus", $theme ); } @@ -83,12 +83,12 @@ &[data-lumx-hover], { @include lumx-navigation-link-colors( $emphasis, - lumx-base-const("state", "HOVER"), + "state-hover", $theme ); @include lumx-navigation-link-borders( $emphasis, - lumx-base-const("state", "HOVER") + "state-hover" ); } @@ -97,12 +97,12 @@ &[data-lumx-active] { @include lumx-navigation-link-colors( $emphasis, - lumx-base-const("state", "ACTIVE"), + "state-active", $theme ); @include lumx-navigation-link-borders( $emphasis, - lumx-base-const("state", "ACTIVE") + "state-active" ); } } @@ -152,6 +152,7 @@ min-width: $lumx-size-xxl; max-width: 400px; padding: $lumx-spacing-unit-regular; + .lumx-navigation-item { width: 100%; max-width: 100%; diff --git a/packages/lumx-core/src/scss/components/progress-tracker/_index.scss b/packages/lumx-core/src/scss/components/progress-tracker/_index.scss index a21e9317b5..a7428907b5 100644 --- a/packages/lumx-core/src/scss/components/progress-tracker/_index.scss +++ b/packages/lumx-core/src/scss/components/progress-tracker/_index.scss @@ -99,17 +99,17 @@ // Hover state .lumx-progress-tracker-step--is-clickable:hover { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } // Active state .lumx-progress-tracker-step--is-clickable:active { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } // Focus state .lumx-progress-tracker-step[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-focus", "emphasis-low", "dark"); } /* Step panel @@ -121,7 +121,7 @@ // Focus state &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-focus", "emphasis-low", "dark"); } // Active state diff --git a/packages/lumx-core/src/scss/components/radio-button/_index.scss b/packages/lumx-core/src/scss/components/radio-button/_index.scss index c1ca23981c..aff305963d 100644 --- a/packages/lumx-core/src/scss/components/radio-button/_index.scss +++ b/packages/lumx-core/src/scss/components/radio-button/_index.scss @@ -25,19 +25,19 @@ @include lumx-radio-button-input-background; #{$self}--theme-light#{$self}--is-unchecked & { - @include lumx-radio-button-input-background-status("unchecked", lumx-base-const("theme", "LIGHT")); + @include lumx-radio-button-input-background-status("unchecked", "theme-light"); } #{$self}--theme-dark#{$self}--is-unchecked & { - @include lumx-radio-button-input-background-status("unchecked", lumx-base-const("theme", "DARK")); + @include lumx-radio-button-input-background-status("unchecked", "theme-dark"); } #{$self}--theme-light#{$self}--is-checked & { - @include lumx-radio-button-input-background-status("checked", lumx-base-const("theme", "LIGHT")); + @include lumx-radio-button-input-background-status("checked", "theme-light"); } #{$self}--theme-dark#{$self}--is-checked & { - @include lumx-radio-button-input-background-status("checked", lumx-base-const("theme", "DARK")); + @include lumx-radio-button-input-background-status("checked", "theme-dark"); } } @@ -45,19 +45,19 @@ @include lumx-radio-button-input-indicator; #{$self}--theme-light#{$self}--is-unchecked & { - @include lumx-radio-button-input-indicator-status("unchecked", lumx-base-const("theme", "LIGHT")); + @include lumx-radio-button-input-indicator-status("unchecked", "theme-light"); } #{$self}--theme-dark#{$self}--is-unchecked & { - @include lumx-radio-button-input-indicator-status("unchecked", lumx-base-const("theme", "DARK")); + @include lumx-radio-button-input-indicator-status("unchecked", "theme-dark"); } #{$self}--theme-light#{$self}--is-checked & { - @include lumx-radio-button-input-indicator-status("checked", lumx-base-const("theme", "LIGHT")); + @include lumx-radio-button-input-indicator-status("checked", "theme-light"); } #{$self}--theme-dark#{$self}--is-checked & { - @include lumx-radio-button-input-indicator-status("checked", lumx-base-const("theme", "DARK")); + @include lumx-radio-button-input-indicator-status("checked", "theme-dark"); } } @@ -87,84 +87,68 @@ &.lumx-radio-button--theme-light { .lumx-radio-button__label, .lumx-radio-button__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-state-disabled-text("theme-light"); } } &.lumx-radio-button--theme-dark { .lumx-radio-button__label, .lumx-radio-button__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-state-disabled-text("theme-dark"); } } } // Hover state -.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native:hover -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:hover + .lumx-radio-button__input-placeholder { .lumx-radio-button__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } } -.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native:hover -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:hover + .lumx-radio-button__input-placeholder { .lumx-radio-button__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-hover", "emphasis-low", "light"); } } // Active state -.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native:active -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:active + .lumx-radio-button__input-placeholder { .lumx-radio-button__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } -.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native:active -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native:active + .lumx-radio-button__input-placeholder { .lumx-radio-button__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-active", "emphasis-low", "light"); } } // Focus state -.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native[data-focus-visible-added] -+ .lumx-radio-button__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); +.lumx-radio-button--theme-light.lumx-radio-button--is-unchecked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "dark"); } -.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked -.lumx-radio-button__input-native[data-focus-visible-added] -+ .lumx-radio-button__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); +.lumx-radio-button--theme-dark.lumx-radio-button--is-unchecked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "light"); } -.lumx-radio-button--theme-light.lumx-radio-button--is-checked -.lumx-radio-button__input-native[data-focus-visible-added] -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-light.lumx-radio-button--is-checked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } -.lumx-radio-button--theme-dark.lumx-radio-button--is-checked -.lumx-radio-button__input-native[data-focus-visible-added] -+ .lumx-radio-button__input-placeholder { +.lumx-radio-button--theme-dark.lumx-radio-button--is-checked .lumx-radio-button__input-native[data-focus-visible-added] + .lumx-radio-button__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } diff --git a/packages/lumx-core/src/scss/components/radio-button/_mixins.scss b/packages/lumx-core/src/scss/components/radio-button/_mixins.scss index c9c18a9267..b5cdd79473 100644 --- a/packages/lumx-core/src/scss/components/radio-button/_mixins.scss +++ b/packages/lumx-core/src/scss/components/radio-button/_mixins.scss @@ -40,15 +40,15 @@ @mixin lumx-radio-button-input-background-status($status, $theme) { @if $status == "checked" { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("primary", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @else if $status == "unchecked" { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @@ -74,9 +74,9 @@ opacity: 0; } - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("primary", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "N"); } } diff --git a/packages/lumx-core/src/scss/components/select/_index.scss b/packages/lumx-core/src/scss/components/select/_index.scss index 2cfba50f54..a34b484e6f 100644 --- a/packages/lumx-core/src/scss/components/select/_index.scss +++ b/packages/lumx-core/src/scss/components/select/_index.scss @@ -22,13 +22,13 @@ #{$self}--theme-light & { @include lumx-text-field-label-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { - @include lumx-text-field-label-color(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-label-color("state-default", "theme-dark"); } } @@ -36,28 +36,28 @@ cursor: pointer; #{$self}--theme-light & { - @include lumx-text-field-wrapper(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper("theme-light"); } #{$self}--theme-dark & { - @include lumx-text-field-wrapper(lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper("theme-dark"); } } &__input-icon { #{$self}--theme-light & { - @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-icon("theme-light"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { - @include lumx-text-field-input-icon(lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-icon("theme-dark"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); } } @@ -68,33 +68,33 @@ &__input-native { #{$self}--theme-light & { - @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-native("theme-light"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { - @include lumx-text-field-input-native(lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-native("theme-dark"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); } &--placeholder { #{$self}--theme-light & { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); } } @@ -112,11 +112,11 @@ &__input-indicator { #{$self}--theme-light & { - @include lumx-select-input-indicator(lumx-base-const("theme", "LIGHT")); + @include lumx-select-input-indicator("theme-light"); } #{$self}--theme-dark & { - @include lumx-select-input-indicator(lumx-base-const("theme", "DARK")); + @include lumx-select-input-indicator("theme-dark"); } } @@ -128,11 +128,11 @@ @include lumx-select-choices-filter; i { - @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-icon("theme-light"); } input { - @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-native("theme-light"); &::placeholder { color: lumx-color-variant("dark", "L2"); @@ -160,13 +160,13 @@ &.lumx-select--theme-light { .lumx-select__label { - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-state-disabled-text("theme-light"); } } &.lumx-select--theme-dark { .lumx-select__label { - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-state-disabled-text("theme-dark"); } } } @@ -174,19 +174,19 @@ // Hover state .lumx-select--theme-light { .lumx-select__wrapper:hover { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-state("state-hover", "theme-light"); } .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "LIGHT") + "state-hover", + "theme-light" ); &--placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "LIGHT") + "state-hover", + "theme-light" ); } } @@ -194,19 +194,19 @@ .lumx-select--theme-dark { .lumx-select__wrapper:hover { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-state("state-hover", "theme-dark"); } .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "DARK") + "state-hover", + "theme-dark" ); &--placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "DARK") + "state-hover", + "theme-dark" ); } } @@ -215,18 +215,18 @@ // Focus state .lumx-select--theme-light.lumx-select--is-open .lumx-select__wrapper, .lumx-select--theme-light .lumx-select__wrapper:focus { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-state("state-focus", "theme-light"); .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "LIGHT") + "state-focus", + "theme-light" ); &--placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "LIGHT") + "state-focus", + "theme-light" ); } } @@ -234,18 +234,18 @@ .lumx-select--theme-dark.lumx-select--is-open .lumx-select__wrapper, .lumx-select--theme-dark .lumx-select__wrapper:focus { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-state("state-focus", "theme-dark"); .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "DARK") + "state-focus", + "theme-dark" ); &--placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "DARK") + "state-focus", + "theme-dark" ); } } @@ -256,40 +256,40 @@ .lumx-select--theme-light.lumx-select--is-valid { .lumx-select__wrapper { - @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-validity("valid", "theme-light"); } .lumx-select__input-validity { - @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-validity("valid", "theme-light"); } } .lumx-select--theme-light.lumx-select--has-error { .lumx-select__wrapper { - @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-validity("error", "theme-light"); } .lumx-select__input-validity { - @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-validity("error", "theme-light"); } } .lumx-select--theme-dark.lumx-select--is-valid { .lumx-select__wrapper { - @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-validity("valid", "theme-dark"); } .lumx-select__input-validity { - @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-validity("valid", "theme-dark"); } } .lumx-select--theme-dark.lumx-select--has-error { .lumx-select__wrapper { - @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-validity("error", "theme-dark"); } .lumx-select__input-validity { - @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-validity("error", "theme-dark"); } } diff --git a/packages/lumx-core/src/scss/components/select/_mixins.scss b/packages/lumx-core/src/scss/components/select/_mixins.scss index 5914f4bd31..54b2212e11 100644 --- a/packages/lumx-core/src/scss/components/select/_mixins.scss +++ b/packages/lumx-core/src/scss/components/select/_mixins.scss @@ -5,15 +5,15 @@ margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-s)) / 2)); margin-left: math.div($lumx-spacing-unit, 2); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @mixin lumx-select-choices-filter() { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT")); + @include lumx-has-divider("theme-light"); display: flex; align-items: center; diff --git a/packages/lumx-core/src/scss/components/side-navigation/_index.scss b/packages/lumx-core/src/scss/components/side-navigation/_index.scss index a54df93c87..0a49d7767c 100644 --- a/packages/lumx-core/src/scss/components/side-navigation/_index.scss +++ b/packages/lumx-core/src/scss/components/side-navigation/_index.scss @@ -22,24 +22,24 @@ @include lumx-side-navigation-link; & > i:first-child { - @include lumx-side-navigation-link-icon(lumx-base-const("position", "LEFT")); + @include lumx-side-navigation-link-icon("position-left"); } & > i:last-child { - @include lumx-side-navigation-link-icon(lumx-base-const("position", "RIGHT")); + @include lumx-side-navigation-link-icon("position-right"); } & > span { #{$self}--emphasis-high & { - @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "HIGH")); + @include lumx-side-navigation-link-label("emphasis-high"); } #{$self}--emphasis-medium & { - @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "MEDIUM")); + @include lumx-side-navigation-link-label("emphasis-medium"); } #{$self}--emphasis-low & { - @include lumx-side-navigation-link-label(lumx-base-const("emphasis", "LOW")); + @include lumx-side-navigation-link-label("emphasis-low"); } } } @@ -66,5 +66,5 @@ .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__link, .lumx-side-navigation-item--is-selected > .lumx-side-navigation-item__wrapper > .lumx-side-navigation-item__link { - @include lumx-list-item-selected('side-navigation-item'); + @include lumx-list-item-selected("side-navigation-item"); } diff --git a/packages/lumx-core/src/scss/components/side-navigation/_mixins.scss b/packages/lumx-core/src/scss/components/side-navigation/_mixins.scss index 6215e32e30..355b2e7a6d 100644 --- a/packages/lumx-core/src/scss/components/side-navigation/_mixins.scss +++ b/packages/lumx-core/src/scss/components/side-navigation/_mixins.scss @@ -20,7 +20,7 @@ flex: 1 1 auto; flex-direction: row; align-items: center; - min-height: map.get($lumx-sizes, lumx-base-const("size", "M")); + min-height: map.get($lumx-sizes, "m"); padding: 0 $lumx-spacing-unit; text-align: start; text-decoration: none; @@ -33,9 +33,9 @@ @mixin lumx-side-navigation-link-icon($position) { flex-shrink: 0; - @if $position == lumx-base-const("position", "LEFT") { + @if $position == "position-left" { margin-right: $lumx-spacing-unit * 2; - } @else if $position == lumx-base-const("position", "RIGHT") { + } @else if $position == "position-right" { margin-left: $lumx-spacing-unit * 2; } } @@ -43,11 +43,11 @@ @mixin lumx-side-navigation-link-label($emphasis) { flex: 1 1 auto; - @if $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $emphasis == "emphasis-high" { @include lumx-typography("title"); - } @else if $emphasis == lumx-base-const("emphasis", "MEDIUM") { + } @else if $emphasis == "emphasis-medium" { @include lumx-typography("subtitle1"); - } @else if $emphasis == lumx-base-const("emphasis", "LOW") { + } @else if $emphasis == "emphasis-low" { @include lumx-typography("body1"); } } diff --git a/packages/lumx-core/src/scss/components/slider/_index.scss b/packages/lumx-core/src/scss/components/slider/_index.scss index a2ce9a4de7..5d2e319bb9 100644 --- a/packages/lumx-core/src/scss/components/slider/_index.scss +++ b/packages/lumx-core/src/scss/components/slider/_index.scss @@ -46,7 +46,7 @@ &__wrapper { position: relative; flex: 1 1 auto; - height: map.get($lumx-sizes, lumx-base-const("size", "S")); + height: map.get($lumx-sizes, "s"); cursor: pointer; } @@ -96,19 +96,19 @@ #{$self}--theme-light & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } #{$self}--theme-dark & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } @@ -149,19 +149,19 @@ .lumx-slider__handle:hover { .lumx-slider--theme-light & { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } .lumx-slider--theme-dark & { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } @@ -170,19 +170,19 @@ .lumx-slider__handle:active { .lumx-slider--theme-light & { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } .lumx-slider--theme-dark & { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } @@ -191,19 +191,19 @@ .lumx-slider__handle[data-focus-visible-added] { .lumx-slider--theme-light & { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } .lumx-slider--theme-dark & { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } diff --git a/packages/lumx-core/src/scss/components/slideshow/_index.scss b/packages/lumx-core/src/scss/components/slideshow/_index.scss index f2ce860e1b..89594cb58e 100644 --- a/packages/lumx-core/src/scss/components/slideshow/_index.scss +++ b/packages/lumx-core/src/scss/components/slideshow/_index.scss @@ -68,7 +68,6 @@ } } - @for $i from 1 through 12 { .lumx-slideshow--group-by-#{$i} .lumx-slideshow-item { flex: 0 0 #{math.div(100, $i) + "%"}; @@ -76,6 +75,7 @@ overflow: hidden; } } + /* Slideshow controls ========================================================================== */ @@ -92,6 +92,7 @@ &__pagination { align-items: center; + // Compute max width for N items based on their size, margin and focus outline max-width: ($item-max-count * ($item-size + $item-margin-inline)) + $item-focus-outline * 2 + $item-size; overflow: hidden; @@ -131,17 +132,18 @@ } #{$self}--theme-light & { - border-color:lumx-color-variant("dark", "L2"); + border-color: lumx-color-variant("dark", "L2"); border-width: 2px; &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-focus", "emphasis-low", "dark"); } &:hover { background-color: lumx-color-variant("primary", "N"); border-width: 0; } + &--is-active { background-color: lumx-color-variant("primary", "N"); width: $item-size*2; @@ -149,7 +151,7 @@ border-width: 0; &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "primary"); + @include lumx-state("state-focus", "emphasis-low", "primary"); } } } @@ -158,19 +160,20 @@ border-color: lumx-color-variant("light", "L2"); &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-focus", "emphasis-low", "light"); } &:hover { background-color: lumx-color-variant("light", "N"); } + &--is-active { background-color: lumx-color-variant("light", "N"); width: $item-size*2; border-radius: $lumx-border-radius; &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-focus", "emphasis-low", "light"); } } } diff --git a/packages/lumx-core/src/scss/components/switch/_index.scss b/packages/lumx-core/src/scss/components/switch/_index.scss index eb6359141b..af86d355ee 100644 --- a/packages/lumx-core/src/scss/components/switch/_index.scss +++ b/packages/lumx-core/src/scss/components/switch/_index.scss @@ -37,47 +37,47 @@ } #{$self}--theme-light#{$self}--is-unchecked & { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-default", "emphasis-low", "dark"); } #{$self}--theme-dark#{$self}--is-unchecked & { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-default", "emphasis-low", "light"); } #{$self}--theme-light#{$self}--is-checked & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } #{$self}--theme-dark#{$self}--is-checked & { @include lumx-state( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("emphasis", "HIGH"), + "state-default", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } &__input-indicator { #{$self}--theme-light#{$self}--is-unchecked & { - @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "LIGHT")); + @include lumx-switch-input-indicator("unchecked", "theme-light"); } #{$self}--theme-dark#{$self}--is-unchecked & { - @include lumx-switch-input-indicator("unchecked", lumx-base-const("theme", "DARK")); + @include lumx-switch-input-indicator("unchecked", "theme-dark"); } #{$self}--theme-light#{$self}--is-checked & { - @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "LIGHT")); + @include lumx-switch-input-indicator("checked", "theme-light"); } #{$self}--theme-dark#{$self}--is-checked & { - @include lumx-switch-input-indicator("checked", lumx-base-const("theme", "DARK")); + @include lumx-switch-input-indicator("checked", "theme-dark"); } } @@ -123,135 +123,111 @@ &.lumx-switch--theme-light { .lumx-switch__label, .lumx-switch__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-state-disabled-text("theme-light"); } } &.lumx-switch--theme-dark { .lumx-switch__label, .lumx-switch__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-state-disabled-text("theme-dark"); } } } // Hover state -.lumx-switch--theme-light.lumx-switch--is-unchecked -.lumx-switch__input-native:hover -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder { .lumx-switch__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } } -.lumx-switch--theme-dark.lumx-switch--is-unchecked -.lumx-switch__input-native:hover -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder { .lumx-switch__input-background { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-hover", "emphasis-low", "light"); } } -.lumx-switch--theme-light.lumx-switch--is-checked -.lumx-switch__input-native:hover -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder { .lumx-switch__input-background { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } } -.lumx-switch--theme-dark.lumx-switch--is-checked -.lumx-switch__input-native:hover -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native:hover + .lumx-switch__input-placeholder { .lumx-switch__input-background { @include lumx-state( - lumx-base-const("state", "HOVER"), - lumx-base-const("emphasis", "HIGH"), + "state-hover", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } // Active state -.lumx-switch--theme-light.lumx-switch--is-unchecked -.lumx-switch__input-native:active -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native:active + .lumx-switch__input-placeholder { .lumx-switch__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } -.lumx-switch--theme-dark.lumx-switch--is-unchecked -.lumx-switch__input-native:active -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native:active + .lumx-switch__input-placeholder { .lumx-switch__input-background { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-active", "emphasis-low", "light"); } } -.lumx-switch--theme-light.lumx-switch--is-checked -.lumx-switch__input-native:active -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native:active + .lumx-switch__input-placeholder { .lumx-switch__input-background { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } } -.lumx-switch--theme-dark.lumx-switch--is-checked -.lumx-switch__input-native:active -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native:active + .lumx-switch__input-placeholder { .lumx-switch__input-background { @include lumx-state( - lumx-base-const("state", "ACTIVE"), - lumx-base-const("emphasis", "HIGH"), + "state-active", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } } // Focus state -.lumx-switch--theme-light.lumx-switch--is-unchecked -.lumx-switch__input-native[data-focus-visible-added] -+ .lumx-switch__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); +.lumx-switch--theme-light.lumx-switch--is-unchecked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "dark"); } -.lumx-switch--theme-dark.lumx-switch--is-unchecked -.lumx-switch__input-native[data-focus-visible-added] -+ .lumx-switch__input-placeholder { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); +.lumx-switch--theme-dark.lumx-switch--is-unchecked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder { + @include lumx-state("state-focus", "emphasis-low", "light"); } -.lumx-switch--theme-light.lumx-switch--is-checked -.lumx-switch__input-native[data-focus-visible-added] -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-light.lumx-switch--is-checked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "LIGHT") + "theme-light" ); } -.lumx-switch--theme-dark.lumx-switch--is-checked -.lumx-switch__input-native[data-focus-visible-added] -+ .lumx-switch__input-placeholder { +.lumx-switch--theme-dark.lumx-switch--is-checked .lumx-switch__input-native[data-focus-visible-added] + .lumx-switch__input-placeholder { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "HIGH"), + "state-focus", + "emphasis-high", "primary", - lumx-base-const("theme", "DARK") + "theme-dark" ); } diff --git a/packages/lumx-core/src/scss/components/switch/_mixins.scss b/packages/lumx-core/src/scss/components/switch/_mixins.scss index 8aaf9a4c55..51fa326e39 100644 --- a/packages/lumx-core/src/scss/components/switch/_mixins.scss +++ b/packages/lumx-core/src/scss/components/switch/_mixins.scss @@ -52,26 +52,26 @@ @if $status == "checked" { right: var(--lumx-material-switch-indicator-offset); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("light", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("primary", "N"); } } @else if $status == "unchecked" { left: var(--lumx-material-switch-indicator-offset); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "N"); } } } @mixin lumx-switch-input-indicator-disabled($theme) { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("dark", "L3"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "L3"); } } diff --git a/packages/lumx-core/src/scss/components/table/_index.scss b/packages/lumx-core/src/scss/components/table/_index.scss index a9f91bafa0..a4fc6e0bc0 100644 --- a/packages/lumx-core/src/scss/components/table/_index.scss +++ b/packages/lumx-core/src/scss/components/table/_index.scss @@ -11,11 +11,11 @@ @include lumx-table-row; #{$self}--theme-light#{$self}--has-dividers & { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT")); + @include lumx-has-divider("theme-light"); } #{$self}--theme-dark#{$self}--has-dividers & { - @include lumx-has-divider(lumx-base-const("theme", "DARK")); + @include lumx-has-divider("theme-dark"); } #{$self}--has-dividers &:last-child { @@ -24,11 +24,11 @@ &--is-selected { #{$self}--theme-light & { - @include lumx-table-row-is-selected(lumx-base-const("theme", "LIGHT")); + @include lumx-table-row-is-selected("theme-light"); } #{$self}--theme-dark & { - @include lumx-table-row-is-selected(lumx-base-const("theme", "DARK")); + @include lumx-table-row-is-selected("theme-dark"); } } } @@ -36,21 +36,21 @@ &__cell { &--head { #{$self}--theme-light & { - @include lumx-table-cell("head", lumx-base-const("theme", "LIGHT")); + @include lumx-table-cell("head", "theme-light"); } #{$self}--theme-dark & { - @include lumx-table-cell("head", lumx-base-const("theme", "DARK")); + @include lumx-table-cell("head", "theme-dark"); } } &--body { #{$self}--theme-light & { - @include lumx-table-cell("body", lumx-base-const("theme", "LIGHT")); + @include lumx-table-cell("body", "theme-light"); } #{$self}--theme-dark & { - @include lumx-table-cell("body", lumx-base-const("theme", "DARK")); + @include lumx-table-cell("body", "theme-dark"); } } @@ -68,11 +68,11 @@ &--is-sorted #{$self}__cell-wrapper { #{$self}--theme-light & { - @include lumx-table-cell-is-sorted(lumx-base-const("theme", "LIGHT")); + @include lumx-table-cell-is-sorted("theme-light"); } #{$self}--theme-dark & { - @include lumx-table-cell-is-sorted(lumx-base-const("theme", "DARK")); + @include lumx-table-cell-is-sorted("theme-dark"); } } } @@ -119,20 +119,20 @@ .lumx-table__row--is-clickable:not(.lumx-table__row--is-selected) { .lumx-table--theme-light & { - @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), false); + @include lumx-table-row-is-clickable("theme-light", false); } .lumx-table--theme-dark & { - @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), false); + @include lumx-table-row-is-clickable("theme-dark", false); } } .lumx-table__row--is-clickable.lumx-table__row--is-selected { .lumx-table--theme-light & { - @include lumx-table-row-is-clickable(lumx-base-const("theme", "LIGHT"), true); + @include lumx-table-row-is-clickable("theme-light", true); } .lumx-table--theme-dark & { - @include lumx-table-row-is-clickable(lumx-base-const("theme", "DARK"), true); + @include lumx-table-row-is-clickable("theme-dark", true); } } diff --git a/packages/lumx-core/src/scss/components/table/_mixins.scss b/packages/lumx-core/src/scss/components/table/_mixins.scss index 36d5dfdcc1..61a7e4bdf5 100644 --- a/packages/lumx-core/src/scss/components/table/_mixins.scss +++ b/packages/lumx-core/src/scss/components/table/_mixins.scss @@ -12,13 +12,13 @@ @mixin lumx-table-row-is-clickable($theme, $is-selected) { &:hover { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { @if $is-selected == true { background-color: lumx-color-variant("primary", "L4"); } @else { background-color: lumx-color-variant("dark", "L6"); } - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { @if $is-selected == true { background-color: lumx-color-variant("light", "L4"); } @else { @@ -28,16 +28,16 @@ } &[data-focus-visible-added] { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "LOW"), + "state-focus", + "emphasis-low", "dark" ); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { @include lumx-state( - lumx-base-const("state", "FOCUS"), - lumx-base-const("emphasis", "LOW"), + "state-focus", + "emphasis-low", "light" ); } @@ -45,9 +45,9 @@ } @mixin lumx-table-row-is-selected($theme) { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { background-color: lumx-color-variant("primary", "L5"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "L5"); } } @@ -61,15 +61,15 @@ @if $variant == "head" { @include lumx-has-divider($theme); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "L2"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "L2"); } } @else if $variant == "body" { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @@ -81,9 +81,9 @@ } @mixin lumx-table-cell-is-sorted($theme) { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } diff --git a/packages/lumx-core/src/scss/components/tabs/_index.scss b/packages/lumx-core/src/scss/components/tabs/_index.scss index 3d84e1748a..672c2df13f 100644 --- a/packages/lumx-core/src/scss/components/tabs/_index.scss +++ b/packages/lumx-core/src/scss/components/tabs/_index.scss @@ -17,31 +17,31 @@ &__link { &:not(&--is-active):not(&--is-disabled) { - @include lumx-tabs-link(lumx-base-const("emphasis", "LOW")); + @include lumx-tabs-link("emphasis-low"); #{$self}--theme-light & { - @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT")); + @include lumx-tabs-link-color("emphasis-low", "theme-light"); } #{$self}--theme-dark & { - @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK")); + @include lumx-tabs-link-color("emphasis-low", "theme-dark"); } } &--is-active { - @include lumx-tabs-link(lumx-base-const("emphasis", "SELECTED")); + @include lumx-tabs-link("emphasis-selected"); #{$self}--theme-light & { @include lumx-tabs-link-color( - lumx-base-const("emphasis", "SELECTED"), - lumx-base-const("theme", "LIGHT") + "emphasis-selected", + "theme-light" ); } #{$self}--theme-dark & { @include lumx-tabs-link-color( - lumx-base-const("emphasis", "SELECTED"), - lumx-base-const("theme", "DARK") + "emphasis-selected", + "theme-dark" ); } } @@ -62,19 +62,19 @@ .lumx-tabs--layout-clustered.lumx-tabs--position-left { .lumx-tabs__links { - @include lumx-tabs-links-position(lumx-base-const("position", "LEFT")); + @include lumx-tabs-links-position("position-left"); } } .lumx-tabs--layout-clustered.lumx-tabs--position-center { .lumx-tabs__links { - @include lumx-tabs-links-position(lumx-base-const("position", "CENTER")); + @include lumx-tabs-links-position("position-center"); } } .lumx-tabs--layout-clustered.lumx-tabs--position-right { .lumx-tabs__links { - @include lumx-tabs-links-position(lumx-base-const("position", "RIGHT")); + @include lumx-tabs-links-position("position-right"); } } @@ -83,16 +83,16 @@ // Disabled state .lumx-tabs__link--is-disabled { - @include lumx-tabs-link(lumx-base-const("emphasis", "LOW")); + @include lumx-tabs-link("emphasis-low"); .lumx-tabs--theme-light & { - @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "LIGHT")); - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-tabs-link-color("emphasis-low", "theme-light"); + @include lumx-state-disabled-text("theme-light"); } .lumx-tabs--theme-dark & { - @include lumx-tabs-link-color(lumx-base-const("emphasis", "LOW"), lumx-base-const("theme", "DARK")); - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-tabs-link-color("emphasis-low", "theme-dark"); + @include lumx-state-disabled-text("theme-dark"); } } @@ -105,7 +105,7 @@ // Focus state &[data-focus-visible-added] { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-focus", "emphasis-low", "dark"); } // Active state diff --git a/packages/lumx-core/src/scss/components/tabs/_mixins.scss b/packages/lumx-core/src/scss/components/tabs/_mixins.scss index 7167e4f87d..aaf297e89d 100644 --- a/packages/lumx-core/src/scss/components/tabs/_mixins.scss +++ b/packages/lumx-core/src/scss/components/tabs/_mixins.scss @@ -4,11 +4,11 @@ } @mixin lumx-tabs-links-position($position) { - @if $position == lumx-base-const("position", "LEFT") { + @if $position == "position-left" { justify-content: flex-start; - } @else if $position == lumx-base-const("position", "CENTER") { + } @else if $position == "position-center" { justify-content: center; - } @else if $position == lumx-base-const("position", "RIGHT") { + } @else if $position == "position-right" { justify-content: flex-end; } } @@ -89,10 +89,10 @@ } &[data-focus-visible-added] { - @if $theme == lumx-base-const("theme", "LIGHT") { - @include lumx-state-low(lumx-base-const("state", "FOCUS"), "dark"); - } @else if $theme == lumx-base-const("theme", "DARK") { - @include lumx-state-low(lumx-base-const("state", "FOCUS"), "light"); + @if $theme == "theme-light" { + @include lumx-state-low("state-focus", "dark"); + } @else if $theme == "theme-dark" { + @include lumx-state-low("state-focus", "light"); } } } diff --git a/packages/lumx-core/src/scss/components/text-field/_index.scss b/packages/lumx-core/src/scss/components/text-field/_index.scss index 4b505e8938..749274c70a 100644 --- a/packages/lumx-core/src/scss/components/text-field/_index.scss +++ b/packages/lumx-core/src/scss/components/text-field/_index.scss @@ -28,13 +28,13 @@ #{$self}--theme-light & { @include lumx-text-field-label-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { - @include lumx-text-field-label-color(lumx-base-const("state", "DEFAULT"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-label-color("state-default", "theme-dark"); } } @@ -73,28 +73,28 @@ &__wrapper { #{$self}--theme-light & { - @include lumx-text-field-wrapper(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper("theme-light"); } #{$self}--theme-dark & { - @include lumx-text-field-wrapper(lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper("theme-dark"); } } &__input-icon { #{$self}--theme-light & { - @include lumx-text-field-input-icon(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-icon("theme-light"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } #{$self}--theme-dark & { - @include lumx-text-field-input-icon(lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-icon("theme-dark"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); } } @@ -105,31 +105,31 @@ &__input-native { #{$self}--theme-light & { - @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-native("theme-light"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); &::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "LIGHT") + "state-default", + "theme-light" ); } } #{$self}--theme-dark & { - @include lumx-text-field-input-native(lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-native("theme-dark"); @include lumx-text-field-input-content-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); &::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "DEFAULT"), - lumx-base-const("theme", "DARK") + "state-default", + "theme-dark" ); } } @@ -172,14 +172,14 @@ &.lumx-text-field--theme-light { .lumx-text-field__label, .lumx-text-field__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "LIGHT")); + @include lumx-state-disabled-text("theme-light"); } } &.lumx-text-field--theme-dark { .lumx-text-field__label, .lumx-text-field__helper { - @include lumx-state-disabled-text(lumx-base-const("theme", "DARK")); + @include lumx-state-disabled-text("theme-dark"); } } } @@ -187,42 +187,42 @@ // Hover state .lumx-text-field--theme-light { .lumx-text-field__wrapper:hover { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-state("state-hover", "theme-light"); } .lumx-text-field__input-icon, .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "LIGHT") + "state-hover", + "theme-light" ); } .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "LIGHT") + "state-hover", + "theme-light" ); } } .lumx-text-field--theme-dark { .lumx-text-field__wrapper:hover { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "HOVER"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-state("state-hover", "theme-dark"); } .lumx-text-field__input-icon, .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "DARK") + "state-hover", + "theme-dark" ); } .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "HOVER"), - lumx-base-const("theme", "DARK") + "state-hover", + "theme-dark" ); } } @@ -230,50 +230,50 @@ // Focus state .lumx-text-field--theme-light.lumx-text-field--is-focus { .lumx-text-field__label { - @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-label-color("state-focus", "theme-light"); } .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-state("state-focus", "theme-light"); } .lumx-text-field__input-icon, .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "LIGHT") + "state-focus", + "theme-light" ); } .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "LIGHT") + "state-focus", + "theme-light" ); } } .lumx-text-field--theme-dark.lumx-text-field--is-focus { .lumx-text-field__label { - @include lumx-text-field-label-color(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-label-color("state-focus", "theme-dark"); } .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-state(lumx-base-const("state", "FOCUS"), lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-state("state-focus", "theme-dark"); } .lumx-text-field__input-icon, .lumx-text-field__input-native { @include lumx-text-field-input-content-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "DARK") + "state-focus", + "theme-dark" ); } .lumx-text-field__input-native::placeholder { @include lumx-text-field-input-placeholder-color( - lumx-base-const("state", "FOCUS"), - lumx-base-const("theme", "DARK") + "state-focus", + "theme-dark" ); } } @@ -283,40 +283,40 @@ .lumx-text-field--theme-light.lumx-text-field--is-valid { .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-validity("valid", "theme-light"); } .lumx-text-field__input-validity { - @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-validity("valid", "theme-light"); } } .lumx-text-field--theme-light.lumx-text-field--has-error { .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-wrapper-validity("error", "theme-light"); } .lumx-text-field__input-validity { - @include lumx-text-field-input-validity("error", lumx-base-const("theme", "LIGHT")); + @include lumx-text-field-input-validity("error", "theme-light"); } } .lumx-text-field--theme-dark.lumx-text-field--is-valid { .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-validity("valid", lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-validity("valid", "theme-dark"); } .lumx-text-field__input-validity { - @include lumx-text-field-input-validity("valid", lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-validity("valid", "theme-dark"); } } .lumx-text-field--theme-dark.lumx-text-field--has-error { .lumx-text-field__wrapper { - @include lumx-text-field-wrapper-validity("error", lumx-base-const("theme", "DARK")); + @include lumx-text-field-wrapper-validity("error", "theme-dark"); } .lumx-text-field__input-validity { - @include lumx-text-field-input-validity("error", lumx-base-const("theme", "DARK")); + @include lumx-text-field-input-validity("error", "theme-dark"); } } diff --git a/packages/lumx-core/src/scss/components/text-field/_mixins.scss b/packages/lumx-core/src/scss/components/text-field/_mixins.scss index e0992bc656..baf96b1f7d 100644 --- a/packages/lumx-core/src/scss/components/text-field/_mixins.scss +++ b/packages/lumx-core/src/scss/components/text-field/_mixins.scss @@ -49,13 +49,13 @@ &::before { border-width: var(--lumx-text-field-state-focus-input-border-top-width) var(--lumx-text-field-state-focus-input-border-right-width) var(--lumx-text-field-state-focus-input-border-bottom-width) var(--lumx-text-field-state-focus-input-border-left-width); - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { @if $validity == "valid" { border-color: lumx-color-variant("green", "N"); } @else if $validity == "error" { border-color: lumx-color-variant("red", "N"); } - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { border-color: lumx-color-variant("light", "N"); } } @@ -66,9 +66,9 @@ margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xs)) / 2)); margin-right: $lumx-spacing-unit; - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @@ -90,15 +90,14 @@ outline: none; // Always show the up/down arrow, not just on hover or focus - &[type=number]::-webkit-inner-spin-button, - &[type=number]::-webkit-outer-spin-button { + &[type="number"]::-webkit-inner-spin-button, + &[type="number"]::-webkit-outer-spin-button { opacity: 1; - } - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } @@ -116,13 +115,13 @@ margin-top: calc(var(--lumx-text-field-wrapper-padding-vertical) + ((var(--lumx-material-text-field-input-content-line-height) - var(--lumx-size-xxs)) / 2)); margin-left: $lumx-spacing-unit; - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { @if $validity == "valid" { color: lumx-color-variant("green", "N"); } @else if $validity == "error" { color: lumx-color-variant("red", "N"); } - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "N"); } } diff --git a/packages/lumx-core/src/scss/components/text/_index.scss b/packages/lumx-core/src/scss/components/text/_index.scss index b2d1e0b970..63c6186599 100644 --- a/packages/lumx-core/src/scss/components/text/_index.scss +++ b/packages/lumx-core/src/scss/components/text/_index.scss @@ -26,7 +26,8 @@ } // Fix icon alignment - .lumx-icon, .lumx-icon > svg { + .lumx-icon, + .lumx-icon > svg { display: inline; } } diff --git a/packages/lumx-core/src/scss/components/thumbnail/_index.scss b/packages/lumx-core/src/scss/components/thumbnail/_index.scss index f696c71801..e87e6965f5 100644 --- a/packages/lumx-core/src/scss/components/thumbnail/_index.scss +++ b/packages/lumx-core/src/scss/components/thumbnail/_index.scss @@ -183,12 +183,12 @@ /* Hover */ &:hover::after, &:focus::after { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-hover", "emphasis-low", "dark"); } /* Active */ &:active::after { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-active", "emphasis-low", "dark"); } } @@ -202,14 +202,14 @@ /* Focused (light theme) */ .lumx-thumbnail--theme-light.lumx-thumbnail--is-clickable { &[data-focus-visible-added]::after { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "dark"); + @include lumx-state("state-focus", "emphasis-low", "dark"); } } /* Focused (dark theme) */ .lumx-thumbnail--theme-dark.lumx-thumbnail--is-clickable { &[data-focus-visible-added]::after { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "LOW"), "light"); + @include lumx-state("state-focus", "emphasis-low", "light"); } } @@ -260,7 +260,7 @@ /* Thumbnail badge mask ========================================================================== */ -$badge-radius-size: math.div(map.get($lumx-sizes, lumx-base-const("size", "XS")), 2) + 2; +$badge-radius-size: math.div(map.get($lumx-sizes, "xs"), 2) + 2; .lumx-thumbnail--has-badge { .lumx-thumbnail__background, diff --git a/packages/lumx-core/src/scss/components/uploader/_index.scss b/packages/lumx-core/src/scss/components/uploader/_index.scss index 7ee97654f2..787efc06c0 100644 --- a/packages/lumx-core/src/scss/components/uploader/_index.scss +++ b/packages/lumx-core/src/scss/components/uploader/_index.scss @@ -14,36 +14,36 @@ padding: 0; &--theme-light { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), "dark"); + @include lumx-state("state-default", "emphasis-medium", "dark"); &:hover { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), "dark"); + @include lumx-state("state-hover", "emphasis-medium", "dark"); } &:active { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), "dark"); + @include lumx-state("state-active", "emphasis-medium", "dark"); } &[data-focus-visible-added], &:focus-within { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), "dark"); + @include lumx-state("state-focus", "emphasis-medium", "dark"); } } &--theme-dark { - @include lumx-state(lumx-base-const("state", "DEFAULT"), lumx-base-const("emphasis", "MEDIUM"), "light"); + @include lumx-state("state-default", "emphasis-medium", "light"); &:hover { - @include lumx-state(lumx-base-const("state", "HOVER"), lumx-base-const("emphasis", "MEDIUM"), "light"); + @include lumx-state("state-hover", "emphasis-medium", "light"); } &:active { - @include lumx-state(lumx-base-const("state", "ACTIVE"), lumx-base-const("emphasis", "MEDIUM"), "light"); + @include lumx-state("state-active", "emphasis-medium", "light"); } &[data-focus-visible-added], &:focus-within { - @include lumx-state(lumx-base-const("state", "FOCUS"), lumx-base-const("emphasis", "MEDIUM"), "light"); + @include lumx-state("state-focus", "emphasis-medium", "light"); } } diff --git a/packages/lumx-core/src/scss/components/user-block/_index.scss b/packages/lumx-core/src/scss/components/user-block/_index.scss index 19343241e1..a5cdf500ef 100644 --- a/packages/lumx-core/src/scss/components/user-block/_index.scss +++ b/packages/lumx-core/src/scss/components/user-block/_index.scss @@ -56,7 +56,6 @@ @include lumx-typography("body1"); } - @include lumx-typography("subtitle1"); #{$self}--orientation-vertical & { @@ -110,7 +109,7 @@ &__action, &__actions, - &__after { + &__after { margin-top: $lumx-spacing-unit * 2; } } diff --git a/packages/lumx-core/src/scss/core/base/_helpers.scss b/packages/lumx-core/src/scss/core/base/_helpers.scss index c6ea04b5ec..32d0781ccf 100644 --- a/packages/lumx-core/src/scss/core/base/_helpers.scss +++ b/packages/lumx-core/src/scss/core/base/_helpers.scss @@ -35,6 +35,7 @@ } /** Need to remove the margin style on popper elements or else we get warnings in the console */ -.lumx-popover.visually-hidden, .lumx-tooltip.visually-hidden { +.lumx-popover.visually-hidden, +.lumx-tooltip.visually-hidden { margin: revert !important; } diff --git a/packages/lumx-core/src/scss/core/state/_mixins.scss b/packages/lumx-core/src/scss/core/state/_mixins.scss index 493a498149..ed002a2b77 100644 --- a/packages/lumx-core/src/scss/core/state/_mixins.scss +++ b/packages/lumx-core/src/scss/core/state/_mixins.scss @@ -1,6 +1,6 @@ @mixin lumx-state-high($state, $color, $theme) { - @if $state == lumx-base-const("state", "DEFAULT") { - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $state == "state-default" { + @if $theme == "theme-light" { background-color: lumx-color-variant($color, "N"); @if $color == "yellow" { @@ -8,35 +8,35 @@ } @else { color: lumx-color-variant("light", "N"); } - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant($color, "N"); background-color: lumx-color-variant("light", "N"); } - } @else if $state == lumx-base-const("state", "HOVER") { - @if $theme == lumx-base-const("theme", "LIGHT") { + } @else if $state == "state-hover" { + @if $theme == "theme-light" { background-color: lumx-color-variant($color, "D1"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "L1"); } - } @else if $state == lumx-base-const("state", "ACTIVE") { - @if $theme == lumx-base-const("theme", "LIGHT") { + } @else if $state == "state-active" { + @if $theme == "theme-light" { background-color: lumx-color-variant($color, "D2"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { background-color: lumx-color-variant("light", "L2"); } - } @else if $state == lumx-base-const("state", "FOCUS") { + } @else if $state == "state-focus" { outline-offset: 2px; - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { outline: 2px solid lumx-color-variant("dark", "N"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { outline: 2px solid lumx-color-variant("light", "N"); } } } @mixin lumx-state-medium($state, $color) { - @if $state == lumx-base-const("state", "DEFAULT") { + @if $state == "state-default" { background-color: lumx-color-variant($color, "L5"); @if $color == "yellow" { @@ -44,77 +44,90 @@ } @else { color: lumx-color-variant($color, "D2"); } - } @else if $state == lumx-base-const("state", "HOVER") { + } @else if $state == "state-hover" { background-color: lumx-color-variant($color, "L4"); - } @else if $state == lumx-base-const("state", "ACTIVE") { + } @else if $state == "state-active" { background-color: lumx-color-variant($color, "L3"); - } @else if $state == lumx-base-const("state", "FOCUS") { + } @else if $state == "state-focus" { outline: 2px solid lumx-color-variant($color, "N"); outline-offset: 2px; } } @mixin lumx-state-as-selected($state, $theme, $component: null) { - @if $theme == lumx-base-const("theme", "LIGHT") { - @if $state == lumx-base-const("state", "DEFAULT") { + @if $theme == "theme-light" { + @if $state == "state-default" { color: lumx-color-variant("primary", "D2"); - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("primary", "L5"), - ); - } @else if $state == lumx-base-const("state", "HOVER") { - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("primary", "L4"), - ); - } @else if $state == lumx-base-const("state", "ACTIVE") { - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("primary", "L3"), - ); - } @else if $state == lumx-base-const("state", "FOCUS") { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("primary", "L5"), + ); + } @else if $state == "state-hover" { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("primary", "L4"), + ); + } @else if $state == "state-active" { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("primary", "L3"), + ); + } @else if $state == "state-focus" { outline: 2px solid lumx-color-variant("dark", "N"); outline-offset: 2px; } - } @else if $theme == lumx-base-const("theme", "DARK") { - @if $state == lumx-base-const("state", "DEFAULT") { + } @else if $theme == "theme-dark" { + @if $state == "state-default" { color: lumx-color-variant("light", "N"); - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("light", "L3"), - ); - } @else if $state == lumx-base-const("state", "HOVER") { - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("light", "L4"), - ); - } @else if $state == lumx-base-const("state", "ACTIVE") { - background-color: if($component, - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), - lumx-color-variant("light", "L5"), - ); - } @else if $state == lumx-base-const("state", "FOCUS") { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("light", "L3"), + ); + } @else if $state == "state-hover" { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("light", "L4"), + ); + } @else if $state == "state-active" { + background-color: + if( + $component, + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-background-color), + lumx-color-variant("light", "L5"), + ); + } @else if $state == "state-focus" { outline: 2px solid lumx-color-variant("light", "N"); outline-offset: 2px; } } - @if $component and $state != lumx-base-const("state", "FOCUS") { - box-shadow: inset 0 0 0 - var(--lumx-#{$component}-emphasis-selected-#{$state}-border-width) - var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-border-color); + @if $component and $state != "state-focus" { + box-shadow: + inset 0 0 0 + var(--lumx-#{$component}-emphasis-selected-#{$state}-border-width) + var(--lumx-#{$component}-emphasis-selected-#{$state}-#{$theme}-border-color); } } @mixin lumx-state-low($state, $color) { - @if $state == lumx-base-const("state", "DEFAULT") { + @if $state == "state-default" { color: lumx-color-variant($color, "D2"); background-color: transparent; - } @else if $state == lumx-base-const("state", "HOVER") { + } @else if $state == "state-hover" { background-color: lumx-color-variant($color, "L5"); - } @else if $state == lumx-base-const("state", "ACTIVE") { + } @else if $state == "state-active" { background-color: lumx-color-variant($color, "L4"); - } @else if $state == lumx-base-const("state", "FOCUS") { + } @else if $state == "state-focus" { outline: 2px solid lumx-color-variant($color, "N"); outline-offset: 2px; } @@ -123,9 +136,9 @@ @mixin lumx-state-disabled-text($theme) { pointer-events: none; - @if $theme == lumx-base-const("theme", "LIGHT") { + @if $theme == "theme-light" { color: lumx-color-variant("dark", "L3"); - } @else if $theme == lumx-base-const("theme", "DARK") { + } @else if $theme == "theme-dark" { color: lumx-color-variant("light", "L3"); } } @@ -137,14 +150,14 @@ } @mixin lumx-state($state, $emphasis, $color, $theme: null) { - @if $emphasis == lumx-base-const("emphasis", "HIGH") { + @if $emphasis == "emphasis-high" { @include lumx-state-high($state, $color, $theme); } @else if ( - $emphasis == lumx-base-const("emphasis", "MEDIUM") - or $emphasis == lumx-base-const("emphasis", "SELECTED") + $emphasis == "emphasis-medium" + or $emphasis == "emphasis-selected" ) { @include lumx-state-medium($state, $color); - } @else if $emphasis == lumx-base-const("emphasis", "LOW") { + } @else if $emphasis == "emphasis-low" { @include lumx-state-low($state, $color); } } diff --git a/packages/site-demo/src/components/content/design-tokens/DesignToken.scss b/packages/site-demo/src/components/content/design-tokens/DesignToken.scss index 2645be6649..eb421012b5 100644 --- a/packages/site-demo/src/components/content/design-tokens/DesignToken.scss +++ b/packages/site-demo/src/components/content/design-tokens/DesignToken.scss @@ -13,11 +13,11 @@ background-color: transparent !important; &--theme-light { - @include lumx-has-divider(lumx-base-const("theme", "LIGHT")); + @include lumx-has-divider("theme-light"); } &--theme-dark { - @include lumx-has-divider(lumx-base-const("theme", "DARK")); + @include lumx-has-divider("theme-dark"); } &:last-child { From 10aa35038588d956236da84d1490117e613264cc Mon Sep 17 00:00:00 2001 From: Guillaume Cornut Date: Wed, 10 Sep 2025 22:10:05 +0200 Subject: [PATCH 3/3] refactor(core): simplify tabs links style --- packages/lumx-core/src/scss/components/tabs/_index.scss | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/lumx-core/src/scss/components/tabs/_index.scss b/packages/lumx-core/src/scss/components/tabs/_index.scss index 672c2df13f..65d1dffa39 100644 --- a/packages/lumx-core/src/scss/components/tabs/_index.scss +++ b/packages/lumx-core/src/scss/components/tabs/_index.scss @@ -6,13 +6,7 @@ $self: &; &__links { - #{$self}--theme-light & { - @include lumx-tabs-links; - } - - #{$self}--theme-dark & { - @include lumx-tabs-links; - } + @include lumx-tabs-links; } &__link {