From c41e16f6044548e27fbf8e4ef65ed3067278c80b Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 17:14:45 +0200 Subject: Update --- src/objects/_action-button.vars.scss | 3 +- src/objects/_badge.vars.scss | 3 +- src/objects/_button.vars.scss | 3 +- src/objects/_divider.vars.scss | 7 +- src/objects/_heading.vars.scss | 12 +-- src/objects/_lightbox.vars.scss | 3 +- src/objects/_palette.scss | 14 ++-- src/objects/_status-indicator.vars.scss | 4 +- src/objects/_switch.scss | 139 ++++++++++++-------------------- src/objects/_switch.vars.scss | 37 +++++++++ src/objects/_table.scss | 88 ++++++++------------ src/objects/_table.vars.scss | 25 ++++++ src/objects/_text-field.scss | 139 +++++++++++--------------------- src/objects/_text-field.vars.scss | 38 +++++++++ 14 files changed, 257 insertions(+), 258 deletions(-) create mode 100644 src/objects/_switch.vars.scss create mode 100644 src/objects/_table.vars.scss create mode 100644 src/objects/_text-field.vars.scss (limited to 'src/objects') diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 4c9603c..9049a8f 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -111,7 +112,7 @@ $default-theme: map.deep-merge(( $default-theme: props.def(--o-action-button, $default-theme); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $themes: props.merge($themes, ( $button-theme: ( diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss index 9254c83..f9a4ed5 100644 --- a/src/objects/_badge.vars.scss +++ b/src/objects/_badge.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -76,7 +77,7 @@ $default-theme: props.merge($default-theme, $default-theme-override); $static-themes: props.def(--o-badge); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $badge-theme: #{$theme}-static; + $badge-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $badge-theme: ( diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss index 237cb79..7640e57 100644 --- a/src/objects/_button.vars.scss +++ b/src/objects/_button.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -86,7 +87,7 @@ $default-theme: props.merge($default-theme, $default-theme-override); $static-themes: props.def(--o-button); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $button-theme: ( diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss index 09e734f..01c4b92 100644 --- a/src/objects/_divider.vars.scss +++ b/src/objects/_divider.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -25,7 +26,7 @@ $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$ $static-themes: props.def(--o-divider); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $button-theme: #{$theme}-static; + $button-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $button-theme: ( @@ -52,8 +53,8 @@ $themes: props.def(--o-divider); @each $theme in $themes-config { $themes: props.merge($themes, ( $theme: ( - --bg: props.get(core.$static-colors, $theme, --800), - --label: props.get(core.$static-colors, $theme, --1000), + --bg: props.get(core.$theme, $theme, --800), + --label: props.get(core.$theme, $theme, --1000), ) )); } diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss index 31a2406..58b4d74 100644 --- a/src/objects/_heading.vars.scss +++ b/src/objects/_heading.vars.scss @@ -27,28 +27,28 @@ $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default; $feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; $font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; -$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; +$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default; $font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; $font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; $letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; $feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; -$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; +$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default; $font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; $font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; $letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; $feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; -$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default; $font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; $font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; $letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; $feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; -$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default; $font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; $font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; $letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; @@ -92,14 +92,14 @@ $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spaci $display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; $display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; +$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default; $display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; $display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; $display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; $display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; $display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; -$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; +$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default; $display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; $display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; $display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss index 32324a4..3906716 100644 --- a/src/objects/_lightbox.vars.scss +++ b/src/objects/_lightbox.vars.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use 'sass:string'; @use '../props'; @use '../core.vars' as core; @@ -37,7 +38,7 @@ $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, pr $static-themes: props.def(--o-lightbox); @each $theme in map.keys(props.get(core.$transparent-colors)) { - $lightbox-theme: #{$theme}-static; + $lightbox-theme: --static-#{string.slice($theme, 3)}; $static-themes: props.merge($static-themes, ( $lightbox-theme: ( diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss index c4f8e96..d83b297 100644 --- a/src/objects/_palette.scss +++ b/src/objects/_palette.scss @@ -2,7 +2,7 @@ @use 'sass:map'; @use 'sass:string'; @use 'iro-sass/src/iro-sass' as iro; -@use '../themes'; +@use '../config'; @use '../props'; @use '../core.vars' as core; @@ -14,8 +14,8 @@ @include iro.bem-elem('item') { flex: 1 1 auto; - $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); - $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); + $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); + $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); @for $i from 1 through list.length($contrasts) { $key: list.nth(map.keys($contrasts), $i); @@ -26,8 +26,8 @@ } } - @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { - $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); + @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { + $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { @@ -43,8 +43,8 @@ } @include iro.bem-modifier('static') { - @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { - $contrasts: map.get(themes.$static-colors, --contrasts); + @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { + $contrasts: map.get(config.$static-colors, --contrasts); @include iro.bem-modifier(string.slice($palette-name, 3)) { @include iro.bem-elem('item') { diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss index 1d0a06a..d83194f 100644 --- a/src/objects/_status-indicator.vars.scss +++ b/src/objects/_status-indicator.vars.scss @@ -1,6 +1,6 @@ @use 'sass:map'; @use '../props'; -@use '../themes' as themes; +@use '../config'; @use '../core.vars' as core; $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; @@ -8,7 +8,7 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; -$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; +$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default; $themes: props.def(--o-status-indicator); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index fa903b1..5383432 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -1,90 +1,50 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; +@use '../core.vars' as core; -@include iro.props-namespace('switch') { - @include iro.props-store(( - --dims: ( - --width: fn.global-dim(--size --350), - --height: fn.global-dim(--size --200), - --label-gap: fn.global-dim(--size --125), - --border: fn.global-dim(--border --medium), - --pad-i: fn.global-dim(--size --65), - --pad-b: fn.global-dim(--size --65), - --rounding: fn.global-dim(--rounding), - --spacing-sibling: fn.global-dim(--size --300), +@forward 'switch.vars'; +@use 'switch.vars' as vars; - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --track-bg: fn.global-color(--border), - --handle-border: fn.global-color(--text-mute-more), - --handle-bg: fn.global-color(--base --50), - - --hover: ( - --label: fn.global-color(--heading), - --handle-border: fn.global-color(--text-mute), - ), - --accent: ( - --handle-border: fn.global-color(--accent --900), - - --hover: ( - --handle-border: fn.global-color(--accent --1000), - ), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - --track-bg: fn.global-color(--border), - --handle-border: fn.global-color(--border-strong), - --handle-bg: fn.global-color(--base --50), - ), - --key-focus: ( - --label: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('switch') { position: relative; display: inline-block; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); margin-inline: - calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) - calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); @include iro.bem-elem('indicator') { display: inline-block; flex: 0 0 auto; - inline-size: fn.dim(--width); - block-size: fn.dim(--height); - margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); + inline-size: props.get(vars.$inline-size); + block-size: props.get(vars.$block-size); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)); vertical-align: top; - background-color: fn.color(--track-bg); + background-color: props.get(vars.$track-bg-color); background-clip: padding-box; - border: fn.dim(--key-focus --border-offset) solid transparent; + border: props.get(vars.$key-focus--border-offset) solid transparent; border-radius: 2em; transition: background-color .2s ease; &::after { display: block; - inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); - block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); + inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); content: ''; - background-color: fn.color(--handle-bg); - border: fn.dim(--border) solid fn.color(--handle-border); - border-radius: fn.dim(--width); + background-color: props.get(vars.$handle-bg-color); + border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); + border-radius: props.get(vars.$inline-size); transition: transform .2s ease; } } @include iro.bem-elem('label') { - margin-inline-start: fn.dim(--label-gap); + margin-inline-start: props.get(vars.$label-gap); } @include iro.bem-elem('native') { @@ -98,38 +58,38 @@ margin: 0; overflow: hidden; appearance: none; - border-radius: fn.dim(--rounding); + border-radius: props.get(vars.$rounding); &:hover, &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--hover --label); + color: props.get(vars.$hover--label-color); } @include iro.bem-sibling-elem('indicator') { &::after { - border-color: fn.color(--hover --handle-border); + border-color: props.get(vars.$hover--handle-border-color); } } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--handle-border); + background-color: props.get(vars.$handle-border-color); &::after { - border-color: fn.color(--handle-border); - transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); + border-color: props.get(vars.$handle-border-color); + transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); } } &:hover, &:focus-visible { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--hover --handle-border); + background-color: props.get(vars.$hover--handle-border-color); &::after { - border-color: fn.color(--hover --handle-border); + border-color: props.get(vars.$hover--handle-border-color); } } } @@ -137,24 +97,24 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --track-bg); + background-color: props.get(vars.$disabled--track-bg-color); &::after { - background-color: fn.color(--disabled --handle-bg); - border-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-bg-color); + border-color: props.get(vars.$disabled--handle-border-color); } } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-border-color); &::after { - border-color: fn.color(--disabled --handle-border); + border-color: props.get(vars.$disabled--handle-border-color); } } } @@ -162,12 +122,17 @@ &:focus-visible { @include iro.bem-sibling-elem('label') { - color: fn.color(--key-focus --label); + color: props.get(vars.$key-focus--label-color); } @include iro.bem-sibling-elem('indicator') { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); } } } @@ -182,20 +147,20 @@ @include iro.bem-elem('native') { &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--accent --handle-border); + background-color: props.get(vars.$accent--handle-border-color); &::after { - border-color: fn.color(--accent --handle-border); + border-color: props.get(vars.$accent--handle-border-color); } } &:hover, &:focus-visible { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--accent --hover --handle-border); + background-color: props.get(vars.$accent--hover--handle-border-color); &::after { - border-color: fn.color(--accent --hover --handle-border); + border-color: props.get(vars.$accent--hover--handle-border-color); } } } @@ -203,15 +168,15 @@ &:disabled { @include iro.bem-sibling-elem('label') { - color: fn.color(--disabled --label); + color: props.get(vars.$disabled--label-color); } &:checked { @include iro.bem-sibling-elem('indicator') { - background-color: fn.color(--disabled --handle-border); + background-color: props.get(vars.$disabled--handle-border-color); &::after { - border-color: fn.color(--disabled --handle-border); + border-color: props.get(vars.$disabled--handle-border-color); } } } diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss new file mode 100644 index 0000000..118291d --- /dev/null +++ b/src/objects/_switch.vars.scss @@ -0,0 +1,37 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default; +$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default; +$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default; +$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default; +$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default; +$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default; +$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default; +$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default; + +$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; +$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; +$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; + +$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default; +$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default; +$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default; + +$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default; +$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default; + +$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default; + +$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default; + +$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default; +$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default; +$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default; + +$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; +$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; + diff --git a/src/objects/_table.scss b/src/objects/_table.scss index 5b16d66..d5b5545 100644 --- a/src/objects/_table.scss +++ b/src/objects/_table.scss @@ -1,33 +1,14 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; -@use '../mixins' as mx; +@use '../props'; -@include iro.props-namespace('table') { - @include iro.props-store(( - --dims: ( - --pad-i: fn.global-dim(--size --175), - --pad-b: fn.global-dim(--size --125), - --rounding: fn.global-dim(--rounding), - --border: fn.global-dim(--border --thin), +@forward 'table.vars'; +@use 'table.vars' as vars; - --sm: ( - --pad-b: fn.global-dim(--size --75), - ) - ), - --colors: ( - --border: fn.global-color(--border), - --heading: fn.global-color(--heading), - --hover: fn.global-color(--border-mute), - --active: fn.global-color(--border), - --box: ( - --bg: fn.global-color(--base --50), - --hover: fn.global-color(--bg-base), - --active: fn.global-color(--border-mute), - ) - ) - )); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); - @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-object('table') { border-spacing: 0; border-collapse: separate; @@ -36,37 +17,34 @@ } @include iro.bem-elem('head-cell') { - @include mx.set-font(--standard, ( - --line-height: null, - --size: fn.global-dim(--font-size --50), - --weight: bold, - --transform: uppercase, - --spacing: .5px - )); - padding-block: fn.dim(--pad-b); - - padding-inline: fn.dim(--pad-i); - color: fn.color(--heading); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + color: props.get(vars.$heading-color); text-align: start; + text-transform: props.get(vars.$heading--text-transform); + letter-spacing: props.get(vars.$heading--letter-spacing); } @include iro.bem-elem('cell') { - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - border-color: fn.color(--border); + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + border-color: props.get(vars.$border-color); border-style: solid; border-width: 0; - border-block-start-width: fn.dim(--border); + border-block-start-width: props.get(vars.$border-width); @include iro.bem-modifier('divider') { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(vars.$border-width); } } @include iro.bem-elem('row') { &:last-child { @include iro.bem-elem('cell') { - border-block-end-width: fn.dim(--border); + border-block-end-width: props.get(vars.$border-width); } } } @@ -85,14 +63,14 @@ @include iro.bem-modifier('box') { @include iro.bem-elem('cell') { - background-color: fn.color(--box --bg); + background-color: props.get(vars.$box--bg-color); &:first-child { - border-inline-start-width: fn.dim(--border); + border-inline-start-width: props.get(vars.$border-width); } &:last-child { - border-inline-end-width: fn.dim(--border); + border-inline-end-width: props.get(vars.$border-width); } } @@ -100,11 +78,11 @@ &:first-child { @include iro.bem-elem('cell') { &:first-child { - border-start-start-radius: fn.dim(--rounding); + border-start-start-radius: props.get(vars.$rounding); } &:last-child { - border-start-end-radius: fn.dim(--rounding); + border-start-end-radius: props.get(vars.$rounding); } } } @@ -112,11 +90,11 @@ &:last-child { @include iro.bem-elem('cell') { &:first-child { - border-end-start-radius: fn.dim(--rounding); + border-end-start-radius: props.get(vars.$rounding); } &:last-child { - border-end-end-radius: fn.dim(--rounding); + border-end-end-radius: props.get(vars.$rounding); } } } @@ -131,13 +109,13 @@ &:hover { @include iro.bem-elem('cell') { - background-color: fn.color(--hover); + background-color: props.get(vars.$hover--bg-color); } } &:active { @include iro.bem-elem('cell') { - background-color: fn.color(--active); + background-color: props.get(vars.$active--bg-color); } } } @@ -146,13 +124,13 @@ @include iro.bem-elem('row') { &:hover { @include iro.bem-elem('cell') { - background-color: fn.color(--box --hover); + background-color: props.get(vars.$box--hover--bg-color); } } &:active { @include iro.bem-elem('cell') { - background-color: fn.color(--box --active); + background-color: props.get(vars.$box--active--bg-color); } } } @@ -161,7 +139,7 @@ @include iro.bem-modifier('sm') { @include iro.bem-elem('head-cell', 'cell') { - padding-block: fn.dim(--sm --pad-b); + padding-block: props.get(vars.$pad-b--sm); } } } diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss new file mode 100644 index 0000000..df97e17 --- /dev/null +++ b/src/objects/_table.vars.scss @@ -0,0 +1,25 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; +$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default; +$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default; +$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default; + +$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; +$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default; +$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default; +$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default; +$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default; + +$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default; + +$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default; +$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default; +$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default; +$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default; + +$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default; +$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default; +$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index cfb5a6d..793d23a 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,100 +1,51 @@ +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; +@use '../props'; -@mixin invalid { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@forward 'text-field.vars'; +@use 'text-field.vars' as vars; + +@mixin -invalid { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--error --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --hover --border); + border-color: props.get(vars.$error--hover--border-color); } } &:focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--error --focus --border); + border-color: props.get(vars.$error--focus--border-color); } } } -@mixin keyboard-focus { +@mixin -keyboard-focus { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--key-focus --border); - outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); - //outline-offset: fn.dim(--focus --border); + border-color: props.get(vars.$key-focus--border-color); + outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); + //outline-offset: props.get(vars.$focus --border); } } -@include iro.props-namespace('text-field') { - @include iro.props-store(( - --dims: ( - --line-height: 1.4, - --pad-i: fn.global-dim(--size --125), - --pad-b: fn.global-dim(--size --125), - --border: fn.global-dim(--border --thin), - --rounding: fn.global-dim(--rounding), - - --extended: ( - --pad: fn.global-dim(--size --50), - ), - - --focus: ( - --border: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --outline), - ), - ), - --colors: ( - --bg: fn.global-color(--base --50), - --placeholder: fn.global-color(--text-mute-more), - --text: fn.global-color(--text), - --border: fn.global-color(--border-strong), - - --hover: ( - --border: fn.global-color(--text-mute-more), - ), - --focus: ( - --border: fn.global-color(--focus --border), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - --error: ( - --border: fn.global-color(--negative --700), - - --hover: ( - --border: fn.global-color(--negative --900), - ), - --focus: ( - --border: fn.global-color(--negative --900), - ), - ), - --disabled: ( - --bg: fn.global-color(--border-mute), - --placeholder: fn.global-color(--text-disabled), - --text: fn.global-color(--text-disabled), - --border: fn.global-color(--border-mute), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { - $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('text-field') { + $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); position: relative; min-inline-size: 0; - background-color: fn.color(--bg); - border-radius: fn.dim(--rounding); + background-color: props.get(vars.$bg-color); + border-radius: props.get(vars.$rounding); @include iro.bem-elem('bg') { position: absolute; @@ -102,18 +53,18 @@ inset-inline: 0; display: block; pointer-events: none; - border: fn.dim(--border) solid fn.color(--border); - border-radius: fn.dim(--rounding); + border: props.get(vars.$border-width) solid props.get(vars.$border-color); + border-radius: props.get(vars.$rounding); } @include iro.bem-elem('native') { box-sizing: border-box; inline-size: 100%; - padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); - padding-inline: fn.dim(--pad-i); + padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); + padding-inline: props.get(vars.$pad-i); font: inherit; - line-height: fn.dim(--line-height); - color: fn.color(--text); + line-height: props.get(vars.$line-height); + color: props.get(vars.$text-color); appearance: none; resize: none; background-color: transparent; @@ -121,13 +72,13 @@ &::placeholder { font-style: italic; - color: fn.color(--placeholder); + color: props.get(vars.$placeholder-color); opacity: 1; } &:hover { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--hover --border); + border-color: props.get(vars.$hover--border-color); } } @@ -137,32 +88,32 @@ @include iro.bem-sibling-elem('bg') { inset-block: $focus-border-offset; inset-inline: $focus-border-offset; - border: fn.dim(--focus --border) solid fn.color(--focus --border); - border-radius: calc(fn.dim(--rounding) - $focus-border-offset); + border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); + border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); } } &:invalid { - @include invalid; + @include -invalid; } &:focus-visible, &:invalid:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } @include iro.bem-modifier('extended') { - padding: fn.dim(--extended --pad); + padding: props.get(vars.$extended--pad); @include iro.bem-multi('&', 'elem' 'bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); } @include iro.bem-elem('native') { &:focus { @include iro.bem-sibling-elem('bg') { - border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); } } } @@ -170,33 +121,33 @@ @include iro.bem-is('invalid') { @include iro.bem-elem('native') { - @include invalid; + @include -invalid; &:focus-visible { - @include keyboard-focus; + @include -keyboard-focus; } } } @include iro.bem-is('disabled') { - background-color: fn.color(--disabled --bg); + background-color: props.get(vars.$disabled--bg-color); @include iro.bem-elem('native') { - color: fn.color(--disabled --text); + color: props.get(vars.$disabled--text-color); &::placeholder { - color: fn.color(--disabled --placeholder); + color: props.get(vars.$disabled--placeholder-color); } } @include iro.bem-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } @include iro.bem-is('invalid') { @include iro.bem-elem('native') { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } @@ -204,7 +155,7 @@ @include iro.bem-elem('native') { &:invalid { @include iro.bem-sibling-elem('bg') { - border-color: fn.color(--disabled --border); + border-color: props.get(vars.$disabled--border-color); } } } diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss new file mode 100644 index 0000000..3d0ef2d --- /dev/null +++ b/src/objects/_text-field.vars.scss @@ -0,0 +1,38 @@ +@use 'sass:map'; +@use '../props'; +@use '../core.vars' as core; + +$line-height: props.def(--o-text-field--line-height, 1.4) !default; +$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default; +$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; +$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; +$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; + +$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; + +$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default; + +$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default; + +$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default; +$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default; +$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default; +$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default; + +$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default; + +$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default; + +$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; +$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; + +$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default; + +$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default; + +$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default; + +$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default; +$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default; +$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default; -- cgit v1.2.3-70-g09d2