typography

src/components.d.ts

@@ -34,6 +34,14 @@ export namespace Components {
         "logoSrc"?: string;
         "name": string;
     }
+    interface DHeading {
+        "color": Color;
+        "size": Size;
+    }
+    interface DText {
+        "color": Color;
+        "size": Size;
+    }
 }
 declare global {
     interface HTMLDAvatarElement extends Components.DAvatar, HTMLStencilElement {
@@ -60,11 +68,25 @@ declare global {
         prototype: HTMLDCredentialServiceElement;
         new (): HTMLDCredentialServiceElement;
     };
+    interface HTMLDHeadingElement extends Components.DHeading, HTMLStencilElement {
+    }
+    var HTMLDHeadingElement: {
+        prototype: HTMLDHeadingElement;
+        new (): HTMLDHeadingElement;
+    };
+    interface HTMLDTextElement extends Components.DText, HTMLStencilElement {
+    }
+    var HTMLDTextElement: {
+        prototype: HTMLDTextElement;
+        new (): HTMLDTextElement;
+    };
     interface HTMLElementTagNameMap {
         "d-avatar": HTMLDAvatarElement;
         "d-button": HTMLDButtonElement;
         "d-credential-card": HTMLDCredentialCardElement;
         "d-credential-service": HTMLDCredentialServiceElement;
+        "d-heading": HTMLDHeadingElement;
+        "d-text": HTMLDTextElement;
     }
 }
 declare namespace LocalJSX {
@@ -94,11 +116,21 @@ declare namespace LocalJSX {
         "logoSrc"?: string;
         "name"?: string;
     }
+    interface DHeading {
+        "color"?: Color;
+        "size"?: Size;
+    }
+    interface DText {
+        "color"?: Color;
+        "size"?: Size;
+    }
     interface IntrinsicElements {
         "d-avatar": DAvatar;
         "d-button": DButton;
         "d-credential-card": DCredentialCard;
         "d-credential-service": DCredentialService;
+        "d-heading": DHeading;
+        "d-text": DText;
     }
 }
 export { LocalJSX as JSX };
@@ -109,6 +141,8 @@ declare module "@stencil/core" {
             "d-button": LocalJSX.DButton & JSXBase.HTMLAttributes<HTMLDButtonElement>;
             "d-credential-card": LocalJSX.DCredentialCard & JSXBase.HTMLAttributes<HTMLDCredentialCardElement>;
             "d-credential-service": LocalJSX.DCredentialService & JSXBase.HTMLAttributes<HTMLDCredentialServiceElement>;
+            "d-heading": LocalJSX.DHeading & JSXBase.HTMLAttributes<HTMLDHeadingElement>;
+            "d-text": LocalJSX.DText & JSXBase.HTMLAttributes<HTMLDTextElement>;
         }
     }
 }

src/components/d-heading/d-heading.css

@@ -0,0 +1,27 @@
+:host([size='xl']) {
+  @apply text-[56px] not-italic font-semibold leading-[64px];
+}
+
+:host([size='l']) {
+  @apply text-5xl not-italic font-semibold leading-[56px];
+}
+
+:host([size='m']) {
+  @apply text-[40px] not-italic font-semibold leading-[48px];
+}
+
+:host([size='s']) {
+  @apply text-[32px] not-italic font-semibold leading-10;
+}
+
+:host([size='xs']) {
+  @apply text-[26px] not-italic font-semibold leading-8;
+}
+
+:host([color='accent']) {
+  @apply text-on-accent;
+}
+
+:host([color='primary']) {
+  @apply text-on;
+}

src/components/d-heading/d-heading.tsx

@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { Color, Size } from '../types';
+
+@Component({
+  tag: 'd-heading',
+  styleUrl: 'd-heading.css',
+  shadow: true,
+})
+export class DHeading {
+  @Prop() size: Size = 'm';
+  @Prop() color: Color = 'primary';
+
+  render() {
+    return (
+      <Host size={this.size} color={this.color}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/d-heading/readme.md

@@ -0,0 +1,18 @@
+# d-heading
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `color`  | `color`   |             | `string` | `'primary'` |
+| `size`   | `size`    |             | `string` | `'m'`       |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/d-heading/test/d-heading.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-heading', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-heading></d-heading>');
+
+    const element = await page.find('d-heading');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/d-heading/test/d-heading.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DHeading } from '../d-heading';
+
+describe('d-heading', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DHeading],
+      html: `<d-heading></d-heading>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-heading color="primary" size="m">
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </d-heading>
+    `);
+  });
+});

