summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.vars.scss3
-rw-r--r--src/objects/_badge.vars.scss3
-rw-r--r--src/objects/_button.vars.scss3
-rw-r--r--src/objects/_divider.vars.scss7
-rw-r--r--src/objects/_heading.vars.scss12
-rw-r--r--src/objects/_lightbox.vars.scss3
-rw-r--r--src/objects/_palette.scss14
-rw-r--r--src/objects/_status-indicator.vars.scss4
-rw-r--r--src/objects/_switch.scss139
-rw-r--r--src/objects/_switch.vars.scss37
-rw-r--r--src/objects/_table.scss88
-rw-r--r--src/objects/_table.vars.scss25
-rw-r--r--src/objects/_text-field.scss139
-rw-r--r--src/objects/_text-field.vars.scss38
14 files changed, 257 insertions, 258 deletions
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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -111,7 +112,7 @@ $default-theme: map.deep-merge((
111$default-theme: props.def(--o-action-button, $default-theme); 112$default-theme: props.def(--o-action-button, $default-theme);
112 113
113@each $theme in map.keys(props.get(core.$transparent-colors)) { 114@each $theme in map.keys(props.get(core.$transparent-colors)) {
114 $button-theme: #{$theme}-static; 115 $button-theme: --static-#{string.slice($theme, 3)};
115 116
116 $themes: props.merge($themes, ( 117 $themes: props.merge($themes, (
117 $button-theme: ( 118 $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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -76,7 +77,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
76$static-themes: props.def(--o-badge); 77$static-themes: props.def(--o-badge);
77 78
78@each $theme in map.keys(props.get(core.$transparent-colors)) { 79@each $theme in map.keys(props.get(core.$transparent-colors)) {
79 $badge-theme: #{$theme}-static; 80 $badge-theme: --static-#{string.slice($theme, 3)};
80 81
81 $static-themes: props.merge($static-themes, ( 82 $static-themes: props.merge($static-themes, (
82 $badge-theme: ( 83 $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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -86,7 +87,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
86$static-themes: props.def(--o-button); 87$static-themes: props.def(--o-button);
87 88
88@each $theme in map.keys(props.get(core.$transparent-colors)) { 89@each $theme in map.keys(props.get(core.$transparent-colors)) {
89 $button-theme: #{$theme}-static; 90 $button-theme: --static-#{string.slice($theme, 3)};
90 91
91 $static-themes: props.merge($static-themes, ( 92 $static-themes: props.merge($static-themes, (
92 $button-theme: ( 93 $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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -25,7 +26,7 @@ $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$
25$static-themes: props.def(--o-divider); 26$static-themes: props.def(--o-divider);
26 27
27@each $theme in map.keys(props.get(core.$transparent-colors)) { 28@each $theme in map.keys(props.get(core.$transparent-colors)) {
28 $button-theme: #{$theme}-static; 29 $button-theme: --static-#{string.slice($theme, 3)};
29 30
30 $static-themes: props.merge($static-themes, ( 31 $static-themes: props.merge($static-themes, (
31 $button-theme: ( 32 $button-theme: (
@@ -52,8 +53,8 @@ $themes: props.def(--o-divider);
52@each $theme in $themes-config { 53@each $theme in $themes-config {
53 $themes: props.merge($themes, ( 54 $themes: props.merge($themes, (
54 $theme: ( 55 $theme: (
55 --bg: props.get(core.$static-colors, $theme, --800), 56 --bg: props.get(core.$theme, $theme, --800),
56 --label: props.get(core.$static-colors, $theme, --1000), 57 --label: props.get(core.$theme, $theme, --1000),
57 ) 58 )
58 )); 59 ));
59} 60}
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;
27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
28 28
29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; 29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default; 30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default;
31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; 31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; 32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; 33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
35 35
36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; 36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default; 37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default;
38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; 38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; 39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; 40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
42 42
43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default; 44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default;
45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; 45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; 46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; 47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49 49
50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default; 51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default;
52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; 52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; 53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; 54$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
92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
93 93
94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default; 95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default;
96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; 96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; 97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; 98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
100 100
101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; 101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default; 102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default;
103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; 103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; 104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; 105$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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:string';
2@use '../props'; 3@use '../props';
3@use '../core.vars' as core; 4@use '../core.vars' as core;
4 5
@@ -37,7 +38,7 @@ $nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, pr
37$static-themes: props.def(--o-lightbox); 38$static-themes: props.def(--o-lightbox);
38 39
39@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
40 $lightbox-theme: #{$theme}-static; 41 $lightbox-theme: --static-#{string.slice($theme, 3)};
41 42
42 $static-themes: props.merge($static-themes, ( 43 $static-themes: props.merge($static-themes, (
43 $lightbox-theme: ( 44 $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 @@
2@use 'sass:map'; 2@use 'sass:map';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/iro-sass' as iro;
5@use '../themes'; 5@use '../config';
6@use '../props'; 6@use '../props';
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
@@ -14,8 +14,8 @@
14 @include iro.bem-elem('item') { 14 @include iro.bem-elem('item') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(themes.$themes, themes.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); 18 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
19 19
20 @for $i from 1 through list.length($contrasts) { 20 @for $i from 1 through list.length($contrasts) {
21 $key: list.nth(map.keys($contrasts), $i); 21 $key: list.nth(map.keys($contrasts), $i);
@@ -26,8 +26,8 @@
26 } 26 }
27 } 27 }
28 28
29 @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
30 $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2)); 30 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
31 31
32 @include iro.bem-modifier(string.slice($palette-name, 3)) { 32 @include iro.bem-modifier(string.slice($palette-name, 3)) {
33 @include iro.bem-elem('item') { 33 @include iro.bem-elem('item') {
@@ -43,8 +43,8 @@
43 } 43 }
44 44
45 @include iro.bem-modifier('static') { 45 @include iro.bem-modifier('static') {
46 @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $contrasts: map.get(themes.$static-colors, --contrasts); 47 $contrasts: map.get(config.$static-colors, --contrasts);
48 48
49 @include iro.bem-modifier(string.slice($palette-name, 3)) { 49 @include iro.bem-modifier(string.slice($palette-name, 3)) {
50 @include iro.bem-elem('item') { 50 @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 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use '../props'; 2@use '../props';
3@use '../themes' as themes; 3@use '../config';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default; 6$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
8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default; 8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default;
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default;
10 10
11$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default; 11$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default;
12 12
13$themes: props.def(--o-status-indicator); 13$themes: props.def(--o-status-indicator);
14 14
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 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
4@use '../core.vars' as core;
3 5
4@include iro.props-namespace('switch') { 6@forward 'switch.vars';
5 @include iro.props-store(( 7@use 'switch.vars' as vars;
6 --dims: (
7 --width: fn.global-dim(--size --350),
8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-i: fn.global-dim(--size --65),
12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300),
15 8
16 --key-focus: ( 9@mixin styles {
17 --border: fn.global-dim(--key-focus --border), 10 @include props.materialize(meta.module-variables('vars'));
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --outline),
20 ),
21 ),
22 --colors: (
23 --track-bg: fn.global-color(--border),
24 --handle-border: fn.global-color(--text-mute-more),
25 --handle-bg: fn.global-color(--base --50),
26
27 --hover: (
28 --label: fn.global-color(--heading),
29 --handle-border: fn.global-color(--text-mute),
30 ),
31 --accent: (
32 --handle-border: fn.global-color(--accent --900),
33
34 --hover: (
35 --handle-border: fn.global-color(--accent --1000),
36 ),
37 ),
38 --disabled: (
39 --label: fn.global-color(--text-disabled),
40 --track-bg: fn.global-color(--border),
41 --handle-border: fn.global-color(--border-strong),
42 --handle-bg: fn.global-color(--base --50),
43 ),
44 --key-focus: (
45 --label: fn.global-color(--focus --text),
46 --border: fn.global-color(--focus --border),
47 --outline: fn.global-color(--focus --outline),
48 ),
49 ),
50 ));
51 11
52 @include iro.bem-object(iro.props-namespace()) { 12 @include iro.bem-object('switch') {
53 position: relative; 13 position: relative;
54 display: inline-block; 14 display: inline-block;
55 padding-block: fn.dim(--pad-b); 15 padding-block: props.get(vars.$pad-b);
56 padding-inline: fn.dim(--pad-i); 16 padding-inline: props.get(vars.$pad-i);
57 margin-inline: 17 margin-inline:
58 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) 18 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
59 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); 19 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
60 20
61 @include iro.bem-elem('indicator') { 21 @include iro.bem-elem('indicator') {
62 display: inline-block; 22 display: inline-block;
63 flex: 0 0 auto; 23 flex: 0 0 auto;
64 inline-size: fn.dim(--width); 24 inline-size: props.get(vars.$inline-size);
65 block-size: fn.dim(--height); 25 block-size: props.get(vars.$block-size);
66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); 26 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));
67 vertical-align: top; 27 vertical-align: top;
68 background-color: fn.color(--track-bg); 28 background-color: props.get(vars.$track-bg-color);
69 background-clip: padding-box; 29 background-clip: padding-box;
70 border: fn.dim(--key-focus --border-offset) solid transparent; 30 border: props.get(vars.$key-focus--border-offset) solid transparent;
71 border-radius: 2em; 31 border-radius: 2em;
72 transition: background-color .2s ease; 32 transition: background-color .2s ease;
73 33
74 &::after { 34 &::after {
75 display: block; 35 display: block;
76 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 36 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
77 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 37 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
78 content: ''; 38 content: '';
79 background-color: fn.color(--handle-bg); 39 background-color: props.get(vars.$handle-bg-color);
80 border: fn.dim(--border) solid fn.color(--handle-border); 40 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
81 border-radius: fn.dim(--width); 41 border-radius: props.get(vars.$inline-size);
82 transition: transform .2s ease; 42 transition: transform .2s ease;
83 } 43 }
84 } 44 }
85 45
86 @include iro.bem-elem('label') { 46 @include iro.bem-elem('label') {
87 margin-inline-start: fn.dim(--label-gap); 47 margin-inline-start: props.get(vars.$label-gap);
88 } 48 }
89 49
90 @include iro.bem-elem('native') { 50 @include iro.bem-elem('native') {
@@ -98,38 +58,38 @@
98 margin: 0; 58 margin: 0;
99 overflow: hidden; 59 overflow: hidden;
100 appearance: none; 60 appearance: none;
101 border-radius: fn.dim(--rounding); 61 border-radius: props.get(vars.$rounding);
102 62
103 &:hover, 63 &:hover,
104 &:focus-visible { 64 &:focus-visible {
105 @include iro.bem-sibling-elem('label') { 65 @include iro.bem-sibling-elem('label') {
106 color: fn.color(--hover --label); 66 color: props.get(vars.$hover--label-color);
107 } 67 }
108 68
109 @include iro.bem-sibling-elem('indicator') { 69 @include iro.bem-sibling-elem('indicator') {
110 &::after { 70 &::after {
111 border-color: fn.color(--hover --handle-border); 71 border-color: props.get(vars.$hover--handle-border-color);
112 } 72 }
113 } 73 }
114 } 74 }
115 75
116 &:checked { 76 &:checked {
117 @include iro.bem-sibling-elem('indicator') { 77 @include iro.bem-sibling-elem('indicator') {
118 background-color: fn.color(--handle-border); 78 background-color: props.get(vars.$handle-border-color);
119 79
120 &::after { 80 &::after {
121 border-color: fn.color(--handle-border); 81 border-color: props.get(vars.$handle-border-color);
122 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); 82 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
123 } 83 }
124 } 84 }
125 85
126 &:hover, 86 &:hover,
127 &:focus-visible { 87 &:focus-visible {
128 @include iro.bem-sibling-elem('indicator') { 88 @include iro.bem-sibling-elem('indicator') {
129 background-color: fn.color(--hover --handle-border); 89 background-color: props.get(vars.$hover--handle-border-color);
130 90
131 &::after { 91 &::after {
132 border-color: fn.color(--hover --handle-border); 92 border-color: props.get(vars.$hover--handle-border-color);
133 } 93 }
134 } 94 }
135 } 95 }
@@ -137,24 +97,24 @@
137 97
138 &:disabled { 98 &:disabled {
139 @include iro.bem-sibling-elem('label') { 99 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--disabled --label); 100 color: props.get(vars.$disabled--label-color);
141 } 101 }
142 102
143 @include iro.bem-sibling-elem('indicator') { 103 @include iro.bem-sibling-elem('indicator') {
144 background-color: fn.color(--disabled --track-bg); 104 background-color: props.get(vars.$disabled--track-bg-color);
145 105
146 &::after { 106 &::after {
147 background-color: fn.color(--disabled --handle-bg); 107 background-color: props.get(vars.$disabled--handle-bg-color);
148 border-color: fn.color(--disabled --handle-border); 108 border-color: props.get(vars.$disabled--handle-border-color);
149 } 109 }
150 } 110 }
151 111
152 &:checked { 112 &:checked {
153 @include iro.bem-sibling-elem('indicator') { 113 @include iro.bem-sibling-elem('indicator') {
154 background-color: fn.color(--disabled --handle-border); 114 background-color: props.get(vars.$disabled--handle-border-color);
155 115
156 &::after { 116 &::after {
157 border-color: fn.color(--disabled --handle-border); 117 border-color: props.get(vars.$disabled--handle-border-color);
158 } 118 }
159 } 119 }
160 } 120 }
@@ -162,12 +122,17 @@
162 122
163 &:focus-visible { 123 &:focus-visible {
164 @include iro.bem-sibling-elem('label') { 124 @include iro.bem-sibling-elem('label') {
165 color: fn.color(--key-focus --label); 125 color: props.get(vars.$key-focus--label-color);
166 } 126 }
167 127
168 @include iro.bem-sibling-elem('indicator') { 128 @include iro.bem-sibling-elem('indicator') {
169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 129 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 130 box-shadow:
131 0
132 0
133 0
134 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
135 props.get(vars.$key-focus--outline-color);
171 } 136 }
172 } 137 }
173 } 138 }
@@ -182,20 +147,20 @@
182 @include iro.bem-elem('native') { 147 @include iro.bem-elem('native') {
183 &:checked { 148 &:checked {
184 @include iro.bem-sibling-elem('indicator') { 149 @include iro.bem-sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border); 150 background-color: props.get(vars.$accent--handle-border-color);
186 151
187 &::after { 152 &::after {
188 border-color: fn.color(--accent --handle-border); 153 border-color: props.get(vars.$accent--handle-border-color);
189 } 154 }
190 } 155 }
191 156
192 &:hover, 157 &:hover,
193 &:focus-visible { 158 &:focus-visible {
194 @include iro.bem-sibling-elem('indicator') { 159 @include iro.bem-sibling-elem('indicator') {
195 background-color: fn.color(--accent --hover --handle-border); 160 background-color: props.get(vars.$accent--hover--handle-border-color);
196 161
197 &::after { 162 &::after {
198 border-color: fn.color(--accent --hover --handle-border); 163 border-color: props.get(vars.$accent--hover--handle-border-color);
199 } 164 }
200 } 165 }
201 } 166 }
@@ -203,15 +168,15 @@
203 168
204 &:disabled { 169 &:disabled {
205 @include iro.bem-sibling-elem('label') { 170 @include iro.bem-sibling-elem('label') {
206 color: fn.color(--disabled --label); 171 color: props.get(vars.$disabled--label-color);
207 } 172 }
208 173
209 &:checked { 174 &:checked {
210 @include iro.bem-sibling-elem('indicator') { 175 @include iro.bem-sibling-elem('indicator') {
211 background-color: fn.color(--disabled --handle-border); 176 background-color: props.get(vars.$disabled--handle-border-color);
212 177
213 &::after { 178 &::after {
214 border-color: fn.color(--disabled --handle-border); 179 border-color: props.get(vars.$disabled--handle-border-color);
215 } 180 }
216 } 181 }
217 } 182 }
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 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
6$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
7$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
9$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
10$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
11$rounding: props.def(--o-switch--rounding, props.get(core.$rounding)) !default;
12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
13
14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17
18$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default;
19$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default;
20$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
21
22$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default;
23$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default;
24
25$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default;
26
27$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default;
28
29$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
30$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default;
31$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default;
32$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
33
34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
37
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 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
3@use '../mixins' as mx;
4 4
5@include iro.props-namespace('table') { 5@forward 'table.vars';
6 @include iro.props-store(( 6@use 'table.vars' as vars;
7 --dims: (
8 --pad-i: fn.global-dim(--size --175),
9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 7
13 --sm: ( 8@mixin styles {
14 --pad-b: fn.global-dim(--size --75), 9 @include props.materialize(meta.module-variables('vars'));
15 )
16 ),
17 --colors: (
18 --border: fn.global-color(--border),
19 --heading: fn.global-color(--heading),
20 --hover: fn.global-color(--border-mute),
21 --active: fn.global-color(--border),
22 --box: (
23 --bg: fn.global-color(--base --50),
24 --hover: fn.global-color(--bg-base),
25 --active: fn.global-color(--border-mute),
26 )
27 )
28 ));
29 10
30 @include iro.bem-object(iro.props-namespace()) { 11 @include iro.bem-object('table') {
31 border-spacing: 0; 12 border-spacing: 0;
32 border-collapse: separate; 13 border-collapse: separate;
33 14
@@ -36,37 +17,34 @@
36 } 17 }
37 18
38 @include iro.bem-elem('head-cell') { 19 @include iro.bem-elem('head-cell') {
39 @include mx.set-font(--standard, ( 20 padding-block: props.get(vars.$pad-b);
40 --line-height: null, 21 padding-inline: props.get(vars.$pad-i);
41 --size: fn.global-dim(--font-size --50), 22 font-family: props.get(vars.$heading--font-family);
42 --weight: bold, 23 font-size: props.get(vars.$heading--font-size);
43 --transform: uppercase, 24 font-weight: props.get(vars.$heading--font-weight);
44 --spacing: .5px 25 color: props.get(vars.$heading-color);
45 ));
46 padding-block: fn.dim(--pad-b);
47
48 padding-inline: fn.dim(--pad-i);
49 color: fn.color(--heading);
50 text-align: start; 26 text-align: start;
27 text-transform: props.get(vars.$heading--text-transform);
28 letter-spacing: props.get(vars.$heading--letter-spacing);
51 } 29 }
52 30
53 @include iro.bem-elem('cell') { 31 @include iro.bem-elem('cell') {
54 padding-block: fn.dim(--pad-b); 32 padding-block: props.get(vars.$pad-b);
55 padding-inline: fn.dim(--pad-i); 33 padding-inline: props.get(vars.$pad-i);
56 border-color: fn.color(--border); 34 border-color: props.get(vars.$border-color);
57 border-style: solid; 35 border-style: solid;
58 border-width: 0; 36 border-width: 0;
59 border-block-start-width: fn.dim(--border); 37 border-block-start-width: props.get(vars.$border-width);
60 38
61 @include iro.bem-modifier('divider') { 39 @include iro.bem-modifier('divider') {
62 border-inline-end-width: fn.dim(--border); 40 border-inline-end-width: props.get(vars.$border-width);
63 } 41 }
64 } 42 }
65 43
66 @include iro.bem-elem('row') { 44 @include iro.bem-elem('row') {
67 &:last-child { 45 &:last-child {
68 @include iro.bem-elem('cell') { 46 @include iro.bem-elem('cell') {
69 border-block-end-width: fn.dim(--border); 47 border-block-end-width: props.get(vars.$border-width);
70 } 48 }
71 } 49 }
72 } 50 }
@@ -85,14 +63,14 @@
85 63
86 @include iro.bem-modifier('box') { 64 @include iro.bem-modifier('box') {
87 @include iro.bem-elem('cell') { 65 @include iro.bem-elem('cell') {
88 background-color: fn.color(--box --bg); 66 background-color: props.get(vars.$box--bg-color);
89 67
90 &:first-child { 68 &:first-child {
91 border-inline-start-width: fn.dim(--border); 69 border-inline-start-width: props.get(vars.$border-width);
92 } 70 }
93 71
94 &:last-child { 72 &:last-child {
95 border-inline-end-width: fn.dim(--border); 73 border-inline-end-width: props.get(vars.$border-width);
96 } 74 }
97 } 75 }
98 76
@@ -100,11 +78,11 @@
100 &:first-child { 78 &:first-child {
101 @include iro.bem-elem('cell') { 79 @include iro.bem-elem('cell') {
102 &:first-child { 80 &:first-child {
103 border-start-start-radius: fn.dim(--rounding); 81 border-start-start-radius: props.get(vars.$rounding);
104 } 82 }
105 83
106 &:last-child { 84 &:last-child {
107 border-start-end-radius: fn.dim(--rounding); 85 border-start-end-radius: props.get(vars.$rounding);
108 } 86 }
109 } 87 }
110 } 88 }
@@ -112,11 +90,11 @@
112 &:last-child { 90 &:last-child {
113 @include iro.bem-elem('cell') { 91 @include iro.bem-elem('cell') {
114 &:first-child { 92 &:first-child {
115 border-end-start-radius: fn.dim(--rounding); 93 border-end-start-radius: props.get(vars.$rounding);
116 } 94 }
117 95
118 &:last-child { 96 &:last-child {
119 border-end-end-radius: fn.dim(--rounding); 97 border-end-end-radius: props.get(vars.$rounding);
120 } 98 }
121 } 99 }
122 } 100 }
@@ -131,13 +109,13 @@
131 109
132 &:hover { 110 &:hover {
133 @include iro.bem-elem('cell') { 111 @include iro.bem-elem('cell') {
134 background-color: fn.color(--hover); 112 background-color: props.get(vars.$hover--bg-color);
135 } 113 }
136 } 114 }
137 115
138 &:active { 116 &:active {
139 @include iro.bem-elem('cell') { 117 @include iro.bem-elem('cell') {
140 background-color: fn.color(--active); 118 background-color: props.get(vars.$active--bg-color);
141 } 119 }
142 } 120 }
143 } 121 }
@@ -146,13 +124,13 @@
146 @include iro.bem-elem('row') { 124 @include iro.bem-elem('row') {
147 &:hover { 125 &:hover {
148 @include iro.bem-elem('cell') { 126 @include iro.bem-elem('cell') {
149 background-color: fn.color(--box --hover); 127 background-color: props.get(vars.$box--hover--bg-color);
150 } 128 }
151 } 129 }
152 130
153 &:active { 131 &:active {
154 @include iro.bem-elem('cell') { 132 @include iro.bem-elem('cell') {
155 background-color: fn.color(--box --active); 133 background-color: props.get(vars.$box--active--bg-color);
156 } 134 }
157 } 135 }
158 } 136 }
@@ -161,7 +139,7 @@
161 139
162 @include iro.bem-modifier('sm') { 140 @include iro.bem-modifier('sm') {
163 @include iro.bem-elem('head-cell', 'cell') { 141 @include iro.bem-elem('head-cell', 'cell') {
164 padding-block: fn.dim(--sm --pad-b); 142 padding-block: props.get(vars.$pad-b--sm);
165 } 143 }
166 } 144 }
167 } 145 }
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 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
6$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
7$rounding: props.def(--o-table--rounding, props.get(core.$rounding)) !default;
8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
9
10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
11$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
12$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default;
13$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
14$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
15
16$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
17
18$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border)) !default;
19$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default;
20$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default;
21$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default;
22
23$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default;
24$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default;
25$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 @@
1@use 'sass:meta';
1@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
2@use '../functions' as fn; 3@use '../props';
3 4
4@mixin invalid { 5@forward 'text-field.vars';
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); 6@use 'text-field.vars' as vars;
7
8@mixin -invalid {
9 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
6 10
7 @include iro.bem-sibling-elem('bg') { 11 @include iro.bem-sibling-elem('bg') {
8 inset-block: $focus-border-offset; 12 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset; 13 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border); 14 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 15 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
12 } 16 }
13 17
14 &:hover { 18 &:hover {
15 @include iro.bem-sibling-elem('bg') { 19 @include iro.bem-sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border); 20 border-color: props.get(vars.$error--hover--border-color);
17 } 21 }
18 } 22 }
19 23
20 &:focus { 24 &:focus {
21 @include iro.bem-sibling-elem('bg') { 25 @include iro.bem-sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border); 26 border-color: props.get(vars.$error--focus--border-color);
23 } 27 }
24 } 28 }
25} 29}
26 30
27@mixin keyboard-focus { 31@mixin -keyboard-focus {
28 @include iro.bem-sibling-elem('bg') { 32 @include iro.bem-sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border); 33 border-color: props.get(vars.$key-focus--border-color);
30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); 34 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
31 //outline-offset: fn.dim(--focus --border); 35 //outline-offset: props.get(vars.$focus --border);
32 } 36 }
33} 37}
34 38
35@include iro.props-namespace('text-field') { 39@mixin styles {
36 @include iro.props-store(( 40 @include props.materialize(meta.module-variables('vars'));
37 --dims: ( 41
38 --line-height: 1.4, 42 @include iro.bem-object('text-field') {
39 --pad-i: fn.global-dim(--size --125), 43 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
40 --pad-b: fn.global-dim(--size --125),
41 --border: fn.global-dim(--border --thin),
42 --rounding: fn.global-dim(--rounding),
43
44 --extended: (
45 --pad: fn.global-dim(--size --50),
46 ),
47
48 --focus: (
49 --border: fn.global-dim(--border --medium),
50 ),
51
52 --key-focus: (
53 --border: fn.global-dim(--key-focus --outline),
54 ),
55 ),
56 --colors: (
57 --bg: fn.global-color(--base --50),
58 --placeholder: fn.global-color(--text-mute-more),
59 --text: fn.global-color(--text),
60 --border: fn.global-color(--border-strong),
61
62 --hover: (
63 --border: fn.global-color(--text-mute-more),
64 ),
65 --focus: (
66 --border: fn.global-color(--focus --border),
67 ),
68 --key-focus: (
69 --border: fn.global-color(--focus --border),
70 --outline: fn.global-color(--focus --outline),
71 ),
72 --error: (
73 --border: fn.global-color(--negative --700),
74
75 --hover: (
76 --border: fn.global-color(--negative --900),
77 ),
78 --focus: (
79 --border: fn.global-color(--negative --900),
80 ),
81 ),
82 --disabled: (
83 --bg: fn.global-color(--border-mute),
84 --placeholder: fn.global-color(--text-disabled),
85 --text: fn.global-color(--text-disabled),
86 --border: fn.global-color(--border-mute),
87 ),
88 ),
89 ));
90
91 @include iro.bem-object(iro.props-namespace()) {
92 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
93 44
94 position: relative; 45 position: relative;
95 min-inline-size: 0; 46 min-inline-size: 0;
96 background-color: fn.color(--bg); 47 background-color: props.get(vars.$bg-color);
97 border-radius: fn.dim(--rounding); 48 border-radius: props.get(vars.$rounding);
98 49
99 @include iro.bem-elem('bg') { 50 @include iro.bem-elem('bg') {
100 position: absolute; 51 position: absolute;
@@ -102,18 +53,18 @@
102 inset-inline: 0; 53 inset-inline: 0;
103 display: block; 54 display: block;
104 pointer-events: none; 55 pointer-events: none;
105 border: fn.dim(--border) solid fn.color(--border); 56 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
106 border-radius: fn.dim(--rounding); 57 border-radius: props.get(vars.$rounding);
107 } 58 }
108 59
109 @include iro.bem-elem('native') { 60 @include iro.bem-elem('native') {
110 box-sizing: border-box; 61 box-sizing: border-box;
111 inline-size: 100%; 62 inline-size: 100%;
112 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); 63 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
113 padding-inline: fn.dim(--pad-i); 64 padding-inline: props.get(vars.$pad-i);
114 font: inherit; 65 font: inherit;
115 line-height: fn.dim(--line-height); 66 line-height: props.get(vars.$line-height);
116 color: fn.color(--text); 67 color: props.get(vars.$text-color);
117 appearance: none; 68 appearance: none;
118 resize: none; 69 resize: none;
119 background-color: transparent; 70 background-color: transparent;
@@ -121,13 +72,13 @@
121 72
122 &::placeholder { 73 &::placeholder {
123 font-style: italic; 74 font-style: italic;
124 color: fn.color(--placeholder); 75 color: props.get(vars.$placeholder-color);
125 opacity: 1; 76 opacity: 1;
126 } 77 }
127 78
128 &:hover { 79 &:hover {
129 @include iro.bem-sibling-elem('bg') { 80 @include iro.bem-sibling-elem('bg') {
130 border-color: fn.color(--hover --border); 81 border-color: props.get(vars.$hover--border-color);
131 } 82 }
132 } 83 }
133 84
@@ -137,32 +88,32 @@
137 @include iro.bem-sibling-elem('bg') { 88 @include iro.bem-sibling-elem('bg') {
138 inset-block: $focus-border-offset; 89 inset-block: $focus-border-offset;
139 inset-inline: $focus-border-offset; 90 inset-inline: $focus-border-offset;
140 border: fn.dim(--focus --border) solid fn.color(--focus --border); 91 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
141 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 92 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
142 } 93 }
143 } 94 }
144 95
145 &:invalid { 96 &:invalid {
146 @include invalid; 97 @include -invalid;
147 } 98 }
148 99
149 &:focus-visible, 100 &:focus-visible,
150 &:invalid:focus-visible { 101 &:invalid:focus-visible {
151 @include keyboard-focus; 102 @include -keyboard-focus;
152 } 103 }
153 } 104 }
154 105
155 @include iro.bem-modifier('extended') { 106 @include iro.bem-modifier('extended') {
156 padding: fn.dim(--extended --pad); 107 padding: props.get(vars.$extended--pad);
157 108
158 @include iro.bem-multi('&', 'elem' 'bg') { 109 @include iro.bem-multi('&', 'elem' 'bg') {
159 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); 110 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
160 } 111 }
161 112
162 @include iro.bem-elem('native') { 113 @include iro.bem-elem('native') {
163 &:focus { 114 &:focus {
164 @include iro.bem-sibling-elem('bg') { 115 @include iro.bem-sibling-elem('bg') {
165 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); 116 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
166 } 117 }
167 } 118 }
168 } 119 }
@@ -170,33 +121,33 @@
170 121
171 @include iro.bem-is('invalid') { 122 @include iro.bem-is('invalid') {
172 @include iro.bem-elem('native') { 123 @include iro.bem-elem('native') {
173 @include invalid; 124 @include -invalid;
174 125
175 &:focus-visible { 126 &:focus-visible {
176 @include keyboard-focus; 127 @include -keyboard-focus;
177 } 128 }
178 } 129 }
179 } 130 }
180 131
181 @include iro.bem-is('disabled') { 132 @include iro.bem-is('disabled') {
182 background-color: fn.color(--disabled --bg); 133 background-color: props.get(vars.$disabled--bg-color);
183 134
184 @include iro.bem-elem('native') { 135 @include iro.bem-elem('native') {
185 color: fn.color(--disabled --text); 136 color: props.get(vars.$disabled--text-color);
186 137
187 &::placeholder { 138 &::placeholder {
188 color: fn.color(--disabled --placeholder); 139 color: props.get(vars.$disabled--placeholder-color);
189 } 140 }
190 } 141 }
191 142
192 @include iro.bem-elem('bg') { 143 @include iro.bem-elem('bg') {
193 border-color: fn.color(--disabled --border); 144 border-color: props.get(vars.$disabled--border-color);
194 } 145 }
195 146
196 @include iro.bem-is('invalid') { 147 @include iro.bem-is('invalid') {
197 @include iro.bem-elem('native') { 148 @include iro.bem-elem('native') {
198 @include iro.bem-sibling-elem('bg') { 149 @include iro.bem-sibling-elem('bg') {
199 border-color: fn.color(--disabled --border); 150 border-color: props.get(vars.$disabled--border-color);
200 } 151 }
201 } 152 }
202 } 153 }
@@ -204,7 +155,7 @@
204 @include iro.bem-elem('native') { 155 @include iro.bem-elem('native') {
205 &:invalid { 156 &:invalid {
206 @include iro.bem-sibling-elem('bg') { 157 @include iro.bem-sibling-elem('bg') {
207 border-color: fn.color(--disabled --border); 158 border-color: props.get(vars.$disabled--border-color);
208 } 159 }
209 } 160 }
210 } 161 }
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 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$line-height: props.def(--o-text-field--line-height, 1.4) !default;
6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
10
11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
12
13$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
14
15$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default;
16
17$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default;
18$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default;
19$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default;
20$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default;
21
22$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default;
23
24$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default;
25
26$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
27$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
28
29$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default;
30
31$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default;
32
33$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default;
34
35$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default;
36$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default;
37$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default;
38$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 05:45:00 +0000