@cloudscape-design/components-themeable 3.0.1352 → 3.0.1353

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 (40) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/alert/styles.scss +35 -19
  3. package/lib/internal/scss/badge/styles.scss +55 -35
  4. package/lib/internal/scss/button/styles.scss +96 -52
  5. package/lib/internal/scss/icon/hover-motion.scss +175 -30
  6. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
  7. package/lib/internal/scss/internal/styles/style-api.scss +45 -0
  8. package/lib/internal/template/alert/internal.d.ts +6 -0
  9. package/lib/internal/template/alert/internal.d.ts.map +1 -1
  10. package/lib/internal/template/alert/internal.js +4 -4
  11. package/lib/internal/template/alert/internal.js.map +1 -1
  12. package/lib/internal/template/alert/styles.css.js +27 -27
  13. package/lib/internal/template/alert/styles.scoped.css +149 -71
  14. package/lib/internal/template/alert/styles.selectors.js +27 -27
  15. package/lib/internal/template/badge/index.d.ts.map +1 -1
  16. package/lib/internal/template/badge/index.js +2 -1
  17. package/lib/internal/template/badge/index.js.map +1 -1
  18. package/lib/internal/template/badge/styles.css.js +10 -10
  19. package/lib/internal/template/badge/styles.scoped.css +91 -54
  20. package/lib/internal/template/badge/styles.selectors.js +10 -10
  21. package/lib/internal/template/button/index.d.ts.map +1 -1
  22. package/lib/internal/template/button/index.js +1 -1
  23. package/lib/internal/template/button/index.js.map +1 -1
  24. package/lib/internal/template/button/internal.d.ts +5 -0
  25. package/lib/internal/template/button/internal.d.ts.map +1 -1
  26. package/lib/internal/template/button/internal.js +3 -2
  27. package/lib/internal/template/button/internal.js.map +1 -1
  28. package/lib/internal/template/button/styles.css.js +23 -23
  29. package/lib/internal/template/button/styles.scoped.css +375 -302
  30. package/lib/internal/template/button/styles.selectors.js +23 -23
  31. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  32. package/lib/internal/template/internal/environment.js +2 -2
  33. package/lib/internal/template/internal/environment.json +2 -2
  34. package/lib/internal/template/table/column-groups/utils.d.ts +1 -0
  35. package/lib/internal/template/table/column-groups/utils.d.ts.map +1 -1
  36. package/lib/internal/template/table/column-groups/utils.js +13 -11
  37. package/lib/internal/template/table/column-groups/utils.js.map +1 -1
  38. package/lib/internal/template/table/thead.js +6 -6
  39. package/lib/internal/template/table/thead.js.map +1 -1
  40. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "189b5ce76c560381edd3985b35162b20f58783fe"
2
+ "commit": "4194984bedd0518b6a2b33f8e30f4f4c0112017a"
3
3
  }
package/lib/internal/scss/alert/styles.scss CHANGED
@@ -9,9 +9,15 @@
9
9
  @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
10
10
  @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
11
11
  @use '../internal/styles/foundation' as foundation;
12
+ @use '../internal/styles/style-api' as style-api;
12
13
 
13
14
  @use './motion';
14
15
 
16
+ $props: style-api.combine(style-api.$surface, (padding-block, padding-inline), style-api.$focus-ring);
17
+ $tokens: style-api.resolve($props, carrier);
18
+ @include style-api.register($tokens);
19
+ @include style-api.docs('root', $tokens);
20
+
15
21
  .root {
16
22
  @include styles.styles-reset;
17
23
  @include styles.text-flex-wrapping;
@@ -23,8 +29,9 @@
23
29
  }
24
30
 
25
31
  .alert {
32
+ @include style-api.carriers($tokens);
26
33
  @include styles.styles-reset;
27
- color: awsui.$color-text-alert-default;
34
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-alert-default});
28
35
  position: relative;
29
36
  display: flex;
30
37
  flex-direction: row;
@@ -32,17 +39,13 @@
32
39
  border-block-end: awsui.$border-width-alert-block-end solid;
