From 09c362cb32e006f8bdec9de1d8e2fbbbcee3f588 Mon Sep 17 00:00:00 2001 From: Tatiana Cherednichenko Date: Tue, 29 Jun 2021 18:47:32 +0300 Subject: [PATCH 01/11] feat: implement priorities fabric --- src/dev/global.ts | 158 ++++++++--------------- src/lib/priority.tsx | 64 ++++++++++ src/woly/atoms/button-icon/usage.mdx | 1 + src/woly/atoms/button/priorities.mdx | 174 ++++++++++++++++++++++++++ src/woly/atoms/button/state-props.tsx | 4 +- 5 files changed, 290 insertions(+), 111 deletions(-) create mode 100644 src/lib/priority.tsx create mode 100644 src/woly/atoms/button/priorities.mdx diff --git a/src/dev/global.ts b/src/dev/global.ts index 192e85b7..bfad5024 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -2,6 +2,8 @@ import styled from 'styled-components'; import { WolyGlobalStyles } from 'ui/woly-global-styles'; import { createPalette } from 'lib/palette'; +import { createPalette } from './palette'; +import { createPriority } from './priority'; import { systemUi } from './font-stacks'; export const Global = styled(WolyGlobalStyles)` @@ -52,113 +54,51 @@ export const Global = styled(WolyGlobalStyles)` --woly-backdrop: hsla(var(--bw-0), 0.3); --woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%); - [data-priority='default'] { - --woly-shape-default: hsla(var(--bw-500), 1); - --woly-shape-disabled: hsla(var(--bw-200), 1); - --woly-shape-hover: hsla(var(--bw-600), 1); - --woly-shape-active: hsla(var(--bw-700), 1); - - --woly-shape-text-default: hsla(var(--bw-1000), 1); - --woly-shape-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-1000), 1); - --woly-shape-text-active: hsla(var(--bw-1000), 1); - - --woly-canvas-default: transparent; - --woly-canvas-disabled: hsla(var(--bw-200), 1); - --woly-canvas-hover: hsla(var(--bw-600), 1); - --woly-canvas-active: hsla(var(--bw-700), 1); - - --woly-canvas-text-default: hsla(var(--bw-0), 1); - --woly-canvas-text-disabled: hsla(var(--bw-300), 1); - --woly-canvas-text-hover: hsla(var(--bw-0), 1); - --woly-canvas-text-active: hsla(var(--bw-0), 1); - } - - [data-priority='primary'] { - --woly-shape-default: hsla(var(--primary-500), 1); - --woly-shape-disabled: hsla(var(--primary-200), 1); - --woly-shape-hover: hsla(var(--primary-600), 1); - --woly-shape-active: hsla(var(--primary-700), 1); - - --woly-shape-text-default: hsla(var(--bw-1000), 1); - --woly-shape-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-1000), 1); - --woly-shape-text-active: hsla(var(--bw-1000), 1); - - --woly-canvas-default: transparent; - --woly-canvas-disabled: hsla(var(--bw-200), 1); - --woly-canvas-hover: hsla(var(--primary-600), 1); - --woly-canvas-active: hsla(var(--primary-700), 1); - - --woly-canvas-text-default: hsla(var(--bw-0), 1); - --woly-canvas-text-disabled: hsla(var(--bw-300), 1); - --woly-canvas-text-hover: hsla(var(--bw-0), 1); - --woly-canvas-text-active: hsla(var(--bw-0), 1); - } - - [data-priority='secondary'] { - --woly-shape-default: hsla(var(--secondary-500), 1); - --woly-shape-disabled: hsla(var(--secondary-200), 1); - --woly-shape-hover: hsla(var(--secondary-600), 1); - --woly-shape-active: hsla(var(--secondary-700), 1); - - --woly-shape-text-default: hsla(var(--bw-1000), 1); - --woly-canvas-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-1000), 1); - --woly-shape-text-active: hsla(var(--bw-1000), 1); - - --woly-canvas-default: transparent; - --woly-canvas-disabled: hsla(var(--bw-200), 1); - --woly-canvas-hover: hsla(var(--secondary-600), 1); - --woly-canvas-active: hsla(var(--secondary-700), 1); - - --woly-canvas-text-default: hsla(var(--bw-0), 1); - --woly-canvas-text-disabled: hsla(var(--bw-300), 1); - --woly-canvas-text-hover: hsla(var(--bw-0), 1); - --woly-canvas-text-active: hsla(var(--bw-0), 1); - } - - [data-priority='white'] { - --woly-shape-default: hsla(var(--bw-1000), 1); - --woly-shape-disabled: hsla(var(--bw-200), 1); - --woly-shape-hover: hsla(var(--bw-400), 1); - --woly-shape-active: hsla(var(--bw-600), 1); - - --woly-shape-text-default: hsla(var(--bw-0), 1); - --woly-shape-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-0), 1); - --woly-shape-text-active: hsla(var(--bw-0), 1); - - --woly-canvas-default: transparent; - --woly-canvas-disabled: hsla(var(--bw-200), 1); - --woly-canvas-hover: transparent; - --woly-canvas-active: transparent; - - --woly-canvas-text-default: hsla(var(--bw-0), 1); - --woly-canvas-text-disabled: hsla(var(--bw-300), 1); - --woly-canvas-text-hover: hsla(var(--bw-600), 1); - --woly-canvas-text-active: hsla(var(--bw-700), 1); - } - - [data-priority='danger'] { - --woly-shape-default: hsla(var(--danger-500), 1); - --woly-shape-disabled: hsla(var(--danger-200), 1); - --woly-shape-hover: hsla(var(--danger-600), 1); - --woly-shape-active: hsla(var(--danger-700), 1); - - --woly-shape-text-default: hsla(var(--bw-1000), 1); - --woly-shape-text-disabled: hsla(var(--bw-300), 1); - --woly-shape-text-hover: hsla(var(--bw-1000), 1); - --woly-shape-text-active: hsla(var(--bw-1000), 1); - - --woly-canvas-default: transparent; - --woly-canvas-disabled: hsla(var(--danger-200), 1); - --woly-canvas-hover: hsla(var(--danger-600), 1); - --woly-canvas-active: hsla(var(--danger-700), 1); - - --woly-canvas-text-default: hsla(var(--danger-500), 1); - --woly-canvas-text-disabled: hsla(var(--danger-300), 1); - --woly-canvas-text-hover: hsla(var(--danger-600), 1); - --woly-canvas-text-active: hsla(var(--danger-700), 1); - } + ${createPriority({ + priorityName: 'primary', + paletteName: 'primary', + bwPaletteName: 'bw', + weight: 'filled', + })} + + ${createPriority({ + priorityName: 'secondary', + paletteName: 'secondary', + bwPaletteName: 'bw', + weight: 'filled', + })} + + ${createPriority({ + priorityName: 'default', + bwPaletteName: 'bw', + weight: 'filled', + })} + + ${createPriority({ + priorityName: 'goast', + bwPaletteName: 'bw', + weight: 'transparent', + })} + + ${createPriority({ + priorityName: 'danger', + paletteName: 'danger', + bwPaletteName: 'bw', + weight: 'filled', + })} + + /** for examples of priorities in button */ + ${createPriority({ + priorityName: 'primary-goast', + paletteName: 'primary', + bwPaletteName: 'bw', + weight: 'transparent', + })} + + ${createPriority({ + priorityName: 'secondary-goast', + paletteName: 'secondary', + bwPaletteName: 'bw', + weight: 'transparent', + })} `; diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx new file mode 100644 index 00000000..0aa7dc94 --- /dev/null +++ b/src/lib/priority.tsx @@ -0,0 +1,64 @@ +import { css } from 'styled-components'; + +interface PriorityType { + bwPaletteName: string; + paletteName?: string; + priorityName: string; + weight: 'filled' | 'outlined' | 'transparent'; +} + +export const createPriority = ({ + bwPaletteName, + paletteName, + priorityName, + weight, +}: PriorityType) => { + const palette = paletteName || bwPaletteName; + const colors: Record = { + 'shape-default': 'transparent', + 'shape-disabled': `hsla(var(--${palette}-200), 1)`, + 'shape-hover': 'transparent', + 'shape-active': 'transparent', + 'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-text-disabled': `hsla(var(--${palette}-300), 1)`, + 'shape-text-hover': `hsla(var(--${bwPaletteName}-600), 1)`, + 'shape-text-active': `hsla(var(--${bwPaletteName}-700), 1)`, + 'canvas-default': `transparent`, + 'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`, + 'canvas-hover': `transparent`, + 'canvas-active': `transparent`, + 'canvas-text-default': `hsla(var(--${bwPaletteName}-0), 1);`, + 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`, + 'canvas-text-hover': `hsla(var(--${palette}-600), 1);`, + 'canvas-text-active': `hsla(var(--${palette}-700), 1);`, + }; + + if (weight === 'filled') { + colors['shape-default'] = `hsla(var(--${palette}-500), 1)`; + colors['shape-disabled'] = `hsla(var(--${palette}-200), 1)`; + colors['shape-hover'] = `hsla(var(--${palette}-600), 1)`; + colors['shape-active'] = `hsla(var(--${palette}-700), 1)`; + colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`; + colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`; + colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; + colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; + } + + if (weight === 'none') { + colors['shape-disabled'] = `transparent`; + colors['shape-text-default'] = `hsla(var(--${palette}-500), 1)`; + colors['shape-text-hover'] = `hsla(var(--${palette}-600), 1)`; + colors['shape-text-active'] = `hsla(var(--${palette}-700), 1)`; + } + + const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`); + + return css` + [data-priority='${priorityName}'] { + ${priorityPalette.join('\n')} + } + `; +}; diff --git a/src/woly/atoms/button-icon/usage.mdx b/src/woly/atoms/button-icon/usage.mdx index 5a5cddd2..394de25c 100644 --- a/src/woly/atoms/button-icon/usage.mdx +++ b/src/woly/atoms/button-icon/usage.mdx @@ -74,6 +74,7 @@ Button-icon's size can controlled by block-container and it`s width is equal to ### Weight and priority Button-icon can be represented in primary, secondary or default priorities and can be styled by changing icon`s weight: fill, outline, transparent. + In case of choosing button-icon in black-and-white priority with outline styles use the opposite background color to the text color of button-icon. diff --git a/src/woly/atoms/button/priorities.mdx b/src/woly/atoms/button/priorities.mdx new file mode 100644 index 00000000..ca41d8f1 --- /dev/null +++ b/src/woly/atoms/button/priorities.mdx @@ -0,0 +1,174 @@ +import {Button, Input, Table, Tbody, Td, Th, Thead, Tr} from 'ui' +import {Playground} from 'lib/playground' + +### Priorities + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Colors/WeightPrimarySecondaryDefault
Filled +
+
+
+
+
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
Outlined +
+
+
+
+
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
None +
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
+ + diff --git a/src/woly/atoms/button/state-props.tsx b/src/woly/atoms/button/state-props.tsx index 002ced97..42940981 100644 --- a/src/woly/atoms/button/state-props.tsx +++ b/src/woly/atoms/button/state-props.tsx @@ -20,7 +20,7 @@ interface ComponentButtonProps { export const variants: ComponentProps = { name: 'variants', - values: ['primary', 'secondary'], + values: ['primary', 'secondary', 'danger', 'goast', 'default'], }; export const sizes: ComponentProps = { @@ -41,7 +41,7 @@ export const ComponentButton: React.FC<{ prop: ComponentButtonProps }> = ({ prop onClick={() => console.log('Hi!')} outlined={prop.outlined} text="Button" - variant={prop.variants} + priority={prop.variants} /> ); From 18db9ace7175bcaee240d34da48293df7298d7c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A8=D0=B0=D1=80=D0=B0=D0=B5=D0=B2=20=D0=90=D0=B9=D0=BD?= =?UTF-8?q?=D1=83=D1=80=20=D0=A0=D0=B0=D0=B8=D0=BB=D1=8C=D0=B5=D0=B2=D0=B8?= =?UTF-8?q?=D1=87?= Date: Tue, 6 Jul 2021 14:38:38 +0300 Subject: [PATCH 02/11] refactor: remove examples, remove some weight variants --- src/dev/global.ts | 26 ++-- src/lib/priority.tsx | 17 ++- src/woly/atoms/button/priorities.mdx | 174 --------------------------- 3 files changed, 17 insertions(+), 200 deletions(-) delete mode 100644 src/woly/atoms/button/priorities.mdx diff --git a/src/dev/global.ts b/src/dev/global.ts index bfad5024..01982a68 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -58,47 +58,39 @@ export const Global = styled(WolyGlobalStyles)` priorityName: 'primary', paletteName: 'primary', bwPaletteName: 'bw', - weight: 'filled', + weight: 'fill', })} ${createPriority({ priorityName: 'secondary', paletteName: 'secondary', bwPaletteName: 'bw', - weight: 'filled', + weight: 'fill', })} ${createPriority({ priorityName: 'default', bwPaletteName: 'bw', - weight: 'filled', + weight: 'fill', })} ${createPriority({ - priorityName: 'goast', + priorityName: 'white', bwPaletteName: 'bw', - weight: 'transparent', + weight: 'outline', })} ${createPriority({ priorityName: 'danger', paletteName: 'danger', bwPaletteName: 'bw', - weight: 'filled', + weight: 'fill', })} - /** for examples of priorities in button */ ${createPriority({ - priorityName: 'primary-goast', - paletteName: 'primary', - bwPaletteName: 'bw', - weight: 'transparent', - })} - - ${createPriority({ - priorityName: 'secondary-goast', - paletteName: 'secondary', + priorityName: 'success', + paletteName: 'success', bwPaletteName: 'bw', - weight: 'transparent', + weight: 'fill', })} `; diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx index 0aa7dc94..4e509dc8 100644 --- a/src/lib/priority.tsx +++ b/src/lib/priority.tsx @@ -4,7 +4,7 @@ interface PriorityType { bwPaletteName: string; paletteName?: string; priorityName: string; - weight: 'filled' | 'outlined' | 'transparent'; + weight: 'fill' | 'outline'; } export const createPriority = ({ @@ -14,46 +14,45 @@ export const createPriority = ({ weight, }: PriorityType) => { const palette = paletteName || bwPaletteName; + const colors: Record = { 'shape-default': 'transparent', 'shape-disabled': `hsla(var(--${palette}-200), 1)`, 'shape-hover': 'transparent', 'shape-active': 'transparent', + 'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`, 'shape-text-disabled': `hsla(var(--${palette}-300), 1)`, 'shape-text-hover': `hsla(var(--${bwPaletteName}-600), 1)`, 'shape-text-active': `hsla(var(--${bwPaletteName}-700), 1)`, + 'canvas-default': `transparent`, 'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`, 'canvas-hover': `transparent`, 'canvas-active': `transparent`, + 'canvas-text-default': `hsla(var(--${bwPaletteName}-0), 1);`, 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`, 'canvas-text-hover': `hsla(var(--${palette}-600), 1);`, 'canvas-text-active': `hsla(var(--${palette}-700), 1);`, }; - if (weight === 'filled') { + if (weight === 'fill') { colors['shape-default'] = `hsla(var(--${palette}-500), 1)`; colors['shape-disabled'] = `hsla(var(--${palette}-200), 1)`; colors['shape-hover'] = `hsla(var(--${palette}-600), 1)`; colors['shape-active'] = `hsla(var(--${palette}-700), 1)`; + colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-1000), 1)`; colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`; colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`; colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; } - if (weight === 'none') { - colors['shape-disabled'] = `transparent`; - colors['shape-text-default'] = `hsla(var(--${palette}-500), 1)`; - colors['shape-text-hover'] = `hsla(var(--${palette}-600), 1)`; - colors['shape-text-active'] = `hsla(var(--${palette}-700), 1)`; - } - const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`); return css` diff --git a/src/woly/atoms/button/priorities.mdx b/src/woly/atoms/button/priorities.mdx deleted file mode 100644 index ca41d8f1..00000000 --- a/src/woly/atoms/button/priorities.mdx +++ /dev/null @@ -1,174 +0,0 @@ -import {Button, Input, Table, Tbody, Td, Th, Thead, Tr} from 'ui' -import {Playground} from 'lib/playground' - -### Priorities - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Colors/WeightPrimarySecondaryDefault
Filled -
-
-
-
-
-
-
-
- 		-
-
-
-
- 		-
-
-
-
-
-
-
Outlined -
-
-
-
-
-
-
-
- 		-
-
-
-
- 		-
-
-
-
-
-
-
None -
-
-
-
- 		-
-
-
-
- 		-
-
-
-
-
-
-
- - From 7032ca9ddab744efa2cdc7cd9d09409e45376d59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A8=D0=B0=D1=80=D0=B0=D0=B5=D0=B2=20=D0=90=D0=B9=D0=BD?= =?UTF-8?q?=D1=83=D1=80=20=D0=A0=D0=B0=D0=B8=D0=BB=D1=8C=D0=B5=D0=B2=D0=B8?= =?UTF-8?q?=D1=87?= Date: Tue, 6 Jul 2021 15:13:12 +0300 Subject: [PATCH 03/11] fix: correct white priority --- src/dev/global.ts | 2 +- src/lib/priority.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/dev/global.ts b/src/dev/global.ts index 01982a68..b7e27c3c 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -77,7 +77,7 @@ export const Global = styled(WolyGlobalStyles)` ${createPriority({ priorityName: 'white', bwPaletteName: 'bw', - weight: 'outline', + weight: 'transparent', })} ${createPriority({ diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx index 4e509dc8..338e45c9 100644 --- a/src/lib/priority.tsx +++ b/src/lib/priority.tsx @@ -4,7 +4,7 @@ interface PriorityType { bwPaletteName: string; paletteName?: string; priorityName: string; - weight: 'fill' | 'outline'; + weight: 'fill' | 'transparent'; } export const createPriority = ({ @@ -16,15 +16,15 @@ export const createPriority = ({ const palette = paletteName || bwPaletteName; const colors: Record = { - 'shape-default': 'transparent', + 'shape-default': `hsla(var(--${bwPaletteName}-1000), 1)`, 'shape-disabled': `hsla(var(--${palette}-200), 1)`, - 'shape-hover': 'transparent', - 'shape-active': 'transparent', + 'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`, + 'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`, 'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`, 'shape-text-disabled': `hsla(var(--${palette}-300), 1)`, - 'shape-text-hover': `hsla(var(--${bwPaletteName}-600), 1)`, - 'shape-text-active': `hsla(var(--${bwPaletteName}-700), 1)`, + 'shape-text-hover': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-text-active': `hsla(var(--${bwPaletteName}-0), 1)`, 'canvas-default': `transparent`, 'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`, @@ -49,6 +49,7 @@ export const createPriority = ({ colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`; colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`; + colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; } From 7e88cee4765a498d2ee379097ef33bafef1f498d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 13:12:33 +0300 Subject: [PATCH 04/11] fix: correct paths --- src/dev/global.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/dev/global.ts b/src/dev/global.ts index b7e27c3c..282712a7 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -1,9 +1,8 @@ import styled from 'styled-components'; import { WolyGlobalStyles } from 'ui/woly-global-styles'; import { createPalette } from 'lib/palette'; +import { createPriority } from 'lib/priority'; -import { createPalette } from './palette'; -import { createPriority } from './priority'; import { systemUi } from './font-stacks'; export const Global = styled(WolyGlobalStyles)` From bf0147415af547ca0b378148c1d33e28b0f270e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 14:45:32 +0300 Subject: [PATCH 05/11] refactor: return example, update branch --- src/woly/atoms/button/priorities.mdx | 174 +++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 src/woly/atoms/button/priorities.mdx diff --git a/src/woly/atoms/button/priorities.mdx b/src/woly/atoms/button/priorities.mdx new file mode 100644 index 00000000..ca41d8f1 --- /dev/null +++ b/src/woly/atoms/button/priorities.mdx @@ -0,0 +1,174 @@ +import {Button, Input, Table, Tbody, Td, Th, Thead, Tr} from 'ui' +import {Playground} from 'lib/playground' + +### Priorities + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Colors/WeightPrimarySecondaryDefault
Filled +
+
+
+
+
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
Outlined +
+
+
+
+
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
None +
+
+
+
+ 		+
+
+
+
+ 		+
+
+
+
+
+
+
+ + From 5a8f668b6b397ac45b4ffa7764520220527c5d15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 15:06:55 +0300 Subject: [PATCH 06/11] fix: correct path --- src/woly/atoms/button/priorities.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/woly/atoms/button/priorities.mdx b/src/woly/atoms/button/priorities.mdx index ca41d8f1..01e9bceb 100644 --- a/src/woly/atoms/button/priorities.mdx +++ b/src/woly/atoms/button/priorities.mdx @@ -1,5 +1,5 @@ import {Button, Input, Table, Tbody, Td, Th, Thead, Tr} from 'ui' -import {Playground} from 'lib/playground' +import {Playground} from 'dev/playground' ### Priorities From cbe5e8c43ecf2682ee3ebeef4bfdaddc671d40b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 16:19:33 +0300 Subject: [PATCH 07/11] feat: add palette example --- .../palette-example/palette-example.tsx | 71 +++++++++++++++++++ src/woly/organisms/palette-example/usage.mdx | 5 ++ 2 files changed, 76 insertions(+) create mode 100644 src/woly/organisms/palette-example/palette-example.tsx create mode 100644 src/woly/organisms/palette-example/usage.mdx diff --git a/src/woly/organisms/palette-example/palette-example.tsx b/src/woly/organisms/palette-example/palette-example.tsx new file mode 100644 index 00000000..daecc5ff --- /dev/null +++ b/src/woly/organisms/palette-example/palette-example.tsx @@ -0,0 +1,71 @@ +/* eslint-disable prettier/prettier */ +import React from 'react'; +import styled from 'styled-components'; +import { Playground } from 'dev/playground'; + +export const PaletteExample = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Shape DefaultShape DisabledShape HoverShape ActiveShape Text DefaultShape Text DisabledShape Text HoverShape Text ActiveCanvas DefaultCanvas DisabledCanvas HoverCanvas ActiveCanvas Text DefaultCanvas Text DisabledCanvas Text HoverCanvas Text Active
+ + + ); +}; + +const PaletteRow = ({ name }: { name: string }) => ( + + {name.charAt(0).toLowerCase() + name.slice(1)} + + + + + + + + + + + + + + + + + +); + +const Wrapper = styled.div` + position: relative; + + td { + width: 200px; + height: 50px; + } +`; diff --git a/src/woly/organisms/palette-example/usage.mdx b/src/woly/organisms/palette-example/usage.mdx new file mode 100644 index 00000000..f0d53db2 --- /dev/null +++ b/src/woly/organisms/palette-example/usage.mdx @@ -0,0 +1,5 @@ +import { PaletteExample } from './palette-example' + +## Usage + + From 0a6ac11970e26d82e997877ea0d335b0f834d220 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 17:42:57 +0300 Subject: [PATCH 08/11] fix: correct vw palette --- src/dev/global.ts | 4 ++-- src/lib/priority.tsx | 20 ++++++++++---------- src/woly/atoms/text/index.tsx | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/dev/global.ts b/src/dev/global.ts index 282712a7..dcb39201 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -13,8 +13,8 @@ export const Global = styled(WolyGlobalStyles)` } /* base colors */ - --bw-0: 0, 0%, 0%; - --bw-1000: 0, 0%, 100%; + --bw-0: 0, 0%, 100%; + --bw-1000: 0, 0%, 0%; /* bw palette */ ${createPalette('247, 7%, 48%', 'bw')} diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx index 338e45c9..8a51f8af 100644 --- a/src/lib/priority.tsx +++ b/src/lib/priority.tsx @@ -16,22 +16,22 @@ export const createPriority = ({ const palette = paletteName || bwPaletteName; const colors: Record = { - 'shape-default': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'shape-default': `hsla(var(--${bwPaletteName}-0), 1)`, 'shape-disabled': `hsla(var(--${palette}-200), 1)`, 'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`, 'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`, - 'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`, 'shape-text-disabled': `hsla(var(--${palette}-300), 1)`, - 'shape-text-hover': `hsla(var(--${bwPaletteName}-0), 1)`, - 'shape-text-active': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'shape-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`, 'canvas-default': `transparent`, 'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`, 'canvas-hover': `transparent`, 'canvas-active': `transparent`, - 'canvas-text-default': `hsla(var(--${bwPaletteName}-0), 1);`, + 'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1);`, 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`, 'canvas-text-hover': `hsla(var(--${palette}-600), 1);`, 'canvas-text-active': `hsla(var(--${palette}-700), 1);`, @@ -43,15 +43,15 @@ export const createPriority = ({ colors['shape-hover'] = `hsla(var(--${palette}-600), 1)`; colors['shape-active'] = `hsla(var(--${palette}-700), 1)`; - colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-1000), 1)`; - colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; - colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-0), 1)`; + colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; + colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`; colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`; - colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; - colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; + colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; + colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; } const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`); diff --git a/src/woly/atoms/text/index.tsx b/src/woly/atoms/text/index.tsx index 84aec42c..6f42aec8 100644 --- a/src/woly/atoms/text/index.tsx +++ b/src/woly/atoms/text/index.tsx @@ -15,7 +15,7 @@ const map = (properties: TextProps & Priority) => ({ }); export const Text = styled.p.attrs(map)` - --local-color: var(--woly-shape-text-default); + --local-color: var(--woly-canvas-text-default); margin: 0; From e4ecbb501292bc2d0f1cae0e44de701f1d148e7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 17:43:43 +0300 Subject: [PATCH 09/11] feat: add all palettes to example --- src/lib/palette.tsx | 2 +- .../palette-example/palette-example.tsx | 34 +++++++++++++++---- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/lib/palette.tsx b/src/lib/palette.tsx index ac804c01..8e1e4be1 100644 --- a/src/lib/palette.tsx +++ b/src/lib/palette.tsx @@ -22,7 +22,7 @@ const saturationFn = (number: number, saturation: number) => { return saturation - 10; }; -const COLOR_NUMBERS = [100, 200, 300, 400, 500, 600, 700, 800]; +const COLOR_NUMBERS = [100, 200, 300, 400, 500, 600, 700, 800, 900]; export const createPalette = (color: string, name: string) => { const hsl = getHsl(color); diff --git a/src/woly/organisms/palette-example/palette-example.tsx b/src/woly/organisms/palette-example/palette-example.tsx index daecc5ff..9562926c 100644 --- a/src/woly/organisms/palette-example/palette-example.tsx +++ b/src/woly/organisms/palette-example/palette-example.tsx @@ -7,6 +7,14 @@ export const PaletteExample = () => { return ( + + + + + + + +
- - - - - - + + + + + +
@@ -27,12 +35,12 @@ export const PaletteExample = () => { Canvas Text Hover Canvas Text Active
@@ -40,6 +48,17 @@ export const PaletteExample = () => { }; const PaletteRow = ({ name }: { name: string }) => ( + + {name.charAt(0).toLowerCase() + name.slice(1)} + {Array.from({ length: 11 }).map((value, index) => { + return ( + + ); + })} + +); + +const PriorityRow = ({ name }: { name: string }) => ( {name.charAt(0).toLowerCase() + name.slice(1)} @@ -64,6 +83,9 @@ const PaletteRow = ({ name }: { name: string }) => ( const Wrapper = styled.div` position: relative; + background-color: #dfdbe5; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 8 8'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E"); + td { width: 200px; height: 50px; From 36ac2f3fcdb3f16122b2d12f68ed015788132157 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Thu, 5 Aug 2021 18:32:55 +0300 Subject: [PATCH 10/11] refactor: explicitly pass palette name --- src/dev/global.ts | 19 +++++++++++-------- src/lib/priority.tsx | 24 +++++++++++------------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/dev/global.ts b/src/dev/global.ts index dcb39201..20091269 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -54,31 +54,34 @@ export const Global = styled(WolyGlobalStyles)` --woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%); ${createPriority({ - priorityName: 'primary', - paletteName: 'primary', + priorityName: 'default', + paletteName: 'bw', bwPaletteName: 'bw', weight: 'fill', })} ${createPriority({ - priorityName: 'secondary', - paletteName: 'secondary', + priorityName: 'white', + paletteName: 'bw', bwPaletteName: 'bw', - weight: 'fill', + weight: 'transparent', })} ${createPriority({ - priorityName: 'default', + priorityName: 'primary', + paletteName: 'primary', bwPaletteName: 'bw', weight: 'fill', })} ${createPriority({ - priorityName: 'white', + priorityName: 'secondary', + paletteName: 'secondary', bwPaletteName: 'bw', - weight: 'transparent', + weight: 'fill', })} + ${createPriority({ priorityName: 'danger', paletteName: 'danger', diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx index 8a51f8af..dcd637dc 100644 --- a/src/lib/priority.tsx +++ b/src/lib/priority.tsx @@ -2,7 +2,7 @@ import { css } from 'styled-components'; interface PriorityType { bwPaletteName: string; - paletteName?: string; + paletteName: string; priorityName: string; weight: 'fill' | 'transparent'; } @@ -13,16 +13,14 @@ export const createPriority = ({ priorityName, weight, }: PriorityType) => { - const palette = paletteName || bwPaletteName; - const colors: Record = { 'shape-default': `hsla(var(--${bwPaletteName}-0), 1)`, - 'shape-disabled': `hsla(var(--${palette}-200), 1)`, + 'shape-disabled': `hsla(var(--${paletteName}-200), 1)`, 'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`, 'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`, 'shape-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`, - 'shape-text-disabled': `hsla(var(--${palette}-300), 1)`, + 'shape-text-disabled': `hsla(var(--${paletteName}-300), 1)`, 'shape-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`, 'shape-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`, @@ -33,22 +31,22 @@ export const createPriority = ({ 'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1);`, 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`, - 'canvas-text-hover': `hsla(var(--${palette}-600), 1);`, - 'canvas-text-active': `hsla(var(--${palette}-700), 1);`, + 'canvas-text-hover': `hsla(var(--${paletteName}-600), 1);`, + 'canvas-text-active': `hsla(var(--${paletteName}-700), 1);`, }; if (weight === 'fill') { - colors['shape-default'] = `hsla(var(--${palette}-500), 1)`; - colors['shape-disabled'] = `hsla(var(--${palette}-200), 1)`; - colors['shape-hover'] = `hsla(var(--${palette}-600), 1)`; - colors['shape-active'] = `hsla(var(--${palette}-700), 1)`; + colors['shape-default'] = `hsla(var(--${paletteName}-500), 1)`; + colors['shape-disabled'] = `hsla(var(--${paletteName}-200), 1)`; + colors['shape-hover'] = `hsla(var(--${paletteName}-600), 1)`; + colors['shape-active'] = `hsla(var(--${paletteName}-700), 1)`; colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-0), 1)`; colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; - colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`; - colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`; + colors['canvas-hover'] = `hsla(var(--${paletteName}-600), 1)`; + colors['canvas-active'] = `hsla(var(--${paletteName}-700), 1)`; colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; From 267c1563b3a363a849cbe51c8564477a620a0124 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=B9=D0=BD=D1=83=D1=80?= Date: Fri, 6 Aug 2021 17:28:57 +0300 Subject: [PATCH 11/11] feat: add priority-weight matrix --- src/dev/global.ts | 35 +++-- src/dev/maps/common/combination.ts | 35 +++++ src/dev/maps/common/group-by-key.ts | 16 +++ src/dev/maps/priority-weight-map.tsx | 111 +++++++++++++++ src/dev/playground.tsx | 6 +- src/lib/priority.tsx | 49 ++----- src/woly/organisms/palette-example/index.tsx | 130 ++++++++++++++++++ .../palette-example/palette-example.tsx | 93 ------------- src/woly/organisms/palette-example/usage.mdx | 14 +- 9 files changed, 341 insertions(+), 148 deletions(-) create mode 100644 src/dev/maps/common/combination.ts create mode 100644 src/dev/maps/common/group-by-key.ts create mode 100644 src/dev/maps/priority-weight-map.tsx create mode 100644 src/woly/organisms/palette-example/index.tsx delete mode 100644 src/woly/organisms/palette-example/palette-example.tsx diff --git a/src/dev/global.ts b/src/dev/global.ts index 20091269..7b2a75c2 100644 --- a/src/dev/global.ts +++ b/src/dev/global.ts @@ -53,46 +53,55 @@ export const Global = styled(WolyGlobalStyles)` --woly-backdrop: hsla(var(--bw-0), 0.3); --woly-shadow: 3px 3px 9px hsla(0, 0%, 22%, 12%); - ${createPriority({ - priorityName: 'default', - paletteName: 'bw', - bwPaletteName: 'bw', - weight: 'fill', - })} + [data-priority='white'] { + --woly-shape-default: hsla(var(--bw-0), 1); + --woly-shape-disabled: hsla(var(--bw-200), 1); + --woly-shape-hover: hsla(var(--bw-400), 1); + --woly-shape-active: hsla(var(--bw-600), 1); + + --woly-shape-text-default: hsla(var(--bw-1000), 1); + --woly-shape-text-disabled: hsla(var(--bw-300), 1); + --woly-shape-text-hover: hsla(var(--bw-1000), 1); + --woly-shape-text-active: hsla(var(--bw-1000), 1); + + --woly-canvas-default: transparent; + --woly-canvas-disabled: hsla(var(--bw-200), 1); + --woly-canvas-hover: transparent; + --woly-canvas-active: transparent; + + --woly-canvas-text-default: hsla(var(--bw-1000), 1); + --woly-canvas-text-disabled: hsla(var(--bw-300), 1); + --woly-canvas-text-hover: hsla(var(--bw-600), 1); + --woly-canvas-text-active: hsla(var(--bw-700), 1); + } ${createPriority({ - priorityName: 'white', + priorityName: 'default', paletteName: 'bw', bwPaletteName: 'bw', - weight: 'transparent', })} ${createPriority({ priorityName: 'primary', paletteName: 'primary', bwPaletteName: 'bw', - weight: 'fill', })} ${createPriority({ priorityName: 'secondary', paletteName: 'secondary', bwPaletteName: 'bw', - weight: 'fill', })} - ${createPriority({ priorityName: 'danger', paletteName: 'danger', bwPaletteName: 'bw', - weight: 'fill', })} ${createPriority({ priorityName: 'success', paletteName: 'success', bwPaletteName: 'bw', - weight: 'fill', })} `; diff --git a/src/dev/maps/common/combination.ts b/src/dev/maps/common/combination.ts new file mode 100644 index 00000000..a57488b1 --- /dev/null +++ b/src/dev/maps/common/combination.ts @@ -0,0 +1,35 @@ +type VaritationsMap = Record; + +export function createCombinations(obj: VaritationsMap) { + const fieldNames = Object.keys(obj); + + if (fieldNames.length === 0) return [{}]; + + function _combinations( + [key, ...restKeys]: Combination, + combinations: Record, + ): Record[] { + const possibleValues = obj[key]; + + if (!Array.isArray(possibleValues) || possibleValues.length === 0) { + throw new Error(`Please provide a non-empty array of possible values for prop ${key}`); + } + + const variation = possibleValues.map((fieldValue) => ({ + ...combinations, + [key]: fieldValue, + })); + + if (restKeys.length === 0) { + return variation; + } + + return flatMap(variation, (newAcc) => _combinations(restKeys, newAcc)); + } + + return _combinations(fieldNames, {}); +} + +function flatMap(arr: Array, fn: (value: T, index: number, array: Array) => Array) { + return arr.map(fn).reduce((a, b) => a.concat(b)); +} diff --git a/src/dev/maps/common/group-by-key.ts b/src/dev/maps/common/group-by-key.ts new file mode 100644 index 00000000..3c90486e --- /dev/null +++ b/src/dev/maps/common/group-by-key.ts @@ -0,0 +1,16 @@ +export function groupByKey, Key extends keyof Variants>( + arr: Variants[], + key: Key, + keyMapper?: (fn: Variants[Key]) => string, +) { + return arr.reduce>((all, current) => { + const valueAsKey = keyMapper ? keyMapper(current[key]) : `${current[key]}`; + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (all[valueAsKey] === undefined) { + all[valueAsKey] = []; + } + all[valueAsKey].push(current); + return all; + }, {}); +} diff --git a/src/dev/maps/priority-weight-map.tsx b/src/dev/maps/priority-weight-map.tsx new file mode 100644 index 00000000..dfba0bb6 --- /dev/null +++ b/src/dev/maps/priority-weight-map.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Global } from 'dev/global'; +import { Grid, Heading } from 'ui'; + +import { createCombinations } from './common/combination'; +import { groupByKey } from './common/group-by-key'; + +export const priorities = ['default', 'primary', 'secondary', 'white', 'danger', 'success']; + +interface ThemeProps { + weight: string; + priority: string; + disabled: boolean; +} + +interface PriorityWeightMapProps { + weights: ('fill' | 'outline' | 'goast' | 'transparent')[]; + render: (props: ThemeProps) => React.ReactElement; +} + +export const PriorityWeightMap = ({ weights, render }: PriorityWeightMapProps) => { + const allCombinations = createCombinations({ + weight: weights, + priority: priorities, + disabled: [true, false], + }); + + if (Object.keys(allCombinations).length === 0) return null; + + return ( + + {Object.entries(groupByKey(allCombinations, 'priority')).map( + ([priority, combinations], index) => { + return ( + // eslint-disable-next-line react/no-array-index-key + +
{priority}
+ +
{/* plug to make empty space at top left corner */} + {weights.map((weight, index) => ( + + {weight} + + ))} + {Object.entries( + groupByKey(combinations, 'disabled', (key) => (key ? 'normal' : 'disable')), + ).map(([state, variations], index) => { + return ( + + + {state} + + {variations.map((variation, index) => { + const { disabled, ...props } = variation as ThemeProps; + + return ( + + {render({ ...props, disabled: state === 'disable' })} + + ); + })} + + ); + })} + + + ); + }, + )} + + ); +}; + +const Wrapper = styled(Global)` + display: flex; + flex-direction: row; + overflow-y: auto; +`; + +const PriorityGroup = styled.div` + display: flex; + flex-direction: column; + padding: 20px; +`; + +const VariantCell = styled.div` + display: flex; + align-items: center; + justify-content: center; + min-width: 100px; + padding: 20px; +`; + +const Header = styled(Heading)` + padding-bottom: 15px; + padding-left: 5px; +`; + +const GridTemplate = styled(Grid)` + gap: 10px; + + color: #c4c4c4; + white-space: pre-line; +`; + +const Centered = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; diff --git a/src/dev/playground.tsx b/src/dev/playground.tsx index 12c24f8f..e4f323ff 100644 --- a/src/dev/playground.tsx +++ b/src/dev/playground.tsx @@ -10,9 +10,9 @@ import { block } from './block'; export { block }; interface Props { - size: keyof typeof block; - direction: 'vertical' | 'horizontal'; - configurators: ConfiguratorName[]; + size?: keyof typeof block; + direction?: 'vertical' | 'horizontal'; + configurators?: ConfiguratorName[]; } export const Playground: React.FC = ({ diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx index dcd637dc..a6871643 100644 --- a/src/lib/priority.tsx +++ b/src/lib/priority.tsx @@ -4,54 +4,31 @@ interface PriorityType { bwPaletteName: string; paletteName: string; priorityName: string; - weight: 'fill' | 'transparent'; } -export const createPriority = ({ - bwPaletteName, - paletteName, - priorityName, - weight, -}: PriorityType) => { +export const createPriority = ({ bwPaletteName, paletteName, priorityName }: PriorityType) => { const colors: Record = { - 'shape-default': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-default': `hsla(var(--${paletteName}-500), 1)`, 'shape-disabled': `hsla(var(--${paletteName}-200), 1)`, - 'shape-hover': `hsla(var(--${bwPaletteName}-400), 1)`, - 'shape-active': `hsla(var(--${bwPaletteName}-600), 1)`, + 'shape-hover': `hsla(var(--${paletteName}-600), 1)`, + 'shape-active': `hsla(var(--${paletteName}-700), 1)`, - 'shape-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'shape-text-default': `hsla(var(--${bwPaletteName}-0), 1)`, 'shape-text-disabled': `hsla(var(--${paletteName}-300), 1)`, - 'shape-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`, - 'shape-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'shape-text-hover': `hsla(var(--${bwPaletteName}-0), 1)`, + 'shape-text-active': `hsla(var(--${bwPaletteName}-0), 1)`, 'canvas-default': `transparent`, 'canvas-disabled': `hsla(var(--${bwPaletteName}-200), 1)`, - 'canvas-hover': `transparent`, - 'canvas-active': `transparent`, + 'canvas-hover': `hsla(var(--${paletteName}-600), 1)`, + 'canvas-active': `hsla(var(--${paletteName}-700), 1)`, - 'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1);`, - 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1);`, - 'canvas-text-hover': `hsla(var(--${paletteName}-600), 1);`, - 'canvas-text-active': `hsla(var(--${paletteName}-700), 1);`, + 'canvas-text-default': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'canvas-text-disabled': `hsla(var(--${bwPaletteName}-300), 1)`, + 'canvas-text-hover': `hsla(var(--${bwPaletteName}-1000), 1)`, + 'canvas-text-active': `hsla(var(--${bwPaletteName}-1000), 1)`, }; - if (weight === 'fill') { - colors['shape-default'] = `hsla(var(--${paletteName}-500), 1)`; - colors['shape-disabled'] = `hsla(var(--${paletteName}-200), 1)`; - colors['shape-hover'] = `hsla(var(--${paletteName}-600), 1)`; - colors['shape-active'] = `hsla(var(--${paletteName}-700), 1)`; - - colors['shape-text-default'] = `hsla(var(--${bwPaletteName}-0), 1)`; - colors['shape-text-hover'] = `hsla(var(--${bwPaletteName}-0), 1)`; - colors['shape-text-active'] = `hsla(var(--${bwPaletteName}-0), 1)`; - - colors['canvas-hover'] = `hsla(var(--${paletteName}-600), 1)`; - colors['canvas-active'] = `hsla(var(--${paletteName}-700), 1)`; - - colors['canvas-text-hover'] = `hsla(var(--${bwPaletteName}-1000), 1)`; - colors['canvas-text-active'] = `hsla(var(--${bwPaletteName}-1000), 1)`; - } - const priorityPalette = Object.keys(colors).map((key) => `--woly-${key}: ${colors[key]};`); return css` diff --git a/src/woly/organisms/palette-example/index.tsx b/src/woly/organisms/palette-example/index.tsx new file mode 100644 index 00000000..096dfb78 --- /dev/null +++ b/src/woly/organisms/palette-example/index.tsx @@ -0,0 +1,130 @@ +/* eslint-disable prettier/prettier */ +import React from 'react'; +import styled from 'styled-components'; +import { ButtonIcon } from 'ui'; +import { IconSearch } from 'static/icons'; +import { Playground } from 'dev/playground'; +import { PriorityWeightMap } from 'dev/maps/priority-weight-map'; + +export const Palettes = () => { + return ( + + + + + + + + + + + + + + + + + + + + + +
+ 01002003004005006007008009001000
+ + ); +}; + +export const PriorityVariables = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Shape DefaultShape DisabledShape HoverShape ActiveShape Text DefaultShape Text DisabledShape Text HoverShape Text ActiveCanvas DefaultCanvas DisabledCanvas HoverCanvas ActiveCanvas Text DefaultCanvas Text DisabledCanvas Text HoverCanvas Text Active
+ + ); +}; + +const PaletteRow = ({ name }: { name: string }) => ( + + {name.charAt(0).toLowerCase() + name.slice(1)} + {Array.from({ length: 11 }).map((value, index) => { + return ( + + ); + })} + +); + +const PriorityRow = ({ name }: { name: string }) => ( + + {name.charAt(0).toLowerCase() + name.slice(1)} + + + + + + + + + + + + + + + + + +); + +const Table = styled.table` + position: relative; + + background-color: #dfdbe5; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 8 8'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E"); + + td { + width: 200px; + height: 50px; + } +`; + +export const ButtonIconWeightPriorityWeight = () => ( + ( + } + onClick={() => console.info('ButtonIcon clicked')} + weight={weight} + priority={priority} + disabled={disabled} + /> + )} + /> +); diff --git a/src/woly/organisms/palette-example/palette-example.tsx b/src/woly/organisms/palette-example/palette-example.tsx deleted file mode 100644 index 9562926c..00000000 --- a/src/woly/organisms/palette-example/palette-example.tsx +++ /dev/null @@ -1,93 +0,0 @@ -/* eslint-disable prettier/prettier */ -import React from 'react'; -import styled from 'styled-components'; -import { Playground } from 'dev/playground'; - -export const PaletteExample = () => { - return ( - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- Shape DefaultShape DisabledShape HoverShape ActiveShape Text DefaultShape Text DisabledShape Text HoverShape Text ActiveCanvas DefaultCanvas DisabledCanvas HoverCanvas ActiveCanvas Text DefaultCanvas Text DisabledCanvas Text HoverCanvas Text Active
- - - ); -}; - -const PaletteRow = ({ name }: { name: string }) => ( - - {name.charAt(0).toLowerCase() + name.slice(1)} - {Array.from({ length: 11 }).map((value, index) => { - return ( - - ); - })} - -); - -const PriorityRow = ({ name }: { name: string }) => ( - - {name.charAt(0).toLowerCase() + name.slice(1)} - - - - - - - - - - - - - - - - - -); - -const Wrapper = styled.div` - position: relative; - - background-color: #dfdbe5; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 8 8'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E"); - - td { - width: 200px; - height: 50px; - } -`; diff --git a/src/woly/organisms/palette-example/usage.mdx b/src/woly/organisms/palette-example/usage.mdx index f0d53db2..e4671879 100644 --- a/src/woly/organisms/palette-example/usage.mdx +++ b/src/woly/organisms/palette-example/usage.mdx @@ -1,5 +1,13 @@ -import { PaletteExample } from './palette-example' +import { Palettes, PriorityVariables, ButtonIconWeightPriorityWeight } from './index' -## Usage +## Palettes - + + +## Priority Variables + + + +## Button Icon Priority Weight Matrix + +