src/components/d-text/d-text.css

@@ -0,0 +1,27 @@
+:host([size='xl']) {
+  @apply text-xl not-italic font-normal leading-7;
+}
+
+:host([size='l']) {
+  @apply text-lg not-italic font-normal leading-[26px];
+}
+
+:host([size='m']) {
+  @apply text-base not-italic font-normal leading-5;
+}
+
+:host([size='s']) {
+  @apply text-sm not-italic font-normal leading-5;
+}
+
+:host([size='xs']) {
+  @apply text-xs not-italic font-normal leading-4;
+}
+
+:host([color='accent']) {
+  @apply text-on-accent;
+}
+
+:host([color='primary']) {
+  @apply text-on;
+}

src/components/d-text/d-text.tsx

@@ -0,0 +1,20 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+import { Color, Size } from '../types';
+
+@Component({
+  tag: 'd-text',
+  styleUrl: 'd-text.css',
+  shadow: true,
+})
+export class DText {
+  @Prop() size: Size = 'm';
+  @Prop() color: Color = 'primary';
+
+  render() {
+    return (
+      <Host size={this.size} color={this.color}>
+        <slot></slot>
+      </Host>
+    );
+  }
+}

src/components/d-text/readme.md

@@ -0,0 +1,17 @@
+# d-text
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description | Type     | Default |
+| -------- | --------- | ----------- | -------- | ------- |
+| `size`   | `size`    |             | `string` | `'m'`   |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/d-text/test/d-text.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('d-text', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<d-text></d-text>');
+
+    const element = await page.find('d-text');
+    expect(element).toHaveClass('hydrated');
+  });
+});

src/components/d-text/test/d-text.spec.tsx

@@ -0,0 +1,18 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { DText } from '../d-text';
+
+describe('d-text', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [DText],
+      html: `<d-text></d-text>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <d-text color="primary" size="m">
+        <mock:shadow-root>
+            <slot></slot>
+        </mock:shadow-root>
+      </d-text>
+    `);
+  });
+});

src/components/tokens/Typography.mdx

@@ -0,0 +1,58 @@
+import { Meta, Typeset } from '@storybook/blocks';
+
+<Meta title="Typography" />
+
+export const typography = {
+  type: {
+    primary: 'Gantari Variable',
+  },
+  weight: {
+    regular: '400',
+    semibold: '600',
+  },
+  size: {
+    xs: 12,
+    s: 14,
+    m: 16,
+    l: 18,
+    xl: 20,
+    h: {
+      xs: 26,
+      s: 32,
+      m: 40,
+      l: 48,
+      xl: 56,
+    },
+  },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export const SampleHeading = 'Heading';
+
+# Typography
+
+## Headings
+
+**Font:** Gantari
+
+**Weights:** 600(semibold)
+
+<Typeset
+  fontSizes={[Number(typography.size.h.xs), Number(typography.size.h.s), Number(typography.size.h.m), Number(typography.size.h.l), Number(typography.size.h.xl)]}
+  fontWeight={typography.weight.semibold}
+  sampleText={SampleHeading}
+  fontFamily={typography.type.primary}
+/>
+
+## Regular text
+
+**Font:** Gantari
+
+**Weights:** 400(regular)
+
+<Typeset
+  fontSizes={[Number(typography.size.xs), Number(typography.size.s), Number(typography.size.m), Number(typography.size.l), Number(typography.size.xl)]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>

src/components/types.ts

@@ -13,7 +13,7 @@ export const ShapeArgTypes = {
 };
 export type Shape = (typeof ShapeOptions)[number];
 
-const ColorOptions = 'primary accent'.split(' ');
+const ColorOptions = 'primary accent success warning error'.split(' ');
 export const ColorArgTypes = {
   options: ColorOptions,
   description: 'Color of the button',

src/global/global.css

@@ -65,8 +65,8 @@
   direction: ltr;
 }
 
-* {
-  @apply text-on;
+body {
+  @apply bg-surface;
 }
 
 body {