33
40
  border-inline-start: awsui.$border-width-alert-inline-start solid;
34
41
  border-inline-end: awsui.$border-width-alert-inline-end solid;
35
- border-start-start-radius: awsui.$border-radius-alert;
36
- border-start-end-radius: awsui.$border-radius-alert;
37
- border-end-start-radius: awsui.$border-radius-alert;
38
- border-end-end-radius: awsui.$border-radius-alert;
39
- padding-block: awsui.$space-alert-vertical;
40
- padding-inline: awsui.$space-alert-horizontal;
41
- background-color: awsui.$color-background-container-content;
42
-
43
- #{custom-props.$alertFocusRingBoxShadow}: 0 0 0
44
- var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
45
- var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused);
42
+ border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
43
+ border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
44
+ border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
45
+ border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
46
+ padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-alert-vertical});
47
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-alert-horizontal});
48
+ background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-container-content});
46
49
  }
47
50
 
48
51
  .alert-wrapper {
@@ -86,14 +89,22 @@
86
89
  outline: none;
87
90
  }
88
91
  @include focus-visible.when-visible {
89
- @include styles.focus-highlight(
90
- $gutter: awsui.$space-button-focus-outline-gutter,
91
- $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
92
- $box-shadow: var(#{custom-props.$alertFocusRingBoxShadow})
92
+ @include style-api.focus-highlight(
93
+ $radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
94
+ $width: var(#{custom-props.$alertFocusRingBorderWidth}, foundation.$box-shadow-focused-width),
95
+ $color: var(#{custom-props.$alertFocusRingBorderColor}, awsui.$color-border-item-focused)
93
96
  );
94
97
  }
95
98
  }
96
99
 
100
+ $icon-props: (color);
101
+ $icon-tokens: style-api.resolve($icon-props, carrier);
102
+ @include style-api.docs('icon', $icon-tokens);
103
+
104
+ .icon {
105
+ @include style-api.carriers($icon-tokens);
106
+ }
107
+
97
108
  .text {
98
109
  min-inline-size: 0;
99
110
  // To account for vertical misalignment due to button borders
@@ -133,6 +144,8 @@
133
144
  margin-inline-start: awsui.$space-s;
134
145
  }
135
146
 
147
+ @include style-api.docs-forward('dismissButton', 'button', 'root');
148
+
136
149
  .dismiss-button {
137
150
  /* used in test-utils */
138
151
  }
@@ -160,10 +173,13 @@ $_text-colors: (
160
173
 
161
174
  @each $type in map.keys($_text-colors) {
162
175
  .type-#{$type} {
163
- border-color: #{map.get($_border-colors, $type)};
164
- background-color: #{map.get($_background-colors, $type)};
176
+ border-color: var(#{style-api.read($tokens, border-color)}, #{map.get($_border-colors, $type)});
177
+ background-color: var(#{style-api.read($tokens, background-color)}, #{map.get($_background-colors, $type)});
165
178
  > .alert-wrapper > .alert-focus-wrapper > .icon {
166
- color: var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)});
179
+ color: var(
180
+ #{style-api.read($icon-tokens, color)},
181
+ var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
182
+ );
167
183
  }
168
184
  }
169
185
  }
package/lib/internal/scss/badge/styles.scss CHANGED
@@ -5,6 +5,11 @@
5
5
 
6
6
  @use '../internal/styles' as styles;
7
7
  @use '../internal/styles/tokens' as awsui;
8
+ @use '../internal/styles/style-api' as style-api;
9
+
10
+ $tokens: style-api.resolve(style-api.combine(style-api.$surface, (padding-block, padding-inline)), public);
11
+ @include style-api.register($tokens);
12
+ @include style-api.docs('root', $tokens);
8
13
 
9
14
  .badge {
10
15
  @include styles.styles-reset;
@@ -12,68 +17,83 @@
12
17
  @include styles.font-body-s;
13
18
  line-height: awsui.$line-height-body-m;
14
19
  display: inline-block;
15
- border-start-start-radius: awsui.$border-radius-badge;
16
- border-start-end-radius: awsui.$border-radius-badge;
17
- border-end-start-radius: awsui.$border-radius-badge;
18
- border-end-end-radius: awsui.$border-radius-badge;
20
+ border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
21
+ border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
22
+ border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
23
+ border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
19
24
  border-block-style: solid;
20
25
  border-inline-style: solid;
21
- border-width: awsui.$border-width-badge;
22
- padding-block: 0;
23
- padding-inline: awsui.$space-xs;
24
- color: awsui.$color-text-notification-default;
26
+ border-width: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-badge});
27
+ padding-block: var(#{style-api.read($tokens, padding-block)}, 0);
28
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xs});
29
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-notification-default});
25
30
 
