@itcase/ui 1.8.105 → 1.8.107

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 (27) hide show
  1. package/dist/{ChipsGroup_cjs_BgSbk26L.js → ChipsGroup_cjs_DKLEgUi2.js} +3 -1
  2. package/dist/{ChipsGroup_es_C1U2hygj.js → ChipsGroup_es_vMh6YMRm.js} +3 -1
  3. package/dist/cjs/components/Chips.js +1 -1
  4. package/dist/cjs/components/DatePeriod.js +1 -1
  5. package/dist/components/Chips.js +1 -1
  6. package/dist/components/DatePeriod.js +1 -1
  7. package/dist/css/components/Button/Button.css +2 -2
  8. package/dist/css/components/Dropdown/Dropdown.css +0 -1
  9. package/dist/css/styles/align/align.css +6 -3
  10. package/dist/css/styles/align/align_horizontal-reverse.css +46 -43
  11. package/dist/css/styles/align/align_horizontal.css +42 -39
  12. package/dist/css/styles/align/align_vertical-reverse.css +43 -40
  13. package/dist/css/styles/align/align_vertical.css +41 -38
  14. package/dist/css/styles/alignment/alignment.css +4 -1
  15. package/dist/css/styles/border-color/border-color.css +36 -34
  16. package/dist/css/styles/border-color/border-color_active.css +37 -35
  17. package/dist/css/styles/border-color/border-color_active_hover.css +39 -37
  18. package/dist/css/styles/border-color/border-color_focus.css +41 -39
  19. package/dist/css/styles/border-color/border-color_hover.css +43 -41
  20. package/dist/css/styles/bundle.css +551 -507
  21. package/dist/css/styles/fill/fill.css +41 -39
  22. package/dist/css/styles/fill/fill_active.css +39 -37
  23. package/dist/css/styles/fill/fill_active_hover.css +77 -72
  24. package/dist/css/styles/fill/fill_gradient.css +13 -8
  25. package/dist/css/styles/fill/fill_hover.css +60 -58
  26. package/dist/types/components/Chips/appearance/chipsAccent.d.ts +2 -0
  27. package/package.json +1 -1
