@educarehq/solaris-components 0.6.4 → 0.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/fesm2022/educarehq-solaris-components.mjs +2352 -2143
  2. package/fesm2022/educarehq-solaris-components.mjs.map +1 -1
  3. package/package.json +13 -5
  4. package/styles/actions/button/button.styles.scss +313 -288
  5. package/styles/forms/input-text/input-text.styles.scss +25 -18
  6. package/styles/foundations/_app-defaults.scss +38 -0
  7. package/styles/layouts/dialog/dialog.styles.scss +40 -35
  8. package/styles/solaris-app.scss +7 -0
  9. package/styles/solaris-components.scss +4 -4
  10. package/styles/visual/avatar.styles.scss +6 -6
  11. package/types/educarehq-solaris-components.d.ts +352 -330
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@educarehq/solaris-components",
3
- "version": "0.6.4",
3
+ "version": "0.6.5",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^21.1.0",
6
6
  "intl-tel-input": "^26.0.9",
@@ -12,10 +12,14 @@
12
12
  "dependencies": {
13
13
  "tslib": "^2.3.0"
14
14
  },
15
- "sideEffects": false,
16
- "module": "fesm2022/educarehq-solaris-components.mjs",
17
- "typings": "types/educarehq-solaris-components.d.ts",
18
15
  "exports": {
16
+ "./styles/solaris-components": {
17
+ "sass": "./styles/solaris-components.scss"
18
+ },
19
+ "./styles/solaris-app": {
20
+ "sass": "./styles/solaris-app.scss"
21
+ },
22
+ "./styles/*": "./styles/*",
19
23
  "./package.json": {
20
24
  "default": "./package.json"
21
25
  },
@@ -23,5 +27,9 @@
23
27
  "types": "./types/educarehq-solaris-components.d.ts",
24
28
  "default": "./fesm2022/educarehq-solaris-components.mjs"
25
29
  }
26
- }
30
+ },
31
+ "sideEffects": false,
32
+ "module": "fesm2022/educarehq-solaris-components.mjs",
33
+ "typings": "types/educarehq-solaris-components.d.ts",
34
+ "type": "module"
27
35
  }