26
31
  &.badge-color-grey {
27
- background-color: awsui.$color-background-badge-grey;
28
- border-color: awsui.$color-border-badge-grey;
29
- color: awsui.$color-text-badge-grey;
32
+ background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-grey});
33
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-grey});
34
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-grey});
30
35
  }
31
36
 
32
37
  &.badge-color-green {
33
- background-color: awsui.$color-background-badge-green;
34
- border-color: awsui.$color-border-badge-green;
35
- color: awsui.$color-text-badge-green;
38
+ background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-green});
39
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-green});
40
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-green});
36
41
  }
37
42
 
38
43
  &.badge-color-blue {
39
- background-color: awsui.$color-background-badge-blue;
40
- border-color: awsui.$color-border-badge-blue;
41
- color: awsui.$color-text-badge-blue;
44
+ background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-blue});
45
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-blue});
46
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-blue});
42
47
  }
43
48
 
44
49
  &.badge-color-red {
45
- background-color: awsui.$color-background-badge-red;
46
- border-color: awsui.$color-border-badge-red;
47
- color: awsui.$color-text-badge-red;
50
+ background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-red});
51
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-red});
52
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-red});
48
53
  }
49
54
 
50
55
  &.badge-color-severity-critical {
51
- background-color: awsui.$color-background-notification-severity-critical;
52
- color: awsui.$color-text-badge-severity-critical;
53
- border-color: awsui.$color-border-badge-severity-critical;
56
+ background-color: var(
57
+ #{style-api.read($tokens, background-color)},
58
+ #{awsui.$color-background-notification-severity-critical}
59
+ );
60
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-critical});
61
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-critical});
54
62
  }
55
63
 
56
64
  &.badge-color-severity-high {
57
- background-color: awsui.$color-background-notification-severity-high;
58
- color: awsui.$color-text-badge-severity-high;
59
- border-color: awsui.$color-border-badge-severity-high;
65
+ background-color: var(
66
+ #{style-api.read($tokens, background-color)},
67
+ #{awsui.$color-background-notification-severity-high}
68
+ );
69
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-high});
70
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-high});
60
71
  }
61
72
 
62
73
  &.badge-color-severity-medium {
63
- background-color: awsui.$color-background-notification-severity-medium;
64
- color: awsui.$color-text-badge-severity-medium;
65
- border-color: awsui.$color-border-badge-severity-medium;
74
+ background-color: var(
75
+ #{style-api.read($tokens, background-color)},
76
+ #{awsui.$color-background-notification-severity-medium}
77
+ );
78
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-medium});
79
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-medium});
66
80
  }
67
81
 
68
82
  &.badge-color-severity-low {
69
- background-color: awsui.$color-background-notification-severity-low;
70
- color: awsui.$color-text-badge-severity-low;
71
- border-color: awsui.$color-border-badge-severity-low;
83
+ background-color: var(
84
+ #{style-api.read($tokens, background-color)},
85
+ #{awsui.$color-background-notification-severity-low}
86
+ );
87
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-low});
88
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-low});
72
89
  }
73
90
 
