feat(core/typography): add color property

packages/core/src/components.d.ts

@@ -25,7 +25,7 @@ import { TimePickerCorners } from "./components/time-picker/time-picker";
 import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-import { TypographyVariants } from "./components/typography/types";
+import { TypographyColors, TypographyVariants } from "./components/typography/typography";
 import { UploadFileState } from "./components/upload/upload-file-state";
 export { ButtonVariant } from "./components/button/button";
 export { FilterState } from "./components/category-filter/filter-state";
@@ -47,7 +47,7 @@ export { TimePickerCorners } from "./components/time-picker/time-picker";
 export { ToastConfig, ToastType } from "./components/toast/toast-utils";
 export { TypedEvent } from "./components/utils/typed-event";
 export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
-export { TypographyVariants } from "./components/typography/types";
+export { TypographyColors, TypographyVariants } from "./components/typography/typography";
 export { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     interface IxAnimatedTab {
@@ -1575,7 +1575,11 @@ export namespace Components {
     }
     interface IxTypography {
         /**
-          * Font variant
+          * Text color based on theme variables
+         */
+        "color": TypographyColors;
+        /**
+          * Font variant based on theme variables
          */
         "variant": TypographyVariants;
     }
@@ -4068,7 +4072,11 @@ declare namespace LocalJSX {
     }
     interface IxTypography {
         /**
-          * Font variant
+          * Text color based on theme variables
+         */
+        "color"?: TypographyColors;
+        /**
+          * Font variant based on theme variables
          */
         "variant"?: TypographyVariants;
     }

packages/core/src/components/typography/test/ix-typography.spec.tsx

@@ -10,7 +10,41 @@ describe('ix-typography', () => {
     expect(page.root).toEqualHtml(`
       <ix-typography>
         <mock:shadow-root>
-        <div class="text-default">
+        <div class="text-default" style="color: inherit;">
+          <slot></slot>
+        </div>
+        </mock:shadow-root>
+        Example content
+      </ix-typography>
+    `);
+  });
+
+  it('should render color', async () => {
+    const page = await newSpecPage({
+      components: [IxTypography],
+      html: `<ix-typography color="soft">Example content</ix-typography>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ix-typography color="soft">
+        <mock:shadow-root>
+        <div class="text-default" style="color: var(--theme-color-soft-text);">
+          <slot></slot>
+        </div>
+        </mock:shadow-root>
+        Example content
+      </ix-typography>
+    `);
+  });
+
+  it('should render font style', async () => {
+    const page = await newSpecPage({
+      components: [IxTypography],
+      html: `<ix-typography variant="h2">Example content</ix-typography>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <ix-typography variant="h2">
+        <mock:shadow-root>
+        <div class="text-h2" style="color: inherit;">
           <slot></slot>
         </div>
         </mock:shadow-root>

packages/core/src/components/typography/types.ts

@@ -6,19 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export type TypographyVariants =
-  | 'x-small'
-  | 'small'
-  | 'caption'
-  | 'caption-single'
-  | 'default'
-  | 'default-single'
-  | 'default-title'
-  | 'default-title-single'
-  | 'large'
-  | 'large-single'
-  | 'h2'
-  | 'display-large';
+import { TypographyVariants } from './typography';
 
 export const VariantsMapping: Record<TypographyVariants, string> = {
   'x-small': 'text-xs',
@@ -29,6 +17,8 @@ export const VariantsMapping: Record<TypographyVariants, string> = {
   'default-single': 'text-default-single',
   large: 'text-l',
   'large-single': 'text-l-single',
+  'large-title': 'text-l-title',
+  'large-title-single': 'text-l-title-single',
   h2: 'text-h2',
   'display-large': 'text-xl',
   'default-title': 'text-default-title',

packages/core/src/components/typography/typography.tsx

@@ -8,7 +8,34 @@
  */
 
 import { Component, h, Prop } from '@stencil/core';
-import { TypographyVariants, VariantsMapping } from './types';
+import { VariantsMapping } from './types';
+
+export type TypographyVariants =
+  | 'x-small'
+  | 'small'
+  | 'caption'
+  | 'caption-single'
+  | 'default'
+  | 'default-single'
+  | 'default-title'
+  | 'default-title-single'
+  | 'large'
+  | 'large-single'
+  | 'large-title'
+  | 'large-title-single'
+  | 'h2'
+  | 'display-large';
+
+export type TypographyColors =
+  | 'contrast'
+  | 'std'
+  | 'soft'
+  | 'weak'
+  | 'inv-contrast'
+  | 'inv-std'
+  | 'inv-soft'
+  | 'inv-weak'
+  | 'alarm';
 
 /**
  * @internal
@@ -20,16 +47,32 @@ import { TypographyVariants, VariantsMapping } from './types';
 })
 export class IxTypography {
   /**
-   * Font variant
+   * Font variant based on theme variables
    */
   @Prop() variant: TypographyVariants = 'default';
 
+  /**
+   * Text color based on theme variables
+   */
+  @Prop() color: TypographyColors;
+
   render() {
     const typographyClass = {
       [VariantsMapping[this.variant]]: true,
     };
+
+    const fontColor =
+      this.color !== undefined
+        ? `var(--theme-color-${this.color}-text)`
+        : 'inherit';
+
     return (
-      <div class={typographyClass}>
+      <div
+        class={typographyClass}
+        style={{
+          color: fontColor,
+        }}
+      >
         <slot></slot>
       </div>
     );