summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_iro-design.scss5
-rw-r--r--src/objects/_badge.scss2
-rw-r--r--src/objects/_badge.vars.scss6
-rw-r--r--src/objects/_button.scss22
-rw-r--r--src/objects/_card.scss129
-rw-r--r--src/objects/_card.vars.scss25
-rw-r--r--src/objects/_checkbox.scss142
-rw-r--r--src/objects/_checkbox.vars.scss32
-rw-r--r--src/objects/_divider.scss132
-rw-r--r--src/objects/_divider.vars.scss59
-rw-r--r--src/objects/_emoji.scss72
-rw-r--r--src/objects/_emoji.vars.scss26
-rw-r--r--src/objects/_icon.scss26
-rw-r--r--src/objects/_icon.vars.scss5
-rw-r--r--src_demo/index.scss5
15 files changed, 352 insertions, 336 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index b8e8246..6cda866 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -43,3 +43,8 @@ $breakpoints: (
43@forward 'objects/backdrop' as o-backdrop--*; 43@forward 'objects/backdrop' as o-backdrop--*;
44@forward 'objects/badge' as o-badge--*; 44@forward 'objects/badge' as o-badge--*;
45@forward 'objects/button' as o-button--*; 45@forward 'objects/button' as o-button--*;
46@forward 'objects/card' as o-card--*;
47@forward 'objects/checkbox' as o-checkbox--*;
48@forward 'objects/divider' as o-divider--*;
49@forward 'objects/emoji' as o-emoji--*;
50@forward 'objects/icon' as o-icon--*;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 5a07630..41b2fbb 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -50,7 +50,7 @@
50 50
51 @if $static { 51 @if $static {
52 &::after { 52 &::after {
53 outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width); 53 outline-color: props.get($theme, list.join($key, --key-focus --border)...);
54 box-shadow: 54 box-shadow:
55 0 55 0
56 0 56 0
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index c49474b..9254c83 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -37,9 +37,9 @@ $sizes: (
37 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl, 37 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
38) !default; 38) !default;
39 39
40$key-focus--label-color: props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default; 40$key-focus--label-color: props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
41$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default; 41$key-focus--border-color: props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
42$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default; 42$key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
43 43
44$default-theme-override: () !default; 44$default-theme-override: () !default;
45$default-theme: props.def(--o-badge, ( 45$default-theme: props.def(--o-badge, (
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 854e1e3..e4a656c 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -22,9 +22,9 @@
22 &:link, 22 &:link,
23 &:visited, 23 &:visited,
24 &:enabled { 24 &:enabled {
25 color: props.get($theme, list.join($key, --outline-label)); 25 color: props.get($theme, list.join($key, --outline-label)...);
26 background-color: transparent; 26 background-color: transparent;
27 border-color: props.get($theme, list.join($key, --outline-border)); 27 border-color: props.get($theme, list.join($key, --outline-border)...);
28 } 28 }
29 } 29 }
30 30
@@ -33,37 +33,37 @@
33 &:enabled { 33 &:enabled {
34 &:hover, 34 &:hover,
35 &:focus-visible { 35 &:focus-visible {
36 color: props.get($theme, list.join($key, --hover --label)); 36 color: props.get($theme, list.join($key, --hover --label)...);
37 background-color: props.get($theme, list.join($key, --hover --bg)); 37 background-color: props.get($theme, list.join($key, --hover --bg)...);
38 border-color: transparent; 38 border-color: transparent;
39 } 39 }
40 40
41 &:active { 41 &:active {
42 color: props.get($theme, list.join($key, --active --label)); 42 color: props.get($theme, list.join($key, --active --label)...);
43 background-color: props.get($theme, list.join($key, --active --bg)); 43 background-color: props.get($theme, list.join($key, --active --bg)...);
44 border-color: transparent; 44 border-color: transparent;
45 } 45 }
46 } 46 }
47} 47}
48 48
49@mixin -apply-static-theme($theme, $key: ()) { 49@mixin -apply-static-theme($theme, $key: ()) {
50 color: props.get($theme, list.join($key, --disabled --label)); 50 color: props.get($theme, list.join($key, --disabled --label)...);
51 background-color: props.get($theme, list.join($key, --disabled --bg)); 51 background-color: props.get($theme, list.join($key, --disabled --bg)...);
52 border-color: transparent; 52 border-color: transparent;
53 53
54 &::after { 54 &::after {
55 outline: props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width); 55 outline-color: props.get($theme, list.join($key, --key-focus --border)...);
56 box-shadow: 56 box-shadow:
57 0 57 0
58 0 58 0
59 0 59 0
60 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 60 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
61 props.get($theme, list.join($key, --key-focus --outline)); 61 props.get($theme, list.join($key, --key-focus --outline)...);
62 } 62 }
63 63
64 @include iro.bem-modifier('outline') { 64 @include iro.bem-modifier('outline') {
65 background-color: transparent; 65 background-color: transparent;
66 border-color: props.get($theme, list.join($key, --disabled --outline-border)); 66 border-color: props.get($theme, list.join($key, --disabled --outline-border)...);
67 } 67 }
68 68
69 @include -apply-theme($theme, $key); 69 @include -apply-theme($theme, $key);
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index cc9afc9..25e68d2 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,70 +1,44 @@
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@use 'avatar.vars' as avatar;
4@include iro.props-namespace('card') { 5
5 @include iro.props-store(( 6@forward 'card.vars';
6 --dims: ( 7@use 'card.vars' as vars;
7 --divider: fn.global-dim(--border --thin), 8
8 --pad-i: fn.global-dim(--size --300), 9@mixin styles {
9 --pad-b: fn.global-dim(--size --250), 10 @include props.materialize(meta.module-variables('vars'));
10 --spacing: fn.global-dim(--size --200), 11
11 --rounding: fn.global-dim(--rounding), 12 @include iro.bem-object('card') {
12
13 --hover: (
14 --offset-b: calc(-1 * fn.global-dim(--size --65)),
15 ),
16
17 --key-focus: (
18 --border: fn.global-dim(--key-focus --border),
19 --border-offset: fn.global-dim(--key-focus --border-offset),
20 --outline: fn.global-dim(--key-focus --outline),
21 ),
22 ),
23 --colors: (
24 --bg: fn.global-color(--bg-l2),
25 --divider: fn.global-color(--border-mute),
26
27 --key-focus: (
28 --label: fn.global-color(--focus --text),
29 --border: fn.global-color(--focus --border),
30 --outline: fn.global-color(--focus --outline),
31 ),
32
33 --quiet: (
34 --image: fn.global-color(--bg-base),
35
36 --hover: (
37 --image: fn.global-color(--border),
38 ),
39 )
40 ),
41 ));
42
43 @include iro.bem-object(iro.props-namespace()) {
44 display: block; 13 display: block;
45 margin: calc(-1 * fn.dim(--key-focus --border)); 14 margin: calc(-1 * props.get(vars.$key-focus--border-width));
46 background-color: fn.color(--bg); 15 background-color: props.get(vars.$bg-color);
47 background-clip: content-box; 16 background-clip: content-box;
48 border: fn.dim(--key-focus --border-offset) solid transparent; 17 border: props.get(vars.$key-focus--border-offset) solid transparent;
49 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 18 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
50 transition: transform .2s; 19 transition: transform .2s;
51 20
52 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 21 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
53 &:hover, 22 &:hover,
54 &:active, 23 &:active,
55 &:focus-visible { 24 &:focus-visible {
56 transform: translateY(fn.dim(--hover --offset-b)); 25 transform: translateY(props.get(vars.$hover--offset-b));
57 } 26 }
58 27
59 &:focus-visible { 28 &:focus-visible {
60 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 29 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 30 box-shadow:
31 0
32 0
33 0
34 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
35 props.get(vars.$key-focus--outline-color);
62 } 36 }
63 } 37 }
64 38
65 @include iro.bem-elem('avatar') { 39 @include iro.bem-elem('avatar') {
66 margin-block-start: fn.dim(--pad-b); 40 margin-block-start: props.get(vars.$pad-b);
67 margin-inline-start: fn.dim(--pad-i); 41 margin-inline-start: props.get(vars.$pad-i);
68 } 42 }
69 43
70 @include iro.bem-elem('image') { 44 @include iro.bem-elem('image') {
@@ -74,23 +48,23 @@
74 transition: transform .2s, opacity .2s; 48 transition: transform .2s, opacity .2s;
75 49
76 &:first-child { 50 &:first-child {
77 border-start-start-radius: fn.dim(--rounding); 51 border-start-start-radius: props.get(vars.$rounding);
78 border-start-end-radius: fn.dim(--rounding); 52 border-start-end-radius: props.get(vars.$rounding);
79 } 53 }
80 54
81 &:last-child { 55 &:last-child {
82 border-end-start-radius: fn.dim(--rounding); 56 border-end-start-radius: props.get(vars.$rounding);
83 border-end-end-radius: fn.dim(--rounding); 57 border-end-end-radius: props.get(vars.$rounding);
84 } 58 }
85 59
86 @include iro.bem-next-elem('avatar') { 60 @include iro.bem-next-elem('avatar') {
87 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 61 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
88 } 62 }
89 } 63 }
90 64
91 @include iro.bem-elem('body') { 65 @include iro.bem-elem('body') {
92 padding-block: fn.dim(--pad-b); 66 padding-block: props.get(vars.$pad-b);
93 padding-inline: fn.dim(--pad-i); 67 padding-inline: props.get(vars.$pad-i);
94 68
95 &::before { 69 &::before {
96 display: block; 70 display: block;
@@ -100,20 +74,20 @@
100 } 74 }
101 75
102 @include iro.bem-elem('content') { 76 @include iro.bem-elem('content') {
103 margin-block-start: fn.dim(--spacing); 77 margin-block-start: props.get(vars.$spacing);
104 } 78 }
105 79
106 @include iro.bem-elem('footer') { 80 @include iro.bem-elem('footer') {
107 padding-block: 0 fn.dim(--pad-b); 81 padding-block: 0 props.get(vars.$pad-b);
108 padding-inline: fn.dim(--pad-i); 82 padding-inline: props.get(vars.$pad-i);
109 margin-block-start: calc(-1 * fn.dim(--pad-b)); 83 margin-block-start: calc(-1 * props.get(vars.$pad-b));
110 84
111 &::before { 85 &::before {
112 display: block; 86 display: block;
113 block-size: fn.dim(--divider); 87 block-size: props.get(vars.$divider-width);
114 margin-block: fn.dim(--spacing); 88 margin-block: props.get(vars.$spacing);
115 content: ''; 89 content: '';
116 background-color: fn.color(--divider); 90 background-color: props.get(vars.$divider-width);
117 } 91 }
118 } 92 }
119 93
@@ -129,9 +103,9 @@
129 transform: none; 103 transform: none;
130 104
131 @include iro.bem-elem('image') { 105 @include iro.bem-elem('image') {
132 background-color: fn.color(--quiet --hover --image); 106 background-color: props.get(vars.$quiet--hover--image-color);
133 opacity: .75; 107 opacity: .75;
134 transform: translateY(fn.dim(--hover --offset-b)); 108 transform: translateY(props.get(vars.$hover--offset-b));
135 } 109 }
136 } 110 }
137 111
@@ -140,9 +114,14 @@
140 box-shadow: none; 114 box-shadow: none;
141 115
142 @include iro.bem-elem('image') { 116 @include iro.bem-elem('image') {
143 background-color: fn.color(--quiet --hover --image); 117 background-color: props.get(vars.$quiet--hover--image-color);
144 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 118 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
145 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 119 box-shadow:
120 0
121 0
122 0
123 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
124 props.get(vars.$key-focus--outline-width);
146 opacity: 1; 125 opacity: 1;
147 } 126 }
148 } 127 }
@@ -150,16 +129,16 @@
150 129
151 @include iro.bem-elem('image') { 130 @include iro.bem-elem('image') {
152 position: relative; 131 position: relative;
153 margin: calc(-1 * fn.dim(--key-focus --border)); 132 margin: calc(-1 * props.get(vars.$key-focus--border-width));
154 background-color: fn.color(--quiet --image); 133 background-color: props.get(vars.$quiet--image-color);
155 background-clip: padding-box; 134 background-clip: padding-box;
156 border: fn.dim(--key-focus --border-offset) solid transparent; 135 border: props.get(vars.$key-focus--border-offset) solid transparent;
157 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 136 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
158 } 137 }
159 138
160 @include iro.bem-elem('body') { 139 @include iro.bem-elem('body') {
161 padding: 0; 140 padding: 0;
162 padding-block-start: fn.dim(--spacing); 141 padding-block-start: props.get(vars.$spacing);
163 } 142 }
164 143
165 @include iro.bem-elem('footer') { 144 @include iro.bem-elem('footer') {
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
new file mode 100644
index 0000000..bf5f6db
--- /dev/null
+++ b/src/objects/_card.vars.scss
@@ -0,0 +1,25 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
10
11$hover--offset-b: props.def(--o-card--rounding, calc(-1 * props.get(core.$size--65))) !default;
12
13$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2)) !default;
18$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute)) !default;
19
20$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
21$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
22$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
23
24$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base)) !default;
25$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border)) !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 8d82cd5..c6385bc 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,72 +1,35 @@
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('checkbox') { 6@forward 'checkbox.vars';
5 @include iro.props-store(( 7@use 'checkbox.vars' as vars;
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14 8
15 --key-focus: ( 9@mixin styles {
16 --border: fn.global-dim(--key-focus --border), 10 @include props.materialize(meta.module-variables('vars'));
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --box-border: fn.global-color(--text-mute-more),
23 --box-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --box-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --box-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --box-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong),
39 --box-bg: fn.global-color(--base --75),
40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ));
48 11
49 @include iro.bem-object(iro.props-namespace()) { 12 @include iro.bem-object('checkbox') {
50 position: relative; 13 position: relative;
51 display: inline-block; 14 display: inline-block;
52 padding-block: fn.dim(--pad-b); 15 padding-block: props.get(vars.$pad-b);
53 padding-inline: fn.dim(--pad-i); 16 padding-inline: props.get(vars.$pad-i);
54 margin-inline: 17 margin-inline:
55 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))
56 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); 19 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
57 20
58 @include iro.bem-elem('box') { 21 @include iro.bem-elem('box') {
59 position: relative; 22 position: relative;
60 display: inline-block; 23 display: inline-block;
61 flex: 0 0 auto; 24 flex: 0 0 auto;
62 inline-size: fn.dim(--size); 25 inline-size: props.get(vars.$size);
63 block-size: fn.dim(--size); 26 block-size: props.get(vars.$size);
64 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
65 vertical-align: top; 28 vertical-align: top;
66 background-color: fn.color(--box-border); 29 background-color: props.get(vars.$box-border-color);
67 background-clip: padding-box; 30 background-clip: padding-box;
68 border: fn.dim(--key-focus --border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
69 border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); 32 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
70 33
71 &::before, 34 &::before,
72 &::after { 35 &::after {
@@ -76,23 +39,23 @@
76 } 39 }
77 40
78 &::before { 41 &::before {
79 inset-block-start: fn.dim(--border); 42 inset-block-start: props.get(vars.$border-width);
80 inset-inline-start: fn.dim(--border); 43 inset-inline-start: props.get(vars.$border-width);
81 z-index: 2; 44 z-index: 2;
82 inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); 45 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
83 block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); 46 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
84 background-color: fn.color(--box-bg); 47 background-color: props.get(vars.$box-bg-color);
85 transition: transform .2s ease; 48 transition: transform .2s ease;
86 } 49 }
87 50
88 &::after { 51 &::after {
89 inset-block-start: calc(.5 * fn.dim(--size) - 1px); 52 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
90 inset-inline-start: calc(1.5 * fn.dim(--border)); 53 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
91 z-index: 3; 54 z-index: 3;
92 box-sizing: border-box; 55 box-sizing: border-box;
93 inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); 56 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
94 block-size: 0; 57 block-size: 0;
95 border-color: fn.color(--box-bg); 58 border-color: props.get(vars.$box-bg-color);
96 border-style: solid; 59 border-style: solid;
97 border-radius: 2px; 60 border-radius: 2px;
98 transition: transform .2s ease; 61 transition: transform .2s ease;
@@ -104,14 +67,14 @@
104 67
105 @include iro.bem-elem('check-icon') { 68 @include iro.bem-elem('check-icon') {
106 position: absolute; 69 position: absolute;
107 inset-block-start: calc(1 * fn.dim(--border)); 70 inset-block-start: calc(1 * props.get(vars.$border-width));
108 inset-inline-start: calc(1 * fn.dim(--border)); 71 inset-inline-start: calc(1 * props.get(vars.$border-width));
109 z-index: 2; 72 z-index: 2;
110 display: block; 73 display: block;
111 inline-size: calc(100% - 2 * fn.dim(--border)); 74 inline-size: calc(100% - 2 * props.get(vars.$border-width));
112 block-size: calc(100% - 2 * fn.dim(--border)); 75 block-size: calc(100% - 2 * props.get(vars.$border-width));
113 margin: 0; 76 margin: 0;
114 color: fn.color(--box-bg); 77 color: props.get(vars.$box-bg-color);
115 stroke-width: iro.fn-px-to-rem(3px); 78 stroke-width: iro.fn-px-to-rem(3px);
116 transition: transform .2s ease; 79 transition: transform .2s ease;
117 transform: scale(0); 80 transform: scale(0);
@@ -119,7 +82,7 @@
119 } 82 }
120 83
121 @include iro.bem-elem('label') { 84 @include iro.bem-elem('label') {
122 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); 85 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
123 } 86 }
124 87
125 @include iro.bem-elem('native') { 88 @include iro.bem-elem('native') {
@@ -133,16 +96,16 @@
133 margin: 0; 96 margin: 0;
134 overflow: hidden; 97 overflow: hidden;
135 appearance: none; 98 appearance: none;
136 border-radius: fn.dim(--rounding); 99 border-radius: props.get(vars.$rounding);
137 100
138 &:hover, 101 &:hover,
139 &:focus-visible { 102 &:focus-visible {
140 @include iro.bem-sibling-elem('label') { 103 @include iro.bem-sibling-elem('label') {
141 color: fn.color(--hover --label); 104 color: props.get(vars.$hover--label-color);
142 } 105 }
143 106
144 @include iro.bem-sibling-elem('box') { 107 @include iro.bem-sibling-elem('box') {
145 background-color: fn.color(--hover --box-border); 108 background-color: props.get(vars.$hover--box-border-color);
146 } 109 }
147 } 110 }
148 111
@@ -176,26 +139,31 @@
176 139
177 &:disabled { 140 &:disabled {
178 @include iro.bem-sibling-elem('label') { 141 @include iro.bem-sibling-elem('label') {
179 color: fn.color(--disabled --label); 142 color: props.get(vars.$disabled--label-color);
180 } 143 }
181 144
182 @include iro.bem-sibling-elem('box') { 145 @include iro.bem-sibling-elem('box') {
183 background-color: fn.color(--disabled --box-border); 146 background-color: props.get(vars.$disabled--box-border-color);
184 147
185 &::before { 148 &::before {
186 background-color: fn.color(--disabled --box-bg); 149 background-color: props.get(vars.$disabled--box-bg-color);
187 } 150 }
188 } 151 }
189 } 152 }
190 153
191 &:focus-visible { 154 &:focus-visible {
192 @include iro.bem-sibling-elem('label') { 155 @include iro.bem-sibling-elem('label') {
193 color: fn.color(--key-focus --label); 156 color: props.get(vars.$key-focus--label-color);
194 } 157 }
195 158
196 @include iro.bem-sibling-elem('box') { 159 @include iro.bem-sibling-elem('box') {
197 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 160 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
198 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 161 box-shadow:
162 0
163 0
164 0
165 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
166 props.get(vars.$key-focus--outline-color);
199 } 167 }
200 } 168 }
201 } 169 }
@@ -210,48 +178,48 @@
210 @include iro.bem-elem('native') { 178 @include iro.bem-elem('native') {
211 &:checked { 179 &:checked {
212 @include iro.bem-sibling-elem('box') { 180 @include iro.bem-sibling-elem('box') {
213 background-color: fn.color(--accent --box-border); 181 background-color: props.get(vars.$accent--box-border-color);
214 } 182 }
215 183
216 &:hover, 184 &:hover,
217 &:focus-visible { 185 &:focus-visible {
218 @include iro.bem-sibling-elem('box') { 186 @include iro.bem-sibling-elem('box') {
219 background-color: fn.color(--accent --hover --box-border); 187 background-color: props.get(vars.$accent--hover--box-border-color);
220 } 188 }
221 } 189 }
222 } 190 }
223 191
224 &:indeterminate { 192 &:indeterminate {
225 @include iro.bem-sibling-elem('box') { 193 @include iro.bem-sibling-elem('box') {
226 background-color: fn.color(--accent --box-border); 194 background-color: props.get(vars.$accent--box-border-color);
227 } 195 }
228 196
229 &:hover, 197 &:hover,
230 &:focus-visible { 198 &:focus-visible {
231 @include iro.bem-sibling-elem('box') { 199 @include iro.bem-sibling-elem('box') {
232 background-color: fn.color(--accent --hover --box-border); 200 background-color: props.get(vars.$accent--hover--box-border-color);
233 } 201 }
234 } 202 }
235 } 203 }
236 204
237 &:disabled { 205 &:disabled {
238 @include iro.bem-sibling-elem('box') { 206 @include iro.bem-sibling-elem('box') {
239 background-color: fn.color(--disabled --box-border); 207 background-color: props.get(vars.$disabled--box-border-color);
240 208
241 &::before { 209 &::before {
242 background-color: fn.color(--disabled --box-bg); 210 background-color: props.get(vars.$disabled--box-bg-color);
243 } 211 }
244 } 212 }
245 213
246 &:checked { 214 &:checked {
247 @include iro.bem-sibling-elem('box') { 215 @include iro.bem-sibling-elem('box') {
248 background-color: fn.color(--disabled --box-border); 216 background-color: props.get(vars.$disabled--box-border-color);
249 } 217 }
250 } 218 }
251 219
252 &:indeterminate { 220 &:indeterminate {
253 @include iro.bem-sibling-elem('box') { 221 @include iro.bem-sibling-elem('box') {
254 background-color: fn.color(--disabled --box-border); 222 background-color: props.get(vars.$disabled--box-border-color);
255 } 223 }
256 } 224 }
257 } 225 }
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
new file mode 100644
index 0000000..d0785d7
--- /dev/null
+++ b/src/objects/_checkbox.vars.scss
@@ -0,0 +1,32 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
6$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
7$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
8$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
9$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
10$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default;
11$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
12
13$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default;
18$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default;
19
20$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading)) !default;
21$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute)) !default;
22
23$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900)) !default;
24$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000)) !default;
25
26$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
27$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong)) !default;
28$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75)) !default;
29
30$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
31$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
32$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 7d96206..122da78 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,89 +1,27 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
2@use 'iro-sass/src/iro-sass' as iro; 4@use 'iro-sass/src/iro-sass' as iro;
3@use '../functions' as fn; 5@use '../props';
4@use '../config'; 6@use '../core.vars' as core;
5 7
6$static-themes: 'black' 'white' !default; 8@forward 'divider.vars';
9@use 'divider.vars' as vars;
7 10
8@include iro.props-namespace('divider') { 11@mixin styles {
9 @include iro.props-store(( 12 @include props.materialize(meta.module-variables('vars'));
10 --dims: (
11 --margin-b: fn.global-dim(--size --85),
12
13 --strong: (
14 --border: fn.global-dim(--border --thick),
15 --label-font-size: fn.global-dim(--font-size --100),
16 ),
17 --medium: (
18 --border: fn.global-dim(--border --medium),
19 --label-font-size: fn.global-dim(--font-size --75),
20 ),
21 --faint: (
22 --border: fn.global-dim(--border --thin),
23 --label-font-size: fn.global-dim(--font-size --50),
24 ),
25 ),
26 --colors: (
27 --strong: (
28 --bg: fn.global-color(--text),
29 --label: fn.global-color(--text),
30 ),
31 --medium: (
32 --bg: fn.global-color(--border),
33 --label: fn.global-color(--text-mute),
34 ),
35 --faint: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--text-mute-more),
38 ),
39 ),
40 ));
41
42 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
43 @if $color != '--base' {
44 @include iro.props-store((
45 --colors: (
46 $color: (
47 --bg: fn.global-color($color --800),
48 --label: fn.global-color($color --1000),
49 )
50 ),
51 ));
52 }
53 }
54
55 @each $theme in $static-themes {
56 @include iro.props-store((
57 --colors: (
58 --static-#{$theme}: (
59 --strong: (
60 --bg: fn.global-color(--#{$theme}-transparent --800),
61 --label: fn.global-color(--#{$theme}-transparent --900),
62 ),
63 --medium: (
64 --bg: fn.global-color(--#{$theme}-transparent --300),
65 --label: fn.global-color(--#{$theme}-transparent --500),
66 ),
67 --faint: (
68 --bg: fn.global-color(--#{$theme}-transparent --300),
69 --label: fn.global-color(--#{$theme}-transparent --500),
70 ),
71 )
72 ),
73 ));
74 }
75 13
76 @include iro.bem-object(iro.props-namespace()) { 14 @include iro.bem-object('divider') {
77 display: flex; 15 display: flex;
78 flex: 0 0 auto; 16 flex: 0 0 auto;
79 flex-direction: row; 17 flex-direction: row;
80 align-items: center; 18 align-items: center;
81 block-size: 1em; 19 block-size: 1em;
82 margin-block: fn.dim(--margin-b); 20 margin-block: props.get(vars.$margin-b);
83 font-size: fn.dim(--strong --label-font-size); 21 font-size: props.get(vars.$strong--label-font-size);
84 font-weight: 700; 22 font-weight: 700;
85 line-height: 1; 23 line-height: 1;
86 color: fn.color(--strong --label); 24 color: props.get(vars.$strong--label-color);
87 text-transform: uppercase; 25 text-transform: uppercase;
88 letter-spacing: .5px; 26 letter-spacing: .5px;
89 27
@@ -91,9 +29,9 @@ $static-themes: 'black' 'white' !default;
91 &::after { 29 &::after {
92 flex: 1 1 auto; 30 flex: 1 1 auto;
93 inline-size: 100%; 31 inline-size: 100%;
94 block-size: fn.dim(--strong --border); 32 block-size: props.get(vars.$strong--border-width);
95 content: ''; 33 content: '';
96 background-color: fn.color(--strong --bg); 34 background-color: props.get(vars.$strong--bg-color);
97 } 35 }
98 36
99 &::before { 37 &::before {
@@ -109,7 +47,7 @@ $static-themes: 'black' 'white' !default;
109 inline-size: 1px; 47 inline-size: 1px;
110 block-size: auto; 48 block-size: auto;
111 margin-block: 0; 49 margin-block: 0;
112 background-color: fn.color(--faint --bg); 50 background-color: props.get(vars.$faint--bg-color);
113 51
114 &::before, 52 &::before,
115 &::after { 53 &::after {
@@ -118,26 +56,26 @@ $static-themes: 'black' 'white' !default;
118 } 56 }
119 57
120 @include iro.bem-modifier('medium') { 58 @include iro.bem-modifier('medium') {
121 font-size: fn.dim(--medium --label-font-size); 59 font-size: props.get(vars.$medium--label-font-size);
122 font-weight: 500; 60 font-weight: 500;
123 color: fn.color(--medium --label); 61 color: props.get(vars.$medium--label-color);
124 62
125 &::before, 63 &::before,
126 &::after { 64 &::after {
127 block-size: fn.dim(--medium --border); 65 block-size: props.get(vars.$medium--border-width);
128 background-color: fn.color(--medium --bg); 66 background-color: props.get(vars.$medium--bg-color);
129 } 67 }
130 } 68 }
131 69
132 @include iro.bem-modifier('faint') { 70 @include iro.bem-modifier('faint') {
133 font-size: fn.dim(--faint --label-font-size); 71 font-size: props.get(vars.$faint--label-font-size);
134 font-weight: 500; 72 font-weight: 500;
135 color: fn.color(--faint --label); 73 color: props.get(vars.$faint--label-color);
136 74
137 &::before, 75 &::before,
138 &::after { 76 &::after {
139 block-size: fn.dim(--faint --border); 77 block-size: props.get(vars.$faint--border-width);
140 background-color: fn.color(--faint --bg); 78 background-color: props.get(vars.$faint--bg-color);
141 } 79 }
142 } 80 }
143 81
@@ -152,49 +90,49 @@ $static-themes: 'black' 'white' !default;
152 } 90 }
153 } 91 }
154 92
155 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { 93 @each $theme in map.keys(props.get(vars.$themes)) {
156 @include iro.bem-modifier($color) { 94 @include iro.bem-modifier(string.slice($theme, 3)) {
157 &::before, 95 &::before,
158 &::after { 96 &::after {
159 background-color: fn.color(--#{$color} --bg); 97 background-color: props.get(vars.$themes, $theme, --bg);
160 } 98 }
161 99
162 @include iro.bem-elem('label') { 100 @include iro.bem-elem('label') {
163 color: fn.color(--#{$color} --label); 101 color: props.get(vars.$themes, $theme, --label);
164 } 102 }
165 } 103 }
166 } 104 }
167 105
168 @each $theme in $static-themes { 106 @each $theme in map.keys(props.get(vars.$static-themes)) {
169 @include iro.bem-modifier(static-#{$theme}) { 107 @include iro.bem-modifier(string.slice($theme, 3)) {
170 &::before, 108 &::before,
171 &::after { 109 &::after {
172 background-color: fn.color(--static-#{$theme} --strong --bg); 110 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
173 } 111 }
174 112
175 @include iro.bem-elem('label') { 113 @include iro.bem-elem('label') {
176 color: fn.color(--static-#{$theme} --strong --label); 114 color: props.get(vars.$static-themes, $theme, --strong, --label);
177 } 115 }
178 116
179 @include iro.bem-modifier('medium') { 117 @include iro.bem-modifier('medium') {
180 &::before, 118 &::before,
181 &::after { 119 &::after {
182 background-color: fn.color(--static-#{$theme} --medium --bg); 120 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
183 } 121 }
184 122
185 @include iro.bem-elem('label') { 123 @include iro.bem-elem('label') {
186 color: fn.color(--static-#{$theme} --medium --label); 124 color: props.get(vars.$static-themes, $theme, --medium, --label);
187 } 125 }
188 } 126 }
189 127
190 @include iro.bem-modifier('faint') { 128 @include iro.bem-modifier('faint') {
191 &::before, 129 &::before,
192 &::after { 130 &::after {
193 background-color: fn.color(--static-#{$theme} --faint --bg); 131 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
194 } 132 }
195 133
196 @include iro.bem-elem('label') { 134 @include iro.bem-elem('label') {
197 color: fn.color(--static-#{$theme} --faint --label); 135 color: props.get(vars.$static-themes, $theme, --faint, --label);
198 } 136 }
199 } 137 }
200 } 138 }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
new file mode 100644
index 0000000..09e734f
--- /dev/null
+++ b/src/objects/_divider.vars.scss
@@ -0,0 +1,59 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
6
7$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
8$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
9
10$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
11$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
12
13$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
14$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
15
16$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text)) !default;
17$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default;
18
19$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border)) !default;
20$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute)) !default;
21
22$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default;
23$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default;
24
25$static-themes: props.def(--o-divider);
26
27@each $theme in map.keys(props.get(core.$transparent-colors)) {
28 $button-theme: #{$theme}-static;
29
30 $static-themes: props.merge($static-themes, (
31 $button-theme: (
32 --strong: (
33 --bg: props.get(core.$transparent-colors, $theme, --800),
34 --label: props.get(core.$transparent-colors, $theme, --900),
35 ),
36 --medium: (
37 --bg: props.get(core.$transparent-colors, $theme, --300),
38 --label: props.get(core.$transparent-colors, $theme, --500),
39 ),
40 --faint: (
41 --bg: props.get(core.$transparent-colors, $theme, --300),
42 --label: props.get(core.$transparent-colors, $theme, --500),
43 ),
44 )
45 ));
46}
47
48$themes-config: --accent --negative !default;
49
50$themes: props.def(--o-divider);
51
52@each $theme in $themes-config {
53 $themes: props.merge($themes, (
54 $theme: (
55 --bg: props.get(core.$static-colors, $theme, --800),
56 --label: props.get(core.$static-colors, $theme, --1000),
57 )
58 ));
59}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 41c614c..7747bbf 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,72 +1,48 @@
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 'sass:math'; 4@use 'icon.vars' as icon;
4 5
5@use 'icon'; 6@forward 'emoji.vars';
7@use 'emoji.vars' as vars;
6 8
7@include iro.props-namespace('emoji') { 9@mixin styles {
8 @include iro.props-store(( 10 @include props.materialize(meta.module-variables('vars'));
9 --dims: (
10 --size: calc(1 / 14 * 18em),
11 --pad: .3em,
12 --rounding: fn.global-dim(--rounding),
13 --zoom: 3,
14 --valign: -.25em,
15 11
16 --125: ( 12 @include iro.bem-object('emoji') {
17 --size: calc(1 / 14 * 23em),
18 --valign: -.45em,
19 ),
20
21 --150: (
22 --size: calc(1 / 14 * 28em),
23 --valign: -.65em,
24 ),
25
26 --200: (
27 --size: calc(1 / 14 * 38em),
28 --valign: -1em,
29 )
30 ),
31 --colors: (
32 --bg: fn.global-color(--border-mute),
33 )
34 ));
35
36 @include iro.bem-object(iro.props-namespace()) {
37 position: relative; 13 position: relative;
38 display: inline-block; 14 display: inline-block;
39 inline-size: calc(fn.dim(--size)); 15 inline-size: calc(props.get(vars.$size));
40 block-size: calc(fn.dim(--size)); 16 block-size: calc(props.get(vars.$size));
41 padding: calc(fn.dim(--pad)); 17 padding: calc(props.get(vars.$pad));
42 margin: calc(-1 * fn.dim(--pad)); 18 margin: calc(-1 * props.get(vars.$pad));
43 vertical-align: fn.dim(--valign); 19 vertical-align: props.get(vars.$valign);
44 object-fit: contain; 20 object-fit: contain;
45 21
46 @include iro.bem-modifier('icon') { 22 @include iro.bem-modifier('icon') {
47 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); 23 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
48 vertical-align: fn.foreign-dim(--icon, --valign); 24 vertical-align: props.get(icon.$valign);
49 } 25 }
50 26
51 @each $size in '125' '150' '200' { 27 @each $mod, $size, $valign in vars.$sizes {
52 @include iro.bem-modifier($size) { 28 @include iro.bem-modifier($mod) {
53 inline-size: fn.dim(--#{$size} --size); 29 inline-size: props.get($size);
54 block-size: fn.dim(--#{$size} --size); 30 block-size: props.get($size);
55 vertical-align: fn.dim(--#{$size} --valign); 31 vertical-align: props.get($valign);
56 32
57 @include iro.bem-modifier('icon') { 33 @include iro.bem-modifier('icon') {
58 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size))); 34 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
59 } 35 }
60 } 36 }
61 } 37 }
62 38
63 @include iro.bem-modifier('zoomable') { 39 @include iro.bem-modifier('zoomable') {
64 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom)); 40 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
65 transition: transform .2s ease, background-color .2s ease; 41 transition: transform .2s ease, background-color .2s ease;
66 42
67 &:hover { 43 &:hover {
68 background-color: fn.color(--bg); 44 background-color: props.get(vars.$bg-color);
69 transform: scale(fn.dim(--zoom)); 45 transform: scale(props.get(vars.$zoom));
70 } 46 }
71 } 47 }
72 } 48 }
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
new file mode 100644
index 0000000..458ea9a
--- /dev/null
+++ b/src/objects/_emoji.vars.scss
@@ -0,0 +1,26 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
6$pad: props.def(--o-emoji--pad, .3em) !default;
7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default;
8$zoom: props.def(--o-emoji--zoom, 3) !default;
9$valign: props.def(--o-emoji--valign, -.25em) !default;
10
11$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
12$valign--125: props.def(--o-emoji--125--valign, -.45em) !default;
13
14$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
15$valign--150: props.def(--o-emoji--150--valign, -.65em) !default;
16
17$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
18$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
19
20$sizes: (
21 '125' $size--125 $valign--125,
22 '150' $size--150 $valign--150,
23 '200' $size--200 $valign--200,
24) !default;
25
26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 7cbb7db..23a606d 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,23 +1,21 @@
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@include iro.props-namespace('icon') { 5@forward 'icon.vars';
5 @include iro.props-store(( 6@use 'icon.vars' as vars;
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ));
12 7
13 @include iro.bem-object(iro.props-namespace()) { 8@mixin styles {
9 @include props.materialize(meta.module-variables('vars'));
10
11 @include iro.bem-object('icon') {
14 display: inline; 12 display: inline;
15 inline-size: fn.dim(--size); 13 inline-size: props.get(vars.$size);
16 block-size: fn.dim(--size); 14 block-size: props.get(vars.$size);
17 vertical-align: fn.dim(--valign); 15 vertical-align: props.get(vars.$valign);
18 stroke-linecap: round; 16 stroke-linecap: round;
19 stroke-linejoin: round; 17 stroke-linejoin: round;
20 stroke-width: fn.dim(--stroke); 18 stroke-width: props.get(vars.$stroke-width);
21 19
22 @include iro.bem-modifier('block') { 20 @include iro.bem-modifier('block') {
23 display: block; 21 display: block;
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
new file mode 100644
index 0000000..dedd23a
--- /dev/null
+++ b/src/objects/_icon.vars.scss
@@ -0,0 +1,5 @@
1@use '../props';
2
3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
5$valign: props.def(--o-icon--valign, -.2em) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 4e5c8dd..756994d 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -22,3 +22,8 @@
22@include iro.o-backdrop--styles; 22@include iro.o-backdrop--styles;
23@include iro.o-badge--styles; 23@include iro.o-badge--styles;
24@include iro.o-button--styles; 24@include iro.o-button--styles;
25@include iro.o-card--styles;
26@include iro.o-checkbox--styles;
27@include iro.o-divider--styles;
28@include iro.o-emoji--styles;
29@include iro.o-icon--styles;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 13:21:09 +0000