From ca4e8eb512dd50f723403ee9a786610032e45f30 Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 28 Oct 2024 13:30:59 +0800
Subject: [PATCH 1/2] fix storybook preview to use global styles

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 angular.json                                  |   3 +-
 package.json                                  |   3 +-
 .../lfx-component-lib/.storybook/preview.ts   |   6 +-
 projects/lfx-component-lib/documentation.json | 442 ++++++++++++++++++
 .../src/lib/styles/colors.scss                |  17 +-
 .../src/lib/styles/index.scss                 |   2 +
 .../src/lib/themes/colors.stories.ts          |  34 ++
 scripts/build-colors.ts                       |   2 +
 8 files changed, 499 insertions(+), 10 deletions(-)
 create mode 100644 projects/lfx-component-lib/src/lib/styles/index.scss
 create mode 100644 projects/lfx-component-lib/src/lib/themes/colors.stories.ts

diff --git a/angular.json b/angular.json
index b01aed2..1757d2b 100644
--- a/angular.json
+++ b/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": {
diff --git a/package.json b/package.json
index 5e0f6f3..62c72b9 100644
--- a/package.json
+++ b/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",
diff --git a/projects/lfx-component-lib/.storybook/preview.ts b/projects/lfx-component-lib/.storybook/preview.ts
index 1c15e8d..8ec716e 100644
--- a/projects/lfx-component-lib/.storybook/preview.ts
+++ b/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);
 
