Merge pull request #1 from linuxfoundation/IN-152-typography-rules

added typography rules

Author: emlimlf

package.json

@@ -4,12 +4,11 @@
   "scripts": {
     "ng": "ng",
     "build-palette": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-palette.ts",
-    "build-typography": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/build-typography.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-typography && npm run build-colors",
+    "prebuild": "npm run increase-patch && npm run build-constants && npm run build-colors",
     "build": "ng build",
     "postbuild": "npm run build --prefix projects/lfx-component-lib",
     "watch": "ng build --watch --configuration development",

projects/lfx-component-lib/README.md

@@ -3,20 +3,27 @@
 This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.1.0.
 
 ## Installation with NG CLI
+
 `ng add lfx-component-lib`
 
 ## Code scaffolding
 
 Run `ng generate component component-name --project lfx-component-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lfx-component-lib`.
-> Note: Don't forget to add `--project lfx-component-lib` or else it will be added to the default project in your `angular.json` file. 
+
+> Note: Don't forget to add `--project lfx-component-lib` or else it will be added to the default project in your `angular.json` file.
+
+## Scaffolding with Storybook using lfx-ng-schematics (see: https://github.com/linuxfoundation/lfx-ng-schematics for details)
+
+Run `ng g lfx-ng-schematics:lfx-c --name <name of component>`
 
 ## Build
 
-Run `ng build lfx-component-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
+Run `yarn build` to build the project. The build artifacts will be stored in the `dist/` directory.
 
 ## Publishing
 
-After building your library with `ng build lfx-component-lib`, go to the dist folder `cd dist/lfx-component-lib` and run `npm publish`.
+This project already has the github workflows setup, simple push your branch and file a PR for it to be merged to main.
+This will create a published version of the package. (Note: This will soon be changed to release tags)
 
 ## Running unit tests
 
@@ -30,4 +37,7 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 
 To start storybook run `npm run storybook` and navigate to `http://localhost:6006/`.
 To get access to Figma designs in Design tab add `STORYBOOK_FIGMA_ACCESS_TOKEN` to your environment variables. To generate Figma personal access token follow [this guide](https://www.figma.com/developers/api#access-tokens).
+
+```
+
 ```

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

@@ -1,13 +1,16 @@
+/*!
+ * Copyright The Linux Foundation and each contributor to LFX.
+ * SPDX-License-Identifier: MIT
+ */
 
 body {
-  color: #282e32
+  color: #282e32;
 }
 
-  .primary {
-    color: #282e32;
+.primary {
+  color: #282e32;
 }
 
-
-  .secondary {
-    color: #808b91;
+.secondary {
+  color: #808b91;
 }

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

@@ -1,13 +1,64 @@
+/*!
+ * Copyright The Linux Foundation and each contributor to LFX.
+ * SPDX-License-Identifier: MIT
+ */
 
-body {
-  font-family: Open Sans, Roboto Slab, sans-serif;
+html {
+  // resetting the font-size
+  font-size: 100%; // 16px
 }
 
-  .page-title {
-    font-size: 22px;
+body,
+span,
+p,
+a {
+  font-family:
+    Open Sans,
+    sans-serif;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1rem;
 }
 
+small {
+  // marked as body2 in figma
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.688rem;
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+h1 {
+  font-family: "Roboto Slab", sans-serif;
+  font-size: 1.375rem;
+  font-weight: 700;
+  line-height: 1.625rem;
+}
+
+h2 {
+  font-family: "Roboto Slab", sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+}
+
+h3 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.125rem;
+}
+
+h4 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1rem;
+}
 
-  .section-title {
-    font-size: 18px;
+h5 {
+  font-family: "Open Sans", sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 0.875rem;
 }

projects/lfx-component-lib/src/lib/themes/typography.stories.ts

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from '@storybook/angular';
+
+const meta: Meta = {
+  title: 'LFX Components/Themes/Typography',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const BodyText: Story = {
+  render: () => ({
+    template: `
+      <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>
+    `,
+  }),
+};
+
+export const SmallText: Story = {
+  render: () => ({
+    template: `
+      <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>
+    `,
+  }),
+};
+
+export const Heading1: Story = {
+  render: () => ({
+    template: `
+      <h1>This is a Heading 1</h1>
+      <p>It uses Roboto Slab, sans-serif font with a size of 1.375rem (22px) and line height of 1.625rem (26px).</p>
+    `,
+  }),
+};
+
+export const Heading2: Story = {
+  render: () => ({
+    template: `
+      <h2>This is a Heading 2</h2>
+      <p>It uses Roboto Slab, sans-serif font with a size of 1.125rem (18px) and line height of 1.375rem (22px).</p>
+    `,
+  }),
+};
+
+export const Heading3: Story = {
+  render: () => ({
+    template: `
+      <h3>This is a Heading 3</h3>
+      <p>It uses Open Sans, sans-serif font with a size of 1rem (16px) and line height of 1.125rem (18px).</p>
+    `,
+  }),
+};
+
+export const Heading4: Story = {
+  render: () => ({
+    template: `
+      <h4>This is a Heading 4</h4>
+      <p>It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>
+    `,
+  }),
+};
+
+export const Heading5: Story = {
+  render: () => ({
+    template: `
+      <h5>This is a Heading 5</h5>
+      <p>It uses Open Sans, sans-serif font with a size of 0.75rem (12px) and line height of 0.875rem (14px).</p>
+    `,
+  }),
+};
+
+export const AllTypography: Story = {
+  render: () => ({
+    template: `
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <p>This is a paragraph of body text.</p>
+      <small>This is small text (body2).</small>
+    `,
+  }),
+};