From 0e3e5a203e812bc63caa0c3abf5ed7b524f6b6c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20Homoli=CC=81k?= Date: Tue, 22 Sep 2020 15:35:17 +0200 Subject: [PATCH 1/4] Introduce color palettes - add palette function - add gray colors to the color scale --- src/components/Button/theme.ts | 17 +++--- src/components/Card/theme.ts | 4 +- src/components/CloseControl/theme.ts | 1 + src/components/Tag/theme.ts | 3 +- src/scales/colors.ts | 17 ++++-- src/utils/palette.ts | 20 +++++++ src/utils/trace.ts | 4 ++ stories/Box.stories.tsx | 43 ++++++++++++++- stories/Button/index.stories.tsx | 81 ++++++++++++++++++++-------- stories/Tag.stories.tsx | 12 +++-- tests/utils/variant.test.ts | 8 +-- 11 files changed, 161 insertions(+), 49 deletions(-) create mode 100644 src/utils/palette.ts create mode 100644 src/utils/trace.ts diff --git a/src/components/Button/theme.ts b/src/components/Button/theme.ts index c673ba0..96262a9 100644 --- a/src/components/Button/theme.ts +++ b/src/components/Button/theme.ts @@ -1,6 +1,7 @@ -import { ButtonProps } from '.'; +import { darken, transparentize } from 'scales/colors'; import { mergeThemes } from 'utils/mergeThemes'; -import { darken, opacify } from 'scales/colors'; + +import { ButtonProps } from '.'; export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg'; export type ButtonVariant = 'solid' | 'clear' | 'outline' | 'link'; @@ -89,13 +90,13 @@ const emptyButton: ButtonValue = { clear: { color: 'primary', _hover: { - bg: opacify('primary', 0.1) + bg: transparentize('primary', 0.9) }, _active: { - bg: opacify('primary', 0.2) + bg: transparentize('primary', 0.8) }, _focus: { - bg: opacify('primary', 0.2), + bg: transparentize('primary', 0.8), outline: '2px solid rgba(15, 31, 40, 0.2)', outlineOffset: '-2px' }, @@ -108,13 +109,13 @@ const emptyButton: ButtonValue = { borderColor: 'primary', color: 'primary', _hover: { - bg: opacify('primary', 0.1) + bg: transparentize('primary', 0.9) }, _active: { - bg: opacify('primary', 0.2) + bg: transparentize('primary', 0.8) }, _focus: { - bg: opacify('primary', 0.2), + bg: transparentize('primary', 0.8), outline: '2px solid rgba(15, 31, 40, 0.2)', outlineOffset: '-2px' }, diff --git a/src/components/Card/theme.ts b/src/components/Card/theme.ts index 41d7128..2cd3920 100644 --- a/src/components/Card/theme.ts +++ b/src/components/Card/theme.ts @@ -1,5 +1,6 @@ import { CardProps } from '.'; import { mergeThemes } from 'utils/mergeThemes'; +import { transparentize } from '../../scales/colors'; export type CardVariant = 'normal' | 'elevated' | 'outline'; @@ -37,7 +38,8 @@ const emptyCard: CardValue = { boxShadow: '0 0.3rem 0.8rem 0 rgba(36, 49, 70, 0.25)' }, outline: { - border: '1px solid rgba(69, 86, 99, 0.5)' + border: '1px solid', + borderColor: transparentize('gray.700', 0.5) } } }; diff --git a/src/components/CloseControl/theme.ts b/src/components/CloseControl/theme.ts index 85f7fb7..ae8b54d 100644 --- a/src/components/CloseControl/theme.ts +++ b/src/components/CloseControl/theme.ts @@ -1,5 +1,6 @@ import { CloseControlProps } from '.'; import { mergeThemes } from 'utils/mergeThemes'; +import { darken } from 'scales/colors'; export type CloseControlSizes = 'xs' | 'sm' | 'md' | 'lg'; diff --git a/src/components/Tag/theme.ts b/src/components/Tag/theme.ts index 06a120d..35652ee 100644 --- a/src/components/Tag/theme.ts +++ b/src/components/Tag/theme.ts @@ -21,7 +21,8 @@ export const tag = (t?: { const emptyTag: TagValue = { default: { borderRadius: '0.3rem', - border: '1px solid #455663', + border: '1px solid', + borderColor: 'gray.700', px: '0.8rem', fontFamily: 'text', fontSize: '1.2rem', diff --git a/src/scales/colors.ts b/src/scales/colors.ts index c770f50..dc6e9b3 100644 --- a/src/scales/colors.ts +++ b/src/scales/colors.ts @@ -1,11 +1,14 @@ import { defaultsScale } from './utils'; import { get } from '@styled-system/core'; import * as polished from 'polished'; +import { Palette, palette } from 'utils/palette'; export type Colors = { primary: string; text: string; background: string; + + gray: Palette; }; export type ColorScale = { @@ -18,13 +21,17 @@ export const colors = (base: Colors = lightColorTheme, c: T & Part export const lightColorTheme: Colors = { primary: '#0171b6', text: '#1E3441', - background: '#fff' + background: '#fff', + + gray: palette('#596e7f') }; export const darkColorTheme: Colors = { primary: '#DAA520', text: '#fff', - background: '#211E15' + background: '#211E15', + + gray: palette('#698396', -0.4) }; export const colorMod = (func: string) => (color: string, amount: number) => `__$${func};${color};${amount}`; @@ -50,7 +57,7 @@ export const colorTransform = (val: string | number, s: any) => { if (reg) { const [_, func, color, amount] = reg; const a = Number(amount); - const value = get(scale, color, lightColorTheme[color as keyof Colors] || color); + const value = get(scale, color, color); switch (func) { case 'darken': @@ -74,7 +81,7 @@ export const colorTransform = (val: string | number, s: any) => { } } - return get(scale, val, lightColorTheme[val as keyof Colors] || val); + return get(scale, val, val); } - return get(scale, val, lightColorTheme[val as keyof Colors] || val); + return get(scale, val, val); }; diff --git a/src/utils/palette.ts b/src/utils/palette.ts new file mode 100644 index 0000000..28f231b --- /dev/null +++ b/src/utils/palette.ts @@ -0,0 +1,20 @@ +import * as polished from 'polished'; + +export type Palette = Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>; + +export const palette = ( + base500: string, + m: number = 0.4, + func: (a: number, v: string) => string = polished.lighten +) => ({ + 50: func(m * 0.45, base500), + 100: func(m * 0.4, base500), + 200: func(m * 0.3, base500), + 300: func(m * 0.2, base500), + 400: func(m * 0.1, base500), + 500: base500, + 600: func(m * -0.1, base500), + 700: func(m * -0.2, base500), + 800: func(m * -0.3, base500), + 900: func(m * -0.4, base500) +}); diff --git a/src/utils/trace.ts b/src/utils/trace.ts new file mode 100644 index 0000000..9615ce3 --- /dev/null +++ b/src/utils/trace.ts @@ -0,0 +1,4 @@ +export const trace = (a: T, ...rest: any[]) => { + console.info(a, ...rest); + return a; +}; diff --git a/stories/Box.stories.tsx b/stories/Box.stories.tsx index 0fd9bee..900a145 100644 --- a/stories/Box.stories.tsx +++ b/stories/Box.stories.tsx @@ -1,6 +1,8 @@ -import React, { FC } from 'react'; +import React, { FC, useState, useMemo } from 'react'; -import { Box } from '../src'; +import { Box, createScales } from '../src'; +import { emptyTheme, createTheme } from '../src/theme'; +import { darkColorTheme, colors } from '../src/scales/colors'; export default { title: 'Box' }; @@ -45,3 +47,40 @@ export const BasicUsage: FC = () => { ); }; + +export const Colors: FC = () => { + const [dark, setDark] = useState(false); + const theme = useMemo(() => + dark + ? createTheme({ + ...createScales({ + ...colors(darkColorTheme) + }) + }) + : createTheme(), [dark]); + + return ( + + setDark(s => !s)}>Switch theme +
+ + Primary + + {theme.colors.primary} + + + Background + {theme.colors.background} + + Text + {theme.colors.text} + + Gray + + {Object.values(theme.colors.gray).map(c => + {c} + )} + + + ); +}; diff --git a/stories/Button/index.stories.tsx b/stories/Button/index.stories.tsx index 441eec8..0f87158 100644 --- a/stories/Button/index.stories.tsx +++ b/stories/Button/index.stories.tsx @@ -31,30 +31,65 @@ const theme = createTheme({ export const BasicUsage: FC = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; + +export const CustomTheme: FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/stories/Tag.stories.tsx b/stories/Tag.stories.tsx index 530f476..a33fc95 100644 --- a/stories/Tag.stories.tsx +++ b/stories/Tag.stories.tsx @@ -1,14 +1,16 @@ import React, { FC } from 'react'; -import { Stack, Tag } from '../src'; +import { Stack, Tag, XcoreProvider } from '../src'; export default { title: 'Tag' }; export const BasicUsage: FC = () => { return ( - - Tag - Tag - + + + Tag + Tag + + ); }; diff --git a/tests/utils/variant.test.ts b/tests/utils/variant.test.ts index bbd6e79..799057a 100644 --- a/tests/utils/variant.test.ts +++ b/tests/utils/variant.test.ts @@ -1,4 +1,4 @@ -import { createTheme, darken, opacify } from '@xcorejs/ui'; +import { createTheme, darken, transparentize } from '@xcorejs/ui'; import { variant } from 'utils/variant'; const { button } = createTheme({}); @@ -15,13 +15,13 @@ test('variantThemed', () => { borderColor: 'primary', color: 'primary', _hover: { - bg: opacify('primary', 0.1) + bg: transparentize('primary', 0.9) }, _active: { - bg: opacify('primary', 0.2) + bg: transparentize('primary', 0.8) }, _focus: { - bg: opacify('primary', 0.2), + bg: transparentize('primary', 0.8), outline: '2px solid rgba(15, 31, 40, 0.2)', outlineOffset: '-2px' }, From 91941f4dd1573b402fb1a32ecdd8dd3104e5dead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20Homoli=CC=81k?= Date: Tue, 22 Sep 2020 15:35:17 +0200 Subject: [PATCH 2/4] Change default tag of Typograhy --- src/components/Typography/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx index e99107b..4fd45a9 100644 --- a/src/components/Typography/index.tsx +++ b/src/components/Typography/index.tsx @@ -37,6 +37,6 @@ const Typography = forwardRef(({ as: _a export default Typography; -const TypographyStyle = styled.p.withConfig({ shouldForwardProp })` +const TypographyStyle = styled.div.withConfig({ shouldForwardProp })` ${composedTextBase} `; From 5282ce28614c7104524a06a1bf5f9475ab3863cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20Homoli=CC=81k?= Date: Tue, 22 Sep 2020 15:35:17 +0200 Subject: [PATCH 3/4] Add new aliases for Box and Flex --- src/bases/config/flex.ts | 15 ++++++++++++++- src/bases/config/layout.ts | 28 +++++++++++++++++++++++++++- src/bases/types.ts | 18 ++++++++++++++++-- src/components/Flex.ts | 1 + 4 files changed, 58 insertions(+), 4 deletions(-) diff --git a/src/bases/config/flex.ts b/src/bases/config/flex.ts index 43b8c34..4641f2a 100644 --- a/src/bases/config/flex.ts +++ b/src/bases/config/flex.ts @@ -14,5 +14,18 @@ export const flexConfig: Config = { flexBasis: true, justifySelf: true, alignSelf: true, - order: true + order: true, + // aliases + direction: { + property: 'flexDirection' + }, + align: { + property: 'alignItems' + }, + justify: { + property: 'justifyContent' + }, + wrap: { + property: 'flexWrap' + } }; diff --git a/src/bases/config/layout.ts b/src/bases/config/layout.ts index bcff9aa..e6341f4 100644 --- a/src/bases/config/layout.ts +++ b/src/bases/config/layout.ts @@ -34,5 +34,31 @@ export const layoutConfig: Config = { overflowX: true, overflowY: true, display: true, - verticalAlign: true + verticalAlign: true, + // aliases + w: { + property: 'width', + scale: 'sizes', + transform: getWidth + }, + h: { + property: 'height', + scale: 'sizes' + }, + minW: { + property: 'minWidth', + scale: 'sizes' + }, + minH: { + property: 'minHeight', + scale: 'sizes' + }, + maxW: { + property: 'maxWidth', + scale: 'sizes' + }, + maxH: { + property: 'maxHeight', + scale: 'sizes' + } }; diff --git a/src/bases/types.ts b/src/bases/types.ts index 56f46c2..bad63d0 100644 --- a/src/bases/types.ts +++ b/src/bases/types.ts @@ -61,8 +61,16 @@ export type BoxBaseProps = WebkitTapHighlightColor?: system.ResponsiveValue; // Aliases - column?: ResponsiveValue; - row?: ResponsiveValue; + column?: system.GridColumnProps['gridColumn']; + row?: system.GridRowProps['gridRow']; + + w: system.LayoutProps['width']; + maxW: system.LayoutProps['maxWidth']; + minW: system.LayoutProps['minWidth']; + + h: system.LayoutProps['height']; + maxH: system.LayoutProps['maxHeight']; + minH: system.LayoutProps['minHeight']; theme?: XcoreTheme; } @@ -92,6 +100,12 @@ export type GlobalBaseProps = { } & BoxBaseProps; export type FlexBaseProps = + { + direction?: system.FlexboxProps['flexDirection']; + align?: system.FlexboxProps['alignItems']; + justify?: system.FlexboxProps['justifyContent']; + wrap?: system.FlexboxProps['flexWrap']; + } & system.FlexboxProps & BoxBaseProps; diff --git a/src/components/Flex.ts b/src/components/Flex.ts index b694e40..6f0e0bd 100755 --- a/src/components/Flex.ts +++ b/src/components/Flex.ts @@ -8,6 +8,7 @@ export type ExtendedFlexProps = FlexProps; const Flex = styled.div.withConfig({ shouldForwardProp })` ${composedFlexBase} `; + Flex.displayName = 'Flex'; export default Flex; From d9cd754a59388d3d8e09c23079e6dcbfc69857a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20Homoli=CC=81k?= Date: Tue, 22 Sep 2020 15:35:17 +0200 Subject: [PATCH 4/4] Fix default typography as --- src/components/Typography/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Typography/index.tsx b/src/components/Typography/index.tsx index 4fd45a9..39fe7cc 100644 --- a/src/components/Typography/index.tsx +++ b/src/components/Typography/index.tsx @@ -20,9 +20,9 @@ export type ExtendedTypographyProps = const Typography = forwardRef(({ as: _as, ...p }, ref) => { const { typography } = useTheme(); - const type = p.variant ?? p.v ?? 'p'; + const type = p.variant ?? p.v; - const as: TypographyAs = _as ?? (type === 'lead' ? 'p' : type); + const as: TypographyAs | undefined = _as ?? (type === 'lead' ? 'p' : type); const props = useMerge( p,