summaryrefslogtreecommitdiffstats
path: root/src/objects/_badge.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r--src/objects/_badge.scss32
1 files changed, 18 insertions, 14 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 23ae305..6001564 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -6,29 +6,33 @@ $themes: accent positive negative warning;
6@include iro.props-namespace('badge') { 6@include iro.props-namespace('badge') {
7 @include iro.props-store(( 7 @include iro.props-store((
8 --dims: ( 8 --dims: (
9 --pad-b: fn.global-dim(--size --100), 9 --pad-b: fn.global-dim(--size --50),
10 --pad-i: fn.global-dim(--size --150), 10 --pad-i: fn.global-dim(--size --150),
11 --pad-i-pill: fn.global-dim(--size --200), 11 --pad-i-pill: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100), 13 --font-size: fn.global-dim(--font-size --75),
14 14
15 --sm: ( 15 --sm: (
16 --pad-b: fn.global-dim(--size --50), 16 --pad-b: fn.global-dim(--size --25),
17 --pad-i: fn.global-dim(--size --115), 17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150), 18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75), 19 --font-size: fn.global-dim(--font-size --50),
20 ), 20 ),
21 --lg: ( 21 --lg: (
22 --pad-b: fn.global-dim(--size --125), 22 --pad-b: fn.global-dim(--size --75),
23 --pad-i: fn.global-dim(--size --175), 23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225), 24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150), 25 --font-size: fn.global-dim(--font-size --100),
26 ), 26 ),
27 --xl: ( 27 --xl: (
28 --pad-b: fn.global-dim(--size --160), 28 --pad-b: fn.global-dim(--size --100),
29 --pad-i: fn.global-dim(--size --225), 29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300), 30 --pad-i-pill: fn.global-dim(--size --300),
31 --font-size: fn.global-dim(--font-size --200), 31 --font-size: fn.global-dim(--font-size --150),
32 ),
33
34 --key-focus: (
35 --border: fn.global-dim(--key-focus --border),
32 ), 36 ),
33 ), 37 ),
34 --colors: ( 38 --colors: (
@@ -43,7 +47,7 @@ $themes: accent positive negative warning;
43 --key-focus: ( 47 --key-focus: (
44 --bg: fn.global-color(--base --50), 48 --bg: fn.global-color(--base --50),
45 --label: fn.global-color(--heading), 49 --label: fn.global-color(--heading),
46 --border: fn.global-color(--yellow-static --400), 50 --border: fn.global-color(--focus-static --400),
47 ), 51 ),
48 52
49 --quiet: ( 53 --quiet: (
@@ -63,13 +67,13 @@ $themes: accent positive negative warning;
63 @include iro.props-store(( 67 @include iro.props-store((
64 --colors: ( 68 --colors: (
65 --#{$theme}: ( 69 --#{$theme}: (
66 --bg: fn.global-color(--#{$theme} --800), 70 --bg: fn.global-color(--#{$theme}-static --800),
67 --label: fn.global-color(--#{$theme} --800-text), 71 --label: fn.global-color(--#{$theme}-static --800-text),
68 --hover: ( 72 --hover: (
69 --bg: fn.global-color(--#{$theme} --900), 73 --bg: fn.global-color(--#{$theme}-static --900),
70 ), 74 ),
71 --active: ( 75 --active: (
72 --bg: fn.global-color(--#{$theme} --900), 76 --bg: fn.global-color(--#{$theme}-static --900),
73 ), 77 ),
74 ), 78 ),
75 79
@@ -169,7 +173,7 @@ $themes: accent positive negative warning;
169 &:enabled { 173 &:enabled {
170 &:focus-visible { 174 &:focus-visible {
171 background-color: fn.color(--key-focus --bg); 175 background-color: fn.color(--key-focus --bg);
172 box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border); 176 box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
173 color: fn.color(--key-focus --label); 177 color: fn.color(--key-focus --label);
174 } 178 }
175 } 179 }