@aws-amplify/ui 6.0.2 → 6.0.4

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.
package/dist/theme.css CHANGED
@@ -164,7 +164,7 @@
164
164
  --amplify-components-button-outlined-info-focus-border-color: var(--amplify-colors-blue-100);
165
165
  --amplify-components-button-outlined-info-focus-background-color: var(--amplify-colors-blue-10);
166
166
  --amplify-components-button-outlined-info-focus-color: var(--amplify-colors-blue-100);
167
- --amplify-components-button-outlined-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
167
+ --amplify-components-button-outlined-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
168
168
  --amplify-components-button-outlined-info-active-border-color: var(--amplify-colors-blue-100);
169
169
  --amplify-components-button-outlined-info-active-background-color: var(--amplify-colors-blue-20);
170
170
  --amplify-components-button-outlined-info-active-color: var(--amplify-colors-blue-100);
@@ -177,7 +177,7 @@
177
177
  --amplify-components-button-outlined-warning-focus-border-color: var(--amplify-colors-orange-100);
178
178
  --amplify-components-button-outlined-warning-focus-background-color: var(--amplify-colors-orange-10);
179
179
  --amplify-components-button-outlined-warning-focus-color: var(--amplify-colors-orange-100);
180
- --amplify-components-button-outlined-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
180
+ --amplify-components-button-outlined-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
181
181
  --amplify-components-button-outlined-warning-active-border-color: var(--amplify-colors-orange-100);
182
182
  --amplify-components-button-outlined-warning-active-background-color: var(--amplify-colors-orange-20);
183
183
  --amplify-components-button-outlined-warning-active-color: var(--amplify-colors-orange-100);
@@ -190,7 +190,7 @@
190
190
  --amplify-components-button-outlined-success-focus-border-color: var(--amplify-colors-green-100);
191
191
  --amplify-components-button-outlined-success-focus-background-color: var(--amplify-colors-green-10);
192
192
  --amplify-components-button-outlined-success-focus-color: var(--amplify-colors-green-100);
193
- --amplify-components-button-outlined-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
193
+ --amplify-components-button-outlined-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
194
194
  --amplify-components-button-outlined-success-active-border-color: var(--amplify-colors-green-100);
195
195
  --amplify-components-button-outlined-success-active-background-color: var(--amplify-colors-green-20);
196
196
  --amplify-components-button-outlined-success-active-color: var(--amplify-colors-green-100);
@@ -203,7 +203,7 @@
203
203
  --amplify-components-button-outlined-error-focus-border-color: var(--amplify-colors-red-100);
204
204
  --amplify-components-button-outlined-error-focus-background-color: var(--amplify-colors-red-10);
205
205
  --amplify-components-button-outlined-error-focus-color: var(--amplify-colors-red-100);
206
- --amplify-components-button-outlined-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
206
+ --amplify-components-button-outlined-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
207
207
  --amplify-components-button-outlined-error-active-border-color: var(--amplify-colors-red-100);
208
208
  --amplify-components-button-outlined-error-active-background-color: var(--amplify-colors-red-20);
209
209
  --amplify-components-button-outlined-error-active-color: var(--amplify-colors-red-100);
@@ -216,7 +216,7 @@
216
216
  --amplify-components-button-outlined-overlay-focus-border-color: var(--amplify-colors-overlay-90);
217
217
  --amplify-components-button-outlined-overlay-focus-background-color: var(--amplify-colors-overlay-5);
218
218
  --amplify-components-button-outlined-overlay-focus-color: var(--amplify-colors-neutral-90);
219
- --amplify-components-button-outlined-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
219
+ --amplify-components-button-outlined-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
220
220
  --amplify-components-button-outlined-overlay-active-border-color: var(--amplify-colors-overlay-90);
221
221
  --amplify-components-button-outlined-overlay-active-background-color: var(--amplify-colors-overlay-10);
222
222
  --amplify-components-button-outlined-overlay-active-color: var(--amplify-colors-neutral-100);
@@ -250,7 +250,7 @@
250
250
  --amplify-components-button-primary-info-focus-border-color: transparent;
251
251
  --amplify-components-button-primary-info-focus-background-color: var(--amplify-colors-blue-90);
252
252
  --amplify-components-button-primary-info-focus-color: var(--amplify-colors-font-inverse);
253
- --amplify-components-button-primary-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
253
+ --amplify-components-button-primary-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
254
254
  --amplify-components-button-primary-info-active-border-color: transparent;
