fix(avatar): inverted dark/light mode

ForkbombEu · Jan 22, 2024 · 7241023 · 7241023
1 parent a8b66b0
commit 7241023
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 53 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,32 +1,23 @@
-import { Preview, HtmlRenderer}  from '@storybook/html';
-import { withThemeByClassName } from "@storybook/addon-themes";
+import { Preview, HtmlRenderer } from '@storybook/html';
+import { withThemeByClassName } from '@storybook/addon-themes';
 import { defineCustomElements } from '../loader';
 
 defineCustomElements();
 
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-        select: /size/i,
-      },
-    },
-    docs: {
-      toc: true,
-    }
+    docs: { toc: true },
   },
   decorators: [
-  withThemeByClassName<HtmlRenderer>({
-    themes: {
-      light: "",
-      dark: "dark",
-    },
-    defaultTheme: "light",
-  }),
- ]
+    withThemeByClassName<HtmlRenderer>({
+      themes: {
+        light: '',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 };
 
 export default preview;
diff --git a/package.json b/package.json
@@ -21,13 +21,12 @@
   "scripts": {
     "clean": "rm -rf .stencil/ dist/ loader www",
     "build": "stencil build",
-    "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "build-storybook": "storybook build --docs -s dist",
     "dev": "NODE_ENV=development npm-run-all -p dev:*",
-    "dev:watch": "stencil build --watch",
+    "dev:start": "stencil build --watch --serve",
     "dev:storybook": "storybook dev -p 6006 -s dist"
   },
   "dependencies": {

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
@@ -1,5 +1,5 @@
 :host {
-  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-on-accent rounded-full text-accent;
+  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full text-on-accent;
 }
 
 :host([size="xs"]) svg,

diff --git a/src/components/avatar/readme.md b/src/components/avatar/readme.md
@@ -7,12 +7,12 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                | Default     |
-| -------- | --------- | ----------- | ----------------------------------- | ----------- |
-| `name`   | `name`    |             | `string`                            | `undefined` |
-| `shape`  | `shape`   |             | `"round" \| "square"`               | `'round'`   |
-| `size`   | `size`    |             | `"l" \| "m" \| "s" \| "xl" \| "xs"` | `'m'`       |
-| `src`    | `src`     |             | `string`                            | `undefined` |
+| Property | Attribute | Description | Type     | Default     |
+| -------- | --------- | ----------- | -------- | ----------- |
+| `name`   | `name`    |             | `string` | `undefined` |
+| `shape`  | `shape`   |             | `string` | `'round'`   |
+| `size`   | `size`    |             | `string` | `'m'`       |
+| `src`    | `src`     |             | `string` | `undefined` |
 
 
 ----------------------------------------------

diff --git a/src/components/tokens/Colors.mdx b/src/components/tokens/Colors.mdx
@@ -3,12 +3,22 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 <Meta title="Colors" />
 
 <ColorPalette>
-  <ColorItem title="--tab" subtitle="Used for the tab" colors={{ Dark: '#223360', Light: '#BDC2CF' }} />
-  <ColorItem title="--bg" subtitle="Used for the background of the pages" colors={{ Dark: '#4E5C80', Light: '#E9EBEF' }} />
-  <ColorItem title="--primary" subtitle="Used for the primary color" colors={{ Dark: '#223360', Light: '#BDC2CF' }} />
-  <ColorItem title="--on-primary" subtitle="Used for the on primary color" colors={{ Dark: '#F7FAFF', Light: '#2D2D2D' }} />
-  <ColorItem title="--on-primary-2" subtitle="Used for the on primary - 2 color" colors={{ Dark: '#B0B0B9', Light: '#68686F' }} />
-  <ColorItem title="--accent" subtitle="Used for the accent color" colors={{ Dark: '#DBD7CB', Light: '#223360' }} />
-  <ColorItem title="--on-accent" subtitle="Used for the on accent color" colors={{ Dark: '#223360', Light: '#DBD7CB' }} />
-  <ColorItem title="--status-bar" subtitle="Used for the status bar color" colors={{ Dark: '#FFFFFF', Light: '#000000' }} />
+  <ColorItem title="--tab" subtitle="Used for the tab" colors={{ Light: '#BDC2CF', Dark: '#223360' }} />
+  <ColorItem title="--surface" subtitle="Used for the background of the pages" colors={{ Light: '#E9EBEF', Dark: '#4E5C80' }} />
+  <ColorItem title="--primary" subtitle="Used for the primary color" colors={{ Light: '#BDC2CF', Dark: '#223360' }} />
+  <ColorItem title="--on-primary" subtitle="Used for the on primary color" colors={{ Light: '#2D2D2D', Dark: '#F7FAFF' }} />
+  <ColorItem title="--on-primary-2" subtitle="Used for the on primary - 2 color" colors={{ Light: '#68686F', Dark: '#B0B0B9' }} />
+  <ColorItem title="--accent" subtitle="Used for the accent color" colors={{ Light: '#223360', Dark: '#DBD7CB' }} />
+  <ColorItem title="--on-accent" subtitle="Used for the on accent color" colors={{ Light: '#DBD7CB', Dark: '#223360' }} />
+  <ColorItem title="--status-bar" subtitle="Used for the status bar color" colors={{ Light: '#000000', Dark: '#FFFFFF' }} />
+</ColorPalette>
+<ColorPalette>
+  <ColorItem title="--inverted-tab" subtitle="Inverted color for the tab" colors={{ Light: '#223360', Dark: '#BDC2CF' }} />
+  <ColorItem title="--inverted-surface" subtitle="Inverted color for the background" colors={{ Light: '#4E5C80', Dark: '#E9EBEF' }} />
+  <ColorItem title="--inverted-primary" subtitle="Inverted color for the primary" colors={{ Light: '#223360', Dark: '#BDC2CF' }} />
+  <ColorItem title="--inverted-on-primary" subtitle="Inverted color for on primary" colors={{ Light: '#F7FAFF', Dark: '#2D2D2D' }} />
+  <ColorItem title="--inverted-on-primary-2" subtitle="Inverted color for on primary - 2" colors={{ Light: '#B0B0B9', Dark: '#68686F' }} />
+  <ColorItem title="--inverted-accent" subtitle="Inverted color for the accent" colors={{ Light: '#DBD7CB', Dark: '#223360' }} />
+  <ColorItem title="--inverted-on-accent" subtitle="Inverted color for on accent" colors={{ Dark: '#DBD7CB', Light: '#223360' }} />
+  <ColorItem title="--inverted-status-bar" subtitle="Inverted color for the status bar" colors={{ Dark: '#000000', Light: '#FFFFFF' }} />
 </ColorPalette>
diff --git a/src/global/global.css b/src/global/global.css
@@ -4,24 +4,67 @@
 
 @layer base {
   :root {
-    --tab: #223360;
-    --surface: #4e5c80;
-    --primary: #223360;
-    --on-primary: #f7faff;
-    --on-primary-2: #b0b0b9;
-    --accent: #dbd7cb;
-    --on-accent: #223360;
-    --status-bar: #ffffff;
+    --tab: #bdc2cf;
+    --surface: #e9ebef;
+    --primary: #bdc2cf;
+    --on-primary: #2d2d2d;
+    --on-primary-2: #68686f;
+    --accent: #223360;
+    --on-accent: #dbd7cb;
+    --status-bar: #000000;
+
+    --inverted-tab: #223360;
+    --inverted-surface: #4e5c80;
+    --inverted-primary: #223360;
+    --inverted-on-primary: #f7faff;
+    --inverted-on-primary-2: #b0b0b9;
+    --inverted-accent: #dbd7cb;
+    --inverted-on-accent: #223360;
+    --inverted-status-bar: #ffffff;
   }
 }
 
 .dark {
-  --tab: #bdc2cf;
-  --surface: #e9ebef;
-  --primary: #bdc2cf;
-  --on-primary: #2d2d2d;
-  --on-primary-2: #68686f;
-  --accent: #223360;
-  --on-accent: #dbd7cb;
-  --status-bar: #000000;
+  --tab: #223360;
+  --surface: #4e5c80;
+  --primary: #223360;
+  --on-primary: #f7faff;
+  --on-primary-2: #b0b0b9;
+  --accent: #dbd7cb;
+  --on-accent: #223360;
+  --status-bar: #ffffff;
+
+  --inverted-tab: #bdc2cf;
+  --inverted-surface: #e9ebef;
+  --inverted-primary: #bdc2cf;
+  --inverted-on-primary: #2d2d2d;
+  --inverted-on-primary-2: #68686f;
+  --inverted-accent: #223360;
+  --inverted-on-accent: #dbd7cb;
+  --inverted-status-bar: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  --tab: #223360;
+  --surface: #4e5c80;
+  --primary: #223360;
+  --on-primary: #f7faff;
+  --on-primary-2: #b0b0b9;
+  --accent: #dbd7cb;
+  --on-accent: #223360;
+  --status-bar: #ffffff;
+
+  --inverted-tab: #bdc2cf;
+  --inverted-surface: #e9ebef;
+  --inverted-primary: #bdc2cf;
+  --inverted-on-primary: #2d2d2d;
+  --inverted-on-primary-2: #68686f;
+  --inverted-accent: #223360;
+  --inverted-on-accent: #dbd7cb;
+  --inverted-status-bar: #000000;
+}
+
+body {
+  background-color: var(--surface);
+  color: var(--on-primary);
 }
diff --git a/src/index.html b/src/index.html
@@ -8,8 +8,21 @@
     <script type="module" src="/build/didroom-components.esm.js"></script>
     <script nomodule src="/build/didroom-components.js"></script>
     <link rel="stylesheet" href="/build/didroom-components.css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <script>
+      function toggleDarkMode() {
+        document.body.classList.toggle('dark');
+      }
+    </script>
   </head>
   <body>
+    <label class="relative inline-flex items-center cursor-pointer">
+      <input type="checkbox" value="" class="sr-only peer" onchange="toggleDarkMode()">
+      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+      <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Dark mode</span>
+    </label>
+    <h1>Test page</h1>
     <didroom-avatar name="Fortis Fortuy"></didroom-avatar>
   </body>
 </html>
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,6 +13,14 @@ export default {
         'accent': 'var(--accent)',
         'on-accent': 'var(--on-accent)',
         'status-bar': 'var(--status-bar)',
+        'inverted-tab': 'var(--inverted-tab)',
+        'inverted-surface': 'var(--inverted-surface)',
+        'inverted-primary': 'var(--inverted-primary)',
+        'inverted-on-primary': 'var(--inverted-on-primary)',
+        'inverted-on-primary-2': 'var(--inverted-on-primary-2)',
+        'inverted-accent': 'var(--inverted-accent)',
+        'inverted-on-accent': 'var(--inverted-on-accent)',
+        'inverted-status-bar': 'var(--inverted-status-bar)',
       },
     },
   },