Merge pull request #3 from linuxfoundation/task/color-definitions

Task/color definitions

angular.json

@@ -46,7 +46,8 @@
             "browserTarget": "lfx-component-lib:build",
             "compodoc": true,
             "compodocArgs": ["-e", "json", "-d", "projects/lfx-component-lib"],
-            "port": 6006
+            "port": 6006,
+            "styles": ["projects/lfx-component-lib/src/lib/styles/index.scss"]
           }
         },
         "build-storybook": {

package.json

@@ -4,11 +4,10 @@
   "scripts": {
     "ng": "ng",
     "build-palette": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-palette.ts",
-    "build-colors": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-colors.ts",
     "build-constants": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-constants.ts",
     "start": "ng serve",
     "increase-patch": "npm version patch --prefix projects/lfx-component-lib",
-    "prebuild": "npm run increase-patch && npm run build-constants && npm run build-colors",
+    "prebuild": "npm run increase-patch && npm run build-constants",
     "build": "ng build",
     "postbuild": "npm run build --prefix projects/lfx-component-lib",
     "watch": "ng build --watch --configuration development",

projects/lfx-component-lib/.storybook/main.ts

@@ -8,7 +8,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
-    '@storybook/addon-designs'
+    '@storybook/addon-designs',
+    '@storybook/addon-docs',
   ],
   framework: {
     name: '@storybook/angular',

projects/lfx-component-lib/.storybook/preview.ts

@@ -1,6 +1,6 @@
-import type { Preview } from "@storybook/angular";
-import { setCompodocJson } from "@storybook/addon-docs/angular";
-import docJson from "../documentation.json";
+import type { Preview } from '@storybook/angular';
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+import docJson from '../documentation.json';
 
 setCompodocJson(docJson);
 

projects/lfx-component-lib/src/lib/styles/colors.scss

@@ -3,14 +3,74 @@
  * SPDX-License-Identifier: MIT
  */
 
-body {
-  color: #282e32;
+@import "./constants.scss";
+
+//  default text colors
+*,
+.text-primary {
+  color: $grey-1000;
+}
+
+.text-secondary {
+  color: #808b91;
 }
 
+// background colors
 .primary {
-  color: #282e32;
+  color: $blue-500;
 }
 
 .secondary {
-  color: #808b91;
+  color: $blue-50;
+}
+
+a,
+.link-text {
+  cursor: pointer;
+  color: $blue-500;
+  &:hover {
+    color: $blue-700;
+  }
+  &:active {
+    color: $blue-800;
+  }
+}
+
+.message {
+  &.notice {
+    color: $blue-500;
+  }
+  &.warning {
+    color: $orange-500;
+  }
+  &.success {
+    color: $green-500;
+  }
+  &.error {
+    color: $red-500;
+  }
+}
+
+// background colors
+.bg-primary {
+  background-color: $blue-500;
+}
+
+.bg-secondary {
+  background-color: $blue-50;
+}
+
+.bg-message {
+  &.notice {
+    background-color: $blue-50;
+  }
+  &.warning {
+    background-color: $orange-50;
+  }
+  &.success {
+    background-color: $green-50;
+  }
+  &.error {
+    background-color: $red-50;
+  }
 }

projects/lfx-component-lib/src/lib/styles/index.scss

@@ -0,0 +1,2 @@
+@import "./colors.scss";
+@import "./typography.scss";

projects/lfx-component-lib/src/lib/themes/color-palette.mdx

@@ -0,0 +1,142 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import colors from "../configs/color-palette.json";
+
+<Meta title="LFX Components/Themes/Color Palette" />
+
+# Color Palette
+
+Our design system's color palette helps maintain consistent styling across the application.
+
+<ColorPalette>
+  <ColorItem
+    title="bg-primary"
+    subtitle="Background Primary"
+    colors={{
+      WildWatermelon: colors.blue[500],
+    }}
+  />
+  <ColorItem
+    title="bg-secondary"
+    subtitle="Background Secondary"
+    colors={{
+      Blue: colors.blue[50],
+    }}
+  />
+  <ColorItem
+    title="bg-message"
+    subtitle="Background Message"
+    colors={{
+      Notice: colors.blue[50],
+      Warning: colors.orange[50],
+      Success: colors.green[50],
+      Error: colors.red[50],
+    }}
+  />
+
+<ColorItem
+  title="bg-grey"
+  subtitle="Background Grey"
+  colors={{
+    50: colors.grey[50],
+    100: colors.grey[100],
+    200: colors.grey[200],
+    300: colors.grey[300],
+    400: colors.grey[400],
+    500: colors.grey[500],
+    600: colors.grey[600],
+    700: colors.grey[700],
+    800: colors.grey[800],
+    900: colors.grey[900],
+    1000: colors.grey[1000],
+  }}
+/>
+
+<ColorItem
+  title="bg-blue"
+  subtitle="Background Blue"
+  colors={{
+    50: colors.blue[50],
+    100: colors.blue[100],
+    200: colors.blue[200],
+    300: colors.blue[300],
+    400: colors.blue[400],
+    500: colors.blue[500],
+    600: colors.blue[600],
+    700: colors.blue[700],
+    800: colors.blue[800],
+    900: colors.blue[900],
+    1000: colors.blue[1000],
+  }}
+/>
+
+<ColorItem
+  title="bg-green"
+  subtitle="Background Green"
+  colors={{
+    50: colors.green[50],
+    100: colors.green[100],
+    200: colors.green[200],
+    300: colors.green[300],
+    400: colors.green[400],
+    500: colors.green[500],
+    600: colors.green[600],
+    700: colors.green[700],
+    800: colors.green[800],
+    900: colors.green[900],
+    1000: colors.green[1000],
+  }}
+/>
+
+<ColorItem
+  title="bg-red"
+  subtitle="Background Red"
+  colors={{
+    50: colors.red[50],
+    100: colors.red[100],
+    200: colors.red[200],
+    300: colors.red[300],
+    400: colors.red[400],
+    500: colors.red[500],
+    600: colors.red[600],
+    700: colors.red[700],
+    800: colors.red[800],
+    900: colors.red[900],
+  }}
+/>
+
+<ColorItem
+  title="bg-yellow"
+  subtitle="Background Yellow"
+  colors={{
+    50: colors.yellow[50],
+    100: colors.yellow[100],
+    200: colors.yellow[200],
+    300: colors.yellow[300],
+    400: colors.yellow[400],
+    500: colors.yellow[500],
+    600: colors.yellow[600],
+    700: colors.yellow[700],
+    800: colors.yellow[800],
+    900: colors.yellow[900],
+    1000: colors.yellow[1000],
+  }}
+/>
+
+  <ColorItem
+    title="bg-orange"
+    subtitle="Background Orange"
+    colors={{
+      50: colors.orange[50],
+      100: colors.orange[100],
+      200: colors.orange[200],
+      300: colors.orange[300],
+      400: colors.orange[400],
+      500: colors.orange[500],
+      600: colors.orange[600],
+      700: colors.orange[700],
+      800: colors.orange[800],
+      900: colors.orange[900],
+      1000: colors.orange[1000],
+    }}
+  />
+</ColorPalette>

projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts

@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'LFX Components/Themes/Text Colors',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const DefaultText: Story = {
+  render: () => ({
+    template: `
+      <p class="text-primary">This is a paragraph of body text.</p>
+    `,
+  }),
+};
+
+export const SecondaryText: Story = {
+  render: () => ({
+    template: `
+      <p class="text-secondary">This is a paragraph of body text</p>
+    `,
+  }),
+};
+
+export const LinkText: Story = {
+  render: () => ({
+    template: `
+      <a>This is a link text</a> <br />
+      <span class="link-text">This is a span with link text</span>
+    `,
+  }),
+};
+
+export const MessageNotice: Story = {
+  render: () => ({
+    template: `
+      <p class="message notice">This is a message notice</p>
+    `,
+  }),
+};
+
+export const MessageWarning: Story = {
+  render: () => ({
+    template: `
+      <p class="message warning">This is a message warning</p>
+    `,
+  }),
+};
+
+export const MessageSuccess: Story = {
+  render: () => ({
+    template: `
+      <p class="message success">This is a message success</p>
+    `,
+  }),
+};
+
+export const MessageError: Story = {
+  render: () => ({
+    template: `
+      <p class="message error">This is a message error</p>
+    `,
+  }),
+};
+
+export const AllColors: Story = {
+  render: () => ({
+    template: `
+      <p>This is a paragraph of body text.</p>
+      <p class="text-secondary">This is a paragraph of body text.</p>
+      <a>This is a link text</a><br />
+      <span class="link-text">This is a span with link text</span>
+      <p class="message notice">This is a message notice</p>
+      <p class="message warning">This is a message warning</p>
+      <p class="message success">This is a message success</p>
+      <p class="message error">This is a message error</p>
+    `,
+  }),
+};

scripts/build-colors.ts

@@ -1,5 +1,7 @@
 // Copyright The Linux Foundation and each contributor to LFX.
 // SPDX-License-Identifier: MIT
+
+// TODO: revisit this script. Disabling this for now.
 import { colorBase } from './helpers/base-css';
 import { getPrimitiveValue } from './helpers/helper-functions';
 import { primitives, lightMode } from './helpers/read-json';