255
255
  --amplify-components-button-primary-info-active-background-color: var(--amplify-colors-blue-100);
256
256
  --amplify-components-button-primary-info-active-color: var(--amplify-colors-font-inverse);
@@ -263,7 +263,7 @@
263
263
  --amplify-components-button-primary-warning-focus-border-color: transparent;
264
264
  --amplify-components-button-primary-warning-focus-background-color: var(--amplify-colors-orange-90);
265
265
  --amplify-components-button-primary-warning-focus-color: var(--amplify-colors-font-inverse);
266
- --amplify-components-button-primary-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
266
+ --amplify-components-button-primary-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
267
267
  --amplify-components-button-primary-warning-active-border-color: transparent;
268
268
  --amplify-components-button-primary-warning-active-background-color: var(--amplify-colors-orange-100);
269
269
  --amplify-components-button-primary-warning-active-color: var(--amplify-colors-font-inverse);
@@ -276,7 +276,7 @@
276
276
  --amplify-components-button-primary-error-focus-border-color: transparent;
277
277
  --amplify-components-button-primary-error-focus-background-color: var(--amplify-colors-red-90);
278
278
  --amplify-components-button-primary-error-focus-color: var(--amplify-colors-font-inverse);
279
- --amplify-components-button-primary-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
279
+ --amplify-components-button-primary-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
280
280
  --amplify-components-button-primary-error-active-border-color: transparent;
281
281
  --amplify-components-button-primary-error-active-background-color: var(--amplify-colors-red-100);
282
282
  --amplify-components-button-primary-error-active-color: var(--amplify-colors-font-inverse);
@@ -289,7 +289,7 @@
289
289
  --amplify-components-button-primary-success-focus-border-color: transparent;
290
290
  --amplify-components-button-primary-success-focus-background-color: var(--amplify-colors-green-90);
291
291
  --amplify-components-button-primary-success-focus-color: var(--amplify-colors-font-inverse);
292
- --amplify-components-button-primary-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
292
+ --amplify-components-button-primary-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
293
293
  --amplify-components-button-primary-success-active-border-color: transparent;
294
294
  --amplify-components-button-primary-success-active-background-color: var(--amplify-colors-green-100);
295
295
  --amplify-components-button-primary-success-active-color: var(--amplify-colors-font-inverse);
@@ -302,7 +302,7 @@
302
302
  --amplify-components-button-primary-overlay-focus-border-color: transparent;
303
303
  --amplify-components-button-primary-overlay-focus-background-color: var(--amplify-colors-overlay-90);
304
304
  --amplify-components-button-primary-overlay-focus-color: var(--amplify-colors-font-inverse);
305
- --amplify-components-button-primary-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
305
+ --amplify-components-button-primary-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
306
306
  --amplify-components-button-primary-overlay-active-border-color: transparent;
307
307
  --amplify-components-button-primary-overlay-active-background-color: var(--amplify-colors-overlay-90);
308
308
  --amplify-components-button-primary-overlay-active-color: var(--amplify-colors-font-inverse);
@@ -345,7 +345,7 @@
345
345
  --amplify-components-button-link-info-focus-border-color: transparent;
346
346
  --amplify-components-button-link-info-focus-background-color: var(--amplify-colors-blue-10);
347
347
  --amplify-components-button-link-info-focus-color: var(--amplify-colors-blue-100);
348
- --amplify-components-button-link-info-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-blue-100);
348
+ --amplify-components-button-link-info-focus-box-shadow: var(--amplify-components-fieldcontrol-info-focus-box-shadow);
349
349
  --amplify-components-button-link-info-active-border-color: transparent;
350
350
  --amplify-components-button-link-info-active-background-color: var(--amplify-colors-blue-20);
351
351
  --amplify-components-button-link-info-active-color: var(--amplify-colors-blue-100);
@@ -358,7 +358,7 @@
358
358
  --amplify-components-button-link-warning-focus-border-color: transparent;
359
359
  --amplify-components-button-link-warning-focus-background-color: var(--amplify-colors-orange-10);
360
360
  --amplify-components-button-link-warning-focus-color: var(--amplify-colors-orange-100);
361
- --amplify-components-button-link-warning-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-orange-100);
361
+ --amplify-components-button-link-warning-focus-box-shadow: var(--amplify-components-fieldcontrol-warning-focus-box-shadow);
362
362
  --amplify-components-button-link-warning-active-border-color: transparent;
