summaryrefslogtreecommitdiffstats
path: root/src/objects/_action-button.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_action-button.vars.scss')
-rw-r--r--src/objects/_action-button.vars.scss188
1 files changed, 95 insertions, 93 deletions
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 16d9e7f..d1b3a4a 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,33 +1,33 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use '../props'; 2@use '../props';
3@use '../vars'; 3@use '../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(vars.$size--150)) !default; 6$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
7$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--200)) !default; 7$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
8$pad-b: props.def(--o-action-button--pad-b, props.get(vars.$size--85)) !default; 8$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
9$border-width: props.def(--o-action-button--border-width, props.get(vars.$border-width--thin)) !default; 9$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
10$rounding: props.def(--o-action-button--rounding, props.get(vars.$rounding)) !default; 10$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
11$font-size: props.def(--o-action-button--font-size, props.get(vars.$font-size--100)) !default; 11$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
12 12
13$pad-i--sm: props.def(--o-action-button--pad-i, props.get(vars.$size--100), 'sm') !default; 13$pad-i--sm: props.def(--o-action-button--pad-i, props.get(core.$size--100), 'sm') !default;
14$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--150), 'sm') !default; 14$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150), 'sm') !default;
15$pad-b--sm: props.def(--o-action-button--pad-b, props.get(vars.$size--40), 'sm') !default; 15$pad-b--sm: props.def(--o-action-button--pad-b, props.get(core.$size--40), 'sm') !default;
16$font-size--sm: props.def(--o-action-button--font-size, props.get(vars.$font-size--75), 'sm') !default; 16$font-size--sm: props.def(--o-action-button--font-size, props.get(core.$font-size--75), 'sm') !default;
17 17
18$pad-i--lg: props.def(--o-action-button--pad-i, props.get(vars.$size--175), 'lg') !default; 18$pad-i--lg: props.def(--o-action-button--pad-i, props.get(core.$size--175), 'lg') !default;
19$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--225), 'lg') !default; 19$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(core.$size--225), 'lg') !default;
20$pad-b--lg: props.def(--o-action-button--pad-b, props.get(vars.$size--115), 'lg') !default; 20$pad-b--lg: props.def(--o-action-button--pad-b, props.get(core.$size--115), 'lg') !default;
21$font-size--lg: props.def(--o-action-button--font-size, props.get(vars.$font-size--150), 'lg') !default; 21$font-size--lg: props.def(--o-action-button--font-size, props.get(core.$font-size--150), 'lg') !default;
22 22
23$pad-i--xl: props.def(--o-action-button--pad-i, props.get(vars.$size--225), 'xl') !default; 23$pad-i--xl: props.def(--o-action-button--pad-i, props.get(core.$size--225), 'xl') !default;
24$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(vars.$size--300), 'xl') !default; 24$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(core.$size--300), 'xl') !default;
25$pad-b--xl: props.def(--o-action-button--pad-b, props.get(vars.$size--150), 'xl') !default; 25$pad-b--xl: props.def(--o-action-button--pad-b, props.get(core.$size--150), 'xl') !default;
26$font-size--xl: props.def(--o-action-button--font-size, props.get(vars.$font-size--200), 'xl') !default; 26$font-size--xl: props.def(--o-action-button--font-size, props.get(core.$font-size--200), 'xl') !default;
27 27
28$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(vars.$key-focus--border-width)) !default; 28$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
29$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(vars.$key-focus--border-offset)) !default; 29$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
30$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(vars.$key-focus--outline-width)) !default; 30$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
31 31
32$fixed-sizes: ( 32$fixed-sizes: (
33 'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, 33 'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
@@ -35,149 +35,151 @@ $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$default-theme: props.def(--o-action-button, ( 38$default-theme-override: () !default;
39 --bg-color: props.get(vars.$theme, --base, --75), 39$default-theme: map.deep-merge((
40 --label-color: props.get(vars.$theme, --text), 40 --bg-color: props.get(core.$theme, --base, --75),
41 --border-color: props.get(vars.$theme, --border-strong), 41 --label-color: props.get(core.$theme, --text),
42 --border-color: props.get(core.$theme, --border-strong),
42 43
43 --hover: ( 44 --hover: (
44 --bg-color: props.get(vars.$theme, --border-mute), 45 --bg-color: props.get(core.$theme, --border-mute),
45 --label-color: props.get(vars.$theme, --heading), 46 --label-color: props.get(core.$theme, --heading),
46 --border-color: props.get(vars.$theme, --text-mute-more), 47 --border-color: props.get(core.$theme, --text-mute-more),
47 ), 48 ),
48 49
49 --active: ( 50 --active: (
50 --bg-color: props.get(vars.$theme, --border), 51 --bg-color: props.get(core.$theme, --border),
51 --label-color: props.get(vars.$theme, --heading), 52 --label-color: props.get(core.$theme, --heading),
52 --border-color: props.get(vars.$theme, --text-mute), 53 --border-color: props.get(core.$theme, --text-mute),
53 ), 54 ),
54 55
55 --disabled: ( 56 --disabled: (
56 --bg-color: props.get(vars.$theme, --bg-l1), 57 --bg-color: props.get(core.$theme, --bg-l1),
57 --label-color: props.get(vars.$theme, --border-strong), 58 --label-color: props.get(core.$theme, --border-strong),
58 --border-color: props.get(vars.$theme, --border), 59 --border-color: props.get(core.$theme, --border),
59 ), 60 ),
60 61
61 --key-focus: ( 62 --key-focus: (
62 --border-color: props.get(vars.$theme, --focus, --border), 63 --border-color: props.get(core.$theme, --focus, --border),
63 --outline-color: props.get(vars.$theme, --focus, --outline), 64 --outline-color: props.get(core.$theme, --focus, --outline),
64 ), 65 ),
65 66
66 --selected: ( 67 --selected: (
67 --bg-color: props.get(vars.$theme, --text-mute), 68 --bg-color: props.get(core.$theme, --text-mute),
68 --label-color: props.get(vars.$theme, --base, --50), 69 --label-color: props.get(core.$theme, --base, --50),
69 --border-color: props.get(vars.$theme, --text-mute), 70 --border-color: props.get(core.$theme, --text-mute),
70 71
71 --hover: ( 72 --hover: (
72 --bg-color: props.get(vars.$theme, --text), 73 --bg-color: props.get(core.$theme, --text),
73 --label-color: props.get(vars.$theme, --base, --50), 74 --label-color: props.get(core.$theme, --base, --50),
74 --border-color: props.get(vars.$theme, --text), 75 --border-color: props.get(core.$theme, --text),
75 ), 76 ),
76 77
77 --active: ( 78 --active: (
78 --bg-color: props.get(vars.$theme, --heading), 79 --bg-color: props.get(core.$theme, --heading),
79 --label-color: props.get(vars.$theme, --base, --50), 80 --label-color: props.get(core.$theme, --base, --50),
80 --border-color: props.get(vars.$theme, --heading), 81 --border-color: props.get(core.$theme, --heading),
81 ), 82 ),
82 83
83 --disabled: ( 84 --disabled: (
84 --bg-color: props.get(vars.$theme, --border-mute), 85 --bg-color: props.get(core.$theme, --border-mute),
85 --label-color: props.get(vars.$theme, --border-strong), 86 --label-color: props.get(core.$theme, --border-strong),
86 --border-color: props.get(vars.$theme, --border-mute), 87 --border-color: props.get(core.$theme, --border-mute),
87 ), 88 ),
88 ), 89 ),
89 90
90 --quiet: ( 91 --quiet: (
91 --label-color: props.get(vars.$theme, --text), 92 --label-color: props.get(core.$theme, --text),
92 93
93 --hover: ( 94 --hover: (
94 --bg-color: props.get(vars.$theme, --border-mute), 95 --bg-color: props.get(core.$theme, --border-mute),
95 --label-color: props.get(vars.$theme, --heading), 96 --label-color: props.get(core.$theme, --heading),
96 ), 97 ),
97 98
98 --active: ( 99 --active: (
99 --bg-color: props.get(vars.$theme, --border), 100 --bg-color: props.get(core.$theme, --border),
100 --label-color: props.get(vars.$theme, --heading), 101 --label-color: props.get(core.$theme, --heading),
101 ), 102 ),
102 103
103 --disabled: ( 104 --disabled: (
104 --label-color: props.get(vars.$theme, --border-strong), 105 --label-color: props.get(core.$theme, --border-strong),
105 ), 106 ),
106 ), 107 ),
107)) !default; 108), $default-theme-override) !default;
109$default-theme: props.def(--o-action-button, $default-theme);
108 110
109$static-themes: props.def(--o-action-button); 111$static-themes: props.def(--o-action-button);
110@each $theme in map.keys(props.get(vars.$transparent-colors)) { 112@each $theme in map.keys(props.get(core.$transparent-colors)) {
111 $button-theme: #{$theme}-static; 113 $button-theme: #{$theme}-static;
112 114
113 $static-themes: props.merge($static-themes, ( 115 $static-themes: props.merge($static-themes, (
114 $button-theme: ( 116 $button-theme: (
115 --bg-color: props.get(vars.$transparent-colors, $theme, --100), 117 --bg-color: props.get(core.$transparent-colors, $theme, --100),
116 --label-color: props.get(vars.$transparent-colors, $theme, --900), 118 --label-color: props.get(core.$transparent-colors, $theme, --900),
117 --border-color: props.get(vars.$transparent-colors, $theme, --400), 119 --border-color: props.get(core.$transparent-colors, $theme, --400),
118 120
119 --hover: ( 121 --hover: (
120 --bg-color: props.get(vars.$transparent-colors, $theme, --300), 122 --bg-color: props.get(core.$transparent-colors, $theme, --300),
121 --label-color: props.get(vars.$transparent-colors, $theme, --900), 123 --label-color: props.get(core.$transparent-colors, $theme, --900),
122 --border-color: props.get(vars.$transparent-colors, $theme, --500), 124 --border-color: props.get(core.$transparent-colors, $theme, --500),
123 ), 125 ),
124 126
125 --active: ( 127 --active: (
126 --bg-color: props.get(vars.$transparent-colors, $theme, --400), 128 --bg-color: props.get(core.$transparent-colors, $theme, --400),
127 --label-color: props.get(vars.$transparent-colors, $theme, --900), 129 --label-color: props.get(core.$transparent-colors, $theme, --900),
128 --border-color: props.get(vars.$transparent-colors, $theme, --600), 130 --border-color: props.get(core.$transparent-colors, $theme, --600),
129 ), 131 ),
130 132
131 --disabled: ( 133 --disabled: (
132 --bg-color: props.get(vars.$transparent-colors, $theme, --100), 134 --bg-color: props.get(core.$transparent-colors, $theme, --100),
133 --label-color: props.get(vars.$transparent-colors, $theme, --500), 135 --label-color: props.get(core.$transparent-colors, $theme, --500),
134 --border-color: props.get(vars.$transparent-colors, $theme, --300), 136 --border-color: props.get(core.$transparent-colors, $theme, --300),
135 ), 137 ),
136 138
137 --key-focus: ( 139 --key-focus: (
138 --border-color: props.get(vars.$transparent-colors, $theme, --900), 140 --border-color: props.get(core.$transparent-colors, $theme, --900),
139 --outline-color: props.get(vars.$transparent-colors, $theme, --300), 141 --outline-color: props.get(core.$transparent-colors, $theme, --300),
140 ), 142 ),
141 143
142 --selected: ( 144 --selected: (
143 --bg-color: props.get(vars.$transparent-colors, $theme, --800), 145 --bg-color: props.get(core.$transparent-colors, $theme, --800),
144 --label-color: props.get(vars.$transparent-colors, $theme, --text), 146 --label-color: props.get(core.$transparent-colors, $theme, --text),
145 --border-color: props.get(vars.$transparent-colors, $theme, --100), 147 --border-color: props.get(core.$transparent-colors, $theme, --100),
146 148
147 --hover: ( 149 --hover: (
148 --bg-color: props.get(vars.$transparent-colors, $theme, --900), 150 --bg-color: props.get(core.$transparent-colors, $theme, --900),
149 --label-color: props.get(vars.$transparent-colors, $theme, --text), 151 --label-color: props.get(core.$transparent-colors, $theme, --text),
150 --border-color: props.get(vars.$transparent-colors, $theme, --100), 152 --border-color: props.get(core.$transparent-colors, $theme, --100),
151 ), 153 ),
152 154
153 --active: ( 155 --active: (
154 --bg-color: props.get(vars.$transparent-colors, $theme, --900), 156 --bg-color: props.get(core.$transparent-colors, $theme, --900),
155 --label-color: props.get(vars.$transparent-colors, $theme, --text), 157 --label-color: props.get(core.$transparent-colors, $theme, --text),
156 --border-color: props.get(vars.$transparent-colors, $theme, --100), 158 --border-color: props.get(core.$transparent-colors, $theme, --100),
157 ), 159 ),
158 160
159 --disabled: ( 161 --disabled: (
160 --bg-color: props.get(vars.$transparent-colors, $theme, --200), 162 --bg-color: props.get(core.$transparent-colors, $theme, --200),
161 --label-color: props.get(vars.$transparent-colors, $theme, --500), 163 --label-color: props.get(core.$transparent-colors, $theme, --500),
162 --border-color: props.get(vars.$transparent-colors, $theme, --100), 164 --border-color: props.get(core.$transparent-colors, $theme, --100),
163 ), 165 ),
164 ), 166 ),
165 167
166 --quiet: ( 168 --quiet: (
167 --label-color: props.get(vars.$transparent-colors, $theme, --900), 169 --label-color: props.get(core.$transparent-colors, $theme, --900),
168 170
169 --hover: ( 171 --hover: (
170 --bg-color: props.get(vars.$transparent-colors, $theme, --300), 172 --bg-color: props.get(core.$transparent-colors, $theme, --300),
171 --label-color: props.get(vars.$transparent-colors, $theme, --900), 173 --label-color: props.get(core.$transparent-colors, $theme, --900),
172 ), 174 ),
173 175
174 --active: ( 176 --active: (
175 --bg-color: props.get(vars.$transparent-colors, $theme, --400), 177 --bg-color: props.get(core.$transparent-colors, $theme, --400),
176 --label-color: props.get(vars.$transparent-colors, $theme, --900), 178 --label-color: props.get(core.$transparent-colors, $theme, --900),
177 ), 179 ),
178 180
179 --disabled: ( 181 --disabled: (
180 --label-color: props.get(vars.$transparent-colors, $theme, --500), 182 --label-color: props.get(core.$transparent-colors, $theme, --500),
181 ), 183 ),
182 ), 184 ),
183 ) 185 )
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 08:37:31 +0000