#345 Spacing variables for the css usage (#367)

* spacing variables for the css usage * moved scss mixins to css variables, added page related to Spacing in Foundations * changes after review
livechat · Aug 1, 2022 · faa6495 · faa6495
1 parent 9a5b687
commit faa6495
Show file tree

Hide file tree

Showing 13 changed files with 336 additions and 5 deletions.
diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js
@@ -1,6 +1,7 @@
 import '../src/themes/legacy.scss';
 import '../src/themes/light.scss';
 import '../src/themes/dark.scss';
+import '../src/foundations/spacing.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -21,7 +21,7 @@
     "dev:styles": "npm run build:styles -- --watch",
     "build": "run-s build:*",
     "build:lib": "tsc && vite build",
-    "build:styles": "sass src/themes:dist/themes",
+    "build:styles": "sass src/themes:dist/themes; sass src/foundations:dist/spacing",
     "build-storybook": "build-storybook",
     "chromatic": "dotenv -e ../../.env chromatic -- --exit-zero-on-changes",
     "lint": "eslint src --ext js,jsx,ts,tsx",

diff --git a/packages/react-components/src/foundations/spacing-token.ts b/packages/react-components/src/foundations/spacing-token.ts
@@ -0,0 +1,16 @@
+export const SpacingToken = {
+  Spacing0: '--spacing-0',
+  Spacing05: '--spacing-05',
+  Spacing1: '--spacing-1',
+  Spacing2: '--spacing-2',
+  Spacing3: '--spacing-3',
+  Spacing4: '--spacing-4',
+  Spacing5: '--spacing-5',
+  Spacing6: '--spacing-6',
+  Spacing8: '--spacing-8',
+  Spacing12: '--spacing-12',
+  Spacing16: '--spacing-16',
+  Spacing18: '--spacing-18',
+  Spacing20: '--spacing-20',
+  Spacing24: '--spacing-24',
+};
diff --git a/packages/react-components/src/foundations/spacing.css b/packages/react-components/src/foundations/spacing.css
@@ -0,0 +1,16 @@
+:root {
+  --spacing-0: 0;
+  --spacing-05: 2px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+  --spacing-18: 72px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+}
diff --git a/packages/react-components/src/index.scss b/packages/react-components/src/index.scss
@@ -1,4 +1,7 @@
 @use './themes/legacy';
