@acorex/styles 16.18.49 → 16.19.1

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 (9) hide show
  1. package/package.json +1 -1
  2. package/scss/buttons.scss +7 -6
  3. package/scss/fieldset.scss +2 -2
  4. package/scss/forms.scss +10 -9
  5. package/scss/master.scss +71 -72
  6. package/scss/mixin.scss +7 -9
  7. package/scss/style.scss +29 -24
  8. package/scss/toast.scss +2 -1
  9. package/scss/variables.scss +25 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "16.18.49",
3
+ "version": "16.19.1",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/scss/buttons.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import "./variables.scss";
2
- @import "./mixin.scss";
1
+ @use './variables.scss';
2
+ @use './mixin.scss';
3
3
 
4
4
  .ax {
5
5
  &.buttons {
@@ -33,11 +33,13 @@
33
33
  overflow: hidden;
34
34
  padding: 0 1rem;
35
35
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
36
+
36
37
  &.ax-button-icon {
37
38
  width: calc(var(--ax-base-size) * var(--ax-base-ratio));
38
39
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
39
40
  padding: 0;
40
41
  }
42
+
41
43
  .button-inner-content {
42
44
  display: flex;
43
45
  flex-direction: row;
@@ -55,15 +57,14 @@
55
57
  pointer-events: none;
56
58
  }
57
59
 
58
- @include ax-border-radius(var(--ax-size-border-radius));
59
- -webkit-tap-highlight-color: transparent;
60
+ @include mixin.ax-border-radius(var(--ax-size-border-radius));
60
61
 
61
62
  &:hover {
62
- @include ax-transition-all();
63
+ @include mixin.ax-transition-all();
63
64
  }
64
65
 
65
66
  &:focus {
66
- @include ax-transition-all();
67
+ @include mixin.ax-transition-all();
67
68
  }
68
69
  }
69
70
  }
package/scss/fieldset.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import "./mixin.scss";
1
+ @use "./mixin.scss" as mixin;
2
2
 