package/dist/{ChipsGroup_cjs_BgSbk26L.js → ChipsGroup_cjs_DKLEgUi2.js} RENAMED
@@ -12,12 +12,13 @@ var tslib_es6 = require('./tslib.es6_cjs_CCZ3TN_7.js');
12
12
  var chipsAppearanceAccent = {
13
13
  accent: {
14
14
  fill: 'accentPrimary',
15
- fillHover: 'accentPrimaryHover',
15
+ fillHover: 'accentHoverPrimary',
16
16
  labelTextColor: 'accentTextPrimary',
17
17
  borderColor: 'accentBorderSecondary',
18
18
  },
19
19
  accentMutedPrimary: {
20
20
  fill: 'accentTertiary',
21
+ fillHover: 'accentHoverPrimary',
21
22
  labelTextColor: 'accentTextSecondary',
22
23
  borderColor: 'accentBorderSecondary',
23
24
  iconAfterFillIcon: 'accentItemQuaternary',
@@ -25,6 +26,7 @@ var chipsAppearanceAccent = {
25
26
  },
26
27
  accentPrimary: {
27
28
  fill: 'accentPrimary',
29
+ fillHover: 'accentHoverPrimary',
28
30
  labelTextColor: 'accentTextPrimary',
29
31
  borderColor: 'accentBorderSecondary',
30
32
  iconAfterFillIcon: 'accentItemPrimary',
package/dist/{ChipsGroup_es_C1U2hygj.js → ChipsGroup_es_vMh6YMRm.js} RENAMED
@@ -10,12 +10,13 @@ import { _ as __assign } from './tslib.es6_es_Bwu1Cn-t.js';
10
10
  var chipsAppearanceAccent = {
11
11
  accent: {
12
12
  fill: 'accentPrimary',
13
- fillHover: 'accentPrimaryHover',
13
+ fillHover: 'accentHoverPrimary',
14
14
  labelTextColor: 'accentTextPrimary',
15
15
  borderColor: 'accentBorderSecondary',
16
16
  },
17
17
  accentMutedPrimary: {
18
18
  fill: 'accentTertiary',
19
+ fillHover: 'accentHoverPrimary',
19
20
  labelTextColor: 'accentTextSecondary',
20
21
  borderColor: 'accentBorderSecondary',
21
22
  iconAfterFillIcon: 'accentItemQuaternary',
@@ -23,6 +24,7 @@ var chipsAppearanceAccent = {
23
24
  },
24
25
  accentPrimary: {
25
26
  fill: 'accentPrimary',
27
+ fillHover: 'accentHoverPrimary',
26
28
  labelTextColor: 'accentTextPrimary',
27
29
  borderColor: 'accentBorderSecondary',
28
30
  iconAfterFillIcon: 'accentItemPrimary',
package/dist/cjs/components/Chips.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var ChipsGroup = require('../../ChipsGroup_cjs_BgSbk26L.js');
3
+ var ChipsGroup = require('../../ChipsGroup_cjs_DKLEgUi2.js');
4
4
  require('react/jsx-runtime');
5
5
  require('clsx');
6
6
  require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
package/dist/cjs/components/DatePeriod.js CHANGED
@@ -7,7 +7,7 @@ var common = require('@itcase/common');
7
7
  var DatePicker = require('../../DatePicker_cjs_T63y9kcH.js');
8
8
  var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
9
9
  var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
10
- var ChipsGroup = require('../../ChipsGroup_cjs_BgSbk26L.js');
10
+ var ChipsGroup = require('../../ChipsGroup_cjs_DKLEgUi2.js');
11
11
  var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
12
12
  require('date-fns/locale');
13
13
  require('react-datepicker');
package/dist/components/Chips.js CHANGED
@@ -1,4 +1,4 @@
1
- export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_C1U2hygj.js';
1
+ export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_vMh6YMRm.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'clsx';
4
4
  import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
package/dist/components/DatePeriod.js CHANGED
@@ -5,7 +5,7 @@ import { DATE_PERIOD_INTERVALS } from '@itcase/common';
5
5
  import { D as DatePickerInput } from '../DatePicker_es_B87jj8h6.js';
6
6
  import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
7
7
  import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
8
- import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_C1U2hygj.js';
8
+ import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_vMh6YMRm.js';
9
9
  import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
10
10
  import 'date-fns/locale';
11
11
  import 'react-datepicker';
package/dist/css/components/Button/Button.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .button {
2
2
  text-decoration: none;
3
- /* background: none; */
3
+ background: none;
4
4
  padding: 0;
5
5
  margin: 0;
6
- /* border-width: solid 0 #fff; */
6
+ border: solid 0 #fff;
7
7
  position: relative;
8
8
  display: flex;
9
9
  justify-content: center;
package/dist/css/components/Dropdown/Dropdown.css CHANGED
@@ -44,7 +44,6 @@
44
44
  .dropdown {
45
45
  &&_state_open {
46
46
  /* visibility: visible; */
47
- display: block;
48
47
  opacity: 100%;
49
48
  }
50
49
  }
package/dist/css/styles/align/align.css CHANGED
@@ -1,5 +1,8 @@
1
- .align {
2
- &_center {
3
- margin: 0 auto;
1
+ @each $selector in button, input, textarea {
2
+ .align,
3
+ $(selector).align {
4
+ &_center {
5
+ margin: 0 auto;
6
+ }
4
7
  }
5
8
  }
package/dist/css/styles/align/align_horizontal-reverse.css CHANGED
@@ -3,63 +3,66 @@
3
3
  flex-direction: row-reverse;
4
4
  }
5
5
 
6
- .align {
7
- &_horizontal-reverse {
8
- display: flex;
9
- flex-direction: row-reverse;
10
- @extend %align-horizontal-reverse;
11
- &-top {
12
- &-left {
13
- align-items: flex-start;
14
- @extend %align-horizontal-reverse;
15
- }
16
- &-center {
17
- text-align: center;
18
- justify-content: center;
19
- align-items: flex-start;
20
- @extend %align-horizontal-reverse;
21
- }
22
- &-right {
23
- text-align: right;
24
- justify-content: flex-end;
25
- align-items: flex-start;
26
- @extend %align-horizontal-reverse;
27
- }
28
- }
29
- &-left {
30
- align-items: center;
31
- @extend %align-horizontal-reverse;
32
- }
33
- &-center {
34
- text-align: center;
35
- justify-content: center;
36
- align-items: center;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_horizontal-reverse {
10
+ display: flex;
11
+ flex-direction: row-reverse;
37
12
  @extend %align-horizontal-reverse;
38
- }
39
- &-right {
40
- text-align: right;
41
- justify-content: flex-end;
42
- align-items: center;
43
- @extend %align-horizontal-reverse;
44
- }
45
- &-bottom {
13
+ &-top {
14
+ &-left {
15
+ align-items: flex-start;
16
+ @extend %align-horizontal-reverse;
17
+ }
18
+ &-center {
19
+ text-align: center;
20
+ justify-content: center;
21
+ align-items: flex-start;
22
+ @extend %align-horizontal-reverse;
23
+ }
24
+ &-right {
25
+ text-align: right;
26
+ justify-content: flex-end;
27
+ align-items: flex-start;
28
+ @extend %align-horizontal-reverse;
29
+ }
30
+ }
46
31
  &-left {
47
- flex-direction: row;
48
- align-items: flex-end;
32
+ align-items: center;
49
33
  @extend %align-horizontal-reverse;
50
34
  }
51
35
  &-center {
52
36
  text-align: center;
53
37
  justify-content: center;
54
- align-items: flex-end;
38
+ align-items: center;
55
39
  @extend %align-horizontal-reverse;
56
40
  }
57
41
  &-right {
58
42
  text-align: right;
59
43
  justify-content: flex-end;
60
- align-items: flex-end;
44
+ align-items: center;
61
45
  @extend %align-horizontal-reverse;
62
46
  }
47
+ &-bottom {
48
+ &-left {
49
+ flex-direction: row;
50
+ align-items: flex-end;
51
+ @extend %align-horizontal-reverse;
52
+ }
53
+ &-center {
54
+ text-align: center;
55
+ justify-content: center;
56
+ align-items: flex-end;
57
+ @extend %align-horizontal-reverse;
58
+ }
59
+ &-right {
60
+ text-align: right;
61
+ justify-content: flex-end;
62
+ align-items: flex-end;
63
+ @extend %align-horizontal-reverse;
64
+ }
65
+ }
63
66
  }
64
67
  }
65
68
  }
package/dist/css/styles/align/align_horizontal.css CHANGED
@@ -3,63 +3,66 @@
3
3
  flex-direction: row;
4
4
  }
5
5
 
6
- .align {
7
- &_horizontal {
8
- &_top {
9
- align-items: flex-start;
10
- @extend %align-horizontal;
11
- &-left {
12
- align-items: flex-start;
13
- @extend %align-horizontal;
14
- }
15
- &-center {
16
- text-align: center;
17
- justify-content: center;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_horizontal {
10
+ &_top {
18
11
  align-items: flex-start;
19
12
  @extend %align-horizontal;
13
+ &-left {
14
+ align-items: flex-start;
15
+ @extend %align-horizontal;
16
+ }
17
+ &-center {
18
+ text-align: center;
19
+ justify-content: center;
20
+ align-items: flex-start;
21
+ @extend %align-horizontal;
22
+ }
23
+ &-right {
24
+ text-align: right;
25
+ justify-content: flex-end;
26
+ align-items: flex-start;
27
+ @extend %align-horizontal;
28
+ }
20
29
  }
21
- &-right {
22
- text-align: right;
23
- justify-content: flex-end;
24
- align-items: flex-start;
30
+ &_bottom {
31
+ align-items: flex-end;
25
32
  @extend %align-horizontal;
33
+ &-left {
34
+ align-items: flex-end;
35
+ @extend %align-horizontal;
36
+ }
37
+ &-center {
38
+ text-align: center;
39
+ justify-content: center;
40
+ align-items: flex-end;
41
+ @extend %align-horizontal;
42
+ }
43
+ &-right {
44
+ text-align: right;
45
+ justify-content: flex-end;
46
+ align-items: flex-end;
47
+ @extend %align-horizontal;
48
+ }
26
49
  }
27
- }
28
- &_bottom {
29
- align-items: flex-end;
30
- @extend %align-horizontal;
31
50
  &-left {
32
- align-items: flex-end;
51
+ align-items: center;
33
52
  @extend %align-horizontal;
34
53
  }
35
54
  &-center {
36
55
  text-align: center;
37
56
  justify-content: center;
38
- align-items: flex-end;
57
+ align-items: center;
39
58
  @extend %align-horizontal;
40
59
  }
41
60
  &-right {
42
61
  text-align: right;
43
62
  justify-content: flex-end;
44
- align-items: flex-end;
63
+ align-items: center;
45
64
  @extend %align-horizontal;
46
65
  }
47
66
  }
48
- &-left {
49
- align-items: center;
50
- @extend %align-horizontal;
51
- }
52
- &-center {
53
- text-align: center;
54
- justify-content: center;
55
- align-items: center;
56
- @extend %align-horizontal;
57
- }
58
- &-right {
59
- text-align: right;
60
- justify-content: flex-end;
61
- align-items: center;
62
- @extend %align-horizontal;
63
- }
64
67
  }
65
68
  }
package/dist/css/styles/align/align_vertical-reverse.css CHANGED
@@ -3,58 +3,61 @@
3
3
  flex-direction: column-reverse;
4
4
  }
5
5
 
6
- .align {
7
- &_vertical-reverse {
8
- &-top {
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_vertical-reverse {
10
+ &-top {
11
+ &-left {
12
+ align-items: flex-start;
13
+ @extend %align-horizontal-reverse;
14
+ }
15
+ &-center {
16
+ text-align: center;
17
+ align-items: center;
18
+ @extend %align-horizontal-reverse;
19
+ }
20
+ &-right {
21
+ text-align: right;
22
+ align-items: flex-end;
23
+ @extend %align-horizontal-reverse;
24
+ }
25
+ }
9
26
  &-left {
10
- @extend %align-horizontal-reverse;
27
+ justify-content: center;
11
28
  align-items: flex-start;
29
+ @extend %align-horizontal-reverse;
12
30
  }
13
31
  &-center {
14
- @extend %align-horizontal-reverse;
15
32
  text-align: center;
33
+ justify-content: center;
16
34
  align-items: center;
35
+ @extend %align-horizontal-reverse;
17
36
  }
18
37
  &-right {
19
- @extend %align-horizontal-reverse;
20
38
  text-align: right;
39
+ justify-content: center;
21
40
  align-items: flex-end;
22
- }
23
- }
24
- &-left {
25
- @extend %align-horizontal-reverse;
26
- justify-content: center;
27
- align-items: flex-start;
28
- }
29
- &-center {
30
- @extend %align-horizontal-reverse;
31
- text-align: center;
32
- justify-content: center;
33
- align-items: center;
34
- }
35
- &-right {
36
- @extend %align-horizontal-reverse;
37
- text-align: right;
38
- justify-content: center;
39
- align-items: flex-end;
40
- }
41
- &-bottom {
42
- &-left {
43
41
  @extend %align-horizontal-reverse;
44
- justify-content: flex-end;
45
- align-items: flex-start;
46
42
  }
47
- &-center {
48
- @extend %align-horizontal-reverse;
49
- text-align: center;
50
- justify-content: flex-end;
51
- align-items: center;
52
- }
53
- &-right {
54
- @extend %align-horizontal-reverse;
55
- text-align: right;
56
- justify-content: flex-end;
57
- align-items: flex-end;
43
+ &-bottom {
44
+ &-left {
45
+ justify-content: flex-end;
46
+ align-items: flex-start;
47
+ @extend %align-horizontal-reverse;
48
+ }
49
+ &-center {
50
+ text-align: center;
51
+ justify-content: flex-end;
52
+ align-items: center;
53
+ @extend %align-horizontal-reverse;
54
+ }
55
+ &-right {
56
+ text-align: right;
57
+ justify-content: flex-end;
58
+ align-items: flex-end;
59
+ @extend %align-horizontal-reverse;
60
+ }
58
61
  }
59
62
  }
60
63
  }
package/dist/css/styles/align/align_vertical.css CHANGED
@@ -3,59 +3,62 @@
3
3
  flex-direction: column;
4
4
  }
5
5
 
6
- .align {
7
- &_vertical {
8
- &-top {
9
- &-left {
10
- align-items: flex-start;
11
- @extend %align-vertical;
12
- }
13
- &-center {
14
- text-align: center;
15
- align-items: center;
16
- @extend %align-vertical;
17
- }
18
- &-right {
19
- text-align: right;
20
- align-items: flex-end;
21
- @extend %align-vertical;
6
+ @each $selector in button, input, textarea {
7
+ .align,
8
+ $(selector).align {
9
+ &_vertical {
10
+ &-top {
11
+ &-left {
12
+ align-items: flex-start;
13
+ @extend %align-vertical;
14
+ }
15
+ &-center {
16
+ text-align: center;
17
+ align-items: center;
18
+ @extend %align-vertical;
19
+ }
20
+ &-right {
21
+ text-align: right;
22
+ align-items: flex-end;
23
+ @extend %align-vertical;
24
+ }
22
25
  }
23
- }
24
- &-left {
25
- justify-content: center;
26
- align-items: flex-start;
27
- @extend %align-vertical;
28
- }
29
- &-center {
30
- text-align: center;
31
- justify-content: center;
32
- align-items: center;
33
- @extend %align-vertical;
34
- }
35
- &-right {
36
- text-align: right;
37
- justify-content: center;
38
- align-items: flex-end;
39
- @extend %align-vertical;
40
- }
41
- &-bottom {
42
26
  &-left {
43
- justify-content: flex-end;
27
+ justify-content: center;
44
28
  align-items: flex-start;
45
29
  @extend %align-vertical;
46
30
  }
47
31
  &-center {
48
32
  text-align: center;
49
- justify-content: flex-end;
33
+ justify-content: center;
50
34
  align-items: center;
51
35
  @extend %align-vertical;
52
36
  }
53
37
  &-right {
54
38
  text-align: right;
55
- justify-content: flex-end;
39
+ justify-content: center;
56
40
  align-items: flex-end;
57
41
  @extend %align-vertical;
58
42
  }
43
+ &-bottom {
44
+ &-left {
45
+ justify-content: flex-end;
46
+ align-items: flex-start;
47
+ @extend %align-vertical;
48
+ }
49
+ &-center {
50
+ text-align: center;
51
+ justify-content: flex-end;
52
+ align-items: center;
53
+ @extend %align-vertical;
54
+ }
55
+ &-right {
56
+ text-align: right;
57
+ justify-content: flex-end;
58
+ align-items: flex-end;
59
+ @extend %align-vertical;
60
+ }
61
+ }
59
62
  }
60
63
  }
61
64
  }
package/dist/css/styles/alignment/alignment.css CHANGED
@@ -1,4 +1,5 @@
1
- .alignment {
1
+ .alignment,
2
+ div.alignment {
2
3
  &_top {
3
4
  &-left {
4
5
  position: absolute;
@@ -9,6 +10,7 @@
9
10
  position: absolute;
10
11
  left: 50%;
11
12
  bottom: 100%;
13
+ transform: translateX(-50%);
12
14
  }
13
15
  &-right {
14
16
  position: absolute;
@@ -26,6 +28,7 @@
26
28
  position: absolute;
27
29
  left: 50%;
28
30
  top: 100%;
31
+ transform: translateX(-50%);
29
32
  }
30
33
  &-right {
31
34
  position: absolute;
package/dist/css/styles/border-color/border-color.css CHANGED
@@ -1,41 +1,43 @@
1
- .border-color,
2
- button.border-color {
3
- &_none {
4
- border-width: 1px;
5
- border-color: transparent;
6
- border-style: solid;
7
- }
8
- @each $type in accent, primary, secondary, surface, error, warning, success,
9
- danger, info, disabled {
10
- @each $color in primary, secondary, tertiary, quaternary {
11
- &_$(type) {
12
- &-border {
13
- &-$(color) {
14
- border-width: 1px;
15
- border-color: var(--color-$(type)-border-$(color));
16
- border-style: solid;
1
+ @each $selector in button, input, textarea {
2
+ .border-color,
3
+ $(selector).border-color {
4
+ &_none {
5
+ border-width: 1px;
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ }
9
+ @each $type in accent, primary, secondary, surface, error, warning, success,
10
+ danger, info, disabled {
11
+ @each $color in primary, secondary, tertiary, quaternary {
12
+ &_$(type) {
13
+ &-border {
14
+ &-$(color) {
15
+ border-width: 1px;
16
+ border-color: var(--color-$(type)-border-$(color));
17
+ border-style: solid;
18
+ }
17
19
  }
18
20
  }
19
21
  }
20
22
  }
21
- }
22
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
23
- pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
24
- apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
25
- pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
26
- pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
27
- beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
28
- pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
29
- deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
30
- delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,
31
- pine-green, cyprus-green, northern-blue, azure, alaskan-blue, khaki,
32
- dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
33
- stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
34
- sonic-silver {
35
- &_$(palette) {
36
- border-width: 1px;
37
- border-color: var(--color-palette-$(palette));
38
- border-style: solid;
23
+ @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
24
+ pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
25
+ clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
26
+ rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
27
+ canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
28
+ spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
29
+ surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
30
+ denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
31
+ lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
32
+ storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
33
+ alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
34
+ gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
35
+ alto, athens-gray, sonic-silver {
36
+ &_$(palette) {
37
+ border-width: 1px;
38
+ border-color: var(--color-palette-$(palette));
39
+ border-style: solid;
40
+ }
39
41
  }
40
42
  }
41
43
  }