74
91
  &.badge-color-severity-neutral {
75
- background-color: awsui.$color-background-notification-severity-neutral;
76
- color: awsui.$color-text-badge-severity-neutral;
77
- border-color: awsui.$color-border-badge-severity-neutral;
92
+ background-color: var(
93
+ #{style-api.read($tokens, background-color)},
94
+ #{awsui.$color-background-notification-severity-neutral}
95
+ );
96
+ border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-neutral});
97
+ color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-neutral});
78
98
  }
79
99
  }
package/lib/internal/scss/button/styles.scss CHANGED
@@ -10,40 +10,86 @@
10
10
  @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
11
11
  @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
12
12
  @use './constants' as constants;
13
+ @use '../internal/styles/style-api' as style-api;
14
+
15
+ $props: style-api.combine(style-api.$surface, (box-shadow, padding-block, padding-inline), style-api.$focus-ring);
16
+ $tokens: style-api.resolve($props, carrier);
17
+ @include style-api.register($tokens);
18
+ @include style-api.docs('root', $tokens);
13
19
 
14
20
  @mixin adjust-for-variant($variant) {
15
- background: var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'));
16
- color: var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'));
17
- border-color: var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')});
18
- box-shadow: var(#{custom-props.$styleBoxShadowDefault});
19
- border-block-width: map.get($variant, 'border-width');
20
- border-inline-width: map.get($variant, 'border-width');
21
+ background: var(
22
+ #{style-api.read($tokens, background-color)},
23
+ var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'))
24
+ );
25
+ color: var(
26
+ #{style-api.read($tokens, color)},
27
+ var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'))
28
+ );
29
+ border-color: var(
30
+ #{style-api.read($tokens, border-color)},
31
+ var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')})
32
+ );
33
+ box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDefault}));
34
+ @if map.get($variant, 'border-width') {
35
+ border-block-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
36
+ border-inline-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
37
+ }
21
38
  position: relative;
22
39
  text-decoration: none;
23
- padding-block: map.get($variant, 'padding');
24
- padding-inline: map.get($variant, 'padding');
40
+ @if map.get($variant, 'padding') {
41
+ padding-block: var(#{style-api.read($tokens, padding-block)}, #{map.get($variant, 'padding')});
42
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{map.get($variant, 'padding')});
43
+ }
25
44
  font-weight: map.get($variant, 'font-weight');
26
45
 
27
46
  &:hover {
28
- background: var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'));
29
- border-color: var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'));
30
- color: var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'));
31
- box-shadow: var(#{custom-props.$styleBoxShadowHover});
47
+ background: var(
48
+ #{style-api.read($tokens, background-color)},
49
+ var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'))
50
+ );
51
+ border-color: var(
52
+ #{style-api.read($tokens, border-color)},
53
+ var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'))
54
+ );
55
+ color: var(
56
+ #{style-api.read($tokens, color)},
57
+ var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'))
58
+ );
59
+ box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowHover}));
32
60
  text-decoration: none;
33
61
  }
34
62
 
35
63
  &:active {
36
- background: var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'));
37
- border-color: var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'));
38
- color: var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'));
39
- box-shadow: var(#{custom-props.$styleBoxShadowActive});
64
+ background: var(
65
+ #{style-api.read($tokens, background-color)},
66
+ var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'))
67
+ );
68
+ border-color: var(
69
+ #{style-api.read($tokens, border-color)},
70
+ var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'))
71
+ );
72
+ color: var(
73
+ #{style-api.read($tokens, color)},
74
+ var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'))
75
+ );
76
+ box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowActive}));
40
77
  }
41
78
 
42
79
  &.disabled {
43
- background: var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'));
44
- border-color: var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'));
45
- color: var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'));
46
- box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
80
+ background: var(
81
+ #{style-api.read($tokens, background-color)},
82
+ var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'))
83
+ );
84
+ border-color: var(
85
+ #{style-api.read($tokens, border-color)},
86
+ var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'))
87
+ );
88
+ color: var(
89
+ #{style-api.read($tokens, color)},
90
+ var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
91
+ );
92
+ box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDisabled}));
47
93
  text-decoration: none;
48
94
  cursor: auto;
49
95
  }
@@ -54,24 +100,22 @@
54
100
  }