3
3
  .ax {
4
4
  &.fieldset {
5
5
  border: 1px solid;
6
6
  border-color: var(--ax-border-color);
7
7
  padding: 0.5em;
8
- @include ax-border-radius(var(--ax-size-border-radius));
8
+ @include mixin.ax-border-radius(var(--ax-size-border-radius));
9
9
 
10
10
  legend {
11
11
  padding: 0 0.5em;
package/scss/forms.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import './mixin.scss';
1
+ @use './mixin.scss' as mixin;
2
2
  .ax {
3
3
  font-size: 0.875rem;
4
4
  &.form-control {
@@ -106,9 +106,10 @@
106
106
  height: 100%;
107
107
  width: 2.67142857em;
108
108
  opacity: 0.5;
109
- @include ax-border-radius(var(--ax-size-border-radius));
110
- -webkit-transition: opacity 0.3s ease;
111
- transition: opacity 0.3s ease;
109
+ @include mixin.ax-border-radius(var(--ax-size-border-radius));
110
+ & {
111
+ transition: opacity 0.3s ease;
112
+ }
112
113
  }
113
114
  }
114
115
  &.disabled {
@@ -131,10 +132,10 @@
131
132
  border: none !important;
132
133
  color: rgba(0, 0, 0, 0.87);
133
134
  box-shadow: none !important;
134
- -webkit-appearance: none !important;
135
+ appearance: none !important;
135
136
  padding-inline-start: 0.75rem;
136
137
  padding-inline-end: 0.5rem;
137
- @include ax-border-radius(var(--ax-size-border-radius));
138
+ @include mixin.ax-border-radius(var(--ax-size-border-radius));
138
139
  &::-webkit-input-placeholder {
139
140
  color: var(--ax-gray-dark-color) !important;
140
141
  }
@@ -200,7 +201,7 @@
200
201
  color: rgba(0, 0, 0, 0.8);
201
202
  -webkit-box-shadow: none;
202
203
  box-shadow: none;
203
- @include ax-transition-all();
204
+ @include mixin.ax-transition-all();
204
205
  & + i.icon {
205
206
  opacity: 1 !important;
206
207
  color: var(--ax-primary-color);
@@ -291,7 +292,7 @@
291
292
  }
292
293
  }
293
294
  }
294
- @include ax-border-radius(var(--ax-size-border-radius));
295
+ @include mixin.ax-border-radius(var(--ax-size-border-radius));
295
296
  &.disabled {
296
297
  background: var(--ax-gray-light-color) !important;
297
298
  cursor: not-allowed !important;
@@ -459,7 +460,7 @@
459
460
  // color: var(--ax-gray-fore-color);
460
461
  // border: 1px solid var(--ax-border-color);
461
462
  // padding: 0.2em 0.4em;
462
- // @include ax-border-radius(var(--ax-size-border-radius));
463
+ // @include mixin.ax-border-radius(var(--ax-size-border-radius));
463
464
  // margin: 0 0.5em;
464
465
  // display: inline-block;
465
466
  // cursor: pointer;
package/scss/master.scss CHANGED
@@ -1,5 +1,6 @@
1
- @import "./variables.scss";
2
1
 
2
+ @use "sass:meta";
3
+ @use "./variables.scss" as varibles;
3
4
  :root {
4
5
  --ax-border-color: #e0f4e0;
5
6
  --ax-border-dark-color: rgba(34, 36, 38, 0.3);
@@ -10,8 +11,8 @@
10
11
 
11
12
  // Create Sizes
12
13
  @each $name,
13
- $size in $sizes {
14
- @if type-of($size)=="map" {
14
+ $size in varibles.$sizes {
15
+ @if meta.type-of($size)=="map" {
15
16
 
16
17
  @each $subname,
17
18
  $variant in $size {
@@ -28,58 +29,58 @@
28
29
 
29
30
  // Create Colors
30
31
  @each $name,
31
- $color in $colors {
32
- @if type-of($color)=="map" {
32
+ $color in varibles.$colors {
33
+ @if meta.type-of($color)=="map" {
33
34
 
34
35
  @each $subname,
35
36
  $variant in $color {
36
37
  @if $subname=="" {
37
- --ax-#{$name}-#{$color-suffix}: #{$variant};
38
+ --ax-#{$name}-#{varibles.$color-suffix}: #{$variant};
38
39
  }
39
40
 
40
41
  @else {
41
- --ax-#{$name}-#{$subname}-#{$color-suffix}: #{$variant};
42
+ --ax-#{$name}-#{$subname}-#{varibles.$color-suffix}: #{$variant};
42
43
  }
43
44
  }
44
45
  }
45
46
 
46
47
  @else {
47
- --ax-#{$name}-#{$color-suffix}: #{$color};
48
+ --ax-#{$name}-#{varibles.$color-suffix}: #{$color};
48
49
  }
49
50
  }
50
51
  }
51
52
 
52
53
  @each $name,
53
- $color in $colors {
54
- @if type-of($color)=="map" {
54
+ $color in varibles.$colors {
55
+ @if meta.type-of($color)=="map" {
55
56
 
56
57
  @each $subname,
57
58
  $variant in $color {
58
59
  @if $subname=="" {
59
60
  .ax-text-#{$name} {
60
- color: var(--ax-#{$name}-#{$color-suffix});
61
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
61
62
  }
62
63
 
63
64
  .ax-bg-#{$name} {
64
- background: var(--ax-#{$name}-#{$color-suffix});
65
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
65
66
  }
66
67
 
67
68
  .ax-border-#{$name} {
68
- border-color: var(--ax-#{$name}-#{$color-suffix});
69
+ border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
69
70
  }
70
71
  }
71
72
 
72
73
  @else {
73
74
  .ax-text-#{$name}-#{$subname} {
74
- color: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
75
+ color: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
75
76
  }
76
77
 
77
78
  .ax-bg-#{$name}-#{$subname} {
78
- background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
79
+ background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
79
80
  }
80
81
 
81
82
  .ax-border-#{$name}-#{$subname} {
82
- background: var(--ax-#{$name}-#{$subname}-#{$color-suffix});
83
+ background: var(--ax-#{$name}-#{$subname}-#{varibles.$color-suffix});
83
84
  }
84
85
  }
85
86
  }
@@ -131,8 +132,8 @@ $color in $colors {
131
132
  }
132
133
 
133
134
  @each $name,
134
- $size in $sizes {
135
- @if type-of($size)=="map" {
135
+ $size in varibles.$sizes {
136
+ @if meta.type-of($size)=="map" {
136
137
 
137
138
  @each $subname,
138
139
  $variant in $size {
@@ -150,54 +151,52 @@ $size in $sizes {
150
151
  }
151
152
 
152
153
  // Create Classes
153
- @each $name,
154
- $color in $colors {
154
+ @each $name, $color in varibles.$colors {
155
155
  .ax {
156
- @if type-of($color)=="map" {
156
+ @if meta.type-of($color) == "map" {
157
157
 
158
- @each $subname,
159
- $variant in $color {
160
- @if $subname=="" {
158
+ @each $subname, $variant in $color {
159
+ @if $subname == "" {
161
160
  &.bg-#{$name} {
162
- background-color: var(--ax-#{$name}-#{$color-suffix});
161
+ background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
163
162
  }
164
163
 
165
164
  &.bg-light-#{$name} {
166
- background-color: var(--ax-#{$name}-light-#{$color-suffix});
165
+ background-color: var(--ax-#{$name}-light-#{varibles.$color-suffix});
167
166
  }
168
167
 
169
168
  &.bg-dark-#{$name} {
170
- background-color: var(--ax-#{$name}-dark-#{$color-suffix});
169
+ background-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
171
170
  }
172
171
 
173
172
  &.bg-lighten-#{$name} {
174
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
173
+ background-color: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
175
174
  }
176
175
 
177
176
  &.text-#{$name} {
178
- color: var(--ax-#{$name}-#{$color-suffix});
177
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
179
178
  }
180
179
 
181
180
  &.lighten-#{$name} {
182
- color: var(--ax-#{$name}-#{$color-suffix});
183
- background-color: var(--ax-#{$name}-trans-light-#{$color-suffix});
181
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
182
+ background-color: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
184
183
  }
185
184
 
186
185
  &.#{$name} {
187
- background: var(--ax-#{$name}-#{$color-suffix});
188
- color: var(--ax-#{$name}-fore-#{$color-suffix});
186
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
187
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
189
188
 
190
189
  &:hover,
191
190
  &:focus {
192
- background: var(--ax-#{$name}-dark-#{$color-suffix});
191
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
193
192
  }
194
193
 
195
194
  &:active {
196
- background: var(--ax-#{$name}-light-#{$color-suffix});
195
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
197
196
  }
198
197
 
199
198
  &.selected {
200
- background: var(--ax-#{$name}-dark-#{$color-suffix});
199
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
201
200
  }
202
201
 
203
202
  &.disabled {
@@ -208,63 +207,63 @@ $color in $colors {
208
207
  }
209
208
 
210
209
  &.twotone {
211
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
210
+ background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
212
211
  border-color: transparent;
213
212
 
214
213
  @if ($name =="light") {
215
- color: var(--ax-#{$name}-fore-#{$color-suffix});
214
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
216
215
  }
217
216
 
218
217
  @else {
219
- color: var(--ax-#{$name}-#{$color-suffix});
218
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
220
219
  }
221
220
 
222
221
  &:hover:not(.disabled),
223
222
  &:focus:not(.disabled) {
224
- background: var(--ax-#{$name}-light-#{$color-suffix});
225
- color: var(--ax-#{$name}-fore-#{$color-suffix});
223
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
224
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
226
225
  }
227
226
 
228
227
  &:active {
229
- background: var(--ax-#{$name}-dark-#{$color-suffix});
230
- color: var(--ax-#{$name}-fore-#{$color-suffix});
228
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
229
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
231
230
  }
232
231
 
233
232
  &.selected {
234
- background: var(--ax-#{$name}-dark-#{$color-suffix});
235
- color: var(--ax-#{$name}-fore-#{$color-suffix});
233
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
234
+ color: var (--ax-#{$name}-fore-#{varibles.$color-suffix});
236
235
  }
237
236
  }
238
237
 
239
238
  &.outline {
240
239
  background: transparent;
241
240
  border: 1px solid;
242
- border-color: var(--ax-#{$name}-#{$color-suffix});
241
+ border-color: var(--ax-#{$name}-#{varibles.$color-suffix});
243
242
 
244
243
  @if ($name =="light") {
245
- color: var(--ax-#{$name}-fore-#{$color-suffix});
244
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
246
245
  }
247
246
 
248
247
  @else {
249
- color: var(--ax-#{$name}-#{$color-suffix});
248
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
250
249
  }
251
250
 
252
251
  &:hover:not(.disabled),
253
252
  &:focus:not(.disabled) {
254
- background: var(--ax-#{$name}-#{$color-suffix});
255
- color: var(--ax-#{$name}-fore-#{$color-suffix});
253
+ background: var(--ax-#{$name}-#{varibles.$color-suffix});
254
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
256
255
  }
257
256
 
258
257
  &:active {
259
- background: var(--ax-#{$name}-light-#{$color-suffix});
260
- color: var(--ax-#{$name}-fore-#{$color-suffix});
261
- border-color: var(--ax-#{$name}-light-#{$color-suffix});
258
+ background: var(--ax-#{$name}-light-#{varibles.$color-suffix});
259
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
260
+ border-color: var(--ax-#{$name}-light-#{varibles.$color-suffix});
262
261
  }
263
262
 
264
263
  &.selected {
265
- background: var(--ax-#{$name}-dark-#{$color-suffix});
266
- color: var(--ax-#{$name}-fore-#{$color-suffix});
267
- border-color: var(--ax-#{$name}-dark-#{$color-suffix});
264
+ background: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
265
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
266
+ border-color: var(--ax-#{$name}-dark-#{varibles.$color-suffix});
268
267
  }
269
268
  }
270
269
 
@@ -273,54 +272,54 @@ $color in $colors {
273
272
  border-color: transparent;
274
273
 
275
274
  @if ($name =="light") {
276
- color: var(--ax-#{$name}-fore-#{$color-suffix});
275
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
277
276
  }
278
277
 
279
278
  @else {
280
- color: var(--ax-#{$name}-#{$color-suffix});
279
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
281
280
  }
282
281
 
283
282
  &:hover,
284
283
  &:focus {
285
284
  @if ($name =="light") {
286
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
287
- color: var(--ax-#{$name}-fore-#{$color-suffix});
285
+ background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
286
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
288
287
  }
289
288
 
290
289
  @else {
291
- background: var(--ax-#{$name}-trans-light-#{$color-suffix});
292
- color: var(--ax-#{$name}-#{$color-suffix});
290
+ background: var(--ax-#{$name}-trans-light-#{varibles.$color-suffix});
291
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
293
292
  }
294
293
  }
295
294
 
296
295
  &:active {
297
296
  @if ($name =="light") {
298
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
299
- color: var(--ax-#{$name}-fore-#{$color-suffix});
297
+ background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
298
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
300
299
  }
301
300
 
302
301
  @else {
303
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
304
- color: var(--ax-#{$name}-#{$color-suffix});
302
+ background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
303
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
305
304
  }
306
305
  }
307
306
 
308
307
  &.selected {
309
308
  @if ($name =="light") {
310
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
311
- color: var(--ax-#{$name}-fore-#{$color-suffix});
309
+ background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
310
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
312
311
  }
313
312
 
314
313
  @else {
315
- background: var(--ax-#{$name}-trans-dark-#{$color-suffix});
316
- color: var(--ax-#{$name}-#{$color-suffix});
314
+ background: var(--ax-#{$name}-trans-dark-#{varibles.$color-suffix});
315
+ color: var(--ax-#{$name}-#{varibles.$color-suffix});
317
316
  }
318
317
  }
319
318
  }
320
319
 
321
320
  &.panel {
322
- color: var(--ax-#{$name}-fore-#{$color-suffix});
323
- background-color: var(--ax-#{$name}-#{$color-suffix});
321
+ color: var(--ax-#{$name}-fore-#{varibles.$color-suffix});
322
+ background-color: var(--ax-#{$name}-#{varibles.$color-suffix});
324
323
  }
325
324
  }
326
325
  }
package/scss/mixin.scss CHANGED
@@ -1,12 +1,10 @@
1
+
1
2
  @mixin ax-border-radius($size) {
3
+ & {
2
4
  border-radius: $size;
3
- -moz-border-radius: $size;
4
- -webkit-border-radius: $size;
5
- -o-border-radius: $size;
6
5
  }
7
- @mixin ax-transition-all {
8
- transition: all 0.3s;
9
- -moz-transition: all 0.3s;
10
- -webkit-transition: all 0.3s;
11
- -o-transition: all 0.3s;
12
- }
6
+ }
7
+
8
+ @mixin ax-transition-all {
9
+ transition: all 0.3s;
10
+ }
package/scss/style.scss CHANGED
@@ -1,37 +1,43 @@
1
- @import "./buttons.scss";
2
- @import "./calendar.scss";
3
- @import "./checkbox.scss";
4
- @import "./context-menu.scss";
5
- @import "./drawer.scss";
6
- @import "./data-grid.scss";
7
- @import "./fieldset.scss";
8
- @import "./list.scss";
9
- @import "./menu.scss";
10
- @import "./progress.scss";
11
- @import "./selection-list.scss";
12
- @import "./forms.scss";
13
- @import "./tooltip.scss";
14
- @import "./tab.scss";
15
- @import "./tab-strip.scss";
16
- @import "./toast.scss";
17
- @import "./treeview.scss";
18
- @import "./upload.scss";
19
- @import "./master.scss";
20
- @import "./page.scss";
21
- @import "~animate.css/animate.min.css";
1
+ @use "./buttons";
2
+ @use "./calendar";
3
+ @use "./checkbox";
4
+ @use "./context-menu";
5
+ @use "./drawer";
6
+ @use "./data-grid";
7
+ @use "./fieldset";
8
+ @use "./list";
9
+ @use "./menu";
10
+ @use "./progress";
11
+ @use "./selection-list";
12
+ @use "./forms";
13
+ @use "./tooltip";
14
+ @use "./tab";
15
+ @use "./tab-strip";
16
+ @use "./toast";
17
+ @use "./treeview";
18
+ @use "./upload";
19
+ @use "./master";
20
+ @use "./page";
21
+
22
+ // Import CSS file for external libraries
23
+ @import "node_modules/animate.css/animate.min.css";
24
+
22
25
  * {
23
26
  box-sizing: border-box;
24
27
  outline-color: transparent;
28
+
25
29
  &:focus {
26
30
  outline: none;
27
- }
31
+ }
28
32
  }
29
33
 
30
34
  html,
31
35
  body {
32
36
  -webkit-overflow-scrolling: touch;
33
37
  scroll-behavior: smooth;
34
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
38
+
39
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
40
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
35
41
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
36
42
  }
37
43
 
@@ -44,4 +50,3 @@ body {
44
50
  direction: ltr;
45
51
  text-align: left;
46
52
  }
47
-
package/scss/toast.scss CHANGED
@@ -1,4 +1,5 @@
1
- @import "./variables.scss";
1
+ @use "./variables.scss" as *;
2
+
2
3
  .ax {
3
4
  &.toast {
4
5
  font-size: 0.875rem;
package/scss/variables.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "sass:color";
2
+
1
3
  $color-suffix: color;
2
4
  $size-suffix: size;
3
5
  $white: #fff;
@@ -19,7 +21,6 @@ $warning: #f59e0b;
19
21
  $warning-dark: #d97706;
20
22
  $warning-light: #fbbf24;
21
23
 
22
-
23
24
  $danger: #ef4444;
24
25
  $danger-dark: #b91c1c;
25
26
  $danger-light: #f87171;
@@ -32,7 +33,6 @@ $gray: #cbd5e1; // 300
32
33
  $gray-light: #f1f5f9; // 100
33
34
  $gray-dark: #94a3b8; // 400
34
35
 
35
-
36
36
  $light: #d1d5db; // 300
37
37
  $light-light: #f3f4f6; // 100
38
38
  $light-dark: #9ca3af; // 400
@@ -46,81 +46,82 @@ $shadow: rgba(0, 0, 0, 0.1);
46
46
  $colors: (
47
47
  "white": $white,
48
48
  "black": $black,
49
- "trans-white": transparentize($white, 0.85),
50
- "trans-black": transparentize($black, 0.85),
49
+ "trans-white": color.adjust($white, $alpha: -0.85),
50
+ "trans-black": color.adjust($black, $alpha: -0.85),
51
51
  "primary": (
52
52
  "": $primary,
53
53
  "fore": $white,
54
54
  "light": $primary-light,
55
55
  "dark": $primary-dark,
56
- "trans-dark": transparentize($primary-light, 0.85),
57
- "trans-light": transparentize($primary-dark, 0.85),
56
+ "trans-dark": color.adjust($primary-light, $alpha: -0.85),
57
+ "trans-light": color.adjust($primary-dark, $alpha: -0.85),
58
58
  ),
59
59
  "secondary": (
60
60
  "": $secondary,
61
61
  "fore": $white,
62
62
  "light": $secondary-light,
63
63
  "dark": $secondary-dark,
64
- "trans-dark": transparentize($secondary-light, 0.85),
65
- "trans-light": transparentize($secondary-dark, 0.85),
64
+ "trans-dark": color.adjust($secondary-light, $alpha: -0.85),
65
+ "trans-light": color.adjust($secondary-dark, $alpha: -0.85),
66
66
  ),
67
67
  "success": (
68
68
  "": $success,
69
69
  "fore": $white,
70
70
  "light": $success-light,
71
71
  "dark": $success-dark,
72
- "trans-dark": transparentize($success-light, 0.85),
73
- "trans-light": transparentize($success-dark, 0.85),
72
+ "trans-dark": color.adjust($success-light, $alpha: -0.85),
73
+ "trans-light": color.adjust($success-dark, $alpha: -0.85),
74
74
  ),
75
75
  "warning": (
76
76
  "": $warning,
77
77
  "fore": #78350f,
78
78
  "light": $warning-light,
79
79
  "dark": $warning-dark,
80
- "trans-dark": transparentize($warning-light, 0.85),
81
- "trans-light": transparentize($warning-dark, 0.85),
80
+ "trans-dark": color.adjust($warning-light, $alpha: -0.85),
81
+ "trans-light": color.adjust($warning-dark, $alpha: -0.85),
82
82
  ),
83
83
  "danger": (
84
84
  "": $danger,
85
85
  "fore": $white,
86
86
  "light": $danger-light,
87
87
  "dark": $danger-dark,
88
- "trans-dark": transparentize($danger-light, 0.85),
89
- "trans-light": transparentize($danger-dark, 0.85),
88
+ "trans-dark": color.adjust($danger-light, $alpha: -0.85),
89
+ "trans-light": color.adjust($danger-dark, $alpha: -0.85),
90
90
  ),
91
91
  "info": (
92
92
  "": $info,
93
93
  "fore": $white,
94
94
  "light": $info-light,
95
95
  "dark": $info-dark,
96
- "trans-dark": transparentize($info-light, 0.85),
97
- "trans-light": transparentize($info-light, 0.85),
96
+ "trans-dark": color.adjust($info-light, $alpha: -0.85),
97
+ "trans-light": color.adjust($info-light, $alpha: -0.85),
98
98
  ),
99
99
  "gray": (
100
100
  "": $gray,
101
- "fore": darken($gray, 50%),
101
+ "fore": color.adjust($gray, $lightness: -50%),
102
102
  "light": $gray-light,
103
103
  "dark": $gray-dark,
104
- "trans-dark": transparentize($gray-light, 0.85),
105
- "trans-light": transparentize($gray-dark, 0.85),
104
+ "trans-dark": color.adjust($gray-light, $alpha: -0.85),
105
+ "trans-light": color.adjust($gray-dark, $alpha: -0.85),
106
106
  ),
107
107
  "light": (
108
108
  "": $light,
109
- "fore": darken($light, 80%),
109
+ "fore": color.adjust($light, $lightness: -80%),
110
110
  "light": $light-light,
111
111
  "dark": $light-dark,
112
- "trans-dark": transparentize($light-light, 0.85),
113
- "trans-light": transparentize($light-dark, 0.85),
112
+ "trans-dark": color.adjust($light-light, $alpha: -0.85),
113
+ "trans-light": color.adjust($light-dark, $alpha: -0.85),
114
114
  ),
115
115
  "dark": (
116
116
  "": $dark,
117
117
  "fore": #f4f4f5,
118
118
  "light": $dark-light,
119
119
  "dark": $dark-dark,
120
- "trans-dark": transparentize($dark-light, 0.85),
121
- "trans-light": transparentize($dark-dark, 0.85),
120
+ "trans-dark": color.adjust($dark-light, $alpha: -0.85),
121
+ "trans-light": color.adjust($dark-dark, $alpha: -0.85),
122
122
  ),
123
123
  );
124
+
124
125
  $sizes: (
125
126
  "": (
126
127
  xxs: 0.4rem,