363
363
  --amplify-components-button-link-warning-active-background-color: var(--amplify-colors-orange-20);
364
364
  --amplify-components-button-link-warning-active-color: var(--amplify-colors-orange-100);
@@ -371,7 +371,7 @@
371
371
  --amplify-components-button-link-success-focus-border-color: transparent;
372
372
  --amplify-components-button-link-success-focus-background-color: var(--amplify-colors-green-10);
373
373
  --amplify-components-button-link-success-focus-color: var(--amplify-colors-green-100);
374
- --amplify-components-button-link-success-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-green-100);
374
+ --amplify-components-button-link-success-focus-box-shadow: var(--amplify-components-fieldcontrol-success-focus-box-shadow);
375
375
  --amplify-components-button-link-success-active-border-color: transparent;
376
376
  --amplify-components-button-link-success-active-background-color: var(--amplify-colors-green-20);
377
377
  --amplify-components-button-link-success-active-color: var(--amplify-colors-green-100);
@@ -384,7 +384,7 @@
384
384
  --amplify-components-button-link-error-focus-border-color: transparent;
385
385
  --amplify-components-button-link-error-focus-background-color: var(--amplify-colors-red-10);
386
386
  --amplify-components-button-link-error-focus-color: var(--amplify-colors-red-100);
387
- --amplify-components-button-link-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-red-100);
387
+ --amplify-components-button-link-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
388
388
  --amplify-components-button-link-error-active-border-color: transparent;
389
389
  --amplify-components-button-link-error-active-background-color: var(--amplify-colors-red-20);
390
390
  --amplify-components-button-link-error-active-color: var(--amplify-colors-red-100);
@@ -397,7 +397,7 @@
397
397
  --amplify-components-button-link-overlay-focus-border-color: transparent;
398
398
  --amplify-components-button-link-overlay-focus-background-color: var(--amplify-colors-overlay-5);
399
399
  --amplify-components-button-link-overlay-focus-color: var(--amplify-colors-overlay-90);
400
- --amplify-components-button-link-overlay-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-overlay-90);
400
+ --amplify-components-button-link-overlay-focus-box-shadow: var(--amplify-components-fieldcontrol-overlay-focus-box-shadow);
401
401
  --amplify-components-button-link-overlay-active-border-color: transparent;
402
402
  --amplify-components-button-link-overlay-active-background-color: var(--amplify-colors-overlay-10);
403
403
  --amplify-components-button-link-overlay-active-color: var(--amplify-colors-overlay-90);
@@ -490,12 +490,12 @@
490
490
  --amplify-components-checkbox-button-focus-outline-style: solid;
491
491
  --amplify-components-checkbox-button-focus-outline-width: var(--amplify-outline-widths-medium);
492
492
  --amplify-components-checkbox-button-focus-outline-offset: var(--amplify-outline-offsets-medium);
493
- --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-transparent);
494
- --amplify-components-checkbox-button-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
493
+ --amplify-components-checkbox-button-focus-border-color: var(--amplify-colors-border-focus);
494
+ --amplify-components-checkbox-button-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
495
495
  --amplify-components-checkbox-button-disabled-border-color: var(--amplify-colors-border-disabled);
496
496
  --amplify-components-checkbox-button-error-border-color: var(--amplify-colors-border-error);
497
- --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-transparent);
498
- --amplify-components-checkbox-button-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
497
+ --amplify-components-checkbox-button-error-focus-border-color: var(--amplify-colors-border-error);
498
+ --amplify-components-checkbox-button-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
499
499
  --amplify-components-checkbox-icon-background-color: var(--amplify-colors-primary-80);
500
500
  --amplify-components-checkbox-icon-border-radius: 20%;
501
501
  --amplify-components-checkbox-icon-opacity: var(--amplify-opacities-0);
@@ -624,19 +624,24 @@
624
624
  --amplify-components-fieldcontrol-quiet-border-inline-end: none;
625
625
  --amplify-components-fieldcontrol-quiet-border-block-start: none;
626
626
  --amplify-components-fieldcontrol-quiet-border-radius: 0;
627
- --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
628
- --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
627
+ --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: transparent;
628
+ --amplify-components-fieldcontrol-quiet-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
629
629
  --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
630
- --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
630
+ --amplify-components-fieldcontrol-quiet-error-focus-border-block-end-color: transparent;
631
+ --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
631
632
  --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
