summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_iro-design.scss2
-rw-r--r--src/layouts/_button-group.vars.scss2
-rw-r--r--src/layouts/_card-list.vars.scss2
-rw-r--r--src/layouts/_container.vars.scss2
-rw-r--r--src/layouts/_form.vars.scss2
-rw-r--r--src/layouts/_media.vars.scss2
-rw-r--r--src/layouts/_overflow.scss2
-rw-r--r--src/objects/_action-button.scss6
-rw-r--r--src/objects/_action-button.vars.scss7
-rw-r--r--src/objects/_alert.scss4
-rw-r--r--src/objects/_alert.vars.scss11
-rw-r--r--src/objects/_avatar.vars.scss2
-rw-r--r--src/objects/_backdrop.scss26
-rw-r--r--src/objects/_backdrop.vars.scss6
-rw-r--r--src/objects/_badge.scss274
-rw-r--r--src/objects/_badge.vars.scss158
-rw-r--r--src/scopes/_blockquotes.vars.scss2
-rw-r--r--src/scopes/_code.vars.scss2
-rw-r--r--src/scopes/_headings.scss2
-rw-r--r--src/scopes/_implicit.scss2
-rw-r--r--src/scopes/_implicit.vars.scss2
-rw-r--r--src/scopes/_links.vars.scss2
-rw-r--r--src/scopes/_lists.scss2
-rw-r--r--src/scopes/_lists.vars.scss2
-rw-r--r--src/scopes/_tables.vars.scss2
-rw-r--r--src_demo/index.scss2
26 files changed, 268 insertions, 260 deletions
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 9aacc95..31be892 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -40,3 +40,5 @@ $breakpoints: (
40@forward 'objects/action-button' as o-action-button--*; 40@forward 'objects/action-button' as o-action-button--*;
41@forward 'objects/alert' as o-alert--*; 41@forward 'objects/alert' as o-alert--*;
42@forward 'objects/avatar' as o-avatar--*; 42@forward 'objects/avatar' as o-avatar--*;
43@forward 'objects/backdrop' as o-backdrop--*;
44@forward 'objects/badge' as o-badge--*;
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 23b09c0..f42f2d4 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,4 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default; 4$spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index 16be23e..05204d0 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default; 4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default;
5$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default; 5$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index a80a909..74114b2 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,6 +1,6 @@
1@use 'iro-sass/src/iro-sass' as iro; 1@use 'iro-sass/src/iro-sass' as iro;
2@use '../props'; 2@use '../props';
3@use '../core'; 3@use '../core.vars' as core;
4 4
5$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default; 5$fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default;
6$fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default; 6$fixed: props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default;
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index a46a337..e2cd1a9 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default; 4$item-spacing-b: props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
5$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default; 5$label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index 55961b8..e082d0c 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default; 4$gap: props.def(--l-media--gap, props.get(core.$size--150)) !default;
5 5
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 310c7ee..d9f028f 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,6 +1,6 @@
1@use 'iro-sass/src/iro-sass' as iro; 1@use 'iro-sass/src/iro-sass' as iro;
2@use '../props'; 2@use '../props';
3@use '../core'; 3@use '../core.vars' as core;
4 4
5@mixin styles { 5@mixin styles {
6 @include iro.bem-layout('overflow') { 6 @include iro.bem-layout('overflow') {
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 0a65b8d..129e681 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,9 +137,9 @@
137 137
138 @include -apply-theme(vars.$default-theme); 138 @include -apply-theme(vars.$default-theme);
139 139
140 @each $theme in map.keys(props.get(vars.$static-themes)) { 140 @each $theme in map.keys(props.get(vars.$themes)) {
141 @include iro.bem-modifier($theme) { 141 @include iro.bem-modifier($theme) {
142 @include -apply-theme(vars.$static-themes, $theme); 142 @include -apply-theme(vars.$themes, $theme);
143 } 143 }
144 } 144 }
145 145
@@ -154,7 +154,7 @@
154 154
155 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 155 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
156 @include iro.bem-modifier($mod) { 156 @include iro.bem-modifier($mod) {
157 padding-block: props.get($pad-i); 157 padding-block: props.get($pad-b);
158 padding-inline: props.get($pad-i); 158 padding-inline: props.get($pad-i);
159 font-size: props.get($font-size); 159 font-size: props.get($font-size);
160 160
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index d1b3a4a..4c9603c 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use '../props'; 2@use '../props';
3@use '../core'; 3@use '../core.vars' as core;
4 4
5$line-height: props.def(--o-action-button--line-height, 1.4) !default; 5$line-height: props.def(--o-action-button--line-height, 1.4) !default;
6$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default; 6$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
@@ -35,6 +35,8 @@ $fixed-sizes: (
35 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl, 35 'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
36) !default; 36) !default;
37 37
38$themes: props.def(--o-action-button);
39
38$default-theme-override: () !default; 40$default-theme-override: () !default;
39$default-theme: map.deep-merge(( 41$default-theme: map.deep-merge((
40 --bg-color: props.get(core.$theme, --base, --75), 42 --bg-color: props.get(core.$theme, --base, --75),
@@ -108,11 +110,10 @@ $default-theme: map.deep-merge((
108), $default-theme-override) !default; 110), $default-theme-override) !default;
109$default-theme: props.def(--o-action-button, $default-theme); 111$default-theme: props.def(--o-action-button, $default-theme);
110 112
111$static-themes: props.def(--o-action-button);
112@each $theme in map.keys(props.get(core.$transparent-colors)) { 113@each $theme in map.keys(props.get(core.$transparent-colors)) {
113 $button-theme: #{$theme}-static; 114 $button-theme: #{$theme}-static;
114 115
115 $static-themes: props.merge($static-themes, ( 116 $themes: props.merge($themes, (
116 $button-theme: ( 117 $button-theme: (
117 --bg-color: props.get(core.$transparent-colors, $theme, --100), 118 --bg-color: props.get(core.$transparent-colors, $theme, --100),
118 --label-color: props.get(core.$transparent-colors, $theme, --900), 119 --label-color: props.get(core.$transparent-colors, $theme, --900),
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 651ad23..4efacab 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -16,9 +16,9 @@
16 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 16 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
17 border-radius: props.get(vars.$rounding); 17 border-radius: props.get(vars.$rounding);
18 18
19 @each $mod, $theme in vars.$themes { 19 @each $mod, $theme in vars.$themes-config {
20 @include iro.bem-modifier($mod) { 20 @include iro.bem-modifier($mod) {
21 border-color: props.get(vars.$populated-themes, $theme, --border-color); 21 border-color: props.get(vars.$themes, $theme, --border-color);
22 } 22 }
23 } 23 }
24 } 24 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 64d8f1f..e0c77d2 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default; 4$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
5$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default; 5$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
@@ -9,16 +9,17 @@ $rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !defaul
9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default; 9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default;
10$border-color: props.def(--o-alert--bg-color, props.get(core.$theme, --text-mute-more)) !default; 10$border-color: props.def(--o-alert--bg-color, props.get(core.$theme, --text-mute-more)) !default;
11 11
12$themes: ( 12$themes-config: (
13 accent: --accent, 13 accent: --accent,
14 positive: --positive, 14 positive: --positive,
15 negative: --negative, 15 negative: --negative,
16 warning: --warning, 16 warning: --warning,
17) !default; 17) !default;
18 18
19$populated-themes: props.def(--o-alert); 19$themes: props.def(--o-alert);
20@each $theme, $key in $themes { 20
21 $populated-themes: props.merge($populated-themes, ( 21@each $theme, $key in $themes-config {
22 $themes: props.merge($themes, (
22 $key: ( 23 $key: (
23 --border-color: props.get(core.$theme, $key, --700), 24 --border-color: props.get(core.$theme, $key, --700),
24 ) 25 )
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 5b97ec8..74d9677 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default; 4$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default;
5$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default; 5$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9e0cc1e..82246ed 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,26 +1,22 @@
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('backdrop') { 5@forward 'backdrop.vars';
5 @include iro.props-store(( 6@use 'backdrop.vars' as vars;
6 --dims: (
7 --z-index: 10000,
8 --blur: 2em,
9 ),
10 --colors: (
11 --bg: rgba(#000, .75),
12 ),
13 ));
14 7
15 @include iro.bem-object(iro.props-namespace()) { 8@mixin styles {
9 @include props.materialize(meta.module-variables('vars'));
10
11 @include iro.bem-object('backdrop') {
16 position: fixed; 12 position: fixed;
17 inset: 0; 13 inset: 0;
18 z-index: fn.dim(--z-index); 14 z-index: props.get(vars.$z-index);
19 box-sizing: border-box; 15 box-sizing: border-box;
20 display: flex; 16 display: flex;
21 flex-direction: column; 17 flex-direction: column;
22 overflow: auto; 18 overflow: auto;
23 background-color: fn.color(--bg); 19 background-color: props.get(vars.$bg-color);
24 backdrop-filter: blur(fn.dim(--blur)); 20 backdrop-filter: blur(props.get(vars.$blur));
25 } 21 }
26} 22}
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
new file mode 100644
index 0000000..c03c263
--- /dev/null
+++ b/src/objects/_backdrop.vars.scss
@@ -0,0 +1,6 @@
1@use '../props';
2@use '../core.vars' as core;
3
4$z-index: props.def(--o-backdrop--z-index, 10000) !default;
5$blur: props.def(--o-backdrop--blur, 2em) !default;
6$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600)) !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 72d85ff..3f68873 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,140 @@
1@use 'sass:string'; 1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
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';
6@use '../core.vars' as core;
4 7
5$sizes: 'sm' 'lg' 'xl' !default; 8@forward 'badge.vars';
6$themes: 'accent' 'positive' 'negative' 'warning' !default; 9@use 'badge.vars' as vars;
7$static-themes: 'black' 'white' !default;
8 10
9@mixin theme($theme) { 11@mixin -apply-theme($theme, $key: (), $static: false) {
10 color: fn.color(--#{$theme} --label); 12 color: props.get($theme, list.join($key, --label)...);
11 background-color: fn.color(--#{$theme} --bg); 13 background-color: props.get($theme, list.join($key, --bg)...);
12 14
13 &:link, 15 &:link,
14 &:visited, 16 &:visited,
15 &:enabled { 17 &:enabled {
16 &:hover, 18 &:hover,
17 &:focus-visible { 19 &:focus-visible {
18 color: fn.color(--#{$theme} --hover --label); 20 color: props.get($theme, list.join($key, --hover --label)...);
19 background-color: fn.color(--#{$theme} --hover --bg); 21 background-color: props.get($theme, list.join($key, --hover --bg)...);
20 } 22 }
21 23
22 &:active { 24 &:active {
23 color: fn.color(--#{$theme} --active --label); 25 color: props.get($theme, list.join($key, --active --label)...);
24 background-color: fn.color(--#{$theme} --active --bg); 26 background-color: props.get($theme, list.join($key, --active --bg)...);
25 } 27 }
26 } 28 }
27 29
28 @include iro.bem-modifier('quiet') { 30 @include iro.bem-modifier('quiet') {
29 color: fn.color(--#{$theme}-quiet --label); 31 color: props.get($theme, list.join($key, --quiet --label)...);
30 background-color: fn.color(--#{$theme}-quiet --bg); 32 background-color: props.get($theme, list.join($key, --quiet --bg)...);
31 33
32 &:link, 34 &:link,
33 &:visited, 35 &:visited,
34 &:enabled { 36 &:enabled {
35 &:hover, 37 &:hover,
36 &:focus-visible { 38 &:focus-visible {
37 color: fn.color(--#{$theme}-quiet --hover --label); 39 color: props.get($theme, list.join($key, --quiet --hover --label)...);
38 background-color: fn.color(--#{$theme}-quiet --hover --bg); 40 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
39 } 41 }
40 42
41 &:active { 43 &:active {
42 color: fn.color(--#{$theme}-quiet --active --label); 44 color: props.get($theme, list.join($key, --quiet --active --label)...);
43 background-color: fn.color(--#{$theme}-quiet --active --bg); 45 background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
44 } 46 }
45 } 47 }
46 } 48 }
47 49
48 @if string.slice($theme, 1, 7) == 'static-' { 50 @if $static {
49 &::after { 51 &::after {
50 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border); 52 outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
51 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline); 53 box-shadow:
54 0
55 0
56 0
57 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
58 props.get($theme, list.join($key, --key-focus --outline)...);
52 } 59 }
53 } 60 }
54} 61}
55 62
56@include iro.props-namespace('badge') { 63@mixin styles {
57 @include iro.props-store(( 64 @include props.materialize(meta.module-variables('vars'));
58 --dims: (
59 --pad-b: fn.global-dim(--size --50),
60 --pad-i: fn.global-dim(--size --100),
61 --pad-i-pill: fn.global-dim(--size --150),
62 --pad-i-label: fn.global-dim(--size --50),
63 --rounding: fn.global-dim(--rounding),
64 --font-size: fn.global-dim(--font-size --75),
65 65
66 --sm: ( 66 @include iro.bem-object('badge') {
67 --pad-b: fn.global-dim(--size --25),
68 --pad-i: fn.global-dim(--size --75),
69 --pad-i-pill: fn.global-dim(--size --125),
70 --pad-i-label: fn.global-dim(--size --25),
71 --font-size: fn.global-dim(--font-size --50),
72 ),
73 --lg: (
74 --pad-b: fn.global-dim(--size --75),
75 --pad-i: fn.global-dim(--size --125),
76 --pad-i-pill: fn.global-dim(--size --175),
77 --pad-i-label: fn.global-dim(--size --50),
78 --font-size: fn.global-dim(--font-size --100),
79 ),
80 --xl: (
81 --pad-b: fn.global-dim(--size --100),
82 --pad-i: fn.global-dim(--size --150),
83 --pad-i-pill: fn.global-dim(--size --225),
84 --pad-i-label: fn.global-dim(--size --75),
85 --font-size: fn.global-dim(--font-size --150),
86 ),
87
88 --key-focus: (
89 --border: fn.global-dim(--key-focus --border),
90 --border-offset: fn.global-dim(--key-focus --border-offset),
91 --outline: fn.global-dim(--key-focus --outline),
92 ),
93 ),
94 --colors: (
95 --bg: fn.global-color(--text-mute),
96 --label: fn.global-color(--bg-l2),
97 --hover: (
98 --bg: fn.global-color(--text),
99 ),
100 --active: (
101 --bg: fn.global-color(--heading),
102 ),
103 --key-focus: (
104 --label: fn.global-color(--focus --text),
105 --border: fn.global-color(--focus --border),
106 --outline: fn.global-color(--focus --outline),
107 ),
108
109 --quiet: (
110 --bg: fn.global-color(--border-mute),
111 --label: fn.global-color(--heading),
112 --hover: (
113 --bg: fn.global-color(--border),
114 ),
115 --active: (
116 --bg: fn.global-color(--border-strong),
117 ),
118 ),
119 ),
120 ));
121
122 @each $theme in $themes {
123 @include iro.props-store((
124 --colors: (
125 --#{$theme}: (
126 --bg: fn.global-color(--#{$theme}-static --900),
127 --label: fn.global-color(--#{$theme}-static --900-text),
128 --hover: (
129 --bg: fn.global-color(--#{$theme}-static --1000),
130 --label: fn.global-color(--#{$theme}-static --1000-text),
131 ),
132 --active: (
133 --bg: fn.global-color(--#{$theme}-static --1100),
134 --label: fn.global-color(--#{$theme}-static --1000-text),
135 ),
136 ),
137
138 --#{$theme}-quiet: (
139 --bg: fn.global-color(--#{$theme} --200),
140 --label: fn.global-color(--#{$theme} --1100),
141 --hover: (
142 --bg: fn.global-color(--#{$theme} --300),
143 --label: fn.global-color(--#{$theme} --1200),
144 ),
145 --active: (
146 --bg: fn.global-color(--#{$theme} --400),
147 --label: fn.global-color(--#{$theme} --1300),
148 ),
149 )
150 ),
151 ));
152 }
153
154 @each $theme in $static-themes {
155 @include iro.props-store((
156 --colors: (
157 --static-#{$theme}: (
158 --bg: fn.global-color(--#{$theme}-transparent --800),
159 --label: fn.global-color(--#{$theme}-transparent --text),
160 --hover: (
161 --bg: fn.global-color(--#{$theme}-transparent --900),
162 --label: fn.global-color(--#{$theme}-transparent --text),
163 ),
164 --active: (
165 --bg: fn.global-color(--#{$theme}-transparent --900),
166 --label: fn.global-color(--#{$theme}-transparent --text),
167 ),
168 --key-focus: (
169 --bg: fn.global-color(--#{$theme}-transparent --100),
170 --label: fn.global-color(--#{$theme}-transparent --900),
171 --border: fn.global-color(--#{$theme}-transparent --900),
172 --outline: fn.global-color(--#{$theme}-transparent --300),
173 ),
174 ),
175
176 --static-#{$theme}-quiet: (
177 --bg: fn.global-color(--#{$theme}-transparent --200),
178 --label: fn.global-color(--#{$theme}-transparent --900),
179 --hover: (
180 --bg: fn.global-color(--#{$theme}-transparent --300),
181 --label: fn.global-color(--#{$theme}-transparent --900),
182 ),
183 --active: (
184 --bg: fn.global-color(--#{$theme}-transparent --400),
185 --label: fn.global-color(--#{$theme}-transparent --900),
186 ),
187 )
188 )
189 ));
190 }
191
192 @include iro.bem-object(iro.props-namespace()) {
193 position: relative; 67 position: relative;
194 display: inline-block; 68 display: inline-block;
195 padding-block: fn.dim(--pad-b); 69 padding-block: props.get(vars.$pad-b);
196 padding-inline: fn.dim(--pad-i); 70 padding-inline: props.get(vars.$pad-i);
197 font-size: fn.dim(--font-size); 71 font-size: props.get(vars.$font-size);
198 line-height: fn.global-dim(--font --standard --line-height); 72 line-height: props.get(core.$font--standard--line-height);
199 color: fn.color(--label);
200 text-align: center; 73 text-align: center;
201 text-decoration: none; 74 text-decoration: none;
202 background-color: fn.color(--bg);
203 background-clip: padding-box; 75 background-clip: padding-box;
204 border-radius: fn.dim(--rounding); 76 border-radius: props.get(vars.$rounding);
205 77
206 &::after { 78 &::after {
207 position: absolute; 79 position: absolute;
208 inset: calc(-1 * fn.dim(--key-focus --border-offset)); 80 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
209 z-index: 1; 81 z-index: 1;
210 display: none; 82 display: none;
211 pointer-events: none; 83 pointer-events: none;
212 content: ''; 84 content: '';
213 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 85 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
214 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 86 outline: transparent solid props.get(vars.$key-focus--border-width);
215 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
216 } 87 }
217 88
218 &:link, 89 &:link,
219 &:visited, 90 &:visited,
220 &:enabled { 91 &:enabled {
221 &:hover,
222 &:focus-visible { 92 &:focus-visible {
223 background-color: fn.color(--hover --bg); 93 &::after {
224 } 94 display: block;
225 95 }
226 &:active {
227 background-color: fn.color(--active --bg);
228 } 96 }
229 } 97 }
230 98
231 @include iro.bem-elem('label') { 99 @include iro.bem-elem('label') {
232 margin-inline: fn.dim(--pad-i-label); 100 margin-inline: props.get(vars.$pad-i-label);
233 } 101 }
234 102
235 @include iro.bem-modifier('quiet') { 103 @include -apply-theme(vars.$default-theme);
236 color: fn.color(--quiet --label);
237 background-color: fn.color(--quiet --bg);
238
239 &:link,
240 &:visited,
241 &:enabled {
242 &:hover,
243 &:focus-visible {
244 background-color: fn.color(--quiet --hover --bg);
245 }
246 104
247 &:active { 105 @each $theme in map.keys(props.get(vars.$themes)) {
248 background-color: fn.color(--quiet --active --bg);
249 }
250 }
251 }
252
253 @each $theme in $themes {
254 @include iro.bem-modifier($theme) { 106 @include iro.bem-modifier($theme) {
255 @include theme($theme); 107 @include -apply-theme(vars.$themes, $theme);
256 } 108 }
257 } 109 }
258 110
259 &:link, 111 @each $theme in map.keys(props.get(vars.$static-themes)) {
260 &:visited, 112 @include iro.bem-modifier($theme) {
261 &:enabled { 113 @include -apply-theme(vars.$static-themes, $theme, true);
262 &:focus-visible {
263 &::after {
264 display: block;
265 }
266 }
267 }
268
269 @each $theme in $static-themes {
270 @include iro.bem-modifier(static-#{$theme}) {
271 @include theme(static-#{$theme});
272 } 114 }
273 } 115 }
274 116
275 @include iro.bem-modifier('pill') { 117 @include iro.bem-modifier('pill') {
276 padding-inline: fn.dim(--pad-i-pill); 118 padding-inline: props.get(vars.$pad-i-pill);
277 border-radius: 10em; 119 border-radius: 10em;
278 120
279 &::after { 121 &::after {
280 border-radius: 10em; 122 border-radius: 10em;
281 } 123 }
282 } 124 }
283 125
284 @each $size in $sizes { 126 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
285 @include iro.bem-modifier($size) { 127 @include iro.bem-modifier($mod) {
286 padding-block: fn.dim(--#{$size} --pad-b); 128 padding-block: props.get($pad-b);
287 padding-inline: fn.dim(--#{$size} --pad-i); 129 padding-inline: props.get($pad-i);
288 font-size: fn.dim(--#{$size} --font-size); 130 font-size: props.get($font-size);
289 131
290 @include iro.bem-elem('label') { 132 @include iro.bem-elem('label') {
291 margin-inline: fn.dim(--#{$size} --pad-i-label); 133 margin-inline: props.get($pad-i-label);
292 } 134 }
293 135
294 @include iro.bem-modifier('pill') { 136 @include iro.bem-modifier('pill') {
295 padding-inline: fn.dim(--#{$size} --pad-i-pill); 137 padding-inline: props.get($pad-i-pill);
296 } 138 }
297 } 139 }
298 } 140 }
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
new file mode 100644
index 0000000..6a3dd15
--- /dev/null
+++ b/src/objects/_badge.vars.scss
@@ -0,0 +1,158 @@
1@use 'sass:map';
2@use '../props';
3@use '../core.vars' as core;
4
5$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
6$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
7$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
9$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
10$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
11
12$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
13$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
14$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
15$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
16$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
17
18$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
19$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
20$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
21$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
22$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
23
24$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
25$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
26$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
27$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
28$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
29
30$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
31$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
32$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
33
34$sizes: (
35 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
36 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
37 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
38) !default;
39
40$key-focus--label-color: props.def(--o-avatar--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;
42$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
43
44$default-theme-override: () !default;
45$default-theme: props.def(--o-badge, (
46 --bg: props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)),
47 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
48
49 --hover: (
50 --bg: props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)),
51 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
52 ),
53
54 --active: (
55 --bg: props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)),
56 --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
57 ),
58
59 --quiet: (
60 --bg: props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)),
61 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
62
63 --hover: (
64 --bg: props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)),
65 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
66 ),
67
68 --active: (
69 --bg: props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)),
70 --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
71 ),
72 )
73));
74$default-theme: props.merge(--o-badge, $default-theme-override);
75
76$static-themes: props.def(--o-badge);
77
78@each $theme in map.keys(props.get(core.$transparent-colors)) {
79 $badge-theme: #{$theme}-static;
80
81 $static-themes: props.merge($static-themes, (
82 $badge-theme: (
83 --bg: props.get(core.$transparent-colors, $theme, --800),
84 --label: props.get(core.$transparent-colors, $theme, --text),
85
86 --hover: (
87 --bg: props.get(core.$transparent-colors, $theme, --900),
88 --label: props.get(core.$transparent-colors, $theme, --text),
89 ),
90
91 --active: (
92 --bg: props.get(core.$transparent-colors, $theme, --900),
93 --label: props.get(core.$transparent-colors, $theme, --text),
94 ),
95
96 --key-focus: (
97 --bg: props.get(core.$transparent-colors, $theme, --100),
98 --label: props.get(core.$transparent-colors, $theme, --900),
99 --border: props.get(core.$transparent-colors, $theme, --900),
100 --outline: props.get(core.$transparent-colors, $theme, --300),
101 ),
102
103 --quiet: (
104 --bg: props.get(core.$transparent-colors, $theme, --200),
105 --label: props.get(core.$transparent-colors, $theme, --900),
106 --hover: (
107 --bg: props.get(core.$transparent-colors, $theme, --300),
108 --label: props.get(core.$transparent-colors, $theme, --900),
109 ),
110 --active: (
111 --bg: props.get(core.$transparent-colors, $theme, --400),
112 --label: props.get(core.$transparent-colors, $theme, --900),
113 ),
114 )
115 )
116 ));
117}
118
119$themes-config: (
120 accent: --accent,
121 positive: --positive,
122 negative: --negative,
123 warning: --warning,
124) !default;
125
126$themes: props.def(--o-badge);
127
128@each $theme, $key in $themes-config {
129 $themes: props.merge($themes, (
130 $key: (
131 --bg: props.get(core.$static-colors, $key, --900),
132 --label: props.get(core.$static-colors, $key, --900-text),
133
134 --hover: (
135 --bg: props.get(core.$static-colors, $key, --1000),
136 --label: props.get(core.$static-colors, $key, --1000-text),
137 ),
138
139 --active: (
140 --bg: props.get(core.$static-colors, $key, --1100),
141 --label: props.get(core.$static-colors, $key, --1000-text),
142 ),
143
144 --quiet: (
145 --bg: props.get(core.$theme, $key, --200),
146 --label: props.get(core.$theme, $key, --1100),
147 --hover: (
148 --bg: props.get(core.$theme, $key, --300),
149 --label: props.get(core.$theme, $key, --1200),
150 ),
151 --active: (
152 --bg: props.get(core.$theme, $key, --400),
153 --label: props.get(core.$theme, $key, --1300),
154 ),
155 )
156 )
157 ));
158}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 108392d..39d90bd 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3@use './implicit' as implicit; 3@use './implicit' as implicit;
4 4
5$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default; 5$indent: props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 7f31b8c..ee7463d 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3@use './implicit' as implicit; 3@use './implicit' as implicit;
4 4
5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default; 5$inline--pad-i: props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 002a392..b4a16bd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -2,7 +2,7 @@
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../mixins' as mx; 3@use '../mixins' as mx;
4@use '../props'; 4@use '../props';
5@use '../core'; 5@use '../core.vars' as core;
6 6
7@mixin styles { 7@mixin styles {
8 @include iro.bem-scope('headings') { 8 @include iro.bem-scope('headings') {
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index d679bdc..ba34039 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -2,7 +2,7 @@
2@use 'sass:meta'; 2@use 'sass:meta';
3@use 'iro-sass/src/iro-sass' as iro; 3@use 'iro-sass/src/iro-sass' as iro;
4@use '../props'; 4@use '../props';
5@use '../core'; 5@use '../core.vars' as core;
6 6
7@forward 'implicit.vars'; 7@forward 'implicit.vars';
8@use 'implicit.vars' as vars; 8@use 'implicit.vars' as vars;
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 036ace3..34979d9 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default; 4$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
5 5
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b40cae8..4bf80c0 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,6 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use '../props'; 2@use '../props';
3@use '../core'; 3@use '../core.vars' as core;
4 4
5$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; 5$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
6$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default; 6$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index d5421ca..1cfe085 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,7 +1,7 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'iro-sass/src/iro-sass' as iro; 2@use 'iro-sass/src/iro-sass' as iro;
3@use '../props'; 3@use '../props';
4@use '../core'; 4@use '../core.vars' as core;
5 5
6@forward 'lists.vars'; 6@forward 'lists.vars';
7@use 'lists.vars' as vars; 7@use 'lists.vars' as vars;
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index 6dd04ac..8a7852d 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3@use './implicit' as implicit; 3@use './implicit' as implicit;
4 4
5$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; 5$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 2d7fed1..cdaca64 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,5 +1,5 @@
1@use '../props'; 1@use '../props';
2@use '../core'; 2@use '../core.vars' as core;
3 3
4$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default; 4$indent: props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
5$margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default; 5$margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 0189928..5e102a1 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -19,3 +19,5 @@
19@include iro.o-action-button--styles; 19@include iro.o-action-button--styles;
20@include iro.o-alert--styles; 20@include iro.o-alert--styles;
21@include iro.o-avatar--styles; 21@include iro.o-avatar--styles;
22@include iro.o-backdrop--styles;
23@include iro.o-badge--styles;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 12:43:30 +0000