diff --git a/projects/lfx-component-lib/documentation.json b/projects/lfx-component-lib/documentation.json
index d7421f4..44eece0 100644
--- a/projects/lfx-component-lib/documentation.json
+++ b/projects/lfx-component-lib/documentation.json
@@ -10,6 +10,46 @@
     "modules": [],
     "miscellaneous": {
         "variables": [
+            {
+                "name": "AllColors",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "AllTypography",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h1>Heading 1</h1>\n      <h2>Heading 2</h2>\n      <h3>Heading 3</h3>\n      <h4>Heading 4</h4>\n      <h5>Heading 5</h5>\n      <p>This is a paragraph of body text.</p>\n      <small>This is small text (body2).</small>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "BodyText",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text. It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "DefaultText",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-primary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+            },
             {
                 "name": "Error",
                 "ctype": "miscellaneous",
@@ -20,6 +60,76 @@
                 "type": "Story",
                 "defaultValue": "{\n  args: {\n    type: 'error' as IType,\n  },\n  parameters: {\n    design: {\n      type: \"figspec\",\n      url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4\",\n    },\n  },\n  play: async ( {canvasElement} ) => {\n    const element = getElement(canvasElement);\n    await expect(element.classList).toContain('error');\n  }\n}"
             },
+            {
+                "name": "Heading1",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h1>This is a Heading 1</h1>\n      <p>It uses Roboto Slab, sans-serif font with a size of 1.375rem (22px) and line height of 1.625rem (26px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Heading2",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h2>This is a Heading 2</h2>\n      <p>It uses Roboto Slab, sans-serif font with a size of 1.125rem (18px) and line height of 1.375rem (22px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Heading3",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h3>This is a Heading 3</h3>\n      <p>It uses Open Sans, sans-serif font with a size of 1rem (16px) and line height of 1.125rem (18px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Heading4",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h4>This is a Heading 4</h4>\n      <p>It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Heading5",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <h5>This is a Heading 5</h5>\n      <p>It uses Open Sans, sans-serif font with a size of 0.75rem (12px) and line height of 0.875rem (14px).</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n  title: 'LFX Components/Themes/Colors',\n  tags: ['autodocs'],\n}"
+            },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta",
+                "defaultValue": "{\n  title: 'LFX Components/Themes/Typography',\n  tags: ['autodocs'],\n}"
+            },
             {
                 "name": "meta",
                 "ctype": "miscellaneous",
@@ -60,6 +170,16 @@
                 "type": "Preview",
                 "defaultValue": "{\n  parameters: {\n    controls: {\n      matchers: {\n        color: /(background|color)$/i,\n        date: /Date$/i,\n      },\n    },\n  },\n}"
             },
+            {
+                "name": "SecondaryText",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-secondary\">This is a paragraph of body text</p>\n    `,\n  }),\n}"
+            },
             {
                 "name": "Section",
                 "ctype": "miscellaneous",
@@ -70,6 +190,16 @@
                 "type": "Story",
                 "defaultValue": "{\n  render: (args: any) => ({\n    template: `<lfx-sections>\n      <h1>Section</h1>\n      <p>Section content here</p>\n    </lfx-sections>\n    <div style=\"display: grid; grid-template-columns: repeat(2,minmax(0,1fr))\">\n    <lfx-sections>\n      <h1>Section</h1>\n      <p>Section content here</p>\n    </lfx-sections>\n    <lfx-sections>\n      <h1>Section</h1>\n      <p>Section content here</p>\n    </lfx-sections>\n    </div>`,\n  }),\n}"
             },
+            {
+                "name": "SmallText",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <small>This is small text, also known as body2 in Figma. It uses Open Sans, sans-serif font with a size of 0.875rem (14px).</small>\n    `,\n  }),\n}"
+            },
             {
                 "name": "Success",
                 "ctype": "miscellaneous",
@@ -123,6 +253,28 @@
             }
         ],
         "typealiases": [
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj",
+                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj",
+                "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
+            },
             {
                 "name": "Story",
                 "ctype": "miscellaneous",
@@ -148,6 +300,140 @@
         ],
         "enumerations": [],
         "groupedVariables": {
+            "projects/lfx-component-lib/src/lib/themes/colors.stories.ts": [
+                {
+                    "name": "AllColors",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "DefaultText",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-primary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n  title: 'LFX Components/Themes/Colors',\n  tags: ['autodocs'],\n}"
+                },
+                {
+                    "name": "SecondaryText",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-secondary\">This is a paragraph of body text</p>\n    `,\n  }),\n}"
+                }
+            ],
+            "projects/lfx-component-lib/src/lib/themes/typography.stories.ts": [
+                {
+                    "name": "AllTypography",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h1>Heading 1</h1>\n      <h2>Heading 2</h2>\n      <h3>Heading 3</h3>\n      <h4>Heading 4</h4>\n      <h5>Heading 5</h5>\n      <p>This is a paragraph of body text.</p>\n      <small>This is small text (body2).</small>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "BodyText",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text. It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "Heading1",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h1>This is a Heading 1</h1>\n      <p>It uses Roboto Slab, sans-serif font with a size of 1.375rem (22px) and line height of 1.625rem (26px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "Heading2",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h2>This is a Heading 2</h2>\n      <p>It uses Roboto Slab, sans-serif font with a size of 1.125rem (18px) and line height of 1.375rem (22px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "Heading3",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h3>This is a Heading 3</h3>\n      <p>It uses Open Sans, sans-serif font with a size of 1rem (16px) and line height of 1.125rem (18px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "Heading4",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h4>This is a Heading 4</h4>\n      <p>It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "Heading5",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <h5>This is a Heading 5</h5>\n      <p>It uses Open Sans, sans-serif font with a size of 0.75rem (12px) and line height of 0.875rem (14px).</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta",
+                    "defaultValue": "{\n  title: 'LFX Components/Themes/Typography',\n  tags: ['autodocs'],\n}"
+                },
+                {
+                    "name": "SmallText",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <small>This is small text, also known as body2 in Figma. It uses Open Sans, sans-serif font with a size of 0.875rem (14px).</small>\n    `,\n  }),\n}"
+                }
+            ],
             "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
                 {
                     "name": "Error",
@@ -270,6 +556,32 @@
         },
         "groupedEnumerations": {},
         "groupedTypeAliases": {
+            "projects/lfx-component-lib/src/lib/themes/colors.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj",
+                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ],
+            "projects/lfx-component-lib/src/lib/themes/typography.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj",
+                    "file": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
+            ],
             "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
                 {
                     "name": "Story",
@@ -392,6 +704,136 @@
                 "coveragePercent": 0,
                 "coverageCount": "0/1",
                 "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "AllColors",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "DefaultText",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SecondaryText",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "AllTypography",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "BodyText",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Heading1",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Heading2",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Heading3",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Heading4",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Heading5",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/typography.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "SmallText",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
             }
         ]
     }
diff --git a/projects/lfx-component-lib/src/lib/styles/colors.scss b/projects/lfx-component-lib/src/lib/styles/colors.scss
index 1bf13ba..be0f469 100644
--- a/projects/lfx-component-lib/src/lib/styles/colors.scss
+++ b/projects/lfx-component-lib/src/lib/styles/colors.scss
@@ -3,14 +3,23 @@
  * 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;
 }
diff --git a/projects/lfx-component-lib/src/lib/styles/index.scss b/projects/lfx-component-lib/src/lib/styles/index.scss
new file mode 100644
index 0000000..9ac731d
--- /dev/null
+++ b/projects/lfx-component-lib/src/lib/styles/index.scss
@@ -0,0 +1,2 @@
+@import "./colors.scss";
+@import "./typography.scss";
diff --git a/projects/lfx-component-lib/src/lib/themes/colors.stories.ts b/projects/lfx-component-lib/src/lib/themes/colors.stories.ts
new file mode 100644
index 0000000..dcb38e8
--- /dev/null
+++ b/projects/lfx-component-lib/src/lib/themes/colors.stories.ts
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'LFX Components/Themes/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 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>
+    `,
+  }),
+};
diff --git a/scripts/build-colors.ts b/scripts/build-colors.ts
index 3d5a1f7..f951d46 100644
--- a/scripts/build-colors.ts
+++ b/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';

From de043b7c4256078a762e3d1cc9dde8d6150a2a1d Mon Sep 17 00:00:00 2001
From: Efren Lim <elim@linuxfoundation.org>
Date: Mon, 28 Oct 2024 14:07:06 +0800
Subject: [PATCH 2/2] Added color palette

Signed-off-by: Efren Lim <elim@linuxfoundation.org>
---
 projects/lfx-component-lib/.storybook/main.ts |   3 +-
 projects/lfx-component-lib/documentation.json | 190 ++++++++++++++++--
 .../src/lib/styles/colors.scss                |  51 +++++
 .../src/lib/themes/color-palette.mdx          | 142 +++++++++++++
 .../src/lib/themes/colors.stories.ts          |  34 ----
 .../src/lib/themes/text-colors.stories.ts     |  81 ++++++++
 6 files changed, 446 insertions(+), 55 deletions(-)
 create mode 100644 projects/lfx-component-lib/src/lib/themes/color-palette.mdx
 delete mode 100644 projects/lfx-component-lib/src/lib/themes/colors.stories.ts
 create mode 100644 projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts

diff --git a/projects/lfx-component-lib/.storybook/main.ts b/projects/lfx-component-lib/.storybook/main.ts
index a50f5c3..f34ddc3 100644
--- a/projects/lfx-component-lib/.storybook/main.ts
+++ b/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',
diff --git a/projects/lfx-component-lib/documentation.json b/projects/lfx-component-lib/documentation.json
index 44eece0..68c3636 100644
--- a/projects/lfx-component-lib/documentation.json
+++ b/projects/lfx-component-lib/documentation.json
@@ -14,11 +14,11 @@
                 "name": "AllColors",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story",
-                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n      <a>This is a link text</a><br />\n      <span class=\"link-text\">This is a span with link text</span>\n      <p class=\"message notice\">This is a message notice</p>\n      <p class=\"message warning\">This is a message warning</p>\n      <p class=\"message success\">This is a message success</p>\n      <p class=\"message error\">This is a message error</p>\n    `,\n  }),\n}"
             },
             {
                 "name": "AllTypography",
@@ -44,7 +44,7 @@
                 "name": "DefaultText",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story",
@@ -110,15 +110,65 @@
                 "type": "Story",
                 "defaultValue": "{\n  render: () => ({\n    template: `\n      <h5>This is a Heading 5</h5>\n      <p>It uses Open Sans, sans-serif font with a size of 0.75rem (12px) and line height of 0.875rem (14px).</p>\n    `,\n  }),\n}"
             },
+            {
+                "name": "LinkText",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <a>This is a link text</a> <br />\n      <span class=\"link-text\">This is a span with link text</span>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "MessageError",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message error\">This is a message error</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "MessageNotice",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message notice\">This is a message notice</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "MessageSuccess",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message success\">This is a message success</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "MessageWarning",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message warning\">This is a message warning</p>\n    `,\n  }),\n}"
+            },
             {
                 "name": "meta",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Meta",
-                "defaultValue": "{\n  title: 'LFX Components/Themes/Colors',\n  tags: ['autodocs'],\n}"
+                "defaultValue": "{\n  title: 'LFX Components/Themes/Text Colors',\n  tags: ['autodocs'],\n}"
             },
             {
                 "name": "meta",
@@ -174,7 +224,7 @@
                 "name": "SecondaryText",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story",
@@ -258,7 +308,7 @@
                 "ctype": "miscellaneous",
                 "subtype": "typealias",
                 "rawtype": "StoryObj",
-                "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "description": "",
@@ -300,42 +350,92 @@
         ],
         "enumerations": [],
         "groupedVariables": {
-            "projects/lfx-component-lib/src/lib/themes/colors.stories.ts": [
+            "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts": [
                 {
                     "name": "AllColors",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story",
-                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p>This is a paragraph of body text.</p>\n      <p class=\"text-secondary\">This is a paragraph of body text.</p>\n      <a>This is a link text</a><br />\n      <span class=\"link-text\">This is a span with link text</span>\n      <p class=\"message notice\">This is a message notice</p>\n      <p class=\"message warning\">This is a message warning</p>\n      <p class=\"message success\">This is a message success</p>\n      <p class=\"message error\">This is a message error</p>\n    `,\n  }),\n}"
                 },
                 {
                     "name": "DefaultText",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story",
                     "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-primary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
                 },
+                {
+                    "name": "LinkText",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <a>This is a link text</a> <br />\n      <span class=\"link-text\">This is a span with link text</span>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "MessageError",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message error\">This is a message error</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "MessageNotice",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message notice\">This is a message notice</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "MessageSuccess",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message success\">This is a message success</p>\n    `,\n  }),\n}"
+                },
+                {
+                    "name": "MessageWarning",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"message warning\">This is a message warning</p>\n    `,\n  }),\n}"
+                },
                 {
                     "name": "meta",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Meta",
-                    "defaultValue": "{\n  title: 'LFX Components/Themes/Colors',\n  tags: ['autodocs'],\n}"
+                    "defaultValue": "{\n  title: 'LFX Components/Themes/Text Colors',\n  tags: ['autodocs'],\n}"
                 },
                 {
                     "name": "SecondaryText",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story",
@@ -556,13 +656,13 @@
         },
         "groupedEnumerations": {},
         "groupedTypeAliases": {
-            "projects/lfx-component-lib/src/lib/themes/colors.stories.ts": [
+            "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts": [
                 {
                     "name": "Story",
                     "ctype": "miscellaneous",
                     "subtype": "typealias",
                     "rawtype": "StoryObj",
-                    "file": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                    "file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "description": "",
@@ -706,7 +806,7 @@
                 "status": "low"
             },
             {
-                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
@@ -716,7 +816,7 @@
                 "status": "low"
             },
             {
-                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
@@ -726,7 +826,57 @@
                 "status": "low"
             },
             {
-                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "LinkText",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "MessageError",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "MessageNotice",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "MessageSuccess",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "MessageWarning",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
@@ -736,7 +886,7 @@
                 "status": "low"
             },
             {
-                "filePath": "projects/lfx-component-lib/src/lib/themes/colors.stories.ts",
+                "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "type": "variable",
                 "linktype": "miscellaneous",
                 "linksubtype": "variable",
diff --git a/projects/lfx-component-lib/src/lib/styles/colors.scss b/projects/lfx-component-lib/src/lib/styles/colors.scss
index be0f469..43b0a54 100644
--- a/projects/lfx-component-lib/src/lib/styles/colors.scss
+++ b/projects/lfx-component-lib/src/lib/styles/colors.scss
@@ -23,3 +23,54 @@
 .secondary {
   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;
+  }
+}
diff --git a/projects/lfx-component-lib/src/lib/themes/color-palette.mdx b/projects/lfx-component-lib/src/lib/themes/color-palette.mdx
new file mode 100644
index 0000000..7206bc9
--- /dev/null
+++ b/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>
diff --git a/projects/lfx-component-lib/src/lib/themes/colors.stories.ts b/projects/lfx-component-lib/src/lib/themes/colors.stories.ts
deleted file mode 100644
index dcb38e8..0000000
--- a/projects/lfx-component-lib/src/lib/themes/colors.stories.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-
-const meta: Meta = {
-  title: 'LFX Components/Themes/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 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>
-    `,
-  }),
-};
diff --git a/projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts b/projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts
new file mode 100644
index 0000000..e60fa30
--- /dev/null
+++ b/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>
+    `,
+  }),
+};