632
- --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
633
+ --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
633
634
  --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
634
635
  --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
635
636
  --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
636
637
  --amplify-components-fieldcontrol-disabled-background-color: var(--amplify-colors-background-disabled);
637
638
  --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
638
639
  --amplify-components-fieldcontrol-error-color: var(--amplify-colors-font-error);
639
- --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
640
+ --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-border-error);
641
+ --amplify-components-fieldcontrol-info-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-blue-100);
642
+ --amplify-components-fieldcontrol-warning-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-orange-100);
643
+ --amplify-components-fieldcontrol-success-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-green-100);
644
+ --amplify-components-fieldcontrol-overlay-focus-box-shadow: 0px 0px 0px 2px var(--amplify-colors-overlay-90);
640
645
  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
641
646
  --amplify-components-fieldgroup-vertical-align-items: center;
642
647
  --amplify-components-fieldgroup-outer-align-items: center;
@@ -982,7 +987,7 @@
982
987
  --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
983
988
  --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
984
989
  --amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
985
- --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
990
+ --amplify-components-sliderfield-thumb-focus-box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
986
991
  --amplify-components-sliderfield-small-track-height: 0.25rem;
987
992
  --amplify-components-sliderfield-small-thumb-width: 1rem;
988
993
  --amplify-components-sliderfield-small-thumb-height: 1rem;
@@ -1066,7 +1071,7 @@
1066
1071
  --amplify-components-storagemanager-previewer-body-gap: var(--amplify-space-small);
1067
1072
  --amplify-components-storagemanager-previewer-footer-justify-content: flex-end;
1068
1073
  --amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
1069
- --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
1074
+ --amplify-components-switchfield-focused-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
1070
1075
  --amplify-components-switchfield-font-size: var(--amplify-font-sizes-medium);
1071
1076
  --amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
1072
1077
  --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
@@ -8,7 +8,7 @@ type FieldControlErrorTokens<Output> = DesignTokenProperties<'borderColor' | 'co
8
8
  type FieldControlQuietTokens<Output> = DesignTokenProperties<'borderStyle' | 'borderInlineStart' | 'borderInlineEnd' | 'borderBlockStart' | 'borderRadius', Output> & {
9
9
  _focus?: DesignTokenProperties<'borderBlockEndColor' | 'boxShadow', Output>;
10
10
  _error?: DesignTokenProperties<'borderBlockEndColor', Output> & {
11
- _focus?: DesignTokenProperties<'boxShadow', Output>;
11
+ _focus?: DesignTokenProperties<'borderBlockEndColor' | 'boxShadow', Output>;
12
12
  };
13
13
  };
14
14
  export type FieldControlTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderStyle' | 'borderColor' | 'borderWidth' | 'borderRadius' | 'color' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'fontSize' | 'lineHeight' | 'transitionDuration' | 'outlineColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset', Output> & {
@@ -18,6 +18,18 @@ export type FieldControlTokens<Output extends OutputVariantKey> = DesignTokenPro
18
18
  _focus?: FieldControlFocusTokens<Output>;
19
19
  _disabled?: FieldControlDisabledTokens<Output>;
20
20
  _error?: FieldControlErrorTokens<Output>;
21
+ info?: {
22
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
23
+ };
24
+ warning?: {
25
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
26
+ };
27
+ success?: {
28
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
29
+ };
30
+ overlay?: {
31
+ _focus?: DesignTokenProperties<'boxShadow', Output>;
32
+ };
21
33
  };
22
34
  export declare const fieldcontrol: Required<FieldControlTokens<'default'>>;
23
35
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "6.0.2",
3
+ "version": "6.0.4",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -46,7 +46,7 @@
46
46
  "dependencies": {
47
47
  "csstype": "^3.1.1",
48
48
  "lodash": "4.17.21",
49
- "style-dictionary": "3.7.1",
49
+ "style-dictionary": "3.9.1",
50
50
  "tslib": "^2.5.2"
51
51
  },
52
52
  "peerDependencies": {
@@ -62,6 +62,7 @@
62
62
  "@types/lodash": "^4.14.170",
63
63
  "@types/webpack-env": "^1.16.2",
64
64
  "autoprefixer": "^10.3.1",
65
+ "glob": "^10.3.10",
65
66
  "postcss": "^8.4.31",
66
67
  "sass": "^1.35.2"
67
68
  },