From c20f2b56e302758806774911f1c738b3b2e22f3a Mon Sep 17 00:00:00 2001
From: Puria Nafisi Azizi <puria@dyne.org>
Date: Sun, 28 Jan 2024 16:29:38 +0100
Subject: [PATCH] fix: dark mode not shown without class (#35)

---
 src/components/heading/d-heading.css          | 27 +++++++++++++++++++
 src/components/heading/d-heading.tsx          | 20 ++++++++++++++
 src/components/heading/readme.md              | 18 +++++++++++++
 src/components/heading/test/d-heading.e2e.ts  | 11 ++++++++
 .../heading/test/d-heading.spec.tsx           | 18 +++++++++++++
 src/components/text/d-text.css                | 27 +++++++++++++++++++
 src/components/text/d-text.tsx                | 20 ++++++++++++++
 src/components/text/readme.md                 | 17 ++++++++++++
 src/components/text/test/d-text.e2e.ts        | 11 ++++++++
 src/components/text/test/d-text.spec.tsx      | 18 +++++++++++++
 src/global/global.css                         | 24 ++++++++---------
 11 files changed, 198 insertions(+), 13 deletions(-)
 create mode 100644 src/components/heading/d-heading.css
 create mode 100644 src/components/heading/d-heading.tsx
 create mode 100644 src/components/heading/readme.md
 create mode 100644 src/components/heading/test/d-heading.e2e.ts
 create mode 100644 src/components/heading/test/d-heading.spec.tsx
 create mode 100644 src/components/text/d-text.css
 create mode 100644 src/components/text/d-text.tsx
 create mode 100644 src/components/text/readme.md
 create mode 100644 src/components/text/test/d-text.e2e.ts
 create mode 100644 src/components/text/test/d-text.spec.tsx

diff --git a/src/components/heading/d-heading.css b/src/components/heading/d-heading.css
new file mode 100644
index 0000000..e257e29
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/heading/d-heading.tsx b/src/components/heading/d-heading.tsx
new file mode 100644
index 0000000..c89e843
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
new file mode 100644
index 0000000..7fb3779
--- /dev/null
+++ b/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/)*
diff --git a/src/components/heading/test/d-heading.e2e.ts b/src/components/heading/test/d-heading.e2e.ts
new file mode 100644
index 0000000..b30a141
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/src/components/heading/test/d-heading.spec.tsx b/src/components/heading/test/d-heading.spec.tsx
new file mode 100644
index 0000000..b207cc6
--- /dev/null
+++ b/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>
+    `);
+  });
+});
diff --git a/src/components/text/d-text.css b/src/components/text/d-text.css
new file mode 100644
index 0000000..d5182e9
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/text/d-text.tsx b/src/components/text/d-text.tsx
new file mode 100644
index 0000000..10a7b4c
--- /dev/null
+++ b/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>
+    );
+  }
+}
diff --git a/src/components/text/readme.md b/src/components/text/readme.md
new file mode 100644
index 0000000..4239ad7
--- /dev/null
+++ b/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/)*
diff --git a/src/components/text/test/d-text.e2e.ts b/src/components/text/test/d-text.e2e.ts
new file mode 100644
index 0000000..8383b76
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/src/components/text/test/d-text.spec.tsx b/src/components/text/test/d-text.spec.tsx
new file mode 100644
index 0000000..e968782
--- /dev/null
+++ b/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>
+    `);
+  });
+});
diff --git a/src/global/global.css b/src/global/global.css
index 3ca329d..5f41c2d 100644
--- a/src/global/global.css
+++ b/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;
-}