fix: dark mode not shown without class (#35)

src/components/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/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/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/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/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/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/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/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/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/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/global/global.css

@@ -39,15 +39,17 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    --surface: #1f2433;
-    --primary: #253151;
-    --accent: #dfddd7;
-    --on-accent: #223360;
-    --on: #f7faff;
-    --on-alt: #c0c0ca;
-    --success: #4ecb71;
-    --warning: #ff9601;
-    --error: #ff443b;
+    :root {
+      --surface: #1f2433;
+      --primary: #253151;
+      --accent: #dfddd7;
+      --on-accent: #223360;
+      --on: #f7faff;
+      --on-alt: #c0c0ca;
+      --success: #4ecb71;
+      --warning: #ff9601;
+      --error: #ff443b;
+    }
   }
 }
 
@@ -68,7 +70,3 @@
 body {
   @apply bg-surface;
 }
-
-body {
-  @apply bg-surface;
-}