package/styles/actions/button/button.styles.scss CHANGED
@@ -1,288 +1,313 @@
1
- [solaris-button] {
2
- --sb-border: transparent;
3
- --sb-active-filter: none;
4
- --sb-fill: var(--sb-tone);
5
- --solaris-button-px: 1.2rem;
6
- --solaris-button-height: 3.4rem;
7
- --sb-hover-filter: brightness(1.125);
8
- --sb-tone: var(--solaris-color-primary);
9
- --solaris-button-fs: var(--solaris-fs-16);
10
- --solaris-button-gap: var(--solaris-space-2);
11
- --sb-tint-base: var(--solaris-color-surface);
12
- --sb-ink: var(--solaris-color-primary-contrast);
13
- --solaris-button-radius: var(--solaris-radius-sm);
14
- --sb-active-bg: color-mix(in srgb, var(--sb-tone) 92%, white);
15
- --solaris-button-focus-outline: color-mix(in srgb, var(--sb-tone) 55%, white 45%);
16
-
17
- cursor: pointer;
18
- line-height: 1.1;
19
- font-weight: 500;
20
- align-items: center;
21
- color: var(--sb-ink);
22
- text-rendering: auto;
23
- display: inline-flex;
24
- box-sizing: border-box;
25
- justify-content: center;
26
- transition: all 300ms ease;
27
- background: var(--sb-fill);
28
- gap: var(--solaris-button-gap);
29
- border: 1px solid var(--sb-border);
30
- font-size: var(--solaris-button-fs);
31
- padding: 0 var(--solaris-button-px);
32
- height: var(--solaris-button-height);
33
- border-radius: var(--solaris-button-radius);
34
- font-family: var(--solaris-font-sans-primary), system-ui;
35
- }
36
-
37
- button[solaris-button] {
38
- appearance: none;
39
- -webkit-appearance: none;
40
- }
41
- button[solaris-button]::-moz-focus-inner {
42
- border: 0;
43
- padding: 0;
44
- }
45
-
46
- [solaris-button]:hover {
47
- filter: var(--sb-hover-filter);
48
- }
49
-
50
- [solaris-button]:active {
51
- background: var(--sb-active-bg);
52
- filter: var(--sb-active-filter);
53
- }
54
-
55
- [solaris-button]:focus-visible {
56
- outline-offset: 0.2rem;
57
- outline: 0.2rem solid var(--solaris-button-focus-outline);
58
- }
59
-
60
- [solaris-button][disabled],
61
- [solaris-button][aria-disabled="true"] {
62
- opacity: 0.55;
63
- transform: none;
64
- cursor: not-allowed;
65
- background: var(--solaris-color-border);
66
- border-color: var(--solaris-color-border);
67
- }
68
-
69
- [solaris-button] i.ph,
70
- [solaris-button] svg {
71
- flex: 0 0 auto;
72
- width: fit-content;
73
- height: fit-content;
74
- }
75
-
76
- [solaris-button][aria-busy="true"] {
77
- position: relative;
78
- color: transparent;
79
- pointer-events: none;
80
- }
81
- [solaris-button][aria-busy="true"] i.ph,
82
- [solaris-button][aria-busy="true"] svg {
83
- visibility: hidden;
84
- }
85
- [solaris-button][aria-busy="true"]::after {
86
- content: "";
87
- width: 1.6rem;
88
- height: 1.6rem;
89
- position: absolute;
90
- border-radius: var(--solaris-radius-full);
91
- animation: solaris-spin 0.8s linear infinite;
92
- border: 0.2rem solid color-mix(in srgb, var(--sb-ink) 35%, transparent);
93
- border-top-color: var(--sb-ink);
94
- }
95
-
96
- @keyframes solaris-spin {
97
- to { transform: rotate(360deg); }
98
- }
99
-
100
- [solaris-button][data-size="sm"] {
101
- --solaris-button-px: 1rem;
102
- --solaris-button-height: 2.8rem;
103
- --solaris-button-fs: var(--solaris-fs-16);
104
- }
105
- [solaris-button][data-size="md"] {
106
- --solaris-button-px: 1.2rem;
107
- --solaris-button-height: 3.4rem;
108
- --solaris-button-fs: var(--solaris-fs-18);
109
- }
110
- [solaris-button][data-size="lg"] {
111
- --solaris-button-px: 1.4rem;
112
- --solaris-button-height: 4rem;
113
- --solaris-button-fs: var(--solaris-fs-22);
114
- }
115
-
116
- [solaris-button][data-icon-only="true"] {
117
- padding: 0;
118
- width: var(--solaris-button-height);
119
- }
120
- [solaris-button][data-full-width="true"] {
121
- width: 100%;
122
- }
123
-
124
- [solaris-button]:is([data-color="primary"], [color="primary"]) {
125
- --sb-tone: var(--solaris-color-primary);
126
- --sb-fill: var(--solaris-color-primary);
127
- --sb-border: var(--solaris-color-primary-tint);
128
- --sb-ink: var(--solaris-color-primary-contrast);
129
- }
130
-
131
- [solaris-button]:is([data-color="surface"], [color="surface"]) {
132
- --sb-hover-filter: brightness(1.05);
133
- --sb-ink: var(--solaris-color-text);
134
- --sb-tone: var(--solaris-color-text);
135
- --sb-border: var(--solaris-color-border);
136
- --sb-fill: var(--solaris-color-surface-2);
137
- --sb-tint-base: var(--solaris-color-surface);
138
- }
139
-
140
- [solaris-button]:is([data-color="success"], [color="success"]) {
141
- --sb-ink: #fff;
142
- --sb-tone: var(--solaris-color-success);
143
- --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
144
- --sb-fill: color-mix(in srgb, var(--solaris-color-success) 90%, #2f426b);
145
- }
146
-
147
- [solaris-button]:is([data-color="warning"], [color="warning"]) {
148
- --sb-ink: #fff;
149
- --sb-tone: var(--solaris-color-warning);
150
- --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
151
- --sb-fill: color-mix(in srgb, var(--solaris-color-warning) 90%, #94913e);
152
- }
153
-
154
- [solaris-button]:is([data-color="error"], [color="error"]) {
155
- --sb-ink: #fff;
156
- --sb-tone: var(--solaris-color-error);
157
- --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
158
- --sb-fill: color-mix(in srgb, var(--solaris-color-error) 90%, #662931);
159
- }
160
-
161
- [solaris-button]:is([data-color="info"], [color="info"]) {
162
- --sb-ink: #fff;
163
- --sb-tone: var(--solaris-color-info);
164
- --sb-border: color-mix(in srgb, var(--sb-tone) 60%, white);
165
- --sb-fill: color-mix(in srgb, var(--solaris-color-info) 90%, #662931);
166
- }
167
-
168
- [solaris-button]:is([data-color="gradient"], [color="gradient"]) {
169
- --sb-ink: #fff;
170
- --sb-active-bg: var(--sb-fill);
171
- --sb-active-filter: brightness(1.06);
172
- --sb-tone: var(--solaris-color-primary);
173
- --sb-fill: var(--solaris-color-gradient);
174
- --sb-border: color-mix(in srgb, var(--solaris-color-primary-tint) 80%, white);
175
- }
176
-
177
- [solaris-button][data-color="custom"] {
178
- --sb-tone: var(--sb-custom);
179
- --sb-ink: var(--sb-custom-ink, #fff);
180
- --sb-border: color-mix(in srgb, var(--sb-tone) 70%, white);
181
- }
182
-
183
- [solaris-button][data-custom-ink="true"] {
184
- --sb-ink: var(--sb-custom-ink);
185
- }
186
-
187
- [solaris-button]:is([data-variant="outline"], [variant="outline"]) {
188
- --sb-fill: transparent;
189
- --sb-hover-filter: none;
190
- --sb-active-filter: none;
191
- --sb-ink: var(--sb-tone);
192
- --sb-active-bg: color-mix(in srgb, var(--sb-tone) 16%, transparent);
193
- --sb-border: color-mix(in srgb, var(--sb-tone) 40%, var(--solaris-color-border));
194
- }
195
-
196
- [solaris-button]:is([data-variant="outline"], [variant="outline"]):hover {
197
- background: color-mix(in srgb, var(--sb-tone) 10%, transparent);
198
- }
199
-
200
- [solaris-button]:is([data-variant="ghost"], [variant="ghost"]) {
201
- --sb-fill: transparent;
202
- --sb-hover-filter: none;
203
- --sb-border: transparent;
204
- --sb-ink: var(--sb-tone);
205
- --sb-active-filter: none;
206
- --sb-active-bg: color-mix(in srgb, var(--sb-tone) 14%, transparent);
207
- }
208
-
209
- [solaris-button]:is([data-variant="ghost"], [variant="ghost"]):hover {
210
- background: color-mix(in srgb, var(--solaris-color-surface-2) 80%, transparent);
211
- }
212
- [solaris-button]:is([data-variant="ghost"], [variant="ghost"]):active {
213
- background: color-mix(in srgb, var(--solaris-color-surface-2) 70%, transparent);
214
- }
215
-
216
- [solaris-button]:is([data-variant="soft"], [variant="soft"]) {
217
- --sb-hover-filter: none;
218
- --sb-border: transparent;
219
- --sb-ink: var(--sb-tone);
220
- --sb-active-filter: none;
221
- background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
222
- --sb-active-bg: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
223
- }
224
-
225
- [solaris-button]:is([data-variant="soft"], [variant="soft"]):hover {
226
- background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
227
- }
228
-
229
- [solaris-button]:is([data-variant="soft"], [variant="soft"]):active {
230
- background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
231
- }
232
-
233
- [solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
234
- [variant="soft"]) {
235
- --sb-tint-base: var(--solaris-color-bg);
236
- background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
237
- }
238
- [solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
239
- [variant="soft"]):hover {
240
- background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
241
- }
242
- [solaris-button]:is([data-color="gradient"], [color="gradient"]):is([data-variant="soft"],
243
- [variant="soft"]):active {
244
- background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
245
- }
246
-
247
- [solaris-button-group] {
248
- display: inline-flex;
249
- align-items: stretch;
250
- --solaris-button-group-radius: var(--solaris-radius-full);
251
- }
252
-
253
- [solaris-button-group] > [solaris-button] {
254
- border-radius: 0;
255
- }
256
-
257
- [solaris-button-group] > [solaris-button]:first-child {
258
- border-top-left-radius: var(--solaris-button-group-radius);
259
- border-bottom-left-radius: var(--solaris-button-group-radius);
260
- }
261
-
262
- [solaris-button-group] > [solaris-button]:last-child {
263
- border-top-right-radius: var(--solaris-button-group-radius);
264
- border-bottom-right-radius: var(--solaris-button-group-radius);
265
- }
266
-
267
- [solaris-button-group] > [solaris-button] + [solaris-button] {
268
- margin-left: -1px;
269
- }
270
-
271
- [solaris-button-group] > [solaris-button]:hover,
272
- [solaris-button-group] > [solaris-button]:focus-visible {
273
- z-index: 1;
274
- position: relative;
275
- }
276
-
277
- [solaris-button][data-badge-overlay="true"] {
278
- overflow: visible;
279
- position: relative;
280
- }
281
-
282
- [solaris-button][data-badge-overlay="true"] .solaris-badge-host {
283
- z-index: 2;
284
- position: absolute;
285
- inset-inline-end: 0;
286
- inset-block-start: 0;
287
- transform: translate(45%, -45%);
288
- }
1
+ [solaris-button] {
2
+ --sb-border: transparent;
3
+ --sb-active-filter: none;
4
+ --sb-fill: var(--sb-tone);
5
+ --solaris-button-px: 1.2rem;
6
+ --solaris-button-height: 3.4rem;
7
+ --sb-hover-filter: brightness(1.125);
8
+ --sb-tone: var(--solaris-color-primary);
9
+ --solaris-button-fs: var(--solaris-fs-16);
10
+ --solaris-button-gap: var(--solaris-space-2);
11
+ --sb-tint-base: var(--solaris-color-surface);
12
+ --sb-ink: var(--solaris-color-primary-contrast);
13
+ --solaris-button-radius: var(--solaris-radius-sm);
14
+ --sb-active-bg: color-mix(in srgb, var(--sb-tone) 92%, var(--solaris-color-white));
15
+ --solaris-button-focus-outline: color-mix(
16
+ in srgb,
17
+ var(--sb-tone) 55%,
18
+ var(--solaris-color-white) 45%
19
+ );
20
+
21
+ cursor: pointer;
22
+ line-height: 1.1;
23
+ font-weight: 500;
24
+ align-items: center;
25
+ color: var(--sb-ink);
26
+ text-rendering: auto;
27
+ display: inline-flex;
28
+ box-sizing: border-box;
29
+ justify-content: center;
30
+ transition: all var(--solaris-motion-duration-xslow) var(--solaris-motion-ease-standard);
31
+ background: var(--sb-fill);
32
+ gap: var(--solaris-button-gap);
33
+ border: 1px solid var(--sb-border);
34
+ font-size: var(--solaris-button-fs);
35
+ padding: 0 var(--solaris-button-px);
36
+ height: var(--solaris-button-height);
37
+ border-radius: var(--solaris-button-radius);
38
+ font-family: var(--solaris-font-sans-primary), system-ui;
39
+ }
40
+
41
+ button[solaris-button] {
42
+ appearance: none;
43
+ -webkit-appearance: none;
44
+ }
45
+ button[solaris-button]::-moz-focus-inner {
46
+ border: 0;
47
+ padding: 0;
48
+ }
49
+
50
+ [solaris-button]:hover {
51
+ filter: var(--sb-hover-filter);
52
+ }
53
+
54
+ [solaris-button]:active {
55
+ background: var(--sb-active-bg);
56
+ filter: var(--sb-active-filter);
57
+ }
58
+
59
+ [solaris-button]:focus-visible {
60
+ outline-offset: 0.2rem;
61
+ outline: 0.2rem solid var(--solaris-button-focus-outline);
62
+ }
63
+
64
+ [solaris-button][disabled],
65
+ [solaris-button][aria-disabled='true'] {
66
+ opacity: 0.55;
67
+ transform: none;
68
+ cursor: not-allowed;
69
+ background: var(--solaris-color-border);
70
+ border-color: var(--solaris-color-border);
71
+ }
72
+
73
+ [solaris-button] i.ph,
74
+ [solaris-button] svg {
75
+ flex: 0 0 auto;
76
+ width: fit-content;
77
+ height: fit-content;
78
+ }
79
+
80
+ [solaris-button][aria-busy='true'] {
81
+ position: relative;
82
+ color: transparent;
83
+ pointer-events: none;
84
+ }
85
+ [solaris-button][aria-busy='true'] i.ph,
86
+ [solaris-button][aria-busy='true'] svg {
87
+ visibility: hidden;
88
+ }
89
+ [solaris-button][aria-busy='true']::after {
90
+ content: '';
91
+ width: 1.6rem;
92
+ height: 1.6rem;
93
+ position: absolute;
94
+ border-radius: var(--solaris-radius-full);
95
+ animation: solaris-spin var(--solaris-motion-duration-spinner) var(--solaris-motion-ease-linear)
96
+ infinite;
97
+ border: 0.2rem solid color-mix(in srgb, var(--sb-ink) 35%, transparent);
98
+ border-top-color: var(--sb-ink);
99
+ }
100
+
101
+ @keyframes solaris-spin {
102
+ to {
103
+ transform: rotate(360deg);
104
+ }
105
+ }
106
+
107
+ [solaris-button][data-size='sm'] {
108
+ --solaris-button-px: 1rem;
109
+ --solaris-button-height: 2.8rem;
110
+ --solaris-button-fs: var(--solaris-fs-16);
111
+ }
112
+ [solaris-button][data-size='md'] {
113
+ --solaris-button-px: 1.2rem;
114
+ --solaris-button-height: 3.4rem;
115
+ --solaris-button-fs: var(--solaris-fs-18);
116
+ }
117
+ [solaris-button][data-size='lg'] {
118
+ --solaris-button-px: 1.4rem;
119
+ --solaris-button-height: 4rem;
120
+ --solaris-button-fs: var(--solaris-fs-22);
121
+ }
122
+
123
+ [solaris-button][data-icon-only='true'] {
124
+ padding: 0;
125
+ width: var(--solaris-button-height);
126
+ }
127
+ [solaris-button][data-full-width='true'] {
128
+ width: 100%;
129
+ }
130
+
131
+ [solaris-button]:is([data-color='primary'], [color='primary']) {
132
+ --sb-tone: var(--solaris-color-primary);
133
+ --sb-fill: var(--solaris-color-primary);
134
+ --sb-border: var(--solaris-color-primary-tint);
135
+ --sb-ink: var(--solaris-color-primary-contrast);
136
+ }
137
+
138
+ [solaris-button]:is([data-color='surface'], [color='surface']) {
139
+ --sb-hover-filter: brightness(1.05);
140
+ --sb-ink: var(--solaris-color-text);
141
+ --sb-tone: var(--solaris-color-text);
142
+ --sb-border: var(--solaris-color-border);
143
+ --sb-fill: var(--solaris-color-surface-2);
144
+ --sb-tint-base: var(--solaris-color-surface);
145
+ }
146
+
147
+ [solaris-button]:is([data-color='success'], [color='success']) {
148
+ --sb-ink: var(--solaris-color-white);
149
+ --sb-tone: var(--solaris-color-success);
150
+ --sb-border: color-mix(in srgb, var(--sb-tone) 60%, var(--solaris-color-white));
151
+ --sb-fill: color-mix(
152
+ in srgb,
153
+ var(--solaris-color-success) 90%,
154
+ var(--solaris-color-success-shade)
155
+ );
156
+ }
157
+
158
+ [solaris-button]:is([data-color='warning'], [color='warning']) {
159
+ --sb-ink: var(--solaris-color-white);
160
+ --sb-tone: var(--solaris-color-warning);
161
+ --sb-border: color-mix(in srgb, var(--sb-tone) 60%, var(--solaris-color-white));
162
+ --sb-fill: color-mix(
163
+ in srgb,
164
+ var(--solaris-color-warning) 90%,
165
+ var(--solaris-color-warning-shade)
166
+ );
167
+ }
168
+
169
+ [solaris-button]:is([data-color='error'], [color='error']) {
170
+ --sb-ink: var(--solaris-color-white);
171
+ --sb-tone: var(--solaris-color-error);
172
+ --sb-border: color-mix(in srgb, var(--sb-tone) 60%, var(--solaris-color-white));
173
+ --sb-fill: color-mix(in srgb, var(--solaris-color-error) 90%, var(--solaris-color-error-shade));
174
+ }
175
+
176
+ [solaris-button]:is([data-color='info'], [color='info']) {
177
+ --sb-ink: var(--solaris-color-white);
178
+ --sb-tone: var(--solaris-color-info);
179
+ --sb-border: color-mix(in srgb, var(--sb-tone) 60%, var(--solaris-color-white));
180
+ --sb-fill: color-mix(in srgb, var(--solaris-color-info) 90%, var(--solaris-color-info-shade));
181
+ }
182
+
183
+ [solaris-button]:is([data-color='gradient'], [color='gradient']) {
184
+ --sb-ink: var(--solaris-color-white);
185
+ --sb-active-bg: var(--sb-fill);
186
+ --sb-active-filter: brightness(1.06);
187
+ --sb-tone: var(--solaris-color-primary);
188
+ --sb-fill: var(--solaris-color-gradient);
189
+ --sb-border: color-mix(
190
+ in srgb,
191
+ var(--solaris-color-primary-tint) 80%,
192
+ var(--solaris-color-white)
193
+ );
194
+ }
195
+
196
+ [solaris-button][data-color='custom'] {
197
+ --sb-tone: var(--sb-custom);
198
+ --sb-ink: var(--sb-custom-ink, var(--solaris-color-white));
199
+ --sb-border: color-mix(in srgb, var(--sb-tone) 70%, var(--solaris-color-white));
200
+ }
201
+
202
+ [solaris-button][data-custom-ink='true'] {
203
+ --sb-ink: var(--sb-custom-ink);
204
+ }
205
+
206
+ [solaris-button]:is([data-variant='outline'], [variant='outline']) {
207
+ --sb-fill: transparent;
208
+ --sb-hover-filter: none;
209
+ --sb-active-filter: none;
210
+ --sb-ink: var(--sb-tone);
211
+ --sb-active-bg: color-mix(in srgb, var(--sb-tone) 16%, transparent);
212
+ --sb-border: color-mix(in srgb, var(--sb-tone) 40%, var(--solaris-color-border));
213
+ }
214
+
215
+ [solaris-button]:is([data-variant='outline'], [variant='outline']):hover {
216
+ background: color-mix(in srgb, var(--sb-tone) 10%, transparent);
217
+ }
218
+
219
+ [solaris-button]:is([data-variant='ghost'], [variant='ghost']) {
220
+ --sb-fill: transparent;
221
+ --sb-hover-filter: none;
222
+ --sb-border: transparent;
223
+ --sb-ink: var(--sb-tone);
224
+ --sb-active-filter: none;
225
+ --sb-active-bg: color-mix(in srgb, var(--sb-tone) 14%, transparent);
226
+ }
227
+
228
+ [solaris-button]:is([data-variant='ghost'], [variant='ghost']):hover {
229
+ background: color-mix(in srgb, var(--solaris-color-surface-2) 80%, transparent);
230
+ }
231
+ [solaris-button]:is([data-variant='ghost'], [variant='ghost']):active {
232
+ background: color-mix(in srgb, var(--solaris-color-surface-2) 70%, transparent);
233
+ }
234
+
235
+ [solaris-button]:is([data-variant='soft'], [variant='soft']) {
236
+ --sb-hover-filter: none;
237
+ --sb-border: transparent;
238
+ --sb-ink: var(--sb-tone);
239
+ --sb-active-filter: none;
240
+ background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
241
+ --sb-active-bg: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
242
+ }
243
+
244
+ [solaris-button]:is([data-variant='soft'], [variant='soft']):hover {
245
+ background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
246
+ }
247
+
248
+ [solaris-button]:is([data-variant='soft'], [variant='soft']):active {
249
+ background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
250
+ }
251
+
252
+ [solaris-button]:is([data-color='gradient'], [color='gradient']):is(
253
+ [data-variant='soft'],
254
+ [variant='soft']
255
+ ) {
256
+ --sb-tint-base: var(--solaris-color-bg);
257
+ background: color-mix(in srgb, var(--sb-tone) 14%, var(--sb-tint-base));
258
+ }
259
+ [solaris-button]:is([data-color='gradient'], [color='gradient']):is(
260
+ [data-variant='soft'],
261
+ [variant='soft']
262
+ ):hover {
263
+ background: color-mix(in srgb, var(--sb-tone) 18%, var(--sb-tint-base));
264
+ }
265
+ [solaris-button]:is([data-color='gradient'], [color='gradient']):is(
266
+ [data-variant='soft'],
267
+ [variant='soft']
268
+ ):active {
269
+ background: color-mix(in srgb, var(--sb-tone) 22%, var(--sb-tint-base));
270
+ }
271
+
272
+ [solaris-button-group] {
273
+ display: inline-flex;
274
+ align-items: stretch;
275
+ --solaris-button-group-radius: var(--solaris-radius-full);
276
+ }
277
+
278
+ [solaris-button-group] > [solaris-button] {
279
+ border-radius: 0;
280
+ }
281
+
282
+ [solaris-button-group] > [solaris-button]:first-child {
283
+ border-top-left-radius: var(--solaris-button-group-radius);
284
+ border-bottom-left-radius: var(--solaris-button-group-radius);
285
+ }
286
+
287
+ [solaris-button-group] > [solaris-button]:last-child {
288
+ border-top-right-radius: var(--solaris-button-group-radius);
289
+ border-bottom-right-radius: var(--solaris-button-group-radius);
290
+ }
291
+
292
+ [solaris-button-group] > [solaris-button] + [solaris-button] {
293
+ margin-left: -1px;
294
+ }
295
+
296
+ [solaris-button-group] > [solaris-button]:hover,
297
+ [solaris-button-group] > [solaris-button]:focus-visible {
298
+ z-index: 1;
299
+ position: relative;
300
+ }
301
+
302
+ [solaris-button][data-badge-overlay='true'] {
303
+ overflow: visible;
304
+ position: relative;
305
+ }
306
+
307
+ [solaris-button][data-badge-overlay='true'] .solaris-badge-host {
308
+ z-index: 2;
309
+ position: absolute;
310
+ inset-inline-end: 0;
311
+ inset-block-start: 0;
312
+ transform: translate(45%, -45%);
313
+ }