feat: implement priorities fabric

woly-ui · Jun 30, 2021 · dc15d10 · dc15d10
1 parent 7309788
commit dc15d10
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 115 deletions.
diff --git a/src/lib/global.ts b/src/lib/global.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 
 import { createPalette } from './palette';
+import { createPriority } from './priority';
 
 export const Global = styled.div`
   * {
@@ -46,113 +47,50 @@ export const Global = styled.div`
 
   --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='tertiary'] {
-    --woly-shape-default: transparent;
-    --woly-shape-disabled: hsla(var(--bw-200), 1);
-    --woly-shape-hover: transparent;
-    --woly-shape-active: transparent;
-
-    --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-600), 1);
-    --woly-shape-text-active: hsla(var(--bw-700), 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',
+    paletteBWName: 'bw',
+    weight: 'filled',
+  })}
+
+  ${createPriority({
+    priorityName: 'secondary',
+    paletteName: 'secondary',
+    paletteBWName: 'bw',
+    weight: 'filled',
+  })}
+    ${createPriority({
+    priorityName: 'default',
+    paletteBWName: 'bw',
+    weight: 'filled',
+  })}
+
+  ${createPriority({
+    priorityName: 'tertiary',
+    paletteBWName: 'bw',
+    weight: 'none',
+  })}
+  
+  ${createPriority({
+    priorityName: 'danger',
+    paletteName: 'danger',
+    paletteBWName: 'bw',
+    weight: 'filled',
+  })}
+
+  /** for examples of priorities in button */
+  ${createPriority({
+    priorityName: 'primary-tertiary',
+    paletteName: 'primary',
+    paletteBWName: 'bw',
+    weight: 'none',
+  })}
+
+  ${createPriority({
+    priorityName: 'secondary-tertiary',
+    paletteName: 'secondary',
+    paletteBWName: 'bw',
+    weight: 'none',
+  })}
 `;
diff --git a/src/lib/palette.tsx b/src/lib/palette.tsx
@@ -5,11 +5,7 @@ import { css } from 'styled-components';
  * @param color : hsl => "255, 85%, 58%"";
  */
 
-<<<<<<< HEAD
 export const getHsl = (color: string) => {
-=======
-export const getHue = (color: string) => {
->>>>>>> 88a6cf4... feat: implement color palette fabrucs
   const colors = color.replace(' ', '').split(',');
   const hue = Number.parseInt(colors[0], 10);
   const saturation = Number.parseFloat(colors[1]);

diff --git a/src/lib/priority.tsx b/src/lib/priority.tsx
@@ -0,0 +1,64 @@
+import { css } from 'styled-components';
+
+interface PriorityType {
+  paletteBWName: string;
+  paletteName?: string;
+  priorityName: string;
+  weight: 'filled' | 'outlined' | 'none';
+}
+
+export const createPriority = ({
+  paletteBWName,
+  paletteName,
+  priorityName,
+  weight,
+}: PriorityType) => {
+  const palette = paletteName || paletteBWName;
+  const colors: Record<string, string> = {
+    'shape-default': 'transparent',
+    'shape-disabled': `hsla(var(--${palette}-200), 1)`,
+    'shape-hover': 'transparent',
+    'shape-active': 'transparent',
+    'shape-text-default': `hsla(var(--${paletteBWName}-0), 1)`,
+    'shape-text-disabled': `hsla(var(--${palette}-300), 1)`,
+    'shape-text-hover': `hsla(var(--${paletteBWName}-600), 1)`,
+    'shape-text-active': `hsla(var(--${paletteBWName}-700), 1)`,
+    'canvas-default': `transparent`,
+    'canvas-default-disabled': `hsla(var(--${paletteBWName}-200), 1)`,
+    'canvas-hover': `transparent`,
+    'canvas-active': `transparent`,
+    'canvas-text-default': `hsla(var(--${paletteBWName}-0), 1);`,
+    'canvas-text-disabled': `hsla(var(--${paletteBWName}-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(--${paletteBWName}-1000), 1)`;
+    colors['shape-text-hover'] = `hsla(var(--${paletteBWName}-1000), 1)`;
+    colors['shape-text-active'] = `hsla(var(--${paletteBWName}-1000), 1)`;
+    colors['canvas-hover'] = `hsla(var(--${palette}-600), 1)`;
+    colors['canvas-active'] = `hsla(var(--${palette}-700), 1)`;
+    colors['canvas-text-hover'] = `hsla(var(--${paletteBWName}-0), 1)`;
+    colors['canvas-text-active'] = `hsla(var(--${paletteBWName}-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')}
+    }
+  `;
+};