Fixes

author: Volpeon <git@volpeon.ink> 2024-10-19 18:23:02 +0200
committer: Volpeon <git@volpeon.ink> 2024-10-19 18:23:02 +0200
commit: 27222cb91c390a42055a7123b5a9409c928e8b26 (patch)
tree: 650b5614c4aae0056127038a4ab204198aae7f4d /src/objects/_action-button.scss
parent: Update (diff)
download: iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.gz
iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.bz2
iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.zip
1 files changed, 32 insertions, 32 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 48149b1..8efdad9 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -9,91 +9,91 @@
 @use 'action-button.vars' as vars;
 @mixin -apply-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label)...);
+    color:            props.get($theme, list.join($key, --disabled --label-color)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-    border-color:     props.get($theme, list.join($key, --disabled --border)...);
+    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
    &::after {
-        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
+        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
        box-shadow:
            0
            0
            0
            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            props.get($theme, list.join($key, --key-focus --outline-width)...);
+            props.get($theme, list.join($key, --key-focus --outline-color)...);
    }
    &:link,
    &:visited,
    &:enabled {
-        color:            props.get($theme, list.join($key, --label)...);
+        color:            props.get($theme, list.join($key, --label-color)...);
-        background-color: props.get($theme, list.join($key, --bg)...);
+        background-color: props.get($theme, list.join($key, --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --border)...);
+        border-color:     props.get($theme, list.join($key, --border-color)...);
        &:hover,
        &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label)...);
+            color:            props.get($theme, list.join($key, --hover --label-color)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
+            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --hover --border)...);
+            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
        }
        &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
+            color:            props.get($theme, list.join($key, --active --label-color)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
+            background-color: props.get($theme, list.join($key, --active --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --active --border)...);
+            border-color:     props.get($theme, list.join($key, --active --border-color)...);
        }
    }
    @include iro.bem-modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --disabled --label)...);
+        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
        background-color: transparent;
        border-color:     transparent;
        &:link,
        &:visited,
        &:enabled {
-            color:            props.get($theme, list.join($key, --quiet --label)...);
+            color:            props.get($theme, list.join($key, --quiet --label-color)...);
            background-color: transparent;
            border-color:     transparent;
            &:hover,
            &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
+                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
                border-color:     transparent;
            }
            &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label)...);
+                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
                border-color:     transparent;
            }
        }
    }
    @include iro.bem-is('selected') {
-        color:            props.get($theme, list.join($key, --selected --disabled --label)...);
+        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
-        background-color: props.get($theme, list.join($key, --selected --disabled --bg)...);
+        background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
-        border-color:     props.get($theme, list.join($key, --selected --disabled --border)...);
+        border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
        &:link,
        &:visited,
        &:enabled {
-            color:            props.get($theme, list.join($key, --selected --label)...);
+            color:            props.get($theme, list.join($key, --selected --label-color)...);
-            background-color: props.get($theme, list.join($key, --selected --bg)...);
+            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-            border-color:     props.get($theme, list.join($key, --selected --border)...);
+            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
    
            &:hover,
            &:focus-visible {
-                color:            props.get($theme, list.join($key, --selected --hover --label)...);
+                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
-                background-color: props.get($theme, list.join($key, --selected --hover --bg)...);
+                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --selected --hover --border)...);
+                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
            }
    
            &:active {
-                color:            props.get($theme, list.join($key, --selected --active --label)...);
+                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
-                background-color: props.get($theme, list.join($key, --selected --active --bg)...);
+                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
-                border-color:     props.get($theme, list.join($key, --selected --active --border)...);
+                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
            }
        }
    }
author	Volpeon <git@volpeon.ink>	2024-10-19 18:23:02 +0200
committer	Volpeon <git@volpeon.ink>	2024-10-19 18:23:02 +0200
commit	27222cb91c390a42055a7123b5a9409c928e8b26 (patch)
tree	650b5614c4aae0056127038a4ab204198aae7f4d /src/objects/_action-button.scss
parent	Update (diff)
download	iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.gz iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.tar.bz2 iro-design-27222cb91c390a42055a7123b5a9409c928e8b26.zip

diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 48149b1..8efdad9 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss
@@ -9,91 +9,91 @@
9	@use 'action-button.vars' as vars;	9	@use 'action-button.vars' as vars;
10		10
11	@mixin -apply-theme($theme, $key: ()) {	11	@mixin -apply-theme($theme, $key: ()) {
12	color: props.get($theme, list.join($key, --disabled --label)...);	12	color: props.get($theme, list.join($key, --disabled --label-color)...);
13	background-color: props.get($theme, list.join($key, --disabled --bg)...);	13	background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
14	border-color: props.get($theme, list.join($key, --disabled --border)...);	14	border-color: props.get($theme, list.join($key, --disabled --border-color)...);
15		15
16	&::after {	16	&::after {
17	outline-color: props.get($theme, list.join($key, --key-focus --border)...);	17	outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
18	box-shadow:	18	box-shadow:
19	0	19	0
20	0	20	0
21	0	21	0
22	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	22	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
23	props.get($theme, list.join($key, --key-focus --outline-width)...);	23	props.get($theme, list.join($key, --key-focus --outline-color)...);
24	}	24	}
25		25
26	&:link,	26	&:link,
27	&:visited,	27	&:visited,
28	&:enabled {	28	&:enabled {
29	color: props.get($theme, list.join($key, --label)...);	29	color: props.get($theme, list.join($key, --label-color)...);
30	background-color: props.get($theme, list.join($key, --bg)...);	30	background-color: props.get($theme, list.join($key, --bg-color)...);
31	border-color: props.get($theme, list.join($key, --border)...);	31	border-color: props.get($theme, list.join($key, --border-color)...);
32		32
33	&:hover,	33	&:hover,
34	&:focus-visible {	34	&:focus-visible {
35	color: props.get($theme, list.join($key, --hover --label)...);	35	color: props.get($theme, list.join($key, --hover --label-color)...);
36	background-color: props.get($theme, list.join($key, --hover --bg)...);	36	background-color: props.get($theme, list.join($key, --hover --bg-color)...);
37	border-color: props.get($theme, list.join($key, --hover --border)...);	37	border-color: props.get($theme, list.join($key, --hover --border-color)...);
38	}	38	}
39		39
40	&:active {	40	&:active {
41	color: props.get($theme, list.join($key, --active --label)...);	41	color: props.get($theme, list.join($key, --active --label-color)...);
42	background-color: props.get($theme, list.join($key, --active --bg)...);	42	background-color: props.get($theme, list.join($key, --active --bg-color)...);
43	border-color: props.get($theme, list.join($key, --active --border)...);	43	border-color: props.get($theme, list.join($key, --active --border-color)...);
44	}	44	}
45	}	45	}
46		46
47	@include iro.bem-modifier('quiet') {	47	@include iro.bem-modifier('quiet') {
48	color: props.get($theme, list.join($key, --quiet --disabled --label)...);	48	color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
49	background-color: transparent;	49	background-color: transparent;
50	border-color: transparent;	50	border-color: transparent;
51		51
52	&:link,	52	&:link,
53	&:visited,	53	&:visited,
54	&:enabled {	54	&:enabled {
55	color: props.get($theme, list.join($key, --quiet --label)...);	55	color: props.get($theme, list.join($key, --quiet --label-color)...);
56	background-color: transparent;	56	background-color: transparent;
57	border-color: transparent;	57	border-color: transparent;
58		58
59	&:hover,	59	&:hover,
60	&:focus-visible {	60	&:focus-visible {
61	color: props.get($theme, list.join($key, --quiet --hover --label)...);	61	color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
62	background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);	62	background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
63	border-color: transparent;	63	border-color: transparent;
64	}	64	}
65		65
66	&:active {	66	&:active {
67	color: props.get($theme, list.join($key, --quiet --active --label)...);	67	color: props.get($theme, list.join($key, --quiet --active --label-color)...);
68	background-color: props.get($theme, list.join($key, --quiet --active --bg)...);	68	background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
69	border-color: transparent;	69	border-color: transparent;
70	}	70	}
71	}	71	}
72	}	72	}
73		73
74	@include iro.bem-is('selected') {	74	@include iro.bem-is('selected') {
75	color: props.get($theme, list.join($key, --selected --disabled --label)...);	75	color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
76	background-color: props.get($theme, list.join($key, --selected --disabled --bg)...);	76	background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
77	border-color: props.get($theme, list.join($key, --selected --disabled --border)...);	77	border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
78		78
79	&:link,	79	&:link,
80	&:visited,	80	&:visited,
81	&:enabled {	81	&:enabled {
82	color: props.get($theme, list.join($key, --selected --label)...);	82	color: props.get($theme, list.join($key, --selected --label-color)...);
83	background-color: props.get($theme, list.join($key, --selected --bg)...);	83	background-color: props.get($theme, list.join($key, --selected --bg-color)...);
84	border-color: props.get($theme, list.join($key, --selected --border)...);	84	border-color: props.get($theme, list.join($key, --selected --border-color)...);
85		85
86	&:hover,	86	&:hover,
87	&:focus-visible {	87	&:focus-visible {
88	color: props.get($theme, list.join($key, --selected --hover --label)...);	88	color: props.get($theme, list.join($key, --selected --hover --label-color)...);
89	background-color: props.get($theme, list.join($key, --selected --hover --bg)...);	89	background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
90	border-color: props.get($theme, list.join($key, --selected --hover --border)...);	90	border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
91	}	91	}
92		92
93	&:active {	93	&:active {
94	color: props.get($theme, list.join($key, --selected --active --label)...);	94	color: props.get($theme, list.join($key, --selected --active --label-color)...);
95	background-color: props.get($theme, list.join($key, --selected --active --bg)...);	95	background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
96	border-color: props.get($theme, list.join($key, --selected --active --border)...);	96	border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
97	}	97	}
98	}	98	}
99	}	99	}