diff --git a/package.json b/package.json index 417f6112..4d1e01db 100644 --- a/package.json +++ b/package.json @@ -67,7 +67,7 @@ }, "dependencies": { "@naturacosmeticos/natds-icons": "^1.10.0", - "@naturacosmeticos/natds-themes": "^0.24.3", + "@naturacosmeticos/natds-themes": "^0.29.0", "fs-extra": "8.1.0", "react-native-gesture-handler": "^1.10.3", "react-native-svg": "^12.1.1" diff --git a/src/common/themeSelectors/theme/mock-theme.json b/src/common/themeSelectors/theme/mock-theme.json index 52faf768..dbd22ad5 100644 --- a/src/common/themeSelectors/theme/mock-theme.json +++ b/src/common/themeSelectors/theme/mock-theme.json @@ -87,6 +87,10 @@ "fallback": { "fontFamily": "Arial", "fontWeight": 400 + }, + "color": { + "background": "#f4ab34", + "label": "#333333" } }, "badge": { @@ -222,6 +226,9 @@ "borderRadius": { "enable": 4, "disable": 0 + }, + "color": { + "background": "#ffffff" } }, "checkbox": { @@ -296,7 +303,16 @@ "fontWeight": 400 } }, - "borderRadius": 4 + "borderRadius": 4, + "color": { + "background": "#ffffff", + "title": "#000000" + } + }, + "divider": { + "color": { + "background": "#bbbbbb" + } }, "expansionPanel": { "title": { @@ -323,12 +339,60 @@ }, "medium": { "borderRadius": 24 + }, + "standard": { + "color": { + "enable": { + "background": "#FFFFFF00" + }, + "disable": { + "background": "#FFFFFF00" + }, + "hover": { + "background": "#f1f3f5" + }, + "focus": { + "background": "#e9ecef" + } + } + }, + "float": { + "color": { + "enable": { + "background": "#ffffff" + }, + "disable": { + "background": "#bbbbbb" + }, + "hover": { + "background": "#f1f3f5" + }, + "focus": { + "background": "#e9ecef" + } + } + }, + "overlay": { + "color": { + "enable": { + "background": "#000000" + }, + "disable": { + "background": "#000000" + }, + "hover": { + "background": "#000000" + }, + "focus": { + "background": "#000000" + } + } } }, "image": { "borderRadius": { - "enable": 4, - "disable": 0 + "medium": 4, + "none": 0 } }, "link": { @@ -344,11 +408,16 @@ "fontFamily": "Arial", "fontWeight": 400 } + }, + "color": { + "label": { + "enable": { + "default": "#227bbd", + "light": "#bbbbbb" + } + } } }, - "menuItem": { - "borderRadius": 4 - }, "navigationDrawer": { "header": { "title": { @@ -419,6 +488,10 @@ }, "large": { "borderRadius": 32 + }, + "color": { + "stroke": "#f4ab34", + "layer": "#ffffff" } }, "radioButton": { @@ -435,7 +508,21 @@ "fontWeight": 400 } }, - "borderRadius": 12 + "borderRadius": 12, + "color": { + "select": { + "border": "#f4ab34", + "content": "#f4ab34" + }, + "unselect": { + "border": "#000000", + "content": "#000000" + }, + "disable": { + "border": "#bbbbbb", + "content": "#bbbbbb" + } + } }, "rating": { "counter": { @@ -483,6 +570,110 @@ "fontWeight": 400 } }, + "contained": { + "color": { + "enable": { + "primary": { + "background": "#f4ab34", + "border": "#FFFFFF00", + "label": "#333333" + }, + "neutral": { + "background": "#ffffff", + "border": "#FFFFFF00", + "label": "#333333" + } + }, + "disable": { + "primary": { + "background": "#bbbbbb", + "border": "#FFFFFF00", + "label": "#777777" + }, + "neutral": { + "background": "#bbbbbb", + "border": "#FFFFFF00", + "label": "#777777" + } + }, + "hover": { + "primary": { + "background": "#ef8426", + "border": "#FFFFFF00", + "label": "#333333" + }, + "neutral": { + "background": "#f1f3f5", + "border": "#FFFFFF00", + "label": "#333333" + } + }, + "focus": { + "primary": { + "background": "#A67423", + "border": "#FFFFFF00", + "label": "#333333" + }, + "neutral": { + "background": "#e9ecef", + "border": "#FFFFFF00", + "label": "#333333" + } + } + } + }, + "outlined": { + "color": { + "enable": { + "primary": { + "background": "#FFFFFF00", + "border": "#f4ab34", + "label": "#333333" + }, + "neutral": { + "background": "#FFFFFF00", + "border": "#bbbbbb", + "label": "#333333" + } + }, + "disable": { + "primary": { + "background": "#ffffff", + "border": "#bbbbbb", + "label": "#bbbbbb" + }, + "neutral": { + "background": "#ffffff", + "border": "#bbbbbb", + "label": "#bbbbbb" + } + }, + "hover": { + "primary": { + "background": "#f1f3f5", + "border": "#ef8426", + "label": "#333333" + }, + "neutral": { + "background": "#f1f3f5", + "border": "#777777", + "label": "#333333" + } + }, + "focus": { + "primary": { + "background": "#e9ecef", + "border": "#ef8426", + "label": "#333333" + }, + "neutral": { + "background": "#e9ecef", + "border": "#777777", + "label": "#333333" + } + } + } + }, "borderRadius": 28 }, "snackbar": { @@ -541,6 +732,24 @@ "enable": 12, "disable": 0 } + }, + "color": { + "background": { + "primary": "#f4ab34", + "secondary": "#ff6b0b", + "success": "#569a32", + "alert": "#e74627", + "warning": "#fcc433", + "link": "#227bbd" + }, + "label": { + "primary": "#333333", + "secondary": "#000000", + "success": "#ffffff", + "alert": "#ffffff", + "warning": "#333333", + "link": "#ffffff" + } } }, "textField": { diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap index e07fb419..c52206c4 100644 --- a/src/components/Alert/__snapshots__/Alert.test.tsx.snap +++ b/src/components/Alert/__snapshots__/Alert.test.tsx.snap @@ -117,6 +117,10 @@ exports[`Alert component Should render alert with default props 1`] = ` }, }, "avatar": Object { + "color": Object { + "background": "#f4ab34", + "label": "#333333", + }, "fallback": Object { "fontFamily": "Arial", "fontWeight": 400, @@ -314,6 +318,9 @@ exports[`Alert component Should render alert with default props 1`] = ` "disable": 0, "enable": 4, }, + "color": Object { + "background": "#ffffff", + }, }, "checkbox": Object { "borderRadius": 2, @@ -419,6 +426,10 @@ exports[`Alert component Should render alert with default props 1`] = ` }, }, "borderRadius": 4, + "color": Object { + "background": "#ffffff", + "title": "#000000", + }, "title": Object { "fallback": Object { "fontFamily": "Arial", @@ -433,6 +444,11 @@ exports[`Alert component Should render alert with default props 1`] = ` }, }, }, + "divider": Object { + "color": Object { + "background": "#bbbbbb", + }, + }, "elevation": Object { "huge": Object { "elevation": 12, @@ -576,23 +592,79 @@ exports[`Alert component Should render alert with default props 1`] = ` "lineHeight": 1.5, }, "iconButton": Object { + "float": Object { + "color": Object { + "disable": Object { + "background": "#bbbbbb", + }, + "enable": Object { + "background": "#ffffff", + }, + "focus": Object { + "background": "#e9ecef", + }, + "hover": Object { + "background": "#f1f3f5", + }, + }, + }, "medium": Object { "borderRadius": 24, }, + "overlay": Object { + "color": Object { + "disable": Object { + "background": "#000000", + }, + "enable": Object { + "background": "#000000", + }, + "focus": Object { + "background": "#000000", + }, + "hover": Object { + "background": "#000000", + }, + }, + }, "semi": Object { "borderRadius": 16, }, "semiX": Object { "borderRadius": 20, }, + "standard": Object { + "color": Object { + "disable": Object { + "background": "#FFFFFF00", + }, + "enable": Object { + "background": "#FFFFFF00", + }, + "focus": Object { + "background": "#e9ecef", + }, + "hover": Object { + "background": "#f1f3f5", + }, + }, + }, }, "image": Object { "borderRadius": Object { - "disable": 0, - "enable": 4, + "medium": 4, + "none": 0, }, }, "link": Object { + "color": Object { + "label": Object { + "enable": Object { + "default": "#227bbd", + "light": "#bbbbbb", + }, + }, + }, "label": Object { "fallback": Object { "fontFamily": "Arial", @@ -607,9 +679,6 @@ exports[`Alert component Should render alert with default props 1`] = ` }, }, }, - "menuItem": Object { - "borderRadius": 4, - }, "navigationDrawer": Object { "header": Object { "subtitle": Object { @@ -689,6 +758,10 @@ exports[`Alert component Should render alert with default props 1`] = ` "lineHeight": 1.5, }, "progressIndicator": Object { + "color": Object { + "layer": "#ffffff", + "stroke": "#f4ab34", + }, "large": Object { "borderRadius": 32, }, @@ -704,6 +777,20 @@ exports[`Alert component Should render alert with default props 1`] = ` }, "radioButton": Object { "borderRadius": 12, + "color": Object { + "disable": Object { + "border": "#bbbbbb", + "content": "#bbbbbb", + }, + "select": Object { + "border": "#f4ab34", + "content": "#f4ab34", + }, + "unselect": Object { + "border": "#000000", + "content": "#000000", + }, + }, "label": Object { "fallback": Object { "fontFamily": "Arial", @@ -752,6 +839,58 @@ exports[`Alert component Should render alert with default props 1`] = ` }, "shortcut": Object { "borderRadius": 28, + "contained": Object { + "color": Object { + "disable": Object { + "neutral": Object { + "background": "#bbbbbb", + "border": "#FFFFFF00", + "label": "#777777", + }, + "primary": Object { + "background": "#bbbbbb", + "border": "#FFFFFF00", + "label": "#777777", + }, + }, + "enable": Object { + "neutral": Object { + "background": "#ffffff", + "border": "#FFFFFF00", + "label": "#333333", + }, + "primary": Object { + "background": "#f4ab34", + "border": "#FFFFFF00", + "label": "#333333", + }, + }, + "focus": Object { + "neutral": Object { + "background": "#e9ecef", + "border": "#FFFFFF00", + "label": "#333333", + }, + "primary": Object { + "background": "#A67423", + "border": "#FFFFFF00", + "label": "#333333", + }, + }, + "hover": Object { + "neutral": Object { + "background": "#f1f3f5", + "border": "#FFFFFF00", + "label": "#333333", + }, + "primary": Object { + "background": "#ef8426", + "border": "#FFFFFF00", + "label": "#333333", + }, + }, + }, + }, "label": Object { "fallback": Object { "fontFamily": "Arial", @@ -765,6 +904,58 @@ exports[`Alert component Should render alert with default props 1`] = ` "fontWeight": 400, }, }, + "outlined": Object { + "color": Object { + "disable": Object { + "neutral": Object { + "background": "#ffffff", + "border": "#bbbbbb", + "label": "#bbbbbb", + }, + "primary": Object { + "background": "#ffffff", + "border": "#bbbbbb", + "label": "#bbbbbb", + }, + }, + "enable": Object { + "neutral": Object { + "background": "#FFFFFF00", + "border": "#bbbbbb", + "label": "#333333", + }, + "primary": Object { + "background": "#FFFFFF00", + "border": "#f4ab34", + "label": "#333333", + }, + }, + "focus": Object { + "neutral": Object { + "background": "#e9ecef", + "border": "#777777", + "label": "#333333", + }, + "primary": Object { + "background": "#e9ecef", + "border": "#ef8426", + "label": "#333333", + }, + }, + "hover": Object { + "neutral": Object { + "background": "#f1f3f5", + "border": "#777777", + "label": "#333333", + }, + "primary": Object { + "background": "#f1f3f5", + "border": "#ef8426", + "label": "#333333", + }, + }, + }, + }, }, "size": Object { "huge": 96, @@ -840,6 +1031,24 @@ exports[`Alert component Should render alert with default props 1`] = ` }, }, "tag": Object { + "color": Object { + "background": Object { + "alert": "#e74627", + "link": "#227bbd", + "primary": "#f4ab34", + "secondary": "#ff6b0b", + "success": "#569a32", + "warning": "#fcc433", + }, + "label": Object { + "alert": "#ffffff", + "link": "#ffffff", + "primary": "#333333", + "secondary": "#000000", + "success": "#ffffff", + "warning": "#333333", + }, + }, "label": Object { "fallback": Object { "fontFamily": "Arial", diff --git a/yarn.lock b/yarn.lock index 344def58..d03efdb2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2031,10 +2031,10 @@ resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-icons/-/natds-icons-1.10.0.tgz#49ea87d4191f700925bb4acadeb2d34c55c1f85f" integrity sha512-tNN1ORXRORR5y9UnAAEHqwwrd3gqULWyG3OzxRLSeu/s6vs+WXZbO7FFw2AajBoZXEREjVP8evUJLTjWJnL4jg== -"@naturacosmeticos/natds-themes@^0.24.3": - version "0.24.3" - resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.24.3.tgz#d80a62b2d0cf53aa17a3a12e135b1ff106f95169" - integrity sha512-1HrXZi+wkevdk6+Zji1XA8XRyQIa6Vgrn9MILe/k0klIjyl2BciDapBEdL0mNmkrNqlVwyh0i//aLZcTOnd3yw== +"@naturacosmeticos/natds-themes@^0.29.0": + version "0.29.2" + resolved "https://registry.yarnpkg.com/@naturacosmeticos/natds-themes/-/natds-themes-0.29.2.tgz#67be5bb182ae264f0833751f18d9940f872a5619" + integrity sha512-boUsNc0ndfxP/qWRQ3ZwJycpkVe6YBCTakHOPVq4Xz7DiAvPI1NcCSm6tmNvCA1bhRiKD4yWLm8DDLkYUOypPg== dependencies: open-color "^1.8.0" svg2vectordrawable "2.6.26"