@aws-amplify/ui 5.8.1 → 6.0.0
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/esm/helpers/accountSettings/utils.mjs +33 -1
- package/dist/esm/helpers/accountSettings/validator.mjs +120 -1
- package/dist/esm/helpers/authenticator/actor.mjs +20 -1
- package/dist/esm/helpers/authenticator/constants.mjs +144 -1
- package/dist/esm/helpers/authenticator/defaultAuthHubHandler.mjs +52 -0
- package/dist/esm/helpers/authenticator/facade.mjs +137 -1
- package/dist/esm/helpers/authenticator/form.mjs +43 -1
- package/dist/esm/helpers/authenticator/formFields/defaults.mjs +132 -1
- package/dist/esm/helpers/authenticator/formFields/formFields.mjs +62 -1
- package/dist/esm/helpers/authenticator/formFields/utils.mjs +35 -0
- package/dist/esm/helpers/authenticator/getRoute.mjs +47 -0
- package/dist/esm/helpers/authenticator/textUtil.mjs +112 -1
- package/dist/esm/helpers/authenticator/utils.mjs +38 -1
- package/dist/esm/helpers/utils.mjs +5 -1
- package/dist/esm/i18n/country-dial-codes.mjs +210 -1
- package/dist/esm/i18n/dictionaries/authenticator/de.mjs +87 -1
- package/dist/esm/i18n/dictionaries/authenticator/defaultTexts.mjs +83 -1
- package/dist/esm/i18n/dictionaries/authenticator/en.mjs +74 -1
- package/dist/esm/i18n/dictionaries/authenticator/es.mjs +83 -1
- package/dist/esm/i18n/dictionaries/authenticator/fr.mjs +92 -1
- package/dist/esm/i18n/dictionaries/authenticator/he.mjs +54 -1
- package/dist/esm/i18n/dictionaries/authenticator/id.mjs +96 -1
- package/dist/esm/i18n/dictionaries/authenticator/it.mjs +82 -1
- package/dist/esm/i18n/dictionaries/authenticator/ja.mjs +86 -1
- package/dist/esm/i18n/dictionaries/authenticator/kr.mjs +71 -1
- package/dist/esm/i18n/dictionaries/authenticator/nb.mjs +95 -1
- package/dist/esm/i18n/dictionaries/authenticator/nl.mjs +67 -1
- package/dist/esm/i18n/dictionaries/authenticator/pl.mjs +71 -1
- package/dist/esm/i18n/dictionaries/authenticator/pt.mjs +61 -1
- package/dist/esm/i18n/dictionaries/authenticator/ru.mjs +61 -1
- package/dist/esm/i18n/dictionaries/authenticator/sv.mjs +82 -1
- package/dist/esm/i18n/dictionaries/authenticator/tr.mjs +76 -1
- package/dist/esm/i18n/dictionaries/authenticator/ua.mjs +84 -1
- package/dist/esm/i18n/dictionaries/authenticator/zh.mjs +74 -1
- package/dist/esm/i18n/dictionaries/index.mjs +47 -1
- package/dist/esm/i18n/translations.mjs +67 -1
- package/dist/esm/index.mjs +28 -1
- package/dist/esm/machines/authenticator/actions.mjs +188 -1
- package/dist/esm/machines/authenticator/actors/forgotPassword.mjs +184 -0
- package/dist/esm/machines/authenticator/actors/signIn.mjs +328 -1
- package/dist/esm/machines/authenticator/actors/signOut.mjs +28 -1
- package/dist/esm/machines/authenticator/actors/signUp.mjs +295 -0
- package/dist/esm/machines/authenticator/actors/verifyUserAttributes.mjs +106 -0
- package/dist/esm/machines/authenticator/defaultServices.mjs +102 -1
- package/dist/esm/machines/authenticator/guards.mjs +70 -0
- package/dist/esm/machines/authenticator/index.mjs +368 -1
- package/dist/esm/machines/authenticator/utils.mjs +71 -0
- package/dist/esm/theme/breakpoints.mjs +14 -1
- package/dist/esm/theme/createTheme.mjs +156 -1
- package/dist/esm/theme/defaultDarkModeOverride.mjs +128 -1
- package/dist/esm/theme/defaultTheme.mjs +10 -1
- package/dist/esm/theme/tokens/borderWidths.mjs +7 -1
- package/dist/esm/theme/tokens/colors.mjs +166 -1
- package/dist/esm/theme/tokens/components/accordion.mjs +47 -0
- package/dist/esm/theme/tokens/components/alert.mjs +35 -1
- package/dist/esm/theme/tokens/components/authenticator.mjs +39 -1
- package/dist/esm/theme/tokens/components/autocomplete.mjs +42 -1
- package/dist/esm/theme/tokens/components/badge.mjs +44 -1
- package/dist/esm/theme/tokens/components/breadcrumbs.mjs +34 -1
- package/dist/esm/theme/tokens/components/button.mjs +685 -1
- package/dist/esm/theme/tokens/components/card.mjs +27 -1
- package/dist/esm/theme/tokens/components/checkbox.mjs +87 -1
- package/dist/esm/theme/tokens/components/checkboxField.mjs +8 -1
- package/dist/esm/theme/tokens/components/collection.mjs +72 -1
- package/dist/esm/theme/tokens/components/copy.mjs +18 -1
- package/dist/esm/theme/tokens/components/dialCodeSelect.mjs +7 -1
- package/dist/esm/theme/tokens/components/divider.mjs +22 -1
- package/dist/esm/theme/tokens/components/dropZone.mjs +46 -1
- package/dist/esm/theme/tokens/components/field.mjs +20 -1
- package/dist/esm/theme/tokens/components/fieldControl.mjs +131 -1
- package/dist/esm/theme/tokens/components/fieldGroup.mjs +11 -1
- package/dist/esm/theme/tokens/components/fieldMessages.mjs +13 -1
- package/dist/esm/theme/tokens/components/fieldset.mjs +40 -1
- package/dist/esm/theme/tokens/components/flex.mjs +9 -1
- package/dist/esm/theme/tokens/components/heading.mjs +30 -1
- package/dist/esm/theme/tokens/components/highlightMatch.mjs +7 -1
- package/dist/esm/theme/tokens/components/icon.mjs +6 -1
- package/dist/esm/theme/tokens/components/image.mjs +8 -1
- package/dist/esm/theme/tokens/components/inAppMessaging.mjs +23 -1
- package/dist/esm/theme/tokens/components/index.mjs +111 -1
- package/dist/esm/theme/tokens/components/input.mjs +12 -1
- package/dist/esm/theme/tokens/components/link.mjs +9 -1
- package/dist/esm/theme/tokens/components/liveness.mjs +7 -1
- package/dist/esm/theme/tokens/components/loader.mjs +42 -1
- package/dist/esm/theme/tokens/components/menu.mjs +27 -1
- package/dist/esm/theme/tokens/components/message.mjs +102 -1
- package/dist/esm/theme/tokens/components/pagination.mjs +40 -1
- package/dist/esm/theme/tokens/components/passwordField.mjs +38 -1
- package/dist/esm/theme/tokens/components/phoneNumberField.mjs +10 -1
- package/dist/esm/theme/tokens/components/placeholder.mjs +18 -1
- package/dist/esm/theme/tokens/components/radio.mjs +67 -1
- package/dist/esm/theme/tokens/components/radioGroup.mjs +19 -1
- package/dist/esm/theme/tokens/components/rating.mjs +9 -1
- package/dist/esm/theme/tokens/components/searchField.mjs +39 -1
- package/dist/esm/theme/tokens/components/select.mjs +63 -1
- package/dist/esm/theme/tokens/components/selectField.mjs +16 -1
- package/dist/esm/theme/tokens/components/sliderField.mjs +70 -1
- package/dist/esm/theme/tokens/components/stepperField.mjs +33 -1
- package/dist/esm/theme/tokens/components/storagemanager.mjs +97 -1
- package/dist/esm/theme/tokens/components/switchField.mjs +61 -1
- package/dist/esm/theme/tokens/components/table.mjs +105 -1
- package/dist/esm/theme/tokens/components/tabs.mjs +59 -1
- package/dist/esm/theme/tokens/components/text.mjs +28 -1
- package/dist/esm/theme/tokens/components/textAreaField.mjs +11 -1
- package/dist/esm/theme/tokens/components/textField.mjs +12 -1
- package/dist/esm/theme/tokens/components/toggleButton.mjs +96 -1
- package/dist/esm/theme/tokens/components/toggleButtonGroup.mjs +7 -1
- package/dist/esm/theme/tokens/fontSizes.mjs +14 -1
- package/dist/esm/theme/tokens/fontWeights.mjs +13 -1
- package/dist/esm/theme/tokens/fonts.mjs +19 -1
- package/dist/esm/theme/tokens/index.mjs +65 -1
- package/dist/esm/theme/tokens/lineHeights.mjs +7 -1
- package/dist/esm/theme/tokens/opacities.mjs +15 -1
- package/dist/esm/theme/tokens/outlineOffsets.mjs +7 -1
- package/dist/esm/theme/tokens/outlineWidths.mjs +7 -1
- package/dist/esm/theme/tokens/radii.mjs +11 -1
- package/dist/esm/theme/tokens/shadows.mjs +28 -1
- package/dist/esm/theme/tokens/space.mjs +29 -1
- package/dist/esm/theme/tokens/time.mjs +7 -1
- package/dist/esm/theme/tokens/transforms.mjs +10 -1
- package/dist/esm/theme/utils.mjs +81 -1
- package/dist/esm/types/authenticator/attributes.mjs +41 -1
- package/dist/esm/types/authenticator/user.mjs +18 -1
- package/dist/esm/types/authenticator/utils.mjs +5 -1
- package/dist/esm/types/primitives/componentClassName.mjs +164 -1
- package/dist/esm/utils/classNames.mjs +39 -0
- package/dist/esm/utils/setUserAgent/constants.mjs +43 -0
- package/dist/esm/utils/setUserAgent/setUserAgent.mjs +65 -0
- package/dist/esm/utils/utils.mjs +227 -0
- package/dist/esm/validators/index.mjs +19 -1
- package/dist/index.js +8396 -1
- package/dist/styles/StorageManager.css +138 -0
- package/dist/styles/StorageManager.layer.css +140 -0
- package/dist/styles/_fieldControl.css +0 -0
- package/dist/styles/_fieldControl.layer.css +3 -0
- package/dist/styles/accordion.css +64 -0
- package/dist/styles/accordion.layer.css +66 -0
- package/dist/styles/alert.css +44 -0
- package/dist/styles/alert.layer.css +46 -0
- package/dist/styles/authenticator.css +72 -0
- package/dist/styles/authenticator.layer.css +74 -0
- package/dist/styles/autocomplete.css +48 -0
- package/dist/styles/autocomplete.layer.css +50 -0
- package/dist/styles/badge.css +35 -0
- package/dist/styles/badge.layer.css +37 -0
- package/dist/styles/base.css +1491 -0
- package/dist/styles/base.layer.css +1493 -0
- package/dist/styles/breadcrumbs.css +40 -0
- package/dist/styles/breadcrumbs.layer.css +42 -0
- package/dist/styles/button.css +1122 -0
- package/dist/styles/button.layer.css +1124 -0
- package/dist/styles/card.css +26 -0
- package/dist/styles/card.layer.css +28 -0
- package/dist/styles/checkbox.css +95 -0
- package/dist/styles/checkbox.layer.css +97 -0
- package/dist/styles/checkboxField.css +6 -0
- package/dist/styles/checkboxField.layer.css +8 -0
- package/dist/styles/collection.css +70 -0
- package/dist/styles/collection.layer.css +72 -0
- package/dist/styles/copy.css +27 -0
- package/dist/styles/copy.layer.css +29 -0
- package/dist/styles/dialCodeSelect.css +3 -0
- package/dist/styles/dialCodeSelect.layer.css +5 -0
- package/dist/styles/divider.css +47 -0
- package/dist/styles/divider.layer.css +49 -0
- package/dist/styles/dropZone.css +45 -0
- package/dist/styles/dropZone.layer.css +47 -0
- package/dist/styles/field.css +17 -0
- package/dist/styles/field.layer.css +19 -0
- package/dist/styles/fieldGroup.css +130 -0
- package/dist/styles/fieldGroup.layer.css +132 -0
- package/dist/styles/fieldMessages.css +10 -0
- package/dist/styles/fieldMessages.layer.css +12 -0
- package/dist/styles/fieldModifiers.css +15 -0
- package/dist/styles/fieldModifiers.layer.css +17 -0
- package/dist/styles/fieldset.css +37 -0
- package/dist/styles/fieldset.layer.css +39 -0
- package/dist/styles/flex.css +8 -0
- package/dist/styles/flex.layer.css +10 -0
- package/dist/styles/grid.css +3 -0
- package/dist/styles/grid.layer.css +5 -0
- package/dist/styles/heading.css +40 -0
- package/dist/styles/heading.layer.css +42 -0
- package/dist/styles/highlightMatch.css +3 -0
- package/dist/styles/highlightMatch.layer.css +5 -0
- package/dist/styles/icon.css +14 -0
- package/dist/styles/icon.layer.css +16 -0
- package/dist/styles/image.css +9 -0
- package/dist/styles/image.layer.css +11 -0
- package/dist/styles/inAppMessaging.css +179 -0
- package/dist/styles/inAppMessaging.layer.css +181 -0
- package/dist/styles/input.css +83 -0
- package/dist/styles/input.layer.css +85 -0
- package/dist/styles/link.css +26 -0
- package/dist/styles/link.layer.css +28 -0
- package/dist/styles/liveness.css +374 -0
- package/dist/styles/liveness.layer.css +376 -0
- package/dist/styles/loader.css +108 -0
- package/dist/styles/loader.layer.css +110 -0
- package/dist/styles/menu.css +54 -0
- package/dist/styles/menu.layer.css +56 -0
- package/dist/styles/message.css +111 -0
- package/dist/styles/message.layer.css +113 -0
- package/dist/styles/pagination.css +41 -0
- package/dist/styles/pagination.layer.css +43 -0
- package/dist/styles/passwordField.css +49 -0
- package/dist/styles/passwordField.layer.css +51 -0
- package/dist/styles/phoneNumberField.css +30 -0
- package/dist/styles/phoneNumberField.layer.css +32 -0
- package/dist/styles/placeholder.css +31 -0
- package/dist/styles/placeholder.layer.css +33 -0
- package/dist/styles/radio.css +82 -0
- package/dist/styles/radio.layer.css +84 -0
- package/dist/styles/radioGroupField.css +25 -0
- package/dist/styles/radioGroupField.layer.css +27 -0
- package/dist/styles/radiogroup.css +5 -0
- package/dist/styles/radiogroup.layer.css +7 -0
- package/dist/styles/rating.css +33 -0
- package/dist/styles/rating.layer.css +35 -0
- package/dist/styles/reset.css +76 -0
- package/dist/styles/reset.layer.css +78 -0
- package/dist/styles/scrollView.css +4 -0
- package/dist/styles/scrollView.layer.css +6 -0
- package/dist/styles/searchField.css +29 -0
- package/dist/styles/searchField.layer.css +31 -0
- package/dist/styles/select.css +128 -0
- package/dist/styles/select.layer.css +130 -0
- package/dist/styles/selectField.css +18 -0
- package/dist/styles/selectField.layer.css +20 -0
- package/dist/styles/sliderField.css +143 -0
- package/dist/styles/sliderField.layer.css +145 -0
- package/dist/styles/stepperField.css +77 -0
- package/dist/styles/stepperField.layer.css +79 -0
- package/dist/styles/switchField.css +76 -0
- package/dist/styles/switchField.layer.css +78 -0
- package/dist/styles/table.css +146 -0
- package/dist/styles/table.layer.css +148 -0
- package/dist/styles/tabs.css +87 -0
- package/dist/styles/tabs.layer.css +89 -0
- package/dist/styles/text.css +40 -0
- package/dist/styles/text.layer.css +42 -0
- package/dist/styles/textArea.css +71 -0
- package/dist/styles/textArea.layer.css +73 -0
- package/dist/styles/textAreaField.css +12 -0
- package/dist/styles/textAreaField.layer.css +14 -0
- package/dist/styles/textField.css +14 -0
- package/dist/styles/textField.layer.css +16 -0
- package/dist/styles/toggleButton.css +280 -0
- package/dist/styles/toggleButton.layer.css +282 -0
- package/dist/styles/toggleButtonGroup.css +31 -0
- package/dist/styles/toggleButtonGroup.layer.css +33 -0
- package/dist/styles/visuallyHidden.css +12 -0
- package/dist/styles/visuallyHidden.layer.css +14 -0
- package/dist/styles.css +298 -684
- package/dist/styles.layer.css +6115 -0
- package/dist/theme.css +93 -156
- package/dist/types/helpers/accountSettings/utils.d.ts +1 -3
- package/dist/types/helpers/authenticator/actor.d.ts +1 -1
- package/dist/types/helpers/authenticator/constants.d.ts +5 -0
- package/dist/types/helpers/authenticator/defaultAuthHubHandler.d.ts +15 -0
- package/dist/types/helpers/authenticator/facade.d.ts +35 -6
- package/dist/types/helpers/authenticator/formFields/defaults.d.ts +3 -1
- package/dist/types/helpers/authenticator/formFields/formFields.d.ts +2 -1
- package/dist/types/helpers/authenticator/formFields/index.d.ts +1 -1
- package/dist/types/helpers/authenticator/formFields/{util.d.ts → utils.d.ts} +2 -0
- package/dist/types/helpers/authenticator/getRoute.d.ts +2 -0
- package/dist/types/helpers/authenticator/index.d.ts +2 -1
- package/dist/types/helpers/authenticator/textUtil.d.ts +8 -7
- package/dist/types/{types/authenticator/stateMachine/authMachine.d.ts → helpers/authenticator/types.d.ts} +5 -5
- package/dist/types/helpers/authenticator/utils.d.ts +0 -25
- package/dist/types/helpers/index.d.ts +0 -1
- package/dist/types/helpers/utils.d.ts +2 -2
- package/dist/types/i18n/translations.d.ts +2 -3
- package/dist/types/machines/authenticator/actions.d.ts +4 -62
- package/dist/types/machines/authenticator/actors/{resetPassword.d.ts → forgotPassword.d.ts} +3 -3
- package/dist/types/machines/authenticator/actors/index.d.ts +3 -1
- package/dist/types/machines/authenticator/actors/signIn.d.ts +3 -3
- package/dist/types/machines/authenticator/actors/signOut.d.ts +2 -2
- package/dist/types/machines/authenticator/{signUp.d.ts → actors/signUp.d.ts} +3 -3
- package/dist/types/machines/authenticator/actors/verifyUserAttributes.d.ts +5 -0
- package/dist/types/machines/authenticator/defaultServices.d.ts +208 -28
- package/dist/types/machines/authenticator/getAuthenticatorConfig.d.ts +14 -0
- package/dist/types/machines/authenticator/guards.d.ts +4 -0
- package/dist/types/machines/authenticator/index.d.ts +4 -2
- package/dist/types/machines/authenticator/types.d.ts +125 -0
- package/dist/types/machines/authenticator/utils.d.ts +7 -0
- package/dist/types/machines/index.d.ts +1 -0
- package/dist/types/theme/tokens/borderWidths.d.ts +2 -2
- package/dist/types/theme/tokens/colors.d.ts +7 -9
- package/dist/types/theme/tokens/components/accordion.d.ts +12 -0
- package/dist/types/theme/tokens/components/index.d.ts +2 -4
- package/dist/types/theme/tokens/components/radioGroup.d.ts +1 -1
- package/dist/types/theme/tokens/components/storagemanager.d.ts +18 -3
- package/dist/types/theme/tokens/components/tabs.d.ts +4 -3
- package/dist/types/theme/tokens/fontSizes.d.ts +2 -2
- package/dist/types/theme/tokens/fontWeights.d.ts +2 -2
- package/dist/types/theme/tokens/fonts.d.ts +2 -2
- package/dist/types/theme/tokens/lineHeights.d.ts +2 -2
- package/dist/types/theme/tokens/opacities.d.ts +2 -2
- package/dist/types/theme/tokens/outlineOffsets.d.ts +2 -2
- package/dist/types/theme/tokens/outlineWidths.d.ts +2 -2
- package/dist/types/theme/tokens/radii.d.ts +2 -2
- package/dist/types/theme/tokens/shadows.d.ts +2 -2
- package/dist/types/theme/tokens/space.d.ts +2 -2
- package/dist/types/theme/tokens/time.d.ts +2 -2
- package/dist/types/theme/tokens/types/designToken.d.ts +12 -6
- package/dist/types/theme/types.d.ts +5 -1
- package/dist/types/types/authenticator/attributes.d.ts +10 -4
- package/dist/types/types/authenticator/form.d.ts +7 -6
- package/dist/types/types/authenticator/index.d.ts +0 -1
- package/dist/types/types/authenticator/user.d.ts +3 -29
- package/dist/types/types/authenticator/validator.d.ts +2 -2
- package/dist/types/types/displayText.d.ts +84 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types/types/primitives/componentClassName.d.ts +162 -180
- package/dist/types/types/util.d.ts +0 -5
- package/dist/types/utils/classNames.d.ts +4 -0
- package/dist/types/utils/index.d.ts +3 -135
- package/dist/types/utils/setUserAgent/constants.d.ts +7 -0
- package/dist/types/utils/setUserAgent/index.d.ts +1 -0
- package/dist/types/utils/setUserAgent/setUserAgent.d.ts +19 -0
- package/dist/types/utils/utils.d.ts +147 -0
- package/dist/types/validators/index.d.ts +2 -2
- package/package.json +5 -19
- package/dist/esm/helpers/authenticator/context.mjs +0 -1
- package/dist/esm/helpers/authenticator/formFields/util.mjs +0 -1
- package/dist/esm/helpers/storage/fileUploader/utils/uploader.mjs +0 -1
- package/dist/esm/machines/authenticator/actors/resetPassword.mjs +0 -1
- package/dist/esm/machines/authenticator/signUp.mjs +0 -1
- package/dist/esm/theme/tokens/components/expander.mjs +0 -1
- package/dist/esm/theme/tokens/components/fileUploader.mjs +0 -1
- package/dist/esm/utils/index.mjs +0 -1
- package/dist/types/helpers/authenticator/context.d.ts +0 -13
- package/dist/types/helpers/storage/fileUploader/index.d.ts +0 -1
- package/dist/types/helpers/storage/fileUploader/utils/index.d.ts +0 -1
- package/dist/types/helpers/storage/fileUploader/utils/uploader.d.ts +0 -28
- package/dist/types/helpers/storage/index.d.ts +0 -1
- package/dist/types/theme/tokens/components/expander.d.ts +0 -22
- package/dist/types/theme/tokens/components/fileUploader.d.ts +0 -23
- package/dist/types/types/authenticator/stateMachine/context.d.ts +0 -109
- package/dist/types/types/authenticator/stateMachine/event.d.ts +0 -17
- package/dist/types/types/authenticator/stateMachine/index.d.ts +0 -4
- package/dist/types/types/authenticator/stateMachine/state.d.ts +0 -10
|
@@ -1 +1,96 @@
|
|
|
1
|
-
const
|
|
1
|
+
const togglebutton = {
|
|
2
|
+
borderColor: { value: '{colors.border.primary.value}' },
|
|
3
|
+
color: { value: '{colors.font.primary.value}' },
|
|
4
|
+
_hover: {
|
|
5
|
+
backgroundColor: { value: '{colors.overlay.10.value}' },
|
|
6
|
+
},
|
|
7
|
+
_focus: {
|
|
8
|
+
borderColor: { value: '{colors.border.focus.value}' },
|
|
9
|
+
color: { value: '{colors.font.primary.value}' },
|
|
10
|
+
},
|
|
11
|
+
_active: {
|
|
12
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
13
|
+
},
|
|
14
|
+
_disabled: {
|
|
15
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
16
|
+
borderColor: { value: '{colors.border.disabled.value}' },
|
|
17
|
+
color: { value: '{colors.font.disabled.value}' },
|
|
18
|
+
},
|
|
19
|
+
_pressed: {
|
|
20
|
+
borderColor: { value: '{colors.border.pressed.value}' },
|
|
21
|
+
color: { value: '{colors.font.primary.value}' },
|
|
22
|
+
backgroundColor: { value: '{colors.overlay.20.value}' },
|
|
23
|
+
_hover: {
|
|
24
|
+
backgroundColor: { value: '{colors.overlay.30.value}' },
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
primary: {
|
|
28
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
29
|
+
borderWidth: { value: '{borderWidths.small.value}' },
|
|
30
|
+
_focus: {
|
|
31
|
+
borderColor: { value: '{colors.border.focus.value}' },
|
|
32
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
33
|
+
boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
|
|
34
|
+
color: { value: '{colors.font.primary.value}' },
|
|
35
|
+
},
|
|
36
|
+
_hover: {
|
|
37
|
+
backgroundColor: { value: '{colors.overlay.10.value}' },
|
|
38
|
+
color: { value: '{colors.font.primary.value}' },
|
|
39
|
+
},
|
|
40
|
+
_disabled: {
|
|
41
|
+
borderColor: { value: '{colors.border.disabled.value}' },
|
|
42
|
+
backgroundColor: { value: '{colors.background.disabled.value}' },
|
|
43
|
+
color: { value: '{colors.font.disabled.value}' },
|
|
44
|
+
},
|
|
45
|
+
_pressed: {
|
|
46
|
+
backgroundColor: { value: '{colors.primary.80.value}' },
|
|
47
|
+
borderColor: { value: '{colors.primary.80.value}' },
|
|
48
|
+
color: { value: '{colors.background.primary.value}' },
|
|
49
|
+
_focus: {
|
|
50
|
+
backgroundColor: {
|
|
51
|
+
value: '{colors.border.focus.value}',
|
|
52
|
+
},
|
|
53
|
+
borderColor: { value: '{colors.border.focus.value}' },
|
|
54
|
+
color: { value: '{colors.background.primary.value}' },
|
|
55
|
+
},
|
|
56
|
+
_hover: {
|
|
57
|
+
borderColor: { value: '{colors.primary.60.value}' },
|
|
58
|
+
backgroundColor: {
|
|
59
|
+
value: '{colors.primary.60.value}',
|
|
60
|
+
},
|
|
61
|
+
boxShadow: { value: '{colors.primary.60.value}' },
|
|
62
|
+
color: { value: '{colors.background.primary.value}' },
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
},
|
|
66
|
+
link: {
|
|
67
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
68
|
+
color: { value: '{colors.overlay.50.value}' },
|
|
69
|
+
_hover: {
|
|
70
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
71
|
+
color: { value: '{colors.overlay.50.value}' },
|
|
72
|
+
},
|
|
73
|
+
_focus: {
|
|
74
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
75
|
+
color: { value: '{colors.overlay.50.value}' },
|
|
76
|
+
},
|
|
77
|
+
_disabled: {
|
|
78
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
79
|
+
color: { value: '{colors.font.disabled.value}' },
|
|
80
|
+
},
|
|
81
|
+
_pressed: {
|
|
82
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
83
|
+
color: { value: '{colors.overlay.90.value}' },
|
|
84
|
+
_focus: {
|
|
85
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
86
|
+
color: { value: '{colors.overlay.90.value}' },
|
|
87
|
+
},
|
|
88
|
+
_hover: {
|
|
89
|
+
color: { value: '{colors.overlay.90.value}' },
|
|
90
|
+
backgroundColor: { value: '{colors.transparent.value}' },
|
|
91
|
+
},
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
export { togglebutton };
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const togglebuttongroup = {
|
|
2
|
+
alignItems: { value: 'center' },
|
|
3
|
+
alignContent: { value: 'center' },
|
|
4
|
+
justifyContent: { value: 'flex-start' },
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
export { togglebuttongroup };
|
|
@@ -1 +1,14 @@
|
|
|
1
|
-
const
|
|
1
|
+
const fontSizes = {
|
|
2
|
+
xxxs: { value: '0.375rem' },
|
|
3
|
+
xxs: { value: '0.5rem' },
|
|
4
|
+
xs: { value: '0.75rem' },
|
|
5
|
+
small: { value: '0.875rem' },
|
|
6
|
+
medium: { value: '1rem' },
|
|
7
|
+
large: { value: '1.25rem' },
|
|
8
|
+
xl: { value: '1.5rem' },
|
|
9
|
+
xxl: { value: '2rem' },
|
|
10
|
+
xxxl: { value: '2.5rem' },
|
|
11
|
+
xxxxl: { value: '3rem' },
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { fontSizes };
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
const
|
|
1
|
+
const fontWeights = {
|
|
2
|
+
hairline: { value: 100 },
|
|
3
|
+
thin: { value: 200 },
|
|
4
|
+
light: { value: 300 },
|
|
5
|
+
normal: { value: 400 },
|
|
6
|
+
medium: { value: 500 },
|
|
7
|
+
semibold: { value: 600 },
|
|
8
|
+
bold: { value: 700 },
|
|
9
|
+
extrabold: { value: 800 },
|
|
10
|
+
black: { value: 900 },
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { fontWeights };
|
|
@@ -1 +1,19 @@
|
|
|
1
|
-
|
|
1
|
+
// TODO: update the design tokens to use an array
|
|
2
|
+
// export interface FontDesignToken {
|
|
3
|
+
// value: Array<string>
|
|
4
|
+
// }
|
|
5
|
+
const fonts = {
|
|
6
|
+
default: {
|
|
7
|
+
variable: {
|
|
8
|
+
value: `'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
|
|
9
|
+
'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
10
|
+
sans-serif`,
|
|
11
|
+
},
|
|
12
|
+
static: {
|
|
13
|
+
value: `'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
|
14
|
+
'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif`,
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { fonts };
|
|
@@ -1 +1,65 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { borderWidths } from './borderWidths.mjs';
|
|
2
|
+
import { colors } from './colors.mjs';
|
|
3
|
+
import { components } from './components/index.mjs';
|
|
4
|
+
import { fonts } from './fonts.mjs';
|
|
5
|
+
import { fontSizes } from './fontSizes.mjs';
|
|
6
|
+
import { fontWeights } from './fontWeights.mjs';
|
|
7
|
+
import { lineHeights } from './lineHeights.mjs';
|
|
8
|
+
import { opacities } from './opacities.mjs';
|
|
9
|
+
import { outlineOffsets } from './outlineOffsets.mjs';
|
|
10
|
+
import { outlineWidths } from './outlineWidths.mjs';
|
|
11
|
+
import { radii } from './radii.mjs';
|
|
12
|
+
import { shadows } from './shadows.mjs';
|
|
13
|
+
import { space } from './space.mjs';
|
|
14
|
+
import { time } from './time.mjs';
|
|
15
|
+
import { transforms } from './transforms.mjs';
|
|
16
|
+
|
|
17
|
+
const tokens = {
|
|
18
|
+
components,
|
|
19
|
+
borderWidths,
|
|
20
|
+
colors,
|
|
21
|
+
fonts,
|
|
22
|
+
fontSizes,
|
|
23
|
+
fontWeights,
|
|
24
|
+
lineHeights,
|
|
25
|
+
opacities,
|
|
26
|
+
outlineOffsets,
|
|
27
|
+
outlineWidths,
|
|
28
|
+
radii,
|
|
29
|
+
shadows,
|
|
30
|
+
space,
|
|
31
|
+
time,
|
|
32
|
+
transforms,
|
|
33
|
+
};
|
|
34
|
+
const reactNativeTokens = {
|
|
35
|
+
colors,
|
|
36
|
+
borderWidths,
|
|
37
|
+
fontSizes: {
|
|
38
|
+
xxs: fontSizes.xxs,
|
|
39
|
+
xs: fontSizes.xs,
|
|
40
|
+
small: fontSizes.small,
|
|
41
|
+
medium: fontSizes.medium,
|
|
42
|
+
large: fontSizes.large,
|
|
43
|
+
xl: fontSizes.xl,
|
|
44
|
+
xxl: fontSizes.xxl,
|
|
45
|
+
xxxl: fontSizes.xxxl,
|
|
46
|
+
},
|
|
47
|
+
fontWeights,
|
|
48
|
+
opacities,
|
|
49
|
+
// React Native doesn't need the relative space values
|
|
50
|
+
space: {
|
|
51
|
+
// use `space.xxxs` to output a value of `2` and avoid odd space numbers
|
|
52
|
+
xxs: space.xxxs,
|
|
53
|
+
xs: space.xs,
|
|
54
|
+
small: space.small,
|
|
55
|
+
medium: space.medium,
|
|
56
|
+
large: space.large,
|
|
57
|
+
xl: space.xl,
|
|
58
|
+
xxl: space.xxl,
|
|
59
|
+
xxxl: space.xxxl,
|
|
60
|
+
},
|
|
61
|
+
radii,
|
|
62
|
+
time,
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { reactNativeTokens, tokens };
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
const
|
|
1
|
+
const opacities = {
|
|
2
|
+
0: { value: '0' },
|
|
3
|
+
10: { value: '0.1' },
|
|
4
|
+
20: { value: '0.2' },
|
|
5
|
+
30: { value: '0.3' },
|
|
6
|
+
40: { value: '0.4' },
|
|
7
|
+
50: { value: '0.5' },
|
|
8
|
+
60: { value: '0.6' },
|
|
9
|
+
70: { value: '0.7' },
|
|
10
|
+
80: { value: '0.8' },
|
|
11
|
+
90: { value: '0.9' },
|
|
12
|
+
100: { value: '1' },
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { opacities };
|
|
@@ -1 +1,11 @@
|
|
|
1
|
-
const
|
|
1
|
+
const radii = {
|
|
2
|
+
xs: { value: '0.125rem' },
|
|
3
|
+
small: { value: '0.25rem' },
|
|
4
|
+
medium: { value: '0.5rem' },
|
|
5
|
+
large: { value: '1rem' },
|
|
6
|
+
xl: { value: '2rem' },
|
|
7
|
+
xxl: { value: '4rem' },
|
|
8
|
+
xxxl: { value: '8rem' },
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export { radii };
|
|
@@ -1 +1,28 @@
|
|
|
1
|
-
const
|
|
1
|
+
const shadows = {
|
|
2
|
+
small: {
|
|
3
|
+
value: {
|
|
4
|
+
offsetX: '0px',
|
|
5
|
+
offsetY: '2px',
|
|
6
|
+
blurRadius: '4px',
|
|
7
|
+
color: '{colors.shadow.tertiary.value}',
|
|
8
|
+
},
|
|
9
|
+
},
|
|
10
|
+
medium: {
|
|
11
|
+
value: {
|
|
12
|
+
offsetX: '0px',
|
|
13
|
+
offsetY: '2px',
|
|
14
|
+
blurRadius: '6px',
|
|
15
|
+
color: '{colors.shadow.secondary.value}',
|
|
16
|
+
},
|
|
17
|
+
},
|
|
18
|
+
large: {
|
|
19
|
+
value: {
|
|
20
|
+
offsetX: '0px',
|
|
21
|
+
offsetY: '4px',
|
|
22
|
+
blurRadius: '12px',
|
|
23
|
+
color: '{colors.shadow.primary.value}',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export { shadows };
|
|
@@ -1 +1,29 @@
|
|
|
1
|
-
const
|
|
1
|
+
const space = {
|
|
2
|
+
zero: { value: '0' },
|
|
3
|
+
xxxs: { value: '0.25rem' },
|
|
4
|
+
xxs: { value: '0.375rem' },
|
|
5
|
+
xs: { value: '0.5rem' },
|
|
6
|
+
small: { value: '0.75rem' },
|
|
7
|
+
medium: { value: '1rem' },
|
|
8
|
+
large: { value: '1.5rem' },
|
|
9
|
+
xl: { value: '2.0rem' },
|
|
10
|
+
xxl: { value: '3.0rem' },
|
|
11
|
+
xxxl: { value: '4.5rem' },
|
|
12
|
+
relative: {
|
|
13
|
+
//creating a second set of sizes using em which will be sized relative to a parent instead of the root
|
|
14
|
+
xxxs: { value: '0.25em' },
|
|
15
|
+
xxs: { value: '0.375em' },
|
|
16
|
+
xs: { value: '0.5em' },
|
|
17
|
+
small: { value: '0.75em' },
|
|
18
|
+
medium: { value: '1em' },
|
|
19
|
+
large: { value: '1.5em' },
|
|
20
|
+
xl: { value: '2.0em' },
|
|
21
|
+
xxl: { value: '3.0em' },
|
|
22
|
+
xxxl: { value: '4.5em' },
|
|
23
|
+
full: { value: '100%' },
|
|
24
|
+
},
|
|
25
|
+
};
|
|
26
|
+
// I want to be able to pass in a Theme object that has extra tokens
|
|
27
|
+
// and it returns that same object type WITH the extra tokens
|
|
28
|
+
|
|
29
|
+
export { space };
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
const
|
|
1
|
+
const transforms = {
|
|
2
|
+
// TODO: make this more generic and cross-platform
|
|
3
|
+
slideX: {
|
|
4
|
+
small: { value: 'translateX(0.5em)' },
|
|
5
|
+
medium: { value: 'translateX(1em)' },
|
|
6
|
+
large: { value: 'translateX(2em)' },
|
|
7
|
+
},
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { transforms };
|
package/dist/esm/theme/utils.mjs
CHANGED
|
@@ -1 +1,81 @@
|
|
|
1
|
-
import
|
|
1
|
+
import kebabCase from 'lodash/kebabCase.js';
|
|
2
|
+
import usesReference from 'style-dictionary/lib/utils/references/usesReference.js';
|
|
3
|
+
import '@aws-amplify/core/internals/utils';
|
|
4
|
+
import '../utils/setUserAgent/constants.mjs';
|
|
5
|
+
import { isObject, has, isString } from '../utils/utils.mjs';
|
|
6
|
+
|
|
7
|
+
const CSS_VARIABLE_PREFIX = 'amplify';
|
|
8
|
+
// Important: these properties should not be altered in
|
|
9
|
+
// order to maintain the expected order of the CSS `box-shadow` property
|
|
10
|
+
const SHADOW_PROPERTIES = [
|
|
11
|
+
'offsetX',
|
|
12
|
+
'offsetY',
|
|
13
|
+
'blurRadius',
|
|
14
|
+
'spreadRadius',
|
|
15
|
+
'color',
|
|
16
|
+
];
|
|
17
|
+
function referenceValue(value) {
|
|
18
|
+
if (!value)
|
|
19
|
+
return '';
|
|
20
|
+
if (usesReference(value)) {
|
|
21
|
+
const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
|
|
22
|
+
return `var(--${cssNameTransform({ path })})`;
|
|
23
|
+
}
|
|
24
|
+
return value;
|
|
25
|
+
}
|
|
26
|
+
function cssValue(token) {
|
|
27
|
+
const { value } = token;
|
|
28
|
+
if (isString(value)) {
|
|
29
|
+
return referenceValue(value);
|
|
30
|
+
}
|
|
31
|
+
if (isShadowTokenObject(value)) {
|
|
32
|
+
return SHADOW_PROPERTIES.map((property) => {
|
|
33
|
+
return referenceValue(
|
|
34
|
+
// lookup property against `token` first for custom non-nested value, then lookup
|
|
35
|
+
// property against `value` for design token value
|
|
36
|
+
isShadowTokenObject(token) ? token[property] : value[property]);
|
|
37
|
+
}).join(' ');
|
|
38
|
+
}
|
|
39
|
+
return value;
|
|
40
|
+
}
|
|
41
|
+
function cssNameTransform({ path = [] }) {
|
|
42
|
+
return `${kebabCase([CSS_VARIABLE_PREFIX, ...path].join(' '))}`;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Helper function to test if something is a design token or not.
|
|
46
|
+
* Used in the React component style props.
|
|
47
|
+
*
|
|
48
|
+
* @param value - thing to test if it is a design token or not
|
|
49
|
+
* @returns boolean
|
|
50
|
+
*/
|
|
51
|
+
function isDesignToken(value) {
|
|
52
|
+
return isObject(value) && has(value, 'value');
|
|
53
|
+
}
|
|
54
|
+
function isShadowTokenObject(value) {
|
|
55
|
+
return isObject(value) && has(value, 'offsetX');
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Recursive function that will walk down the token object
|
|
59
|
+
* and perform the setupToken function on each token.
|
|
60
|
+
* Similar to what Style Dictionary does.
|
|
61
|
+
*/
|
|
62
|
+
function setupTokens({ tokens, path = [], setupToken, }) {
|
|
63
|
+
if (has(tokens, 'value')) {
|
|
64
|
+
return setupToken({ token: tokens, path });
|
|
65
|
+
}
|
|
66
|
+
const output = {};
|
|
67
|
+
for (const name in tokens) {
|
|
68
|
+
if (has(tokens, name)) {
|
|
69
|
+
const value = tokens[name];
|
|
70
|
+
const nextTokens = isObject(value) ? value : { value };
|
|
71
|
+
output[name] = setupTokens({
|
|
72
|
+
tokens: nextTokens,
|
|
73
|
+
path: path.concat(name),
|
|
74
|
+
setupToken,
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
return output;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, isDesignToken, isShadowTokenObject, setupTokens };
|
|
@@ -1 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
/** Array of auth fields that we supply defaults with */
|
|
2
|
+
const signUpFieldsWithDefault = [
|
|
3
|
+
'birthdate',
|
|
4
|
+
'email',
|
|
5
|
+
'family_name',
|
|
6
|
+
'given_name',
|
|
7
|
+
'middle_name',
|
|
8
|
+
'name',
|
|
9
|
+
'nickname',
|
|
10
|
+
'phone_number',
|
|
11
|
+
'preferred_username',
|
|
12
|
+
'profile',
|
|
13
|
+
'website',
|
|
14
|
+
];
|
|
15
|
+
/** Array of auth fields that we do not supply defaults with */
|
|
16
|
+
const signUpFieldsWithoutDefault = [
|
|
17
|
+
'address',
|
|
18
|
+
'gender',
|
|
19
|
+
'locale',
|
|
20
|
+
'picture',
|
|
21
|
+
'updated_at',
|
|
22
|
+
'zoneinfo',
|
|
23
|
+
];
|
|
24
|
+
/** Array of known login mechanisms */
|
|
25
|
+
const LoginMechanismArray = [
|
|
26
|
+
'username',
|
|
27
|
+
'email',
|
|
28
|
+
'phone_number',
|
|
29
|
+
];
|
|
30
|
+
const authFieldsWithDefaults = [
|
|
31
|
+
...LoginMechanismArray,
|
|
32
|
+
...signUpFieldsWithDefault,
|
|
33
|
+
'confirmation_code',
|
|
34
|
+
'password',
|
|
35
|
+
'confirm_password',
|
|
36
|
+
];
|
|
37
|
+
const isAuthFieldsWithDefaults = (field) => {
|
|
38
|
+
return authFieldsWithDefaults.includes(field);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { LoginMechanismArray, authFieldsWithDefaults, isAuthFieldsWithDefaults, signUpFieldsWithDefault, signUpFieldsWithoutDefault };
|
|
@@ -1 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
/** Federated IDPs that Authenticator supports */
|
|
2
|
+
var FederatedIdentityProviders;
|
|
3
|
+
(function (FederatedIdentityProviders) {
|
|
4
|
+
FederatedIdentityProviders["Apple"] = "Apple";
|
|
5
|
+
FederatedIdentityProviders["Amazon"] = "Amazon";
|
|
6
|
+
FederatedIdentityProviders["Facebook"] = "Facebook";
|
|
7
|
+
FederatedIdentityProviders["Google"] = "Google";
|
|
8
|
+
})(FederatedIdentityProviders || (FederatedIdentityProviders = {}));
|
|
9
|
+
/**
|
|
10
|
+
* Cognito user contact method types that have not been verified as valid
|
|
11
|
+
*/
|
|
12
|
+
var UnverifiedContactMethodType;
|
|
13
|
+
(function (UnverifiedContactMethodType) {
|
|
14
|
+
UnverifiedContactMethodType["Email"] = "email";
|
|
15
|
+
UnverifiedContactMethodType["PhoneNumber"] = "phone_number";
|
|
16
|
+
})(UnverifiedContactMethodType || (UnverifiedContactMethodType = {}));
|
|
17
|
+
|
|
18
|
+
export { FederatedIdentityProviders, UnverifiedContactMethodType };
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
import{UnverifiedContactMethodType
|
|
1
|
+
import { UnverifiedContactMethodType } from './user.mjs';
|
|
2
|
+
|
|
3
|
+
const isUnverifiedContactMethodType = (value) => Object.values(UnverifiedContactMethodType).findIndex((val) => val === value) >= 0;
|
|
4
|
+
|
|
5
|
+
export { isUnverifiedContactMethodType };
|