+@use './themes/light';
+@use './themes/dark';
+@use './foundations/spacing';
 
 *[class^='lc-'] {
   box-sizing: border-box;

diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
@@ -1,6 +1,7 @@
 import './index.scss';
 
-export { DesignTokens } from './themes/designTokens';
+export { DesignToken } from './themes/design-token';
+export { SpacingToken } from './foundations/spacing-token';
 
 export * from './components/Alert';
 export * from './components/Badge';

diff --git a/packages/react-components/src/stories/Spacing.stories.mdx b/packages/react-components/src/stories/Spacing.stories.mdx
@@ -0,0 +1,28 @@
+import { Meta, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import { Spacing } from './components/Spacing';
+import { SpacingExamples } from './components/SpacingExamples';
+
+<Meta title="Foundations/Spacing" />
+
+# Spacing
+
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
+  <Spacing />
+</Canvas>
+
+## Examples
+
+<Canvas
+  style={{
+    color: 'var(--content-default)',
+    backgroundColor: 'var(--background)',
+  }}
+>
+  <SpacingExamples />
+</Canvas>
diff --git a/packages/react-components/src/stories/components/ColorTokens.tsx b/packages/react-components/src/stories/components/ColorTokens.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DesignTokens } from '../../themes/designTokens';
+import { DesignToken } from '../../themes/design-token';
 import { Text } from '../../components/Typography';
 
 interface TokensGroup {
@@ -20,7 +20,7 @@ type TokenGroupName =
   | 'decor';
 
 const Tokens: TokensGroup = Object.values(
-  DesignTokens as { [key: string]: string }
+  DesignToken as { [key: string]: string }
 ).reduce(
   (acc: TokensGroup, value) => {
     const groupName = value.split('-').filter(Boolean)[0] as TokenGroupName;

diff --git a/packages/react-components/src/stories/components/Spacing.css b/packages/react-components/src/stories/components/Spacing.css
@@ -0,0 +1,23 @@
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table th,
+table td {
+  border-bottom: 1px solid var(--border-default);
+  padding: 15px 0;
+  text-align: left;
+}
+
+table td {
+  font-size: 14px;
+}
+
+.first-column {
+  width: 20%;
+}
+
+.second-column {
+  width: 15%;
+}
diff --git a/packages/react-components/src/stories/components/Spacing.tsx b/packages/react-components/src/stories/components/Spacing.tsx
@@ -0,0 +1,100 @@
+import * as React from 'react';
+
+import './Spacing.css';
+
+export const Spacing = (): React.ReactElement => {
+  return (
+    <div>
+      <table>
+        <tr>
+          <th className="first-column">Token</th>
+          <th className="second-column">Size</th>
+          <th>Usage</th>
+        </tr>
+        <tr>
+          <td>--spacing-0</td>
+          <td>0px</td>
+          <td>When objects are not separated</td>
+        </tr>
+        <tr>
+          <td>--spacing-05</td>
+          <td>2px</td>
+          <td>Use for really small spaces, where every pixel counts</td>
+        </tr>
+        <tr>
+          <td>--spacing-1</td>
+          <td>4px</td>
+          <td>Use for really small spaces, where every pixel counts</td>
+        </tr>
+        <tr>
+          <td>--spacing-2</td>
+          <td>8px</td>
+          <td>Use for small spaces, where every pixel counts</td>
+        </tr>
+        <tr>
+          <td>--spacing-3</td>
+          <td>12px</td>
+          <td>
+            Use for inner paddings in smaller components, for example tooltips
+          </td>
+        </tr>
+        <tr>
+          <td>--spacing-4</td>
+          <td>16px</td>
+          <td>
+            Use for inner paddings in medium components, for example cards or as
+            margins on mobile devices
+          </td>
+        </tr>
+        <tr>
+          <td>--spacing-5</td>
+          <td>20px</td>
+          <td>
+            Use for inner paddings in larger components, for example modals
+          </td>
+        </tr>
+        <tr>
+          <td>--spacing-6</td>
+          <td>24px</td>
+          <td>
+            Use to separate the content, for examples sections in settings, or
+            for margins on desktop
+          </td>
+        </tr>
+        <tr>
+          <td>--spacing-8</td>
+          <td>32px</td>
+          <td>
+            Use to separate the content where space is not limiting you, or when
+            you need more obvious distincion between components
+          </td>
+        </tr>
+        <tr>
+          <td>--spacing-12</td>
+          <td>48px</td>
+          <td>Use for larger margins for example in empty states</td>
+        </tr>
+        <tr>
+          <td>--spacing-16</td>
+          <td>64px</td>
+          <td>Use to represent additional data</td>
+        </tr>
+        <tr>
+          <td>--spacing-18</td>
+          <td>72px</td>
+          <td>Use to represent additional data</td>
+        </tr>
+        <tr>
+          <td>--spacing-20</td>
+          <td>80px</td>
+          <td>Use to represent additional data</td>
+        </tr>
+        <tr>
+          <td>--spacing-24</td>
+          <td>96px</td>
+          <td>Use to represent additional data</td>
+        </tr>
+      </table>
+    </div>
+  );
+};
diff --git a/packages/react-components/src/stories/components/SpacingExamples.module.scss b/packages/react-components/src/stories/components/SpacingExamples.module.scss
@@ -0,0 +1,44 @@
+.input {
+  &--spacing-0 {
+    padding: 0 var(--spacing-0);
+  }
+  &--spacing-05 {
+    padding: 0 var(--spacing-05);
+  }
+  &--spacing-1 {
+    padding: 0 var(--spacing-1);
+  }
+  &--spacing-2 {
+    padding: 0 var(--spacing-2);
+  }
+  &--spacing-3 {
+    padding: 0 var(--spacing-3);
+  }
+  &--spacing-4 {
+    padding: 0 var(--spacing-4);
+  }
+  &--spacing-5 {
+    padding: 0 var(--spacing-5);
+  }
+  &--spacing-6 {
+    padding: 0 var(--spacing-6);
+  }
+  &--spacing-8 {
+    padding: 0 var(--spacing-8);
+  }
+  &--spacing-12 {
+    padding: 0 var(--spacing-12);
+  }
+  &--spacing-16 {
+    padding: 0 var(--spacing-16);
+  }
+  &--spacing-18 {
+    padding: 0 var(--spacing-18);
+  }
+  &--spacing-20 {
+    padding: 0 var(--spacing-20);
+  }
+  &--spacing-24 {
+    padding: 0 var(--spacing-24);
+  }
+}
diff --git a/packages/react-components/src/stories/components/SpacingExamples.tsx b/packages/react-components/src/stories/components/SpacingExamples.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+
+import { Input } from '../../components/Input';
+
+import styles from './SpacingExamples.module.scss';
+import { StoryDescriptor } from './StoryDescriptor';
+
+const baseClass = 'input';
+
+export const SpacingExamples = (): React.ReactElement => {
+  return (
+    <div>
+      <StoryDescriptor title="Spacing 0">
+        <Input
+          className={styles[`${baseClass}--spacing-0`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 0.5">
+        <Input
+          className={styles[`${baseClass}--spacing-05`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 1">
+        <Input
+          className={styles[`${baseClass}--spacing-1`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 2">
+        <Input
+          className={styles[`${baseClass}--spacing-2`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 3">
+        <Input
+          className={styles[`${baseClass}--spacing-3`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 4">
+        <Input
+          className={styles[`${baseClass}--spacing-4`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 5">
+        <Input
+          className={styles[`${baseClass}--spacing-5`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 6">
+        <Input
+          className={styles[`${baseClass}--spacing-6`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 8">
+        <Input
+          className={styles[`${baseClass}--spacing-8`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 12">
+        <Input
+          className={styles[`${baseClass}--spacing-12`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 16">
+        <Input
+          className={styles[`${baseClass}--spacing-16`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 18">
+        <Input
+          className={styles[`${baseClass}--spacing-18`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 20">
+        <Input
+          className={styles[`${baseClass}--spacing-20`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+      <StoryDescriptor title="Spacing 24">
+        <Input
+          className={styles[`${baseClass}--spacing-24`]}
+          placeholder="Input with spacing"
+        />
+      </StoryDescriptor>
+    </div>
+  );
+};
diff --git a/...act-components/src/themes/designTokens.ts → ...act-components/src/themes/design-token.ts b/...act-components/src/themes/designTokens.ts → ...act-components/src/themes/design-token.ts
@@ -1,4 +1,4 @@
-export const DesignTokens = {
+export const DesignToken = {
   Background: '--background',
   SurfaceBasicDefault: '--surface-basic-default',
   SurfaceBasicSubtle: '--surface-basic-subtle',