From 14fe80085c4d32f89b2c8b05c5a5039b8f1d55dc Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Wed, 27 Jul 2022 11:13:13 +0200
Subject: [PATCH 1/3] spacing variables for the css usage

---
 packages/react-components/src/utils/Spacing.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 packages/react-components/src/utils/Spacing.scss

diff --git a/packages/react-components/src/utils/Spacing.scss b/packages/react-components/src/utils/Spacing.scss
new file mode 100644
index 000000000..67ff8fab9
--- /dev/null
+++ b/packages/react-components/src/utils/Spacing.scss
@@ -0,0 +1,14 @@
+$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;

From 2b7f372d5884289b7475959b40d4a80b6b11d866 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Wed, 27 Jul 2022 14:39:58 +0200
Subject: [PATCH 2/3] moved scss mixins to css variables, added page related to
 Spacing in Foundations

---
 .../react-components/.storybook/preview.js    |   1 +
 packages/react-components/package.json        |   2 +-
 packages/react-components/src/index.scss      |   3 +
 packages/react-components/src/index.ts        |   1 +
 .../react-components/src/spacing/spacing.scss |  16 +++
 .../src/spacing/spacingTokens.ts              |  16 +++
 .../src/stories/Spacing.stories.mdx           |  28 +++++
 .../src/stories/components/Spacing.css        |  23 ++++
 .../src/stories/components/Spacing.tsx        | 100 ++++++++++++++++++
 .../components/SpacingExamples.module.scss    |  44 ++++++++
 .../stories/components/SpacingExamples.tsx    |  99 +++++++++++++++++
 .../react-components/src/utils/Spacing.scss   |  14 ---
 12 files changed, 332 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-components/src/spacing/spacing.scss
 create mode 100644 packages/react-components/src/spacing/spacingTokens.ts
 create mode 100644 packages/react-components/src/stories/Spacing.stories.mdx
 create mode 100644 packages/react-components/src/stories/components/Spacing.css
 create mode 100644 packages/react-components/src/stories/components/Spacing.tsx
 create mode 100644 packages/react-components/src/stories/components/SpacingExamples.module.scss
 create mode 100644 packages/react-components/src/stories/components/SpacingExamples.tsx
 delete mode 100644 packages/react-components/src/utils/Spacing.scss

diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js
index 5d949a3ff..80f3152c3 100644
--- 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/spacing/spacing.scss';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 7d43d5939..99d163431 100644
--- 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/spacing: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/index.scss b/packages/react-components/src/index.scss
index 730976e38..7263af743 100644
--- 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 './spacing/spacing';
 
 *[class^='lc-'] {
   box-sizing: border-box;
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index 98dc74688..9a1b43225 100644
--- 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 { SpacingTokens } from './spacing/spacingTokens';
 
 export * from './components/Alert';
 export * from './components/Badge';
diff --git a/packages/react-components/src/spacing/spacing.scss b/packages/react-components/src/spacing/spacing.scss
new file mode 100644
index 000000000..c3d56e490
--- /dev/null
+++ b/packages/react-components/src/spacing/spacing.scss
@@ -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/spacing/spacingTokens.ts b/packages/react-components/src/spacing/spacingTokens.ts
new file mode 100644
index 000000000..fbc1d10dc
--- /dev/null
+++ b/packages/react-components/src/spacing/spacingTokens.ts
@@ -0,0 +1,16 @@
+export const SpacingTokens = {
+  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/stories/Spacing.stories.mdx b/packages/react-components/src/stories/Spacing.stories.mdx
new file mode 100644
index 000000000..51c4f0275
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/packages/react-components/src/stories/components/Spacing.css b/packages/react-components/src/stories/components/Spacing.css
new file mode 100644
index 000000000..cd558b604
--- /dev/null
+++ 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
new file mode 100644
index 000000000..ef2ebf20a
--- /dev/null
+++ 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
new file mode 100644
index 000000000..eb71278dd
--- /dev/null
+++ 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
new file mode 100644
index 000000000..af433f910
--- /dev/null
+++ 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/packages/react-components/src/utils/Spacing.scss b/packages/react-components/src/utils/Spacing.scss
deleted file mode 100644
index 67ff8fab9..000000000
--- a/packages/react-components/src/utils/Spacing.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-$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;

From b180aa495b706d68263756b93877155e7b6574a0 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechat.com>
Date: Thu, 28 Jul 2022 13:26:27 +0200
Subject: [PATCH 3/3] changes after review

---
 packages/react-components/.storybook/preview.js               | 2 +-
 packages/react-components/package.json                        | 2 +-
 .../spacingTokens.ts => foundations/spacing-token.ts}         | 2 +-
 .../src/{spacing/spacing.scss => foundations/spacing.css}     | 0
 packages/react-components/src/index.scss                      | 2 +-
 packages/react-components/src/index.ts                        | 4 ++--
 .../react-components/src/stories/components/ColorTokens.tsx   | 4 ++--
 .../src/themes/{designTokens.ts => design-token.ts}           | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)
 rename packages/react-components/src/{spacing/spacingTokens.ts => foundations/spacing-token.ts} (92%)
 rename packages/react-components/src/{spacing/spacing.scss => foundations/spacing.css} (100%)
 rename packages/react-components/src/themes/{designTokens.ts => design-token.ts} (99%)

diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js
index 80f3152c3..87a3c797e 100644
--- a/packages/react-components/.storybook/preview.js
+++ b/packages/react-components/.storybook/preview.js
@@ -1,7 +1,7 @@
 import '../src/themes/legacy.scss';
 import '../src/themes/light.scss';
 import '../src/themes/dark.scss';
-import '../src/spacing/spacing.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
index 99d163431..604948947 100644
--- 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; sass src/spacing:dist/spacing",
+    "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/spacing/spacingTokens.ts b/packages/react-components/src/foundations/spacing-token.ts
similarity index 92%
rename from packages/react-components/src/spacing/spacingTokens.ts
rename to packages/react-components/src/foundations/spacing-token.ts
index fbc1d10dc..c06d010b1 100644
--- a/packages/react-components/src/spacing/spacingTokens.ts
+++ b/packages/react-components/src/foundations/spacing-token.ts
@@ -1,4 +1,4 @@
-export const SpacingTokens = {
+export const SpacingToken = {
   Spacing0: '--spacing-0',
   Spacing05: '--spacing-05',
   Spacing1: '--spacing-1',
diff --git a/packages/react-components/src/spacing/spacing.scss b/packages/react-components/src/foundations/spacing.css
similarity index 100%
rename from packages/react-components/src/spacing/spacing.scss
rename to packages/react-components/src/foundations/spacing.css
diff --git a/packages/react-components/src/index.scss b/packages/react-components/src/index.scss
index 7263af743..9619d69dc 100644
--- a/packages/react-components/src/index.scss
+++ b/packages/react-components/src/index.scss
@@ -1,7 +1,7 @@
 @use './themes/legacy';
 @use './themes/light';
 @use './themes/dark';
-@use './spacing/spacing';
+@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
index 9a1b43225..df0382bbe 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -1,7 +1,7 @@
 import './index.scss';
 
-export { DesignTokens } from './themes/designTokens';
-export { SpacingTokens } from './spacing/spacingTokens';
+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/components/ColorTokens.tsx b/packages/react-components/src/stories/components/ColorTokens.tsx
index 75d3755e2..7ac46f6bb 100644
--- 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/themes/designTokens.ts b/packages/react-components/src/themes/design-token.ts
similarity index 99%
rename from packages/react-components/src/themes/designTokens.ts
rename to packages/react-components/src/themes/design-token.ts
index 8e0762c9e..3d7e48a70 100644
--- a/packages/react-components/src/themes/designTokens.ts
+++ b/packages/react-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',