token aliases and new surface token (#77)

* rename background to surface, add new background, add general use token aliases * remove console.log * correct background token uses to surface
vimeo · Dec 15, 2021 · 0e7b691 · 0e7b691
1 parent 5ee8dc0
commit 0e7b691
Show file tree

Hide file tree

Showing 13 changed files with 194 additions and 39 deletions.
diff --git a/src/components/Panel/examples/SideNav.story.tsx b/src/components/Panel/examples/SideNav.story.tsx
@@ -142,7 +142,7 @@ const SideNavStyled = styled(Panel)`
 const Hero = styled.div`
   height: 300px;
   padding: 0.75rem;
-  background: ${core.color.background(200)};
+  background: ${core.color.surface(200)};
   width: 100%;
   display: flex;
   justify-content: space-between;

diff --git a/src/components/Sidebar/Sidebar.style.ts b/src/components/Sidebar/Sidebar.style.ts
@@ -18,7 +18,7 @@ export const SidebarStyled = styled.div<{
   display: flex;
   flex-direction: column;
 
-  background: ${core.color.background(800)};
+  background: ${core.color.surface(800)};
   color: ${core.color.text(300)};
   border: 1px solid ${core.color.stroke};
   ${attach};
@@ -52,7 +52,7 @@ export const PanelStyled = styled.div<{
   padding: 1rem;
 
   transition: transform 180ms ease-in-out;
-  background: ${core.color.background(800)};
+  background: ${core.color.surface(800)};
   color: ${core.color.text(300)};
   transform: ${transform};
   left: ${left};

diff --git a/src/components/info/TourPoint/Caret.tsx b/src/components/info/TourPoint/Caret.tsx
@@ -17,7 +17,7 @@ export const CaretStyled = styled.div`
   width: 1rem;
   height: 1rem;
   transform: rotate(-45deg);
-  background: ${core.color.background(600)};
+  background: ${core.color.surface(600)};
   border: 0.25rem solid transparent;
   background-clip: padding-box;
 `;

diff --git a/src/components/info/TourPoint/TourPoint.style.ts b/src/components/info/TourPoint/TourPoint.style.ts
@@ -51,7 +51,7 @@ const rainbowBackground = css`
 export const TourPointStyled = styled.div`
   position: relative;
   padding: 1rem;
-  background: ${core.color.background(600)};
+  background: ${core.color.surface(600)};
   color: ${core.color.text(0)};
   width: 320px;
   border-radius: 0.6rem;

diff --git a/src/storybook/StoryControlBar.tsx b/src/storybook/StoryControlBar.tsx
@@ -21,7 +21,7 @@ export function StoryControlBar({ children }) {
 const StoryControlBarStyled = styled.div`
   padding: 0.75rem;
   border-radius: 0.75rem;
-  border: 2px solid ${core.color.background(200)};
+  border: 2px solid ${core.color.surface(200)};
   display: flex;
   gap: 0.75rem;
 `;
diff --git a/src/tokens/color/background/background.story.tsx b/src/tokens/color/background/background.story.tsx
@@ -10,17 +10,38 @@ import { tx } from '../../util';
 
 export function Tokens() {
   return (
-    <Canvas>
-      {[...new Array(11)].map((_, key) => {
-        const grade = key * 100;
-
-        return (
-          <Card key={key} grade={grade} styles={styles}>
-            <Text>color-background-{grade}</Text>
-          </Card>
-        );
-      })}
-    </Canvas>
+    <>
+      <Canvas>
+        <Card grade={500} styles={styles}>
+          <span>
+            <Text>color-background-primary</Text>
+            <br />
+            <Text>color-background-500</Text>
+          </span>
+        </Card>
+        <Card grade={1000} styles={styles}>
+          <span>
+            <Text>color-background-secondary</Text>
+            <br />
+            <Text>color-background-1000</Text>
+          </span>
+        </Card>
+      </Canvas>
+
+      <hr />
+
+      <Canvas>
+        {[...new Array(11)].map((_, key) => {
+          const grade = key * 100;
+
+          return (
+            <Card key={key} grade={grade} styles={styles}>
+              <Text>color-background-{grade}</Text>
+            </Card>
+          );
+        })}
+      </Canvas>
+    </>
   );
 }
 

diff --git a/src/tokens/color/background/background.ts b/src/tokens/color/background/background.ts
@@ -1,4 +1,4 @@
-import { grayscale, slate, white } from '../../../color';
+import { grayscale, slate } from '../../../color';
 
 import { Token, readToken, TokenValue, clamp } from '../../util';
 
@@ -11,9 +11,12 @@ const token: Token = {
 };
 
 function dark(grade: number): TokenValue {
-  return grayscale(clamp(-1 * (grade / 5 - 1000)));
+  return grayscale(clamp(900 + grade / 10));
 }
 
 function light(grade: number): TokenValue {
-  return grade >= 300 ? white : slate(clamp(-1 * (grade / 2 - 150)));
+  return slate(clamp((grade + 200) / 4 - 175));
 }
+
+background.primary = background(500);
+background.secondary = background(1000);
diff --git a/src/tokens/color/color.story.tsx b/src/tokens/color/color.story.tsx
@@ -4,4 +4,5 @@ export { Tokens as Background } from './background/background.story';
 export { Tokens as Format } from './format/format.story';
 export { Tokens as Status } from './status/status.story';
 export { Tokens as Stroke } from './stroke/stroke.story';
+export { Tokens as Surface } from './surface/surface.story';
 export { Tokens as Text } from './text/text.story';
diff --git a/src/tokens/color/index.ts b/src/tokens/color/index.ts
@@ -2,12 +2,14 @@ import { background } from './background/background';
 import { format } from './format/format';
 import { status } from './status/status';
 import { stroke } from './stroke/stroke';
+import { surface } from './surface/surface';
 import { text } from './text/text';
 
 export const color = {
   background,
   format,
   status,
   stroke,
+  surface,
   text,
 };
diff --git a/src/tokens/color/surface/surface.story.tsx b/src/tokens/color/surface/surface.story.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { css } from 'styled-components';
+import { readableColor } from 'polished';
+
+import { Text } from '../../../typography';
+
+import { core } from '../../core';
+import { Card, Canvas } from '../../storybook';
+import { tx } from '../../util';
+
+export function Tokens() {
+  return (
+    <>
+      <Canvas>
+        <Card grade={400} styles={styles}>
+          <span>
+            <Text>color-surface-primary</Text>
+            <br />
+            <Text>color-surface-400</Text>
+          </span>
+        </Card>
+        <Card grade={600} styles={styles}>
+          <span>
+            <Text>color-surface-secondary</Text>
+            <br />
+            <Text>color-surface-600</Text>
+          </span>
+        </Card>
+        <Card grade={800} styles={styles}>
+          <span>
+            <Text>color-surface-secondary</Text>
+            <br />
+            <Text>color-surface-800</Text>
+          </span>
+        </Card>
+      </Canvas>
+
+      <hr />
+
+      <Canvas>
+        {[...new Array(11)].map((_, key) => {
+          const grade = key * 100;
+
+          return (
+            <Card key={key} grade={grade} styles={styles}>
+              <Text>color-surface-{grade}</Text>
+            </Card>
+          );
+        })}
+      </Canvas>
+    </>
+  );
+}
+
+Tokens.storyName = 'surface';
+
+function styles({ theme, grade }) {
+  const surface = tx(theme, core.color.surface(grade));
+  const color = readableColor(surface);
+
+  return css`
+    background: ${surface};
+
+    > span {
+      color: ${color};
+    }
+  `;
+}
diff --git a/src/tokens/color/surface/surface.ts b/src/tokens/color/surface/surface.ts
@@ -0,0 +1,23 @@
+import { grayscale, slate, white } from '../../../color';
+
+import { Token, readToken, TokenValue, clamp } from '../../util';
+
+export const surface = (grade: number) => readToken(token, grade);
+
+const token: Token = {
+  default: 'light',
+  type: 'COLOR',
+  modes: { dark, light },
+};
+
+function dark(grade: number): TokenValue {
+  return grayscale(clamp(-1 * (grade / 5 - 1000)));
+}
+
+function light(grade: number): TokenValue {
+  return grade >= 300 ? white : slate(clamp(-1 * (grade / 2 - 150)));
+}
+
+surface.primary = surface(400);
+surface.secondary = surface(600);
+surface.secondary = surface(800);
diff --git a/src/tokens/color/text/text.story.tsx b/src/tokens/color/text/text.story.tsx
@@ -10,23 +10,47 @@ import { tx } from '../../util';
 
 export function Tokens() {
   return (
-    <Canvas>
-      {[...new Array(11)].map((_, key) => {
-        const grade = key * 100;
-
-        return (
-          <Card
-            key={key}
-            grade={grade}
-            styles={styles}
-            style={{ marginBottom: '3rem' }}
-          >
-            <Text>color-text-{grade}</Text>
-            <Example grade={grade}>color-text-{grade}</Example>
-          </Card>
-        );
-      })}
-    </Canvas>
+    <>
+      <Canvas>
+        <Card grade={0} styles={styles}>
+          <span>
+            <Text>color-text-primary</Text>
+            <br />
+            <Text>color-text-0</Text>
+          </span>
+          <Example grade={0}>color-text-primary</Example>
+        </Card>
+        <Card grade={600} styles={styles}>
+          <span>
+            <Text>color-text-secondary</Text>
+            <br />
+            <Text>color-text-600</Text>
+          </span>
+          <Example grade={600}>color-text-secondary</Example>
+        </Card>
+      </Canvas>
+
+      <br />
+      <hr />
+
+      <Canvas>
+        {[...new Array(11)].map((_, key) => {
+          const grade = key * 100;
+
+          return (
+            <Card
+              key={key}
+              grade={grade}
+              styles={styles}
+              style={{ marginBottom: '3rem' }}
+            >
+              <Text>color-text-{grade}</Text>
+              <Example grade={grade}>color-text-{grade}</Example>
+            </Card>
+          );
+        })}
+      </Canvas>
+    </>
   );
 }
 
@@ -41,6 +65,10 @@ function styles({ theme, grade }) {
 
     > span:first-of-type {
       color: ${color};
+
+      > span {
+        color: ${color};
+      }
     }
   `;
 }

diff --git a/src/tokens/color/text/text.ts b/src/tokens/color/text/text.ts
@@ -1,6 +1,12 @@
 import { grayscale, slate } from '../../../color';
 
-import { Token, readToken, TokenValue, clamp } from '../../util';
+import {
+  Token,
+  readToken,
+  TokenValue,
+  clamp,
+  round,
+} from '../../util';
 
 export const text = (grade: number) => readToken(token, grade);
 
@@ -15,5 +21,8 @@ function dark(grade: number): TokenValue {
 }
 
 function light(grade: number): TokenValue {
-  return slate(clamp(grade / -2 + 800));
+  return slate(clamp(round(grade / -1.667 + 900, 0)));
 }
+
+text.primary = text(0);
+text.secondary = text(600);