@livechat/design-system-react-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/src/stories/ColorTokens.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, Canvas } from '@storybook/addon-docs';
+import { ColorTokensPallete } from './components/ColorTokens';
+
+<Meta title="Foundations/Color Tokens" />
+
+# Color Tokens
+
+List of available color tokens. Click on token to copy it's value to clipboard.
+
+<ColorTokensPallete />

package/src/stories/Icons.stories.mdx

@@ -0,0 +1,12 @@
+import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+import { Icon, IconTypeName, IconSizeName } from "../components/Icon";
+import { IconsShowcase } from "./components/IconsShowcase";
+
+<Meta title="Foundations/Icons" />
+
+# Icons
+
+List of the icons available in the design system.
+
+<IconsShowcase />

package/src/stories/Typography.stories.mdx

@@ -0,0 +1,65 @@
+import { Meta, Canvas, ArgsTable } from "@storybook/addon-docs";
+
+import { Heading, Text } from "../components/Typography";
+
+<Meta title="Foundations/Typography" />
+
+# Typography
+
+This guide will help you create a typography hierarchy in the interface you build. This can be achieved by using size and weight.
+
+## Heading
+
+`Heading` component renders heading element with given size.
+
+You can modify the output element via `as` prop. For example if you want to render XLarge heading as `h3` just pass `as='h3'`
+
+```jsx
+<Heading size="xl" as="h3">
+  My h3 heading
+</Heading>
+```
+
+<ArgsTable of={Heading} />
+
+<Canvas style={{ color: "var(--content-default)" }}>
+  <Heading size="xl">Heading XLarge</Heading>
+  <Heading size="lg">Heading Large</Heading>
+  <Heading size="md">Heading Medium</Heading>
+  <Heading size="sm">Heading Small</Heading>
+  <Heading size="xs">Heading XSmall</Heading>
+</Canvas>
+
+## Text
+
+`Text` component renders a paragraph.
+
+```jsx
+<Text size="sm" bold>
+  This text is a small bold p
+</Text>
+```
+
+<ArgsTable of={Text} />
+
+<Canvas style={{ color: "var(--content-default)" }}>
+  <Text>Paragraph Medium</Text>
+  <Text bold>Paragraph Medium Bold</Text>
+  <Text underline>Paragraph Medium Underline</Text>
+  <Text strike>Paragraph Medium Strikethrough</Text>
+  <Text size="sm">Paragraph Small</Text>
+  <Text size="sm" bold>
+    Paragraph Small Bold
+  </Text>
+  <Text size="xs">Paragraph XSmall</Text>
+  <Text size="xs" bold>
+    Paragraph XSmall Bold
+  </Text>
+  <Text caps>Caps</Text>
+  <Text caps bold>
+    Bold Caps
+  </Text>
+  <Text as="div" size="sm">
+    Small text as div
+  </Text>
+</Canvas>

package/src/stories/components/ColorTokens.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { DesignTokens } from '../../themes/designTokens';
+import { Text } from '../../components/Typography';
+
+interface TokensGroup {
+  background: string[];
+  surface: string[];
+  content: string[];
+  border: string[];
+  color: string[];
+  decor: string[];
+}
+
+type TokenGroupName =
+  | 'background'
+  | 'surface'
+  | 'content'
+  | 'border'
+  | 'color'
+  | 'decor';
+
+const Tokens: TokensGroup = Object.values(
+  DesignTokens as { [key: string]: string }
+).reduce(
+  (acc: TokensGroup, value) => {
+    const groupName = value.split('-').filter(Boolean)[0] as TokenGroupName;
+    acc[groupName].push(value);
+
+    return acc;
+  },
+  { background: [], surface: [], content: [], border: [], color: [], decor: [] }
+);
+
+const CONTENT = {
+  background: {
+    heading: 'Background',
+    content:
+      'Basic layer of the UI – this represents the canvas (for developers) or frame (for designers)',
+  },
+  surface: {
+    heading: 'Surface',
+    content:
+      'Background of components, like cards, input fields, tooltips, ect.',
+  },
+  content: {
+    heading: 'Content',
+    content: 'Fonts & icons (mostly)',
+  },
+  border: {
+    heading: 'Border',
+    content: 'Style for components borders',
+  },
+  color: {
+    heading: 'Accent colors',
+    content:
+      'All colors that drive attention in the UI - it can be either action, warning, negative or positive',
+  },
+  decor: {
+    heading: 'Decor',
+    content:
+      'Those colors can be used for specific elements of the UI, they were purposely separated from all other tokens, as they are used only for decorative means. Those colors are shared between all three themes — Legacy, Light & Dark. This palette is not yet fully supported in dark mode.',
+  },
+};
+
+export const ColorTokensPallete: React.FC = () => (
+  <div style={{ color: 'var(--content-default)' }}>
+    {Object.entries(CONTENT).map(([section, { heading, content }]) => (
+      <React.Fragment key={section}>
+        <h2>{heading}</h2>
+        <Text as="p">{content}</Text>
+        <ul style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
+          {Tokens[section as TokenGroupName].map((colorToken: string) => (
+            <li
+              key={colorToken}
+              style={{
+                display: 'flex',
+                cursor: 'pointer',
+                alignItems: 'center',
+              }}
+              onClick={() => navigator.clipboard.writeText(colorToken)}
+            >
+              <div
+                style={{
+                  backgroundColor: `var(${colorToken})`,
+                  border: '1px solid var(--border-subtle)',
+                  borderRadius: '4px',
+                  width: '50px',
+                  height: '50px',
+                  margin: '5px',
+                }}
+              />
+              <Text>{colorToken}</Text>
+            </li>
+          ))}
+        </ul>
+      </React.Fragment>
+    ))}
+  </div>
+);

