Add Color Design Tokens (#49)

libs/ui/.storybook/main.ts

@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/angular';
 const config: StorybookConfig = {
   core: {},
   stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
+  addons: ['storybook-design-token', '@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
   framework: {
     name: '@storybook/angular',
     options: {},

libs/ui/.storybook/preview.ts

@@ -0,0 +1,5 @@
+export const parameters = {
+  designToken: {
+    defaultTab: 'Colors',
+  }
+};

libs/ui/README.md

@@ -1,7 +1,11 @@
-# ui
+# UI
 
-This library was generated with [Nx](https://nx.dev).
+This Library is a UI lib only and should contain as little business logic as possible.
 
 ## Running unit tests
 
 Run `nx test ui` to execute the unit tests.
+
+## Running Storybook
+
+Run `nx storybook ui` to startup storybook locally

libs/ui/src/component/radial-chart/radial-chart.stories.ts

@@ -5,7 +5,7 @@ import { RADIAL_CHART_SIZE } from './radial-chart.types';
 const sizeOptions = Object.values(RADIAL_CHART_SIZE);
 
 const meta: Meta<RadialChartComponent> = {
-  title: 'Radial Chart',
+  title: 'Components/Radial Chart',
   component: RadialChartComponent,
   argTypes: {
     score: {

libs/ui/src/component/user-flow-form/user-flow-form.stories.ts

@@ -3,7 +3,7 @@ import { UserFlowFormComponent } from './user-flow-form.component';
 import { of } from 'rxjs';
 
 const meta: Meta<UserFlowFormComponent> = {
-  title: 'User-Flow Form',
+  title: 'Components/User-Flow Form',
   component: UserFlowFormComponent,
 };
 export default meta;

libs/ui/src/token/color.scss

@@ -1,10 +1,83 @@
 :root {
-  --color-white: #fff;
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+
+  --color-primary: #009EF6;
+  --color-primary-active: #0095E8;
+  --color-primary-light: #ECF8FF;
+
+  /**
+  * @tokens Success Colors
+  * @presenter Color
+  */
+
+  --color-success: #50CD89;
+  --color-success-active: #47BE7D;
+  --color-success-light: #E8FFF3;
+
+  /**
+  * @tokens Danger Colors
+  * @presenter Color
+  */
+
+  --color-danger: #F1416C;
+  --color-danger-active: #D9214E;
+  --color-danger-light: #FFF5F8;
+
+  /**
+  * @tokens Warning Colors
+  * @presenter Color
+  */
+
+  --color-warning: #FFC700;
+  --color-warning-active: #F1BC00;
+  --color-warning-light: #FFF8DD;
+
+  /**
+  * @tokens Info Colors
+  * @presenter Color
+  */
+
+  --color-info: #7239EA;
+  --color-info-active: #5014D0;
+  --color-info-light: #F8F5FF;
+
+  /**
+  * @tokens White Colors
+  * @presenter Color
+  */
+
+  --color-white: #FFFFFF;
+  --color-white-active: #F5F8FA;
+  --color-dark: #181C32;
+
+  /**
+  * @tokens Gray Colors
+  * @presenter Color
+  */
+
+  --color-gray-100: #F9F9F9;
+  --color-gray-200: #F1F1F2;
+  --color-gray-300: #E1E3EA;
+  --color-gray-400: #D8D8E5;
+  --color-gray-500: #A1A5B7;
+  --color-gray-600: #7E8299;
+  --color-gray-700: #5E6278;
+  --color-gray-800: #3F4254;
+  --color-gray-900: #181C32;
+
+  /**
+  * @tokens Legacy Colors
+  * @presenter Color
+ */
+
   --color-orange: #ff5d22;
   --color-veryLightGray: #f5f5f5;
   --color-lightGray: #e5e4e4;
   --color-gray: gray;
   --color-darkBlue: #221638;
   --color-green: green;
   --color-red: red;
-}
+};

libs/ui/src/token/colors.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs';
+import { DesignTokenDocBlock } from 'storybook-design-token';
+
+<Meta title="Design Tokens/Colors" />
+
+# Colors
+
+The colors are extracted from the UI Kit which is the source of truth!
+
+https://www.figma.com/file/isN32dov8RbpPy9tO91IBA/Metronic-UI-Kit-1.1?type=design&node-id=8593-3020&mode=design&t=Ye7DuwBx5CKeLC7o-0
+
+## Primary Colors
+
+<DesignTokenDocBlock categoryName="Primary Colors" showSearch={false}/>
+
+## Success Colors
+
+<DesignTokenDocBlock categoryName="Success Colors" showSearch={false}/>
+
+## Danger Colors
+
+<DesignTokenDocBlock categoryName="Danger Colors" showSearch={false}/>
+
+## Warning Colors
+
+<DesignTokenDocBlock categoryName="Warning Colors" showSearch={false}/>
+
+## Info Colors
+
+<DesignTokenDocBlock categoryName="Info Colors" showSearch={false}/>
+
+## White Colors
+
+<DesignTokenDocBlock categoryName="White Colors" showSearch={false}/>
+
+## Gray colors
+
+<DesignTokenDocBlock categoryName="Gray Colors"  showSearch={false}/>
+
+## Legacy Colors
+
+<DesignTokenDocBlock categoryName="Legacy Colors" showSearch={false}/>
+