From dcad57465742dd4a5e1bf0d2e75bf1f39b7edb36 Mon Sep 17 00:00:00 2001 From: Yauhen Date: Wed, 5 Jun 2019 12:21:06 +0300 Subject: [PATCH] refactor(mapping/theme): theme variables refactor --- src/framework/ui/button/button.component.tsx | 6 +- src/framework/ui/input/input.component.tsx | 2 +- src/framework/ui/radio/radio.spec.tsx.snap | 136 ++++----- src/framework/ui/support/tests/mapping.json | 286 +++++++++--------- src/framework/ui/support/tests/theme.json | 156 +++++----- src/framework/ui/text/text.component.tsx | 2 +- src/playground/package-lock.json | 177 ++++++----- .../src/ui/screen/buttonGroup/type.ts | 6 +- src/playground/src/ui/screen/checkbox/type.ts | 4 - .../ui/screen/common/showcase.component.tsx | 6 +- .../common/showcaseSettings.component.tsx | 2 +- src/playground/src/ui/screen/input/type.tsx | 12 + .../screen/modal/modalShowcase.component.tsx | 4 +- 13 files changed, 412 insertions(+), 387 deletions(-) diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx index dda88adc4..20380ab79 100644 --- a/src/framework/ui/button/button.component.tsx +++ b/src/framework/ui/button/button.component.tsx @@ -48,10 +48,12 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * @property {boolean} disabled - Determines whether component is disabled. Default is false. * * @property {string} status - Determines the status of the component. - * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'white'. Default is 'primary'. + * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'white'. + * Default is 'primary'. * * @property {string} size - Determines the size of the component. - * Can be 'tiny' | 'small' | 'medium' | 'large' | 'giant'. Default is 'medium'. + * Can be 'tiny' | 'small' | 'medium' | 'large' | 'giant'. + * Default is 'medium'. * * @property {string} children - Determines text of the component. * diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx index 72fd2296f..cc00fa481 100644 --- a/src/framework/ui/input/input.component.tsx +++ b/src/framework/ui/input/input.component.tsx @@ -61,7 +61,7 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps; * @property {boolean} disabled - Determines whether component is disabled. By default is false. * * @property {string} status - Determines the status of the component. - * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'white'. + * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger'. * By default status is 'primary'. * * @property {string} label - Determines label of the component. diff --git a/src/framework/ui/radio/radio.spec.tsx.snap b/src/framework/ui/radio/radio.spec.tsx.snap index 20c0ee0e8..d036de186 100644 --- a/src/framework/ui/radio/radio.spec.tsx.snap +++ b/src/framework/ui/radio/radio.spec.tsx.snap @@ -91,8 +91,8 @@ exports[`@radio: matches snapshot default 1`] = ` style={ Object { "alignItems": "center", - "backgroundColor": "#EDF0F4", - "borderColor": "#DDE1EB", + "backgroundColor": "#EDF1F7", + "borderColor": "#E4E9F2", "borderRadius": 12, "borderWidth": 1, "height": 24, @@ -102,44 +102,44 @@ exports[`@radio: matches snapshot default 1`] = ` } theme={ Object { - "background-color-alternative-1": "$color-basic-800", - "background-color-alternative-2": "$color-basic-900", - "background-color-alternative-3": "$color-basic-1000", - "background-color-alternative-4": "$color-basic-1100", - "background-color-default-1": "$color-basic-100", - "background-color-default-2": "$color-basic-200", - "background-color-default-3": "$color-basic-300", - "background-color-default-4": "$color-basic-400", - "background-color-primary-1": "$color-primary-500", - "background-color-primary-2": "$color-primary-600", - "background-color-primary-3": "$color-primary-700", - "background-color-primary-4": "$color-primary-800", - "border-color-alternative-1": "$color-basic-800", - "border-color-alternative-2": "$color-basic-900", - "border-color-alternative-3": "$color-basic-1000", - "border-color-alternative-4": "$color-basic-1100", - "border-color-alternative-5": "$color-basic-1100", - "border-color-default-1": "$color-basic-100", - "border-color-default-2": "$color-basic-200", - "border-color-default-3": "$color-basic-300", - "border-color-default-4": "$color-basic-400", - "border-color-default-5": "$color-basic-500", - "border-color-primary-1": "$color-primary-500", - "border-color-primary-2": "$color-primary-600", - "border-color-primary-3": "$color-primary-700", - "border-color-primary-4": "$color-primary-800", - "border-color-primary-5": "$color-primary-900", + "background-alternative-color-1": "$color-basic-800", + "background-alternative-color-2": "$color-basic-900", + "background-alternative-color-3": "$color-basic-1000", + "background-alternative-color-4": "$color-basic-1100", + "background-basic-color-1": "$color-basic-100", + "background-basic-color-2": "$color-basic-200", + "background-basic-color-3": "$color-basic-300", + "background-basic-color-4": "$color-basic-400", + "background-primary-color-1": "$color-primary-500", + "background-primary-color-2": "$color-primary-600", + "background-primary-color-3": "$color-primary-700", + "background-primary-color-4": "$color-primary-800", + "border-alternative-color-1": "$color-basic-800", + "border-alternative-color-2": "$color-basic-900", + "border-alternative-color-3": "$color-basic-1000", + "border-alternative-color-4": "$color-basic-1100", + "border-alternative-color-5": "$color-basic-1100", + "border-basic-color-1": "$color-basic-100", + "border-basic-color-2": "$color-basic-200", + "border-basic-color-3": "$color-basic-300", + "border-basic-color-4": "$color-basic-400", + "border-basic-color-5": "$color-basic-500", + "border-primary-color-1": "$color-primary-500", + "border-primary-color-2": "$color-primary-600", + "border-primary-color-3": "$color-primary-700", + "border-primary-color-4": "$color-primary-800", + "border-primary-color-5": "$color-primary-900", "color-basic-100": "#FFFFFF", - "color-basic-1000": "#1A1F33", - "color-basic-1100": "#131729", - "color-basic-200": "#F7F8FA", - "color-basic-300": "#EDF0F4", - "color-basic-400": "#DDE1EB", - "color-basic-500": "#C8CEDB", - "color-basic-600": "#A7B0C1", - "color-basic-700": "#657084", - "color-basic-800": "#2E384F", - "color-basic-900": "#232A40", + "color-basic-1000": "#151A30", + "color-basic-1100": "#101426", + "color-basic-200": "#F7F9FC", + "color-basic-300": "#EDF1F7", + "color-basic-400": "#E4E9F2", + "color-basic-500": "#C5CEE0", + "color-basic-600": "#8F9BB3", + "color-basic-700": "#2E3A59", + "color-basic-800": "#222B45", + "color-basic-900": "#1A2138", "color-basic-active": "$color-basic-400", "color-basic-default": "$color-basic-200", "color-basic-disabled": "$color-basic-300", @@ -175,10 +175,10 @@ exports[`@radio: matches snapshot default 1`] = ` "color-primary-300": "#A6C1FF", "color-primary-400": "#598BFF", "color-primary-500": "#3366FF", - "color-primary-600": "#284DE0", - "color-primary-700": "#2541CC", - "color-primary-800": "#192F9E", - "color-primary-900": "#14236E", + "color-primary-600": "#274BDB", + "color-primary-700": "#1A34B8", + "color-primary-800": "#102694", + "color-primary-900": "#091C7A", "color-primary-active": "$color-primary-600", "color-primary-default": "$color-primary-500", "color-primary-disabled": "$color-primary-200", @@ -227,32 +227,32 @@ exports[`@radio: matches snapshot default 1`] = ` "color-warning-default": "$color-warning-500", "color-warning-disabled": "$color-warning-300", "color-warning-focus": "$color-warning-700", - "icon-color-active": "$color-primary-500", - "icon-color-control": "$color-basic-100", - "icon-color-default": "$color-basic-700", - "icon-color-disabled": "$color-basic-400", - "icon-color-hint": "$color-basic-500", + "icon-active-color": "$color-primary-500", + "icon-basic-color": "$color-basic-700", + "icon-control-color": "$color-basic-100", + "icon-disabled-color": "$color-basic-400", + "icon-hint-color": "$color-basic-500", "outline-color": "$color-basic-400", - "text-color-alternative": "$color-basic-100", - "text-color-control": "$color-basic-100", - "text-color-danger": "$color-danger-default", - "text-color-danger-active": "$color-danger-active", - "text-color-danger-disabled": "$color-danger-disabled", - "text-color-default": "$color-basic-1000", - "text-color-disabled": "$color-basic-500", - "text-color-hint": "$color-basic-600", - "text-color-info": "$color-info-default", - "text-color-info-active": "$color-info-active", - "text-color-info-disabled": "$color-info-disabled", - "text-color-primary": "$color-primary-default", - "text-color-primary-active": "$color-primary-active", - "text-color-primary-disabled": "$color-primary-disabled", - "text-color-success": "$color-success-default", - "text-color-success-active": "$color-success-active", - "text-color-success-disabled": "$color-success-disabled", - "text-color-warning": "$color-warning-default", - "text-color-warning-active": "$color-warning-active", - "text-color-warning-disabled": "$color-warning-disabled", + "text-alternate-color": "$color-basic-100", + "text-basic-color": "$color-basic-900", + "text-control-color": "$color-basic-100", + "text-danger-active-color": "$color-danger-active", + "text-danger-color": "$color-danger-default", + "text-danger-disabled-color": "$color-danger-disabled", + "text-disabled-color": "$color-basic-500", + "text-hint-color": "$color-basic-600", + "text-info-active-color": "$color-info-active", + "text-info-color": "$color-info-default", + "text-info-disabled-color": "$color-info-disabled", + "text-primary-active-color": "$color-primary-active", + "text-primary-color": "$color-primary-default", + "text-primary-disabled-color": "$color-primary-disabled", + "text-success-active-color": "$color-success-active", + "text-success-color": "$color-success-default", + "text-success-disabled-color": "$color-success-disabled", + "text-warning-active-color": "$color-warning-active", + "text-warning-color": "$color-warning-default", + "text-warning-disabled-color": "$color-warning-disabled", } } > diff --git a/src/framework/ui/support/tests/mapping.json b/src/framework/ui/support/tests/mapping.json index 45ae3953c..f4f6267d0 100644 --- a/src/framework/ui/support/tests/mapping.json +++ b/src/framework/ui/support/tests/mapping.json @@ -203,7 +203,7 @@ "state": { "selected": { "iconTintColor": "color-primary-default", - "textColor": "text-color-primary" + "textColor": "text-primary-color" } } } @@ -252,7 +252,7 @@ "mapping": { "minHeight": 56, "paddingVertical": 4, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "indicatorHeight": 4, "indicatorBackgroundColor": "color-primary-default" } @@ -389,15 +389,15 @@ "mapping": { "borderRadius": 4, "borderWidth": 2, - "textColor": "text-color-control", - "iconTintColor": "text-color-control", + "textColor": "text-control-color", + "iconTintColor": "text-control-color", "iconMarginHorizontal": 4, "state": { "disabled": { - "borderColor": "border-color-default-3", - "backgroundColor": "border-color-default-3", - "textColor": "text-color-disabled", - "iconTintColor": "text-color-disabled" + "borderColor": "border-basic-color-3", + "backgroundColor": "border-basic-color-3", + "textColor": "text-disabled-color", + "iconTintColor": "text-disabled-color" } } }, @@ -543,69 +543,69 @@ "mapping": { "state": { "disabled": { - "backgroundColor": "background-color-default-2" + "backgroundColor": "background-basic-color-2" } } }, "variantGroups": { "status": { "primary": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-primary", - "iconTintColor": "text-color-primary", + "backgroundColor": "background-basic-color-2", + "textColor": "text-primary-color", + "iconTintColor": "text-primary-color", "state": { "active": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-primary-active", - "iconTintColor": "text-color-primary-active" + "backgroundColor": "background-basic-color-2", + "textColor": "text-primary-active-color", + "iconTintColor": "text-primary-active-color" } } }, "success": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-success", - "iconTintColor": "text-color-success", + "backgroundColor": "background-basic-color-2", + "textColor": "text-success-color", + "iconTintColor": "text-success-color", "state": { "active": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-success-active", - "iconTintColor": "text-color-success-active" + "backgroundColor": "background-basic-color-2", + "textColor": "text-success-active-color", + "iconTintColor": "text-success-active-color" } } }, "info": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-info", - "iconTintColor": "text-color-info", + "backgroundColor": "background-basic-color-2", + "textColor": "text-info-color", + "iconTintColor": "text-info-color", "state": { "active": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-info-active", - "iconTintColor": "text-color-info-active" + "backgroundColor": "background-basic-color-2", + "textColor": "text-info-active-color", + "iconTintColor": "text-info-active-color" } } }, "warning": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-warning", - "iconTintColor": "text-color-warning", + "backgroundColor": "background-basic-color-2", + "textColor": "text-warning-color", + "iconTintColor": "text-warning-color", "state": { "active": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-warning-active", - "iconTintColor": "text-color-warning-active" + "backgroundColor": "background-basic-color-2", + "textColor": "text-warning-active-color", + "iconTintColor": "text-warning-active-color" } } }, "danger": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-danger", - "iconTintColor": "text-color-danger", + "backgroundColor": "background-basic-color-2", + "textColor": "text-danger-color", + "iconTintColor": "text-danger-color", "state": { "active": { - "backgroundColor": "background-color-default-2", - "textColor": "text-color-danger-active", - "iconTintColor": "text-color-danger-active" + "backgroundColor": "background-basic-color-2", + "textColor": "text-danger-active-color", + "iconTintColor": "text-danger-active-color" } } }, @@ -618,7 +618,7 @@ "disabled": { "backgroundColor": "transparent", "borderColor": "transparent", - "textColor": "text-color-primary-disabled" + "textColor": "text-primary-disabled-color" } } } @@ -638,14 +638,14 @@ "primary": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-primary", - "iconTintColor": "text-color-primary", + "textColor": "text-primary-color", + "iconTintColor": "text-primary-color", "state": { "active": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-primary-active", - "iconTintColor": "text-color-primary-active" + "textColor": "text-primary-active-color", + "iconTintColor": "text-primary-active-color" }, "disabled": { "borderColor": "transparent" @@ -655,14 +655,14 @@ "success": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-success", - "iconTintColor": "text-color-success", + "textColor": "text-success-color", + "iconTintColor": "text-success-color", "state": { "active": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-success-active", - "iconTintColor": "text-color-success-active" + "textColor": "text-success-active-color", + "iconTintColor": "text-success-active-color" }, "disabled": { "borderColor": "transparent" @@ -672,14 +672,14 @@ "info": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-info", - "iconTintColor": "text-color-info", + "textColor": "text-info-color", + "iconTintColor": "text-info-color", "state": { "active": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-info-active", - "iconTintColor": "text-color-info-active" + "textColor": "text-info-active-color", + "iconTintColor": "text-info-active-color" }, "disabled": { "borderColor": "transparent" @@ -689,14 +689,14 @@ "warning": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-warning", - "iconTintColor": "text-color-warning", + "textColor": "text-warning-color", + "iconTintColor": "text-warning-color", "state": { "active": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-warning-active", - "iconTintColor": "text-color-warning-active" + "textColor": "text-warning-active-color", + "iconTintColor": "text-warning-active-color" }, "disabled": { "borderColor": "transparent" @@ -706,14 +706,14 @@ "danger": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-danger", - "iconTintColor": "text-color-danger", + "textColor": "text-danger-color", + "iconTintColor": "text-danger-color", "state": { "active": { "borderColor": "transparent", "backgroundColor": "transparent", - "textColor": "text-color-danger-active", - "iconTintColor": "text-color-danger-active" + "textColor": "text-danger-active-color", + "iconTintColor": "text-danger-active-color" }, "disabled": { "borderColor": "transparent" @@ -728,7 +728,7 @@ }, "disabled": { "backgroundColor": "transparent", - "textColor": "text-color-primary-disabled" + "textColor": "text-primary-disabled-color" } } } @@ -823,7 +823,7 @@ }, "status": { "primary": { - "dividerBackgroundColor": "border-color-primary-2" + "dividerBackgroundColor": "border-primary-color-2" }, "success": { "dividerBackgroundColor": "border-color-success-2" @@ -998,9 +998,9 @@ "mapping": { "borderWidth": 1, "borderRadius": 3, - "backgroundColor": "background-color-default-3", - "borderColor": "border-color-default-4", - "textColor": "text-color-default", + "backgroundColor": "background-basic-color-3", + "borderColor": "border-basic-color-4", + "textColor": "text-basic-color", "iconTintColor": "transparent", "outlineBorderRadius": 6, "outlineBackgroundColor": "transparent", @@ -1016,26 +1016,26 @@ "textMarginHorizontal": 12, "state": { "active": { - "borderColor": "border-color-default-4", + "borderColor": "border-basic-color-4", "outlineBackgroundColor": "outline-color" }, "checked": { "borderColor": "color-primary-default", "backgroundColor": "color-primary-default", - "iconTintColor": "text-color-control" + "iconTintColor": "text-control-color" }, "checked.active": { "borderColor": "color-primary-focus" }, "indeterminate": { - "iconTintColor": "text-color-control", + "iconTintColor": "text-control-color", "iconHeight": 3, "iconBorderRadius": 1.5 }, "disabled": { - "borderColor": "border-color-default-3", - "backgroundColor": "background-color-default-2", - "textColor": "text-color-disabled" + "borderColor": "border-basic-color-3", + "backgroundColor": "background-basic-color-2", + "textColor": "text-disabled-color" } } }, @@ -1287,43 +1287,43 @@ "minHeight": 48, "borderRadius": 4, "borderWidth": 2, - "borderColor": "border-color-default-3", - "backgroundColor": "background-color-default-2", + "borderColor": "border-basic-color-3", + "backgroundColor": "background-basic-color-2", "textMarginHorizontal": 8, "textFontSize": "text-subtitle-1-font-size", "textLineHeight": "text-subtitle-1-line-height", "textFontWeight": "normal", - "textColor": "text-color-hint", - "placeholderColor": "text-color-hint", + "textColor": "text-hint-color", + "placeholderColor": "text-hint-color", "iconWidth": 24, "iconHeight": 24, "iconMarginHorizontal": 8, - "iconTintColor": "icon-color-hint", - "labelColor": "text-color-hint", + "iconTintColor": "icon-hint-color", + "labelColor": "text-hint-color", "labelFontSize": "text-label-font-size", "labelLineHeight": "text-label-line-height", "labelFontWeight": "text-label-font-weight", "labelMarginBottom": 4, "captionMarginTop": 4, - "captionColor": "text-color-hint", + "captionColor": "text-hint-color", "captionFontSize": "text-caption-1-font-size", "captionLineHeight": "text-caption-1-line-height", "captionFontWeight": "text-caption-1-font-weight", "captionIconWidth": 10, "captionIconHeight": 10, "captionIconMarginRight": 8, - "captionIconTintColor": "icon-color-hint", + "captionIconTintColor": "icon-hint-color", "state": { "focused": { - "textColor": "text-color-default", - "borderColor": "border-color-primary-1", - "iconTintColor": "icon-color-active" + "textColor": "text-basic-color", + "borderColor": "border-primary-color-1", + "iconTintColor": "icon-active-color" }, "disabled": { - "borderColor": "border-color-default-3", - "textColor": "text-color-disabled", - "placeholderColor": "text-color-disabled", - "iconTintColor": "icon-color-disabled" + "borderColor": "border-basic-color-3", + "textColor": "text-disabled-color", + "placeholderColor": "text-disabled-color", + "iconTintColor": "icon-disabled-color" } } }, @@ -1441,16 +1441,16 @@ "variantGroups": { "level": { "1": { - "backgroundColor": "background-color-default-1" + "backgroundColor": "background-basic-color-1" }, "2": { - "backgroundColor": "background-color-default-2" + "backgroundColor": "background-basic-color-2" }, "3": { - "backgroundColor": "background-color-default-3" + "backgroundColor": "background-basic-color-3" }, "4": { - "backgroundColor": "background-color-default-4" + "backgroundColor": "background-basic-color-4" } } } @@ -1476,7 +1476,7 @@ "appearances": { "default": { "mapping": { - "backgroundColor": "background-color-default-2" + "backgroundColor": "background-basic-color-2" } } } @@ -1559,25 +1559,25 @@ "mapping": { "paddingHorizontal": 8, "paddingVertical": 8, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "iconWidth": 40, "iconHeight": 40, "iconMarginHorizontal": 8, - "iconTintColor": "text-color-hint", + "iconTintColor": "text-hint-color", "titleMarginHorizontal": 8, "titleFontSize": "text-subtitle-2-font-size", "titleFontWeight": "text-subtitle-2-font-weight", "titleLineHeight": "text-subtitle-2-line-height", - "titleColor": "text-color-default", + "titleColor": "text-basic-color", "descriptionMarginHorizontal": 8, "descriptionFontSize": "text-caption-1-font-size", "descriptionFontWeight": "text-caption-1-font-weight", "descriptionLineHeight": "text-caption-1-line-height", - "descriptionColor": "text-color-hint", + "descriptionColor": "text-hint-color", "accessoryMarginHorizontal": 8, "state": { "active": { - "backgroundColor": "background-color-default-3" + "backgroundColor": "background-basic-color-3" } } } @@ -1616,9 +1616,9 @@ "default": { "mapping": { "borderRadius": 12, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "dividerHeight": 1, - "dividerBackgroundColor": "border-color-default-3", + "dividerBackgroundColor": "border-basic-color-3", "indicatorBackgroundColor": "transparent" } } @@ -1694,19 +1694,19 @@ "textFontSize": "text-subtitle-2-font-size", "textLineHeight": "text-subtitle-2-line-height", "textFontWeight": "text-subtitle-2-font-weight", - "textColor": "text-color-default", + "textColor": "text-basic-color", "iconWidth": 24, "iconHeight": 24, "iconMarginHorizontal": 8, - "iconTintColor": "text-color-default", + "iconTintColor": "text-basic-color", "state": { "active": { - "textColor": "text-color-primary", - "iconTintColor": "text-color-primary" + "textColor": "text-primary-color", + "iconTintColor": "text-primary-color" }, "disabled": { - "textColor": "text-color-disabled", - "iconTintColor": "text-color-disabled" + "textColor": "text-disabled-color", + "iconTintColor": "text-disabled-color" } } } @@ -1757,10 +1757,10 @@ "minHeight": 32, "maxWidth": 256, "borderRadius": 8, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "indicatorWidth": 6, "indicatorHeight": 6, - "indicatorBackgroundColor": "background-color-default-1" + "indicatorBackgroundColor": "background-basic-color-1" } } } @@ -1873,9 +1873,9 @@ "default": { "mapping": { "borderWidth": 1, - "backgroundColor": "background-color-default-3", - "borderColor": "border-color-default-4", - "textColor": "text-color-default", + "backgroundColor": "background-basic-color-3", + "borderColor": "border-basic-color-4", + "textColor": "text-basic-color", "iconTintColor": "transparent", "outlineBackgroundColor": "transparent", "width": 24, @@ -1893,7 +1893,7 @@ "textFontWeight": "text-subtitle-2-font-weight", "state": { "active": { - "borderColor": "border-color-default-4", + "borderColor": "border-basic-color-4", "outlineBackgroundColor": "outline-color" }, "checked": { @@ -1901,16 +1901,16 @@ "iconTintColor": "color-primary-default" }, "disabled": { - "backgroundColor": "background-color-default-2", - "borderColor": "border-color-default-3", - "textColor": "text-color-disabled" + "backgroundColor": "background-basic-color-2", + "borderColor": "border-basic-color-3", + "textColor": "text-disabled-color" }, "checked.active": { "borderColor": "color-primary-focus" }, "checked.disabled": { - "iconTintColor": "background-color-default-4", - "textColor": "text-color-disabled" + "iconTintColor": "background-basic-color-4", + "textColor": "text-disabled-color" } } }, @@ -2073,15 +2073,15 @@ "textFontSize": 14, "textLineHeight": 16, "textFontWeight": "bold", - "textColor": "text-color-hint", + "textColor": "text-hint-color", "iconWidth": 24, "iconHeight": 24, "iconMarginVertical": 2, - "iconTintColor": "text-color-hint", + "iconTintColor": "text-hint-color", "state": { "selected": { - "textColor": "text-color-primary", - "iconTintColor": "text-color-primary" + "textColor": "text-primary-color", + "iconTintColor": "text-primary-color" } } } @@ -2120,7 +2120,7 @@ "default": { "mapping": { "paddingVertical": 4, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "indicatorHeight": 4, "indicatorBorderRadius": 2, "indicatorBackgroundColor": "color-primary-default" @@ -2227,7 +2227,7 @@ "appearances": { "default": { "mapping": { - "color": "text-color-default" + "color": "text-basic-color" }, "variantGroups": { "category": { @@ -2299,31 +2299,31 @@ }, "status": { "primary": { - "color": "text-color-primary" + "color": "text-primary-color" }, "success": { - "color": "text-color-success" + "color": "text-success-color" }, "info": { - "color": "text-color-info" + "color": "text-info-color" }, "warning": { - "color": "text-color-warning" + "color": "text-warning-color" }, "danger": { - "color": "text-color-danger" + "color": "text-danger-color" } } } }, "alternative": { "mapping": { - "color": "text-color-alternative" + "color": "text-alternate-color" } }, "hint": { "mapping": { - "color": "text-color-hint" + "color": "text-hint-color" } } } @@ -2449,21 +2449,21 @@ "appearances": { "default": { "mapping": { - "borderColor": "border-color-default-3", - "backgroundColor": "background-color-default-2", - "thumbBackgroundColor": "background-color-default-1", + "borderColor": "border-basic-color-3", + "backgroundColor": "background-basic-color-2", + "thumbBackgroundColor": "background-basic-color-1", "outlineBackgroundColor": "transparent", "state": { "active": { - "borderColor": "border-color-default-4", + "borderColor": "border-basic-color-4", "outlineBackgroundColor": "outline-color" }, "disabled": { - "borderColor": "border-color-default-4", - "backgroundColor": "background-color-default-3" + "borderColor": "border-basic-color-4", + "backgroundColor": "background-basic-color-3" }, "checked.disabled": { - "iconTintColor": "background-color-default-4" + "iconTintColor": "background-basic-color-4" } } }, @@ -2672,17 +2672,17 @@ "paddingHorizontal": 16, "paddingVertical": 8, "borderRadius": 4, - "backgroundColor": "background-color-alternative-3", - "indicatorBackgroundColor": "background-color-alternative-3", + "backgroundColor": "background-alternative-color-3", + "indicatorBackgroundColor": "background-alternative-color-3", "iconWidth": 16, "iconHeight": 16, "iconMarginHorizontal": 4, - "iconTintColor": "text-color-alternative", + "iconTintColor": "text-alternate-color", "textMarginHorizontal": 4, "textFontSize": "text-caption-2-font-size", "textLineHeight": "text-caption-2-line-height", "textFontWeight": "text-caption-2-font-weight", - "textColor": "text-color-alternative" + "textColor": "text-alternate-color" } } } @@ -2757,15 +2757,15 @@ "minHeight": 56, "paddingVertical": 8, "paddingHorizontal": 8, - "backgroundColor": "background-color-default-1", + "backgroundColor": "background-basic-color-1", "titleFontSize": "text-subtitle-1-font-size", "titleLineHeight": "text-subtitle-1-line-height", "titleFontWeight": "text-subtitle-1-font-weight", - "titleColor": "text-color-default", + "titleColor": "text-basic-color", "subtitleFontSize": "text-caption-1-font-size", "subtitleLineHeight": "text-caption-1-line-height", "subtitleFontWeight": "text-caption-1-font-weight", - "subtitleColor": "text-color-hint" + "subtitleColor": "text-hint-color" }, "variantGroups": { "alignment": { @@ -2819,7 +2819,7 @@ "iconWidth": 24, "iconHeight": 24, "iconMarginHorizontal": 8, - "iconTintColor": "text-color-default", + "iconTintColor": "text-basic-color", "state": { "active": { "iconTintColor": "color-basic-900" diff --git a/src/framework/ui/support/tests/theme.json b/src/framework/ui/support/tests/theme.json index 2e09a4305..0c7662f67 100644 --- a/src/framework/ui/support/tests/theme.json +++ b/src/framework/ui/support/tests/theme.json @@ -1,25 +1,25 @@ { "color-basic-100": "#FFFFFF", - "color-basic-200": "#F7F8FA", - "color-basic-300": "#EDF0F4", - "color-basic-400": "#DDE1EB", - "color-basic-500": "#C8CEDB", - "color-basic-600": "#A7B0C1", - "color-basic-700": "#657084", - "color-basic-800": "#2E384F", - "color-basic-900": "#232A40", - "color-basic-1000": "#1A1F33", - "color-basic-1100": "#131729", + "color-basic-200": "#F7F9FC", + "color-basic-300": "#EDF1F7", + "color-basic-400": "#E4E9F2", + "color-basic-500": "#C5CEE0", + "color-basic-600": "#8F9BB3", + "color-basic-700": "#2E3A59", + "color-basic-800": "#222B45", + "color-basic-900": "#1A2138", + "color-basic-1000": "#151A30", + "color-basic-1100": "#101426", "color-primary-100": "#F2F6FF", "color-primary-200": "#D9E4FF", "color-primary-300": "#A6C1FF", "color-primary-400": "#598BFF", "color-primary-500": "#3366FF", - "color-primary-600": "#284DE0", - "color-primary-700": "#2541CC", - "color-primary-800": "#192F9E", - "color-primary-900": "#14236E", + "color-primary-600": "#274BDB", + "color-primary-700": "#1A34B8", + "color-primary-800": "#102694", + "color-primary-900": "#091C7A", "color-secondary-100": "#F7F2FF", "color-secondary-200": "#E0D1FF", @@ -111,70 +111,70 @@ "color-danger-focus": "$color-danger-700", "color-danger-disabled": "$color-danger-300", - "background-color-default-1": "$color-basic-100", - "background-color-default-2": "$color-basic-200", - "background-color-default-3": "$color-basic-300", - "background-color-default-4": "$color-basic-400", - - "background-color-alternative-1": "$color-basic-800", - "background-color-alternative-2": "$color-basic-900", - "background-color-alternative-3": "$color-basic-1000", - "background-color-alternative-4": "$color-basic-1100", - - "background-color-primary-1": "$color-primary-500", - "background-color-primary-2": "$color-primary-600", - "background-color-primary-3": "$color-primary-700", - "background-color-primary-4": "$color-primary-800", - - "border-color-default-1": "$color-basic-100", - "border-color-default-2": "$color-basic-200", - "border-color-default-3": "$color-basic-300", - "border-color-default-4": "$color-basic-400", - "border-color-default-5": "$color-basic-500", - - "border-color-alternative-1": "$color-basic-800", - "border-color-alternative-2": "$color-basic-900", - "border-color-alternative-3": "$color-basic-1000", - "border-color-alternative-4": "$color-basic-1100", - "border-color-alternative-5": "$color-basic-1100", - - "border-color-primary-1": "$color-primary-500", - "border-color-primary-2": "$color-primary-600", - "border-color-primary-3": "$color-primary-700", - "border-color-primary-4": "$color-primary-800", - "border-color-primary-5": "$color-primary-900", - - "text-color-default": "$color-basic-1000", - "text-color-alternative": "$color-basic-100", - "text-color-control": "$color-basic-100", - "text-color-disabled": "$color-basic-500", - "text-color-hint": "$color-basic-600", - - "text-color-primary": "$color-primary-default", - "text-color-primary-active": "$color-primary-active", - "text-color-primary-disabled": "$color-primary-disabled", - - "text-color-success": "$color-success-default", - "text-color-success-active": "$color-success-active", - "text-color-success-disabled": "$color-success-disabled", - - "text-color-info": "$color-info-default", - "text-color-info-active": "$color-info-active", - "text-color-info-disabled": "$color-info-disabled", - - "text-color-warning": "$color-warning-default", - "text-color-warning-active": "$color-warning-active", - "text-color-warning-disabled": "$color-warning-disabled", - - "text-color-danger": "$color-danger-default", - "text-color-danger-active": "$color-danger-active", - "text-color-danger-disabled": "$color-danger-disabled", - - "icon-color-default": "$color-basic-700", - "icon-color-active": "$color-primary-500", - "icon-color-control": "$color-basic-100", - "icon-color-disabled": "$color-basic-400", - "icon-color-hint": "$color-basic-500", + "background-basic-color-1": "$color-basic-100", + "background-basic-color-2": "$color-basic-200", + "background-basic-color-3": "$color-basic-300", + "background-basic-color-4": "$color-basic-400", + + "background-alternative-color-1": "$color-basic-800", + "background-alternative-color-2": "$color-basic-900", + "background-alternative-color-3": "$color-basic-1000", + "background-alternative-color-4": "$color-basic-1100", + + "background-primary-color-1": "$color-primary-500", + "background-primary-color-2": "$color-primary-600", + "background-primary-color-3": "$color-primary-700", + "background-primary-color-4": "$color-primary-800", + + "border-basic-color-1": "$color-basic-100", + "border-basic-color-2": "$color-basic-200", + "border-basic-color-3": "$color-basic-300", + "border-basic-color-4": "$color-basic-400", + "border-basic-color-5": "$color-basic-500", + + "border-alternative-color-1": "$color-basic-800", + "border-alternative-color-2": "$color-basic-900", + "border-alternative-color-3": "$color-basic-1000", + "border-alternative-color-4": "$color-basic-1100", + "border-alternative-color-5": "$color-basic-1100", + + "border-primary-color-1": "$color-primary-500", + "border-primary-color-2": "$color-primary-600", + "border-primary-color-3": "$color-primary-700", + "border-primary-color-4": "$color-primary-800", + "border-primary-color-5": "$color-primary-900", + + "text-basic-color": "$color-basic-900", + "text-alternate-color": "$color-basic-100", + "text-control-color": "$color-basic-100", + "text-disabled-color": "$color-basic-500", + "text-hint-color": "$color-basic-600", + + "text-primary-color": "$color-primary-default", + "text-primary-active-color": "$color-primary-active", + "text-primary-disabled-color": "$color-primary-disabled", + + "text-success-color": "$color-success-default", + "text-success-active-color": "$color-success-active", + "text-success-disabled-color": "$color-success-disabled", + + "text-info-color": "$color-info-default", + "text-info-active-color": "$color-info-active", + "text-info-disabled-color": "$color-info-disabled", + + "text-warning-color": "$color-warning-default", + "text-warning-active-color": "$color-warning-active", + "text-warning-disabled-color": "$color-warning-disabled", + + "text-danger-color": "$color-danger-default", + "text-danger-active-color": "$color-danger-active", + "text-danger-disabled-color": "$color-danger-disabled", + + "icon-basic-color": "$color-basic-700", + "icon-active-color": "$color-primary-500", + "icon-control-color": "$color-basic-100", + "icon-disabled-color": "$color-basic-400", + "icon-hint-color": "$color-basic-500", "outline-color": "$color-basic-400" } diff --git a/src/framework/ui/text/text.component.tsx b/src/framework/ui/text/text.component.tsx index abf288c56..62070d390 100644 --- a/src/framework/ui/text/text.component.tsx +++ b/src/framework/ui/text/text.component.tsx @@ -30,7 +30,7 @@ export type TextProps = StyledComponentProps & RNTextProps & ComponentProps; * @extends React.Component * * @property {string} status - Determines the status of the component. - * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'white'. + * Can be 'primary' | 'success' | 'info' | 'warning' | 'danger'. * By default status is 'primary'. * * @property {string} children - Determines text of the component. diff --git a/src/playground/package-lock.json b/src/playground/package-lock.json index a1d0c3a0a..051a540b7 100644 --- a/src/playground/package-lock.json +++ b/src/playground/package-lock.json @@ -940,7 +940,7 @@ "version": "github:akveo/eva#3d43db8ea21794ba08fe377e75ba49ddd6de9248", "from": "github:akveo/eva#package/eva", "requires": { - "@eva-design/dss": "github:akveo/eva#827771891065cdbeaf78416cd96c1a5d3266e8a5" + "@eva-design/dss": "github:akveo/eva#package/dss" } }, "@expo/vector-icons": { @@ -3021,7 +3021,7 @@ "qs": "^6.5.0", "react-native-branch": "2.2.5", "react-native-gesture-handler": "~1.0.14", - "react-native-maps": "github:expo/react-native-maps#e6f98ff7272e5d0a7fe974a41f28593af2d77bb2", + "react-native-maps": "github:expo/react-native-maps#v0.22.1-exp.0", "react-native-reanimated": "1.0.0-alpha.11", "react-native-screens": "1.0.0-alpha.22", "react-native-svg": "8.0.10", @@ -3626,24 +3626,25 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", + "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "optional": true, "requires": { @@ -3653,13 +3654,15 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", + "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3667,34 +3670,37 @@ }, "chownr": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz", "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "optional": true }, "code-point-at": { "version": "1.1.0", - "resolved": false, - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", + "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", + "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", + "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, "debug": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "optional": true, "requires": { @@ -3703,25 +3709,25 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz", "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { @@ -3730,13 +3736,13 @@ }, "fs.realpath": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { @@ -3752,7 +3758,7 @@ }, "glob": { "version": "7.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "optional": true, "requires": { @@ -3766,13 +3772,13 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "optional": true, "requires": { @@ -3781,7 +3787,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { @@ -3790,7 +3796,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { @@ -3800,46 +3806,51 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", + "optional": true, "requires": { "number-is-nan": "^1.0.0" } }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "resolved": false, - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", + "optional": true }, "minipass": { "version": "2.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3847,7 +3858,7 @@ }, "minizlib": { "version": "1.2.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz", "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "optional": true, "requires": { @@ -3856,21 +3867,22 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", + "optional": true, "requires": { "minimist": "0.0.8" } }, "ms": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "optional": true }, "needle": { "version": "2.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "optional": true, "requires": { @@ -3881,7 +3893,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "optional": true, "requires": { @@ -3899,7 +3911,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { @@ -3909,13 +3921,13 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "optional": true, "requires": { @@ -3925,7 +3937,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { @@ -3937,38 +3949,40 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", + "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", + "optional": true, "requires": { "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { @@ -3978,19 +3992,19 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "optional": true, "requires": { @@ -4002,7 +4016,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } @@ -4010,7 +4024,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { @@ -4025,7 +4039,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "optional": true, "requires": { @@ -4034,43 +4048,45 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, "semver": { "version": "5.7.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4079,7 +4095,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { @@ -4088,21 +4104,22 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", + "optional": true, "requires": { "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, "tar": { "version": "4.4.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.8.tgz", "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "optional": true, "requires": { @@ -4117,13 +4134,13 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "optional": true, "requires": { @@ -4132,13 +4149,15 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", + "optional": true }, "yallist": { "version": "3.0.3", - "resolved": false, - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" + "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==", + "optional": true } } }, diff --git a/src/playground/src/ui/screen/buttonGroup/type.ts b/src/playground/src/ui/screen/buttonGroup/type.ts index 7972d9270..a7eb08762 100644 --- a/src/playground/src/ui/screen/buttonGroup/type.ts +++ b/src/playground/src/ui/screen/buttonGroup/type.ts @@ -6,7 +6,7 @@ import { } from '../common/type'; const defaultButtonGroup: ComponentShowcaseItem = { - title: 'Filled', + title: 'Default', props: {}, }; @@ -79,10 +79,6 @@ export const buttonGroupSettings: ComponentShowcaseSetting[] = [ propertyName: 'appearance', value: 'outline', }, - { - propertyName: 'appearance', - value: 'ghost', - }, { propertyName: 'status', value: 'primary', diff --git a/src/playground/src/ui/screen/checkbox/type.ts b/src/playground/src/ui/screen/checkbox/type.ts index 58187d042..953cccdd6 100644 --- a/src/playground/src/ui/screen/checkbox/type.ts +++ b/src/playground/src/ui/screen/checkbox/type.ts @@ -94,8 +94,4 @@ export const checkboxSettings: ComponentShowcaseSetting[] = [ propertyName: 'status', value: 'danger', }, - { - propertyName: 'status', - value: 'white', - }, ]; diff --git a/src/playground/src/ui/screen/common/showcase.component.tsx b/src/playground/src/ui/screen/common/showcase.component.tsx index 6598d1c8a..a539f40b3 100644 --- a/src/playground/src/ui/screen/common/showcase.component.tsx +++ b/src/playground/src/ui/screen/common/showcase.component.tsx @@ -57,7 +57,7 @@ class ShowcaseComponent extends React.Component { style: [themedStyle.item, borderStyle, listItemElement.props.style], }); }; - +O public render(): React.ReactNode { const { themedStyle, showcase } = this.props; @@ -75,7 +75,7 @@ export const Showcase = withStyles(ShowcaseComponent, (theme: ThemeType) => { return { container: { flex: 1, - backgroundColor: theme['background-color-default-2'], + backgroundColor: theme['background-basic-color-1'], }, item: { paddingHorizontal: 24, @@ -83,7 +83,7 @@ export const Showcase = withStyles(ShowcaseComponent, (theme: ThemeType) => { }, itemBorder: { borderBottomWidth: 1, - borderBottomColor: theme['border-color-default-3'], + borderBottomColor: theme['border-basic-color-3'], }, }; }); diff --git a/src/playground/src/ui/screen/common/showcaseSettings.component.tsx b/src/playground/src/ui/screen/common/showcaseSettings.component.tsx index 9c155fba9..a1f8ac601 100644 --- a/src/playground/src/ui/screen/common/showcaseSettings.component.tsx +++ b/src/playground/src/ui/screen/common/showcaseSettings.component.tsx @@ -143,6 +143,6 @@ export const ShowcaseSettings = withStyles(ShowcaseSettingsComponent, (theme: Th flexDirection: 'row', justifyContent: 'space-evenly', paddingVertical: 16, - backgroundColor: theme['background-color-default-1'], + backgroundColor: theme['background-basic-color-1'], }, })); diff --git a/src/playground/src/ui/screen/input/type.tsx b/src/playground/src/ui/screen/input/type.tsx index 0f98036a6..24c301b98 100644 --- a/src/playground/src/ui/screen/input/type.tsx +++ b/src/playground/src/ui/screen/input/type.tsx @@ -104,4 +104,16 @@ export const inputSettings: ComponentShowcaseSetting[] = [ propertyName: 'status', value: 'danger', }, + { + propertyName: 'size', + value: 'small', + }, + { + propertyName: 'size', + value: 'medium', + }, + { + propertyName: 'size', + value: 'large', + }, ]; diff --git a/src/playground/src/ui/screen/modal/modalShowcase.component.tsx b/src/playground/src/ui/screen/modal/modalShowcase.component.tsx index 8e4fe98d6..a78255fe3 100644 --- a/src/playground/src/ui/screen/modal/modalShowcase.component.tsx +++ b/src/playground/src/ui/screen/modal/modalShowcase.component.tsx @@ -62,8 +62,8 @@ export const ModalShowcase = withStyles(ModalShowcaseComponent, (theme: ThemeTyp alignItems: 'center', width: 256, height: 256, - backgroundColor: theme['background-color-default-1'], - borderColor: theme['border-color-default-2'], + backgroundColor: theme['background-basic-color-1'], + borderColor: theme['border-basic-color-2'], borderWidth: 1, }, }));