package/src/stories/components/IconsShowcase.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import * as MaterialIcons from '@livechat/design-system-icons/react/material';
+import { Icon, IconSizeName } from '../../components/Icon';
+import './iconsShowcase.css';
+
+export type IconsMap = {
+  [key: string]: React.FC<React.SVGProps<SVGSVGElement>>;
+};
+
+const Icons = MaterialIcons as IconsMap;
+
+export const IconsShowcase = (): React.ReactElement => {
+  const iconsGrid = Object.keys(Icons).map((item) => {
+    const iconSource = Icons[item];
+    return (
+      <div className="icon-showcase-card">
+        <Icon source={iconSource} size={IconSizeName.XLarge}></Icon>
+        <p>{item}</p>
+      </div>
+    );
+  });
+
+  return <div className="icons-showcase-wrapper">{iconsGrid}</div>;
+};

package/src/stories/components/iconsShowcase.css

@@ -0,0 +1,13 @@
+.icons-showcase-card {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.icons-showcase-wrapper {
+  display: grid;
+  gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-columns: repeat(8, 1fr);
+}

package/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/{dist/test-utils.d.ts → src/test/utils.ts}

@@ -1,2 +1,3 @@
-export * from '@testing-library/react';
-export { default as userEvent } from '@testing-library/user-event';
+export * from '@testing-library/react';
+export { default as userEvent } from '@testing-library/user-event';
+export * from 'vitest';

package/src/themes/dark.scss

@@ -0,0 +1,127 @@
+.lc-dark-theme {
+  --background: #131317;
+  --surface-basic-default: #202024;
+  --surface-basic-subtle: #29292f;
+  --surface-basic-hover: rgba(255, 255, 255, 0.1);
+  --surface-basic-active: rgba(255, 255, 255, 0.2);
+  --surface-basic-disabled: #2d2d32;
+  --surface-secondary-default: #767680;
+  --surface-secondary-subtle: #3b3b43;
+  --surface-secondary-hover: #ababb1;
+  --surface-secondary-disabled: #3b3b43;
+  --surface-feedback-info: #323640;
+  --surface-feedback-negative: #3a3136;
+  --surface-feedback-warning: #3a362b;
+  --surface-feedback-positive: #263532;
+  --surface-invert-default: #eeeeef;
+  --surface-invert-subtle: #c9c9cd;
+  --surface-invert-disabled: #29292f;
+  --surface-overlay: rgba(19, 19, 23, 0.9);
+  --content-default: rgba(255, 255, 255, 0.8);
+  --content-subtle: rgba(255, 255, 255, 0.6);
+  --content-disabled: rgba(255, 255, 255, 0.4);
+  --content-white-locked: #fff;
+  --content-invert-default: #131317;
+  --content-invert-subtle: rgba(19, 19, 23, 0.7);
+  --content-invert-disabled: rgba(19, 19, 23, 0.3);
+  --border-default: rgba(255, 255, 255, 0.4);
+  --border-subtle: rgba(255, 255, 255, 0.1);
+  --border-hover: rgba(255, 255, 255, 0.6);
+  --border-disabled: rgba(255, 255, 255, 0.5);
+  --border-invert-default: rgba(19, 19, 23, 0.5);
+  --border-invert-subtle: rgba(19, 19, 23, 0.1);
+  --border-invert-hover: rgba(19, 19, 23, 0.7);
+  --border-invert-disabled: rgba(19, 19, 23, 0.3);
+  --color-action-active: #b6d5fb;
+  --color-action-hover: #8abbf9;
+  --color-action-default: #6daaf8;
+  --color-action-default-rgb: 157, 206, 255;
+  --color-action-disabled: #6daaf8;
+  --color-negative-active: #ffe5e5;
+  --color-negative-hover: #ffb7b7;
+  --color-negative-default: #ff4c4d;
+  --color-negative-disabled: rgba(255, 76, 77, 0.3);
+  --color-warning-default: #fed65e;
+  --color-warning-hover: #fedc89;
+  --color-positive-default: #00c057;
+  --color-positive-hover: #00e066;
+  --color-positive-disabled: #4d735e;
+  --color-bot: #50009c;
+  --color-black: #131317;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}

package/src/themes/designTokens.ts

@@ -0,0 +1,126 @@
+export const DesignTokens = {
+  Background: '--background',
+  SurfaceBasicDefault: '--surface-basic-default',
+  SurfaceBasicSubtle: '--surface-basic-subtle',
+  SurfaceBasicHover: '--surface-basic-hover',
+  SurfaceBasicActive: '--surface-basic-active',
+  SurfaceBasicDisabled: '--surface-basic-disabled',
+  SurfaceSecondaryDefault: '--surface-secondary-default',
+  SurfaceSecondarySubtle: '--surface-secondary-subtle',
+  SurfaceSecondaryHover: '--surface-secondary-hover',
+  SurfaceSecondaryDisabled: '--surface-secondary-disabled',
+  SurfaceFeedbackInfo: '--surface-feedback-info',
+  SurfaceFeedbackNegative: '--surface-feedback-negative',
+  SurfaceFeedbackWarning: '--surface-feedback-warning',
+  SurfaceFeedbackPositive: '--surface-feedback-positive',
+  SurfaceInvertDefault: '--surface-invert-default',
+  SurfaceInvertSubtle: '--surface-invert-subtle',
+  SurfaceInvertDisabled: '--surface-invert-disabled',
+  SurfaceOverlay: '--surface-overlay',
+  ContentDefault: '--content-default',
+  ContentSubtle: '--content-subtle',
+  ContentDisabled: '--content-disabled',
+  ContentWhiteLocked: '--content-white-locked',
+  ContentInvertDefault: '--content-invert-default',
+  ContentInvertSubtle: '--content-invert-subtle',
+  ContentInvertDisabled: '--content-invert-disabled',
+  BorderDefault: '--border-default',
+  BorderSubtle: '--border-subtle',
+  BorderHover: '--border-hover',
+  BorderDisabled: '--border-disabled',
+  BorderInvertDefault: '--border-invert-default',
+  BorderInvertSubtle: '--border-invert-subtle',
+  BorderInvertHover: '--border-invert-hover',
+  BorderInvertDisabled: '--border-invert-disabled',
+  ColorActionActive: '--color-action-active',
+  ColorActionHover: '--color-action-hover',
+  ColorActionDefault: '--color-action-default',
+  ColorActionDisabled: '--color-action-disabled',
+  ColorNegativeActive: '--color-negative-active',
+  ColorNegativeHover: '--color-negative-hover',
+  ColorNegativeDefault: '--color-negative-default',
+  ColorNegativeDisabled: '--color-negative-disabled',
+  ColorWarningDefault: '--color-warning-default',
+  ColorWarningHover: '--color-warning-hover',
+  ColorPositiveDefault: '--color-positive-default',
+  ColorPositiveHover: '--color-positive-hover',
+  ColorPositiveDisabled: '--color-positive-disabled',
+  ColorBot: '--color-bot',
+  ColorBlack: '--color-black',
+  ColorWhite: '--color-white',
+  DecorBlue900: '--decor-blue900',
+  DecorBlue800: '--decor-blue800',
+  DecorBlue700: '--decor-blue700',
+  DecorBlue600: '--decor-blue600',
+  DecorBlue500: '--decor-blue500',
+  DecorBlue400: '--decor-blue400',
+  DecorBlue300: '--decor-blue300',
+  DecorBlue200: '--decor-blue200',
+  DecorBlue100: '--decor-blue100',
+  DecorBlue50: '--decor-blue50',
+  DecorOrange900: '--decor-orange900',
+  DecorOrange800: '--decor-orange800',
+  DecorOrange700: '--decor-orange700',
+  DecorOrange600: '--decor-orange600',
+  DecorOrange500: '--decor-orange500',
+  DecorOrange400: '--decor-orange400',
+  DecorOrange300: '--decor-orange300',
+  DecorOrange200: '--decor-orange200',
+  DecorOrange100: '--decor-orange100',
+  DecorOrange50: '--decor-orange50',
+  DecorYellow900: '--decor-yellow900',
+  DecorYellow800: '--decor-yellow800',
+  DecorYellow700: '--decor-yellow700',
+  DecorYellow600: '--decor-yellow600',
+  DecorYellow500: '--decor-yellow500',
+  DecorYellow400: '--decor-yellow400',
+  DecorYellow300: '--decor-yellow300',
+  DecorYellow200: '--decor-yellow200',
+  DecorYellow100: '--decor-yellow100',
+  DecorYellow50: '--decor-yellow50',
+  DecorGray950: '--decor-gray950',
+  DecorGray900: '--decor-gray900',
+  DecorGray800: '--decor-gray800',
+  DecorGray700: '--decor-gray700',
+  DecorGray600: '--decor-gray600',
+  DecorGray500: '--decor-gray500',
+  DecorGray400: '--decor-gray400',
+  DecorGray300: '--decor-gray300',
+  DecorGray200: '--decor-gray200',
+  DecorGray150: '--decor-gray150',
+  DecorGray100: '--decor-gray100',
+  DecorGray75: '--decor-gray75',
+  DecorGray50: '--decor-gray50',
+  DecorGray40: '--decor-gray40',
+  DecorGray20: '--decor-gray20',
+  DecorGreen900: '--decor-green900',
+  DecorGreen800: '--decor-green800',
+  DecorGreen700: '--decor-green700',
+  DecorGreen600: '--decor-green600',
+  DecorGreen500: '--decor-green500',
+  DecorGreen400: '--decor-green400',
+  DecorGreen300: '--decor-green300',
+  DecorGreen200: '--decor-green200',
+  DecorGreen100: '--decor-green100',
+  DecorGreen50: '--decor-green50',
+  DecorRed900: '--decor-red900',
+  DecorRed800: '--decor-red800',
+  DecorRed700: '--decor-red700',
+  DecorRed600: '--decor-red600',
+  DecorRed500: '--decor-red500',
+  DecorRed400: '--decor-red400',
+  DecorRed300: '--decor-red300',
+  DecorRed200: '--decor-red200',
+  DecorRed100: '--decor-red100',
+  DecorRed50: '--decor-red50',
+  DecorPurple900: '--decor-purple900',
+  DecorPurple800: '--decor-purple800',
+  DecorPurple700: '--decor-purple700',
+  DecorPurple600: '--decor-purple600',
+  DecorPurple500: '--decor-purple500',
+  DecorPurple400: '--decor-purple400',
+  DecorPurple300: '--decor-purple300',
+  DecorPurple200: '--decor-purple200',
+  DecorPurple100: '--decor-purple100',
+  DecorPurple50: '--decor-purple50',
+};

package/src/themes/legacy.scss

@@ -0,0 +1,128 @@
+:root,
+.lc-legacy-theme {
+  --background: #fff;
+  --surface-basic-default: #fff;
+  --surface-basic-subtle: #f1f6f8;
+  --surface-basic-hover: #e0e8eb;
+  --surface-basic-active: #dae4eb;
+  --surface-basic-disabled: #eaedf0;
+  --surface-secondary-default: #bdc7d1;
+  --surface-secondary-subtle: #e4e8ec;
+  --surface-secondary-hover: #a0a6ab;
+  --surface-secondary-disabled: #dee3e8;
+  --surface-feedback-info: #e5f3ff;
+  --surface-feedback-negative: #fbeaed;
+  --surface-feedback-warning: #fff8e0;
+  --surface-feedback-positive: #e6f4ec;
+  --surface-invert-default: #424d57;
+  --surface-invert-subtle: #677179;
+  --surface-invert-disabled: #a0a6ab;
+  --surface-overlay: rgba(0, 0, 0, 0.7);
+  --content-default: #424d57;
+  --content-subtle: #677179;
+  --content-disabled: #a0a6ab;
+  --content-white-locked: #fff;
+  --content-invert-default: #fff;
+  --content-invert-subtle: rgba(255, 255, 255, 0.7);
+  --content-invert-disabled: rgba(255, 255, 255, 0.5);
+  --border-default: #bdc7d1;
+  --border-subtle: #e4e8ec;
+  --border-hover: #a0a6ab;
+  --border-disabled: #dee3e8;
+  --border-invert-default: rgba(255, 255, 255, 0.7);
+  --border-invert-subtle: rgba(255, 255, 255, 0.3);
+  --border-invert-hover: #fff;
+  --border-invert-disabled: rgba(255, 255, 255, 0.5);
+  --color-action-active: #295fbc;
+  --color-action-hover: #4379d6;
+  --color-action-default: #4284f5;
+  --color-action-default-rgb: 66, 132, 245;
+  --color-action-disabled: #a3c3fa;
+  --color-negative-active: #94383a;
+  --color-negative-hover: #b94648;
+  --color-negative-default: #d74747;
+  --color-negative-disabled: #eba3a3;
+  --color-warning-default: #fbbd04;
+  --color-warning-hover: #f99a01;
+  --color-positive-default: #22aa61;
+  --color-positive-hover: #0d874a;
+  --color-positive-disabled: #90d5c4;
+  --color-bot: #6b5aba;
+  --color-black: #424d57;
+  --color-white: #fff;
+  --decor-blue900: #003288;
+  --decor-blue800: #003fa4;
+  --decor-blue700: #004bc2;
+  --decor-blue600: #0059e1;
+  --decor-blue500: #06f;
+  --decor-blue400: #328dff;
+  --decor-blue300: #68afff;
+  --decor-blue200: #9dceff;
+  --decor-blue100: #daedff;
+  --decor-blue50: #f4faff;
+  --decor-orange900: #6c1d00;
+  --decor-orange800: #842600;
+  --decor-orange700: #9c2e00;
+  --decor-orange600: #b43700;
+  --decor-orange500: #d54300;
+  --decor-orange400: #ff5100;
+  --decor-orange300: #ff8a77;
+  --decor-orange200: #ffb8af;
+  --decor-orange100: #ffe5e3;
+  --decor-orange50: #fff8f7;
+  --decor-yellow900: #493700;
+  --decor-yellow800: #755b00;
+  --decor-yellow700: #c9a100;
+  --decor-yellow600: #e8bb00;
+  --decor-yellow500: #f3c600;
+  --decor-yellow400: #d1aa00;
+  --decor-yellow300: #fed65e;
+  --decor-yellow200: #fedc89;
+  --decor-yellow100: #fff2d6;
+  --decor-yellow50: #fff9ed;
+  --decor-gray950: #131317;
+  --decor-gray900: #1b1b20;
+  --decor-gray800: #29292f;
+  --decor-gray700: #3b3b43;
+  --decor-gray600: #4e4e58;
+  --decor-gray500: #62626d;
+  --decor-gray400: #767680;
+  --decor-gray300: #8d8d95;
+  --decor-gray200: #ababb1;
+  --decor-gray150: #c9c9cd;
+  --decor-gray100: #c9c9cd;
+  --decor-gray75: #eeeeef;
+  --decor-gray50: #e2e2e4;
+  --decor-gray40: #eeeeef;
+  --decor-gray20: #fcfcfc;
+  --decor-green900: #00431a;
+  --decor-green800: #005321;
+  --decor-green700: #006329;
+  --decor-green600: #007331;
+  --decor-green500: #00893c;
+  --decor-green400: #00a449;
+  --decor-green300: #00c057;
+  --decor-green200: #7edd92;
+  --decor-green100: #e4f4ed;
+  --decor-green50: #f3fcf4;
+  --decor-red900: #790002;
+  --decor-red800: #930002;
+  --decor-red700: #ae0003;
+  --decor-red600: #ca0005;
+  --decor-red500: #ee0007;
+  --decor-red400: #ff4c4d;
+  --decor-red300: #ff8889;
+  --decor-red200: #ffb7b7;
+  --decor-red100: #ffe5e5;
+  --decor-red50: #fff8f8;
+  --decor-purple900: #50009c;
+  --decor-purple800: #6100bd;
+  --decor-purple700: #7400df;
+  --decor-purple600: #8609ff;
+  --decor-purple500: #9146ff;
+  --decor-purple400: #a372ff;
+  --decor-purple300: #b99aff;
+  --decor-purple200: #d1c0ff;
+  --decor-purple100: #eee8ff;
+  --decor-purple50: #faf8ff;
+}