@aws-amplify/ui 5.5.10 → 5.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/theme/tokens/components/field.mjs +1 -1
- package/dist/esm/theme/tokens/components/index.mjs +1 -1
- package/dist/esm/theme/tokens/components/liveness.mjs +1 -0
- package/dist/esm/utils/index.mjs +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +403 -2
- package/dist/theme.css +2 -0
- package/dist/types/helpers/accountSettings/utils.d.ts +1 -1
- package/dist/types/helpers/authenticator/facade.d.ts +5 -5
- package/dist/types/helpers/authenticator/utils.d.ts +1 -1
- package/dist/types/helpers/utils.d.ts +1 -1
- package/dist/types/i18n/dictionaries/authenticator/types.d.ts +2 -2
- package/dist/types/i18n/translations.d.ts +2 -2
- package/dist/types/machines/authenticator/actions.d.ts +27 -27
- package/dist/types/machines/authenticator/actors/resetPassword.d.ts +1 -1
- package/dist/types/machines/authenticator/actors/signIn.d.ts +1 -1
- package/dist/types/machines/authenticator/index.d.ts +1 -1
- package/dist/types/machines/authenticator/signUp.d.ts +1 -1
- package/dist/types/theme/breakpoints.d.ts +1 -1
- package/dist/types/theme/tokens/borderWidths.d.ts +2 -2
- package/dist/types/theme/tokens/colors.d.ts +22 -22
- package/dist/types/theme/tokens/components/alert.d.ts +5 -5
- package/dist/types/theme/tokens/components/authenticator.d.ts +10 -10
- package/dist/types/theme/tokens/components/autocomplete.d.ts +1 -1
- package/dist/types/theme/tokens/components/badge.d.ts +6 -6
- package/dist/types/theme/tokens/components/button.d.ts +8 -8
- package/dist/types/theme/tokens/components/card.d.ts +3 -3
- package/dist/types/theme/tokens/components/checkbox.d.ts +6 -6
- package/dist/types/theme/tokens/components/checkboxField.d.ts +1 -1
- package/dist/types/theme/tokens/components/collection.d.ts +3 -3
- package/dist/types/theme/tokens/components/copy.d.ts +1 -1
- package/dist/types/theme/tokens/components/dialCodeSelect.d.ts +1 -1
- package/dist/types/theme/tokens/components/divider.d.ts +2 -2
- package/dist/types/theme/tokens/components/expander.d.ts +5 -5
- package/dist/types/theme/tokens/components/field.d.ts +2 -2
- package/dist/types/theme/tokens/components/fieldControl.d.ts +6 -6
- package/dist/types/theme/tokens/components/fieldGroup.d.ts +1 -1
- package/dist/types/theme/tokens/components/fieldMessages.d.ts +1 -1
- package/dist/types/theme/tokens/components/fileUploader.d.ts +2 -2
- package/dist/types/theme/tokens/components/flex.d.ts +1 -1
- package/dist/types/theme/tokens/components/heading.d.ts +3 -3
- package/dist/types/theme/tokens/components/highlightMatch.d.ts +1 -1
- package/dist/types/theme/tokens/components/icon.d.ts +1 -1
- package/dist/types/theme/tokens/components/image.d.ts +1 -1
- package/dist/types/theme/tokens/components/inAppMessaging.d.ts +5 -5
- package/dist/types/theme/tokens/components/index.d.ts +6 -4
- package/dist/types/theme/tokens/components/link.d.ts +2 -2
- package/dist/types/theme/tokens/components/liveness.d.ts +8 -0
- package/dist/types/theme/tokens/components/loader.d.ts +4 -4
- package/dist/types/theme/tokens/components/menu.d.ts +2 -2
- package/dist/types/theme/tokens/components/pagination.d.ts +1 -1
- package/dist/types/theme/tokens/components/passwordField.d.ts +3 -3
- package/dist/types/theme/tokens/components/phoneNumberField.d.ts +1 -1
- package/dist/types/theme/tokens/components/placeholder.d.ts +2 -2
- package/dist/types/theme/tokens/components/radio.d.ts +2 -2
- package/dist/types/theme/tokens/components/radioGroup.d.ts +1 -1
- package/dist/types/theme/tokens/components/rating.d.ts +1 -1
- package/dist/types/theme/tokens/components/searchField.d.ts +3 -3
- package/dist/types/theme/tokens/components/select.d.ts +2 -2
- package/dist/types/theme/tokens/components/selectField.d.ts +1 -1
- package/dist/types/theme/tokens/components/sliderField.d.ts +3 -3
- package/dist/types/theme/tokens/components/stepperField.d.ts +2 -2
- package/dist/types/theme/tokens/components/switchField.d.ts +3 -3
- package/dist/types/theme/tokens/components/table.d.ts +5 -5
- package/dist/types/theme/tokens/components/tabs.d.ts +3 -3
- package/dist/types/theme/tokens/components/text.d.ts +4 -4
- package/dist/types/theme/tokens/components/textAreaField.d.ts +2 -2
- package/dist/types/theme/tokens/components/textField.d.ts +1 -1
- package/dist/types/theme/tokens/components/toggleButton.d.ts +2 -2
- package/dist/types/theme/tokens/components/toggleButtonGroup.d.ts +2 -2
- 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 +3 -3
- package/dist/types/theme/tokens/index.d.ts +6 -6
- 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 +4 -4
- package/dist/types/theme/tokens/time.d.ts +2 -2
- package/dist/types/theme/tokens/transforms.d.ts +3 -3
- package/dist/types/theme/tokens/types/designToken.d.ts +66 -66
- package/dist/types/theme/tokens/types/typography.d.ts +1 -1
- package/dist/types/theme/types.d.ts +2 -2
- package/dist/types/theme/utils.d.ts +3 -3
- package/dist/types/types/accountSettings/validator.d.ts +2 -2
- package/dist/types/types/authenticator/attributes.d.ts +7 -7
- package/dist/types/types/authenticator/form.d.ts +6 -6
- package/dist/types/types/authenticator/stateMachine/authMachine.d.ts +3 -3
- package/dist/types/types/authenticator/stateMachine/context.d.ts +2 -2
- package/dist/types/types/authenticator/stateMachine/event.d.ts +3 -3
- package/dist/types/types/authenticator/stateMachine/state.d.ts +6 -6
- package/dist/types/types/authenticator/user.d.ts +2 -2
- package/dist/types/types/authenticator/validator.d.ts +4 -4
- package/dist/types/types/primitives/componentClassName.d.ts +1 -0
- package/dist/types/types/primitives/index.d.ts +1 -1
- package/dist/types/types/util.d.ts +5 -5
- package/dist/types/utils/index.d.ts +18 -1
- package/package.json +1 -1
- package/dist/esm/utils/classname.mjs +0 -1
- package/dist/types/utils/classname.d.ts +0 -19
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
export
|
|
2
|
+
export type RadioGroupTokens<Output extends OutputVariantKey> = {
|
|
3
3
|
radio?: DesignTokenProperties<'borderWidth' | 'borderColor' | 'backgroundColor', Output> & {
|
|
4
4
|
_checked?: DesignTokenProperties<'color', Output>;
|
|
5
5
|
label?: DesignTokenProperties<'color', Output>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
export
|
|
2
|
+
export type RatingTokens<Output extends OutputVariantKey> = {
|
|
3
3
|
large?: DesignTokenProperties<'size', Output>;
|
|
4
4
|
default?: DesignTokenProperties<'size', Output>;
|
|
5
5
|
small?: DesignTokenProperties<'size', Output>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
|
|
3
|
+
type SearchTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color'> & {
|
|
4
4
|
_active?: StateTokens<Output>;
|
|
5
5
|
_disabled?: StateTokens<Output>;
|
|
6
6
|
_focus?: StateTokens<Output>;
|
|
7
7
|
_hover?: StateTokens<Output>;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type SearchFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color', Output> & {
|
|
10
10
|
button?: SearchTokens<Output>;
|
|
11
11
|
};
|
|
12
12
|
export declare const searchfield: Required<SearchFieldTokens<'default'>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
|
|
3
|
+
export type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth', Output> & {
|
|
4
4
|
wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position', Output>;
|
|
5
5
|
iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output>;
|
|
6
6
|
option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
export
|
|
2
|
+
export type SelectFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'color' | 'flexDirection' | 'fontSize', Output> & {
|
|
3
3
|
_focus?: DesignTokenProperties<'borderColor', Output>;
|
|
4
4
|
label?: DesignTokenProperties<'color', Output>;
|
|
5
5
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type SliderFieldThumbStateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'boxShadow', Output>;
|
|
3
|
+
type SliderFieldSizeTokens<Output> = {
|
|
4
4
|
track?: DesignTokenProperties<'height', Output>;
|
|
5
5
|
thumb?: DesignTokenProperties<'height' | 'width', Output>;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export type SliderFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingBlock', Output> & {
|
|
8
8
|
track?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'height' | 'minWidth', Output>;
|
|
9
9
|
range?: DesignTokenProperties<'backgroundColor' | 'borderRadius', Output> & {
|
|
10
10
|
_disabled?: DesignTokenProperties<'backgroundColor', Output>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type ButtonStateColorTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color', Output>;
|
|
3
|
+
export type StepperFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'flexDirection', Output> & {
|
|
4
4
|
input?: DesignTokenProperties<'textAlign' | 'color' | 'fontSize', Output>;
|
|
5
5
|
button?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
|
|
6
6
|
_active?: ButtonStateColorTokens<Output>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export
|
|
2
|
+
type SwitchFieldSizeTokens<OutputType> = DesignTokenProperties<'fontSize', OutputType>;
|
|
3
|
+
type SwitchFieldTrackCheckedTokens<OutputType> = DesignTokenProperties<'backgroundColor', OutputType>;
|
|
4
|
+
export type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'fontSize', OutputType> & {
|
|
5
5
|
_disabled?: DesignTokenProperties<'opacity', OutputType>;
|
|
6
6
|
_focused?: DesignTokenProperties<'shadow', OutputType>;
|
|
7
7
|
large?: SwitchFieldSizeTokens<OutputType>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type BaseTableTokens<Output> = DesignTokenProperties<'display' | 'verticalAlign', Output>;
|
|
3
|
+
type TableCellTokens<Output> = DesignTokenProperties<'borderColor' | 'borderStyle' | 'borderWidth' | 'color' | 'display' | 'fontSize' | 'fontWeight' | 'padding' | 'verticalAlign', Output> & {
|
|
4
4
|
large?: TableCellSizeTokens<Output>;
|
|
5
5
|
small?: TableCellSizeTokens<Output>;
|
|
6
6
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export
|
|
7
|
+
type TableCellSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'padding', Output>;
|
|
8
|
+
type TableCaptionSizeTokens<Output> = DesignTokenProperties<'fontSize', Output>;
|
|
9
|
+
export type TableTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderCollapse' | 'display' | 'width', Output> & {
|
|
10
10
|
head?: BaseTableTokens<Output>;
|
|
11
11
|
body?: BaseTableTokens<Output>;
|
|
12
12
|
foot?: BaseTableTokens<Output>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type TabItemStateTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', OutputType>;
|
|
3
|
+
type TabItemTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'color' | 'fontSize' | 'fontWeight' | 'paddingVertical' | 'paddingHorizontal' | 'textAlign' | 'transitionDuration', OutputType> & {
|
|
4
4
|
_hover?: DesignTokenProperties<'color', OutputType>;
|
|
5
5
|
_focus?: DesignTokenProperties<'color', OutputType>;
|
|
6
6
|
_active?: TabItemStateTokens<OutputType>;
|
|
7
7
|
_disabled?: TabItemStateTokens<OutputType>;
|
|
8
8
|
};
|
|
9
|
-
export
|
|
9
|
+
export type TabsTokens<Output extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'gap', Output> & {
|
|
10
10
|
item?: TabItemTokens<Output>;
|
|
11
11
|
};
|
|
12
12
|
export declare const tabs: Required<TabsTokens<'default'>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export
|
|
2
|
+
type OrderVariantKey = 'primary' | 'secondary' | 'tertiary';
|
|
3
|
+
type InformationVariantKey = 'info' | 'warning' | 'error' | 'success';
|
|
4
|
+
type BaseTextTokens<Output> = DesignTokenProperties<'color', Output>;
|
|
5
|
+
export type TextTokens<Output extends OutputVariantKey> = BaseTextTokens<Output> & Partial<Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>>;
|
|
6
6
|
export declare const text: Required<TextTokens<'default'>>;
|
|
7
7
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type TokenKey = 'color' | 'borderColor' | 'fontSize';
|
|
3
|
+
export type TextAreaFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<Output extends 'default' ? Exclude<TokenKey, 'fontSize'> : TokenKey, Output> & {
|
|
4
4
|
_focus?: DesignTokenProperties<'borderColor', Output>;
|
|
5
5
|
};
|
|
6
6
|
export declare const textareafield: Required<TextAreaFieldTokens<'default'>>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
export
|
|
2
|
+
export type TextFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'borderColor' | 'fontSize', Output> & {
|
|
3
3
|
_focus?: DesignTokenProperties<'borderColor', Output>;
|
|
4
4
|
};
|
|
5
5
|
export declare const textfield: Required<TextFieldTokens<'default'>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type ToggleButtonStateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color', Output>;
|
|
3
|
+
export type ToggleButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'color', Output> & {
|
|
4
4
|
_hover?: DesignTokenProperties<'backgroundColor', Output>;
|
|
5
5
|
_focus?: DesignTokenProperties<'borderColor' | 'color', Output>;
|
|
6
6
|
_active?: DesignTokenProperties<'backgroundColor', Output>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type ToggleButtonGroupTokenKey = 'alignItems' | 'alignContent' | 'justifyContent';
|
|
3
|
+
export type ToggleButtonGroupTokens<Output extends OutputVariantKey> = DesignTokenProperties<ToggleButtonGroupTokenKey, Output>;
|
|
4
4
|
export declare const togglebuttongroup: Required<ToggleButtonGroupTokens<'default'>>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, FontSizeValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type FontSize = 'xxxs' | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
|
|
3
|
+
export type FontSizes<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<FontSize, FontSizeValue<Platform, Output>, Output, Platform>;
|
|
4
4
|
export declare const fontSizes: FontSizes<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, FontWeightValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type FontWeight = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
3
|
+
export type FontWeights<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<FontWeight, FontWeightValue<Platform, Output>, Output, Platform>;
|
|
4
4
|
export declare const fontWeights: FontWeights<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DesignTokenValues, FontValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
type FontVariant = 'variable' | 'static';
|
|
3
|
+
type BaseFonts<Output extends OutputVariantKey = unknown, Platform = unknown> = {
|
|
4
4
|
default?: DesignTokenValues<FontVariant, FontValue, Output, Platform>;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type Fonts<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseFonts<Output, Platform>> : BaseFonts<Output, Platform>;
|
|
7
7
|
export declare const fonts: Fonts<'default'>;
|
|
8
8
|
export {};
|
|
@@ -33,21 +33,21 @@ interface BaseTokens<Output extends OutputVariantKey = unknown> {
|
|
|
33
33
|
time?: Time<Output>;
|
|
34
34
|
transforms?: Transforms<Output>;
|
|
35
35
|
}
|
|
36
|
-
export
|
|
36
|
+
export type Tokens = BaseTokens<'optional'> & {
|
|
37
37
|
components?: ComponentTokens;
|
|
38
38
|
};
|
|
39
|
-
export
|
|
39
|
+
export type DefaultTokens = Required<BaseTokens<'default'>> & {
|
|
40
40
|
components: DefaultComponentTokens;
|
|
41
41
|
};
|
|
42
42
|
/**
|
|
43
43
|
* The fully setup theme tokens. It has the same shape as Tokens
|
|
44
44
|
* but each token has added fields.
|
|
45
45
|
*/
|
|
46
|
-
export
|
|
46
|
+
export type WebTokens = Required<BaseTokens<'required'>> & {
|
|
47
47
|
components: WebComponentTokens;
|
|
48
48
|
};
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
type ReactNative = 'react-native';
|
|
50
|
+
type BaseReactNativeTokens<Output extends OutputVariantKey = unknown> = {
|
|
51
51
|
colors?: Colors<Output, ReactNative>;
|
|
52
52
|
borderWidths?: BorderWidths<Output, ReactNative>;
|
|
53
53
|
fontSizes?: Omit<FontSizes<Output, ReactNative>, 'xxxs' | 'xxxxl'>;
|
|
@@ -57,7 +57,7 @@ declare type BaseReactNativeTokens<Output extends OutputVariantKey = unknown> =
|
|
|
57
57
|
space?: Omit<Space<Output, ReactNative>, 'xxxs' | 'relative' | 'zero'>;
|
|
58
58
|
time?: Time<Output, ReactNative>;
|
|
59
59
|
};
|
|
60
|
-
export
|
|
60
|
+
export type ReactNativeTokens<Output extends OutputVariantKey> = Output extends 'required' | 'default' ? Required<BaseReactNativeTokens<Output>> : BaseReactNativeTokens<Output>;
|
|
61
61
|
export declare const tokens: DefaultTokens;
|
|
62
62
|
export declare const reactNativeTokens: ReactNativeTokens<'default'>;
|
|
63
63
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, LineHeightValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type LineHeightSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type LineHeights<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<LineHeightSize, LineHeightValue, Output, Platform>;
|
|
4
4
|
export declare const lineHeights: LineHeights<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OpacityValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type OpacityScale = 0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
|
|
3
|
+
export type Opacities<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OpacityScale, OpacityValue<Platform, Output>, Output, Platform>;
|
|
4
4
|
export declare const opacities: Opacities<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OutlineOffsetValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type OutlineOffsetSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type OutlineOffsets<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OutlineOffsetSize, OutlineOffsetValue, Output, Platform>;
|
|
4
4
|
export declare const outlineOffsets: OutlineOffsets<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OutlineWidthValue, OutputVariantKey } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type OutlineWidthSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type OutlineWidths<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OutlineWidthSize, OutlineWidthValue, Output, Platform>;
|
|
4
4
|
export declare const outlineWidths: OutlineWidths<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OutputVariantKey, RadiusValue } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type RadiusSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
|
|
3
|
+
export type Radii<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<RadiusSize, RadiusValue<Platform, Output>, Output, Platform>;
|
|
4
4
|
export declare const radii: Radii<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OutputVariantKey, ShadowValue } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type ShadowSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type Shadows<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<ShadowSize, ShadowValue, Output, Platform>;
|
|
4
4
|
export declare const shadows: Shadows<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DesignTokenValues, OutputVariantKey, SpaceValue } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
4
|
-
|
|
2
|
+
type SpaceSize = 'xxxs' | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
|
|
3
|
+
export type SpaceSizes<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<SpaceSize | 'zero', SpaceValue<Platform>, Output, Platform>;
|
|
4
|
+
type BaseSpace<Output extends OutputVariantKey = unknown, Platform = unknown> = SpaceSizes<Output, Platform> & {
|
|
5
5
|
relative?: DesignTokenValues<SpaceSize | 'full', SpaceValue, Output, Platform>;
|
|
6
6
|
};
|
|
7
|
-
export
|
|
7
|
+
export type Space<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseSpace<Output, Platform>> : BaseSpace<Output, Platform>;
|
|
8
8
|
export declare const space: Space<'default'>;
|
|
9
9
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DesignTokenValues, OutputVariantKey, TimeValue } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type Duration = 'short' | 'medium' | 'long';
|
|
3
|
+
export type Time<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<Duration, TimeValue<Platform, Output>, Output, Platform>;
|
|
4
4
|
export declare const time: Time<'default'>;
|
|
5
5
|
export {};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DesignTokenValues, OutputVariantKey, TransformValue } from './types/designToken';
|
|
2
|
-
|
|
3
|
-
export
|
|
2
|
+
type TransformSize = 'small' | 'medium' | 'large';
|
|
3
|
+
export type BaseTransforms<Output extends OutputVariantKey = unknown, Platform = unknown> = {
|
|
4
4
|
slideX?: DesignTokenValues<TransformSize, TransformValue, Output, Platform>;
|
|
5
5
|
};
|
|
6
|
-
export
|
|
6
|
+
export type Transforms<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseTransforms<Output, Platform>> : BaseTransforms<Output, Platform>;
|
|
7
7
|
export declare const transforms: Transforms<'default'>;
|
|
8
8
|
export {};
|
|
@@ -2,13 +2,13 @@ import { Properties } from 'csstype';
|
|
|
2
2
|
/**
|
|
3
3
|
* a DesignToken can be either an object with a `value` key of `ValueType` or the `ValueType` itself
|
|
4
4
|
*/
|
|
5
|
-
export
|
|
5
|
+
export type DesignToken<ValueType = unknown> = {
|
|
6
6
|
value: ValueType;
|
|
7
7
|
} | ValueType;
|
|
8
8
|
/**
|
|
9
9
|
* A fully setup design token ready to be used in web platform.
|
|
10
10
|
*/
|
|
11
|
-
export
|
|
11
|
+
export type WebDesignToken<ValueType = unknown> = {
|
|
12
12
|
/**
|
|
13
13
|
* Name of the design token
|
|
14
14
|
*/
|
|
@@ -31,63 +31,63 @@ export declare type WebDesignToken<ValueType = unknown> = {
|
|
|
31
31
|
*/
|
|
32
32
|
value: ValueType;
|
|
33
33
|
};
|
|
34
|
-
export
|
|
35
|
-
export
|
|
36
|
-
export
|
|
37
|
-
export
|
|
38
|
-
export
|
|
39
|
-
export
|
|
40
|
-
export
|
|
41
|
-
export
|
|
42
|
-
export
|
|
43
|
-
export
|
|
44
|
-
export
|
|
45
|
-
export
|
|
46
|
-
export
|
|
47
|
-
export
|
|
48
|
-
export
|
|
49
|
-
export
|
|
50
|
-
export
|
|
51
|
-
export
|
|
52
|
-
export
|
|
53
|
-
export
|
|
54
|
-
export
|
|
55
|
-
export
|
|
56
|
-
export
|
|
57
|
-
export
|
|
58
|
-
export
|
|
59
|
-
export
|
|
60
|
-
export
|
|
61
|
-
export
|
|
62
|
-
export
|
|
63
|
-
export
|
|
64
|
-
export
|
|
65
|
-
export
|
|
66
|
-
export
|
|
67
|
-
export
|
|
68
|
-
export
|
|
69
|
-
export
|
|
70
|
-
export
|
|
34
|
+
export type AnimationDurationValue = string;
|
|
35
|
+
export type AnimationTimingFunctionValue = string;
|
|
36
|
+
export type AlignItemsValue = string;
|
|
37
|
+
export type AlignContentValue = string;
|
|
38
|
+
export type BackgroundColorValue = ColorValue;
|
|
39
|
+
export type BorderColorValue = ColorValue;
|
|
40
|
+
export type BorderCollapseValue = string;
|
|
41
|
+
export type BorderRadiusValue = RadiusValue;
|
|
42
|
+
export type BorderStyleValue = string;
|
|
43
|
+
export type BorderWidthValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : SpaceValue : SpaceValue;
|
|
44
|
+
export type BorderValue = string;
|
|
45
|
+
export type BoxSizingValue = string;
|
|
46
|
+
export type BoxShadowValue = ShadowValue;
|
|
47
|
+
export type CaptionSideValue = string;
|
|
48
|
+
export type ColorValue = string;
|
|
49
|
+
export type CursorValue = string;
|
|
50
|
+
export type DisplayValue = string;
|
|
51
|
+
export type FlexDirectionValue = string;
|
|
52
|
+
export type FlexValue = string;
|
|
53
|
+
export type FlexWrapValue = string;
|
|
54
|
+
export type FontSizeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
|
|
55
|
+
export type FontStyleValue = string;
|
|
56
|
+
export type FontValue = string;
|
|
57
|
+
export type FontWeightValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' : string | number : string | number;
|
|
58
|
+
export type GapValue = string;
|
|
59
|
+
export type JustifyContentValue = string;
|
|
60
|
+
export type LineHeightValue = string | number;
|
|
61
|
+
export type ObjectFitValue = string;
|
|
62
|
+
export type OpacityValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
|
|
63
|
+
export type OutlineOffsetValue = string;
|
|
64
|
+
export type OutlineWidthValue = string;
|
|
65
|
+
export type OutlineColorValue = string;
|
|
66
|
+
export type OutlineStyleValue = string;
|
|
67
|
+
export type PositionValue = string;
|
|
68
|
+
export type PointerEventsValue = string;
|
|
69
|
+
export type RadiusValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
|
|
70
|
+
export type ShadowValue = {
|
|
71
71
|
offsetX: string;
|
|
72
72
|
offsetY: string;
|
|
73
73
|
blurRadius: string;
|
|
74
74
|
spreadRadius?: string;
|
|
75
75
|
color: string;
|
|
76
76
|
} | string;
|
|
77
|
-
export
|
|
78
|
-
export
|
|
79
|
-
export
|
|
80
|
-
export
|
|
81
|
-
export
|
|
82
|
-
export
|
|
83
|
-
export
|
|
84
|
-
export
|
|
85
|
-
export
|
|
86
|
-
export
|
|
87
|
-
export
|
|
88
|
-
export
|
|
89
|
-
export
|
|
90
|
-
export
|
|
77
|
+
export type StrokeFilledValue = string;
|
|
78
|
+
export type StrokeEmptyValue = string;
|
|
79
|
+
export type StrokeLinecapValue = string;
|
|
80
|
+
export type StrokeWidthValue = string;
|
|
81
|
+
export type SpaceValue<Platform extends PlatformKey = unknown> = Platform extends 'react-native' ? string | number : string;
|
|
82
|
+
export type TextAlignValue = string;
|
|
83
|
+
export type TimeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
|
|
84
|
+
export type TransformValue = string;
|
|
85
|
+
export type TransitionDurationValue = string;
|
|
86
|
+
export type TransitionPropertyValue = string;
|
|
87
|
+
export type TransitionTimingFunctionValue = string;
|
|
88
|
+
export type VerticalAlignValue = string;
|
|
89
|
+
export type WhiteSpaceValue = string;
|
|
90
|
+
export type WordBreakValue = string;
|
|
91
91
|
/**
|
|
92
92
|
* Mapping of design token value types to style property keys
|
|
93
93
|
*/
|
|
@@ -196,38 +196,38 @@ interface TokenCustomProperties {
|
|
|
196
196
|
}
|
|
197
197
|
interface TokenProperties extends TokenStandardProperties, TokenCustomProperties {
|
|
198
198
|
}
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
export
|
|
199
|
+
type TokenProperty = keyof TokenProperties;
|
|
200
|
+
type Property = Extract<keyof Properties, TokenProperty> | keyof TokenCustomProperties;
|
|
201
|
+
export type OutputVariantKey = 'default' | 'optional' | 'required' | unknown;
|
|
202
202
|
/**
|
|
203
203
|
* Return interface with all types optional for custom theme input
|
|
204
204
|
*/
|
|
205
|
-
|
|
205
|
+
type OptionalDesignTokenProperties<Keys extends Property> = Partial<{
|
|
206
206
|
[Key in Keys]?: DesignToken<TokenProperties[Key]>;
|
|
207
207
|
}>;
|
|
208
208
|
/**
|
|
209
209
|
* Return interface with all types required for strict theme output
|
|
210
210
|
*/
|
|
211
|
-
|
|
211
|
+
type RequiredDesignTokenProperties<Keys extends TokenProperty> = {
|
|
212
212
|
[Key in Keys]: WebDesignToken<TokenProperties[Key]>;
|
|
213
213
|
};
|
|
214
214
|
/**
|
|
215
215
|
* Return interface with all types required for strict theme output
|
|
216
216
|
*/
|
|
217
|
-
|
|
217
|
+
type DefaultDesignTokenProperties<Keys extends TokenProperty> = Required<{
|
|
218
218
|
[Key in Keys]: DesignToken<TokenProperties[Key]>;
|
|
219
219
|
}>;
|
|
220
220
|
/**
|
|
221
221
|
* Utility for creating interfaces for components from supported CSS property keys
|
|
222
222
|
*/
|
|
223
|
-
export
|
|
224
|
-
export
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
223
|
+
export type DesignTokenProperties<Keys extends TokenProperty, Output extends OutputVariantKey = unknown> = Output extends 'required' ? RequiredDesignTokenProperties<Keys> : Output extends 'optional' ? OptionalDesignTokenProperties<Keys> : DefaultDesignTokenProperties<Keys>;
|
|
224
|
+
export type PlatformKey = 'web' | 'react-native' | 'android' | 'ios' | unknown;
|
|
225
|
+
type PropKey = string | number;
|
|
226
|
+
type RequiredTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Record<PropertyValueKey, Platform extends 'react-native' ? PropertyValue : WebDesignToken<PropertyValue>>;
|
|
227
|
+
type OptionalTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Partial<Record<PropertyValueKey, DesignToken<PropertyValue>>>;
|
|
228
|
+
type DefaultTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Required<Record<PropertyValueKey, DesignToken<PropertyValue>>>;
|
|
229
229
|
/**
|
|
230
230
|
* Utility for creating token interfaces in `Theme`
|
|
231
231
|
*/
|
|
232
|
-
export
|
|
232
|
+
export type DesignTokenValues<PropertyValueKey extends PropKey, PropertyValue, Output extends OutputVariantKey = unknown, Platform extends PlatformKey = unknown> = Output extends 'required' ? RequiredTokenValues<PropertyValueKey, PropertyValue, Platform> : Output extends 'optional' ? OptionalTokenValues<PropertyValueKey, PropertyValue, Platform> : DefaultTokenValues<PropertyValueKey, PropertyValue, Platform>;
|
|
233
233
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { DesignTokenProperties } from './designToken';
|
|
2
|
-
export
|
|
2
|
+
export type TypographyTokens<OutputType> = DesignTokenProperties<'fontSize' | 'fontWeight' | 'color', OutputType>;
|
|
@@ -15,7 +15,7 @@ export type { SpaceSizes } from './tokens/space';
|
|
|
15
15
|
* a set of CSS variables in it. A theme should contain
|
|
16
16
|
* everything it needs to render
|
|
17
17
|
*/
|
|
18
|
-
export
|
|
18
|
+
export type Override = SelectorOverride | MediaQueryOverride | BreakpointOverride | ColorModeOverride;
|
|
19
19
|
interface BaseOverride {
|
|
20
20
|
tokens?: PartialDeep<Tokens>;
|
|
21
21
|
}
|
|
@@ -57,7 +57,7 @@ export interface MediaQueryOverride extends BaseOverride {
|
|
|
57
57
|
export interface SelectorOverride extends BaseOverride {
|
|
58
58
|
selector: string;
|
|
59
59
|
}
|
|
60
|
-
|
|
60
|
+
type ColorMode = 'light' | 'dark';
|
|
61
61
|
/**
|
|
62
62
|
* This creates a color mode override, where the color mode is 'light' or 'dark'.
|
|
63
63
|
* Note: there is no 'system' here.
|
|
@@ -14,16 +14,16 @@ export declare function cssNameTransform({ path }: NameTransformProps): string;
|
|
|
14
14
|
*/
|
|
15
15
|
export declare function isDesignToken(value: unknown): value is WebDesignToken;
|
|
16
16
|
export declare function isShadowTokenObject(value: unknown): value is ShadowValue & object;
|
|
17
|
-
|
|
17
|
+
type SetupTokensProps = {
|
|
18
18
|
tokens?: Record<string | number, any>;
|
|
19
19
|
path?: Array<string>;
|
|
20
20
|
setupToken: SetupToken;
|
|
21
21
|
};
|
|
22
|
-
export
|
|
22
|
+
export type SetupToken<ReturnType = any> = (args: {
|
|
23
23
|
token: BaseDesignToken;
|
|
24
24
|
path: Array<string>;
|
|
25
25
|
}) => ReturnType;
|
|
26
|
-
|
|
26
|
+
type BaseDesignToken = {
|
|
27
27
|
value: string | number;
|
|
28
28
|
};
|
|
29
29
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export type InputEventType = 'blur' | 'change';
|
|
2
|
+
export type ValidationMode = 'onBlur' | 'onChange' | 'onTouched';
|
|
3
3
|
export interface ValidatorOptions {
|
|
4
4
|
validationMode: ValidationMode;
|
|
5
5
|
validator: (value: string) => boolean;
|