55
101
 
56
102
  .button {
103
+ @include style-api.carriers($tokens);
57
104
  @include styles.styles-reset;
58
105
  @include styles.text-wrapping;
59
106
  @include styles.font-button;
60
107
  letter-spacing: awsui.$font-button-letter-spacing;
61
- border-start-start-radius: awsui.$border-radius-button;
62
- border-start-end-radius: awsui.$border-radius-button;
63
- border-end-start-radius: awsui.$border-radius-button;
64
- border-end-end-radius: awsui.$border-radius-button;
65
- border-block: awsui.$border-width-button solid;
66
- border-inline: awsui.$border-width-button solid;
67
- padding-block: awsui.$space-button-vertical;
68
- padding-inline: awsui.$space-button-horizontal;
108
+ border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
109
+ border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
110
+ border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
111
+ border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
112
+ border-block: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
113
+ border-inline: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
114
+ padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-vertical});
115
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-horizontal});
69
116
  display: inline-block; // for <a> as a button
70
117
  text-decoration: none;
71
118
  cursor: pointer;
72
- #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
73
- var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
74
- var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
75
119
 
76
120
  @each $variant in map.keys(constants.$variants) {
77
121
  &.variant-#{$variant} {
@@ -85,37 +129,37 @@
85
129
  }
86
130
 
87
131
  @include focus-visible.when-visible {
88
- @include styles.focus-highlight(
89
- $gutter: awsui.$space-button-focus-outline-gutter,
90
- $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
91
- $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
92
- );
132
+ $radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring);
133
+ $width: var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width);
134
+ $color: var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
135
+ @include style-api.focus-highlight($radius: $radius, $width: $width, $color: $color);
93
136
 
94
137
  &.variant-icon,
95
138
  &.variant-modal-dismiss,
96
139
  &.variant-flashbar-icon {
97
- @include styles.focus-highlight(
98
- (
99
- 'vertical': awsui.$space-button-icon-focus-outline-gutter-vertical,
100
- 'horizontal': awsui.$space-button-focus-outline-gutter,
101
- ),
102
- $border-radius: var(
103
- #{custom-props.$styleFocusRingBorderRadius},
104
- awsui.$border-radius-control-default-focus-ring
105
- ),
106
- $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
140
+ @include style-api.focus-highlight(
141
+ $gutter-block: awsui.$space-button-icon-focus-outline-gutter-vertical,
142
+ $radius: $radius,
143
+ $width: $width,
144
+ $color: $color
107
145
  );
108
146
  }
109
147
 
110
148
  &.variant-inline-icon,
111
149
  &.variant-inline-icon-pointer-target {
112
- @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
150
+ @include style-api.focus-highlight(
151
+ $gutter-block: awsui.$space-button-inline-icon-focus-outline-gutter,
152
+ $gutter-inline: awsui.$space-button-inline-icon-focus-outline-gutter,
153
+ $radius: $radius,
154
+ $width: $width,
155
+ $color: $color
156
+ );
113
157
  }
114
158
  }
115
159
 
116
160
  &.button-no-text {
117
- padding-inline-start: awsui.$space-button-icon-only-horizontal;
118
- padding-inline-end: awsui.$space-button-icon-only-horizontal;
161
+ padding-inline-start: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
162
+ padding-inline-end: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
119
163
  }
120
164
 
121
165
  &.button-no-wrap {
@@ -133,12 +177,12 @@
133
177
  &.variant-flashbar-icon {
134
178
  // Icon has vertical padding, but no horizontal, we need to conpensate this
135
179
  // in order to have equal height and width
136
- padding-inline: awsui.$space-xxs;
180
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
137
181
  }
138
182
 
139
183
  &.variant-modal-dismiss {
140
- padding-block: awsui.$space-button-modal-dismiss-vertical;
141
- padding-inline: awsui.$space-xxs;
184
+ padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-modal-dismiss-vertical});
185
+ padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
142
186
  margin-inline-end: calc(-1 * #{awsui.$space-xxs});
143
187
  }
144
188