@aleph-alpha/ui-library 1.11.0 → 1.13.0

package/src/theme/Overlay.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Overlay',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Surface overlay colors for modal backdrops and scrim layers.
+ * Modal-overlay dims content behind dialogs, transparent is for invisible overlay areas.
+ */
+export const Surface: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">surface</h2>
+          <p class="text-sm text-content-on-surface-muted">Overlay colors for modals and backdrops. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-surface-modal-overlay border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">modal-overlay</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-modal-overlay', this)">bg-overlay-surface-modal-overlay</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-surface-transparent border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">transparent</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-surface-transparent', this)">bg-overlay-surface-transparent</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Hover overlay colors applied to interactive elements on mouse hover.
+ * These create visual feedback without changing the element's background color.
+ */
+export const Hover: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">hover</h2>
+          <p class="text-sm text-content-on-surface-muted">Overlay colors for hover states on interactive elements. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-primary-button-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary-button-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-primary-button-hover', this)">bg-overlay-hover-primary-button-hover</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-secondary-button-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary-button-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-secondary-button-hover', this)">bg-overlay-hover-secondary-button-hover</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-overlay-hover-default-hover border border-border-surface-default"></div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default-hover</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('bg-overlay-hover-default-hover', this)">bg-overlay-hover-default-hover</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};

package/src/theme/Theme.stories.ts

@@ -0,0 +1,309 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent, h } from 'vue';
+
+const ThemePlaceholder = defineComponent({
+  name: 'ThemePlaceholder',
+  render() {
+    return h('div');
+  },
+});
+
+const meta: Meta<typeof ThemePlaceholder> = {
+  title: 'Theme/Content',
+  component: ThemePlaceholder,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ThemePlaceholder>;
+
+const copyScript = `
+  function copyToClipboard(text, el) {
+    navigator.clipboard.writeText(text).then(() => {
+      el.classList.add('copied');
+      setTimeout(() => el.classList.remove('copied'), 1500);
+    });
+  }
+`;
+
+/**
+ * Text colors for content displayed on surface backgrounds.
+ * Use these for headings, body text, links, and UI labels on standard backgrounds.
+ * Includes primary, secondary, tertiary, muted, link, and inverse variants.
+ */
+export const OnSurface: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">on-surface</h2>
+          <p class="text-sm text-content-on-surface-muted">Text colors for content on surface backgrounds. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-primary text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-primary', this)">text-content-on-surface-primary</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-secondary text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-secondary', this)">text-content-on-surface-secondary</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-tertiary text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">tertiary</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-tertiary', this)">text-content-on-surface-tertiary</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-muted text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">muted</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-muted', this)">text-content-on-surface-muted</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-link text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">link</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-link', this)">text-content-on-surface-link</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-inverse border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-surface-inverse text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">inverse</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-surface-inverse', this)">text-content-on-surface-inverse</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Text colors for button labels and icons.
+ * Use these to ensure proper contrast on primary, secondary, no-fill, and danger button backgrounds.
+ */
+export const OnButton: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">on-button</h2>
+          <p class="text-sm text-content-on-surface-muted">Text colors for content on button backgrounds. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-primary-button border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-button-primary-button text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">primary-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-button-primary-button', this)">text-content-on-button-primary-button</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-secondary-button border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-button-secondary-button text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">secondary-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-button-secondary-button', this)">text-content-on-button-secondary-button</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-button-no-fill-button text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">no-fill-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-button-no-fill-button', this)">text-content-on-button-no-fill-button</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-button-danger-button border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-button-danger-button text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">danger-button</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-button-danger-button', this)">text-content-on-button-danger-button</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Text colors for content on accent-colored backgrounds.
+ * Use these for badges, chips, highlights, or selected states with accent backgrounds.
+ */
+export const OnAccent: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">on-accent</h2>
+          <p class="text-sm text-content-on-surface-muted">Text colors for content on accent backgrounds. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-accent-default border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-accent-default text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">default</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-accent-default', this)">text-content-on-accent-default</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-accent-soft border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-accent-soft text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">soft</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-accent-soft', this)">text-content-on-accent-soft</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Semantic text colors for status indicators like success, warning, error, info, and neutral.
+ * Use these for validation messages, alerts, notifications, and status badges.
+ */
+export const OnStatus: Story = {
+  render: () => ({
+    template: `
+      <div class="p-8 bg-white dark:bg-background min-h-screen">
+        <style>
+          .copy-btn { cursor: pointer; transition: all 0.15s; }
+          .copy-btn:hover { background: rgba(0,0,0,0.05); }
+          .copy-btn.copied { background: #22c55e22; }
+          .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+        </style>
+        <script>${copyScript}</script>
+        
+        <div class="mb-6">
+          <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">on-status</h2>
+          <p class="text-sm text-content-on-surface-muted">Text colors for status indicators. Click class name to copy.</p>
+        </div>
+        
+        <div class="flex flex-wrap gap-6">
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-status-success text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">success</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-status-success', this)">text-content-on-status-success</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-status-warning text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">warning</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-status-warning', this)">text-content-on-status-warning</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-status-error text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">error</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-status-error', this)">text-content-on-status-error</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-status-info text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">info</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-status-info', this)">text-content-on-status-info</code>
+            </div>
+          </div>
+          
+          <div class="flex flex-col items-center gap-1.5">
+            <div class="w-16 h-16 rounded-md bg-background-surface-secondary border border-border-surface-default flex items-center justify-center">
+              <span class="text-content-on-status-neutral text-2xl font-bold">Aa</span>
+            </div>
+            <div class="text-center">
+              <span class="text-xs text-content-on-surface-primary block font-medium">neutral</span>
+              <code class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded" onclick="copyToClipboard('text-content-on-status-neutral', this)">text-content-on-status-neutral</code>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+};