@tcn/ui 0.0.4 → 0.2.0

package/src/themes/themes/ergo/__stories__/material.stories.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+import { VStack } from '../../../../stacks/v_stack.js';
+import { clsx } from 'clsx';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { Divider, Footer, Header, VBody } from '../../../../layouts/index.js';
+import { VPanel } from '../../../../surfaces/index.js';
+import { Button } from '../../../../actions/button/button/button.js';
+import { Spacer } from '../../../../stacks/spacer.js';
+import { SlimButton } from '../../../../actions/button/slim_button/slim_button.js';
+import { SB_TonePicker } from './components/tone_picker/sb_tone_picker.js';
+import { formatHSLString, getContrastText, parseHSL } from './utils.js';
+import { SB_MaterialPicker } from './components/material_picker/sb_material_picker.js';
+import { Title } from '../../../../typography/index.js';
+import { theme } from '../../../theme_variables.js';
+
+// Styles
+import styles from './sb_materials.module.css';
+
+export default {
+  title: 'Themes/Material',
+  tags: ['autodocs'],
+  argTypes: {
+    materialColor: {
+      control: { type: 'color', presetColors: [], disableAlpha: false },
+      label: 'Custom Material Color',
+      format: 'hsla',
+    },
+    accentColor: {
+      control: { type: 'color', presetColors: [], disableAlpha: false },
+      label: 'Custom Accent Color',
+      format: 'hsla',
+    },
+  },
+  args: {
+    materialColor: 'hsl(122, 100%, 20%)',
+    accentColor: 'hsl(122, 100%, 55%)',
+  },
+};
+
+function useCustomSurface(materialColor?: string, accentColor?: string) {
+  const mat = materialColor || 'hsl(122, 100%, 20%)';
+  const acc = accentColor || 'hsl(122, 100%, 55%)';
+
+  const material = parseHSL(mat);
+  const accent = parseHSL(acc);
+  const onMaterial = getContrastText(material);
+  const onAction = getContrastText(accent);
+
+  return {
+    material: formatHSLString(material),
+    accent: formatHSLString(accent),
+    onMaterial: formatHSLString(onMaterial),
+    onAction: formatHSLString(onAction),
+  };
+}
+
+export const DynamicSurface = (args: {
+  materialColor?: string;
+  accentColor?: string;
+}) => {
+  const [surface, setSurface] = useState('light-primary');
+
+  const handleSurfaceClick = (surface: string) => () => {
+    setSurface(surface);
+  };
+
+  const custom = useCustomSurface(args.materialColor, args.accentColor);
+
+  return (
+    <VStack
+      className={styles['storybook-palette']}
+      height="100%"
+      gap={theme.gap.md}
+      padding={theme.padding.md}
+      growWeight={1}
+      style={
+        {
+          '--custom-action': custom.accent,
+          '--custom-on-action': custom.onAction,
+          '--custom-material': custom.material,
+          '--custom-on-material': custom.onMaterial,
+        } as React.CSSProperties
+      }
+    >
+      <Header>
+        <Title>Ergo Theme: Materials and Surfaces</Title>
+      </Header>
+      <SB_MaterialPicker handleSurfaceClick={handleSurfaceClick} />
+      <VPanel
+        // TODO: Find a better way to have typography inherit the on material color
+        style={{
+          color: 'inherit',
+        }}
+        minHeight="200px"
+        maxHeight="700px"
+        height="100%"
+        className={clsx(styles[`${surface}`], styles['surface'])}
+      >
+        <Header>
+          Enabled Utilities
+          <Spacer />
+          <SlimButton hierarchy="tertiary">
+            <PlusIcon />
+          </SlimButton>
+          <SlimButton hierarchy="secondary">
+            <PlusIcon />
+          </SlimButton>
+          <Divider vertical />
+          <SlimButton hierarchy="primary">
+            <PlusIcon />
+          </SlimButton>
+        </Header>
+        <Header>
+          Disabled Utilities
+          <Spacer />
+          <SlimButton hierarchy="tertiary" disabled>
+            <PlusIcon />
+          </SlimButton>
+          <SlimButton hierarchy="secondary" disabled>
+            <PlusIcon />
+          </SlimButton>
+          <Divider vertical />
+          <SlimButton hierarchy="primary" disabled>
+            <PlusIcon />
+          </SlimButton>
+        </Header>
+        <VBody>
+          <SB_TonePicker />
+        </VBody>
+        <Footer>
+          Disabled Buttons
+          <Spacer />
+          <Button hierarchy="tertiary" disabled>
+            Tertiary
+          </Button>
+          <Button hierarchy="secondary" disabled>
+            Secondary
+          </Button>
+          <Button hierarchy="primary" disabled>
+            Primary
+          </Button>
+        </Footer>
+        <Footer>
+          Enabled Buttons
+          <Spacer />
+          <Button hierarchy="tertiary">Tertiary</Button>
+          <Button hierarchy="secondary">Secondary</Button>
+          <Button hierarchy="primary">Primary</Button>
+        </Footer>
+      </VPanel>
+      <Header></Header>
+    </VStack>
+  );
+};

package/src/themes/themes/ergo/__stories__/sb_materials.module.css

@@ -0,0 +1,110 @@
+.storybook-palette {
+  --background: #f1f1f1;
+  --primary: 23, 65%, 49%;
+  --navy: 213, 35.6%, 34.7%;
+  --white: 0, 0%, 100%;
+  --tan: 33, 22%, 84%;
+  --secondary: 197, 34.2%, 55.3%;
+  --secondary-light: 208 65.2% 95.5%;
+  --slate: 217, 32.6%, 17.5%;
+
+  --positive: 141, 71%, 48%; /* Green */
+  --notice: 202, 76%, 50%; /* Blue */
+  --neutral: 0, 0%, 100%; /* White */
+  --warning: 48, 100%, 50%; /* Yellow */
+  --danger: 0, 100%, 50%; /* Red */
+
+  background: var(--background);
+
+  /* This behavior can be moved to ergo theme once dialed and the global will be dropped */
+  :global(.tcn-card) {
+    :global(.tcn-header) {
+      background: hsl(var(--material));
+      color: hsl(var(--on-material));
+    }
+  }
+
+  :global(.tcn-card[data-tone="positive"]) {
+    --material: var(--positive);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--positive);
+  }
+
+  :global(.tcn-card[data-tone="notice"]) {
+    --material: var(--notice);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--notice);
+  }
+
+  /* :global(.tcn-card[data-tone="neutral"]) {} */
+
+  :global(.tcn-card[data-tone="warning"]) {
+    --material: var(--warning);
+    --on-material: var(--navy);
+    --action: var(--navy);
+    --on-action: var(--white);
+  }
+
+  :global(.tcn-card[data-tone="danger"]) {
+    --material: var(--danger);
+    --on-material: var(--white);
+    --action: var(--white);
+    --on-action: var(--danger);
+  }
+}
+
+.light-primary {
+  --action: var(--primary);
+  --on-action: var(--white);
+  --material: var(--white);
+  --on-material: var(--navy);
+}
+
+.light-secondary {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--tan);
+  --on-material: var(--navy);
+}
+
+.dark-primary {
+  --action: var(--secondary);
+  --on-action: var(--white);
+  --material: var(--slate);
+  --on-material: var(--white);
+}
+
+.dark-secondary {
+  --action: var(--tan);
+  --on-action: var(--navy);
+  --material: var(--navy);
+  --on-material: var(--white);
+}
+
+.light-tertiary {
+  --action: var(--navy);
+  --on-action: var(--white);
+  --material: var(--secondary-light);
+  --on-material: var(--navy);
+}
+
+.surface-custom {
+  --action: var(--custom-action);
+  --on-action: var(--custom-on-action);
+  --material: var(--custom-material);
+  --on-material: var(--custom-on-material);
+}
+
+.surface-custom-inverted {
+  --action: var(--custom-material);
+  --on-action: var(--custom-on-material);
+  --material: var(--navy);
+  --on-material: var(--white);
+}
+
+.surface {
+  background: hsl(var(--material));
+  color: hsl(var(--on-material));
+}

package/src/themes/themes/ergo/__stories__/utils.ts

@@ -0,0 +1,92 @@
+interface HSL {
+  h: string;
+  s: string;
+  l: string;
+  a?: string;
+}
+
+export function parseHSL(color: string): HSL {
+  if (!color) return { h: '46', s: '46%', l: '89%', a: '100%' };
+
+  // Handle hsl() format: "hsl(46, 46%, 89%)"
+  if (color.startsWith('hsl(')) {
+    const match = color.match(
+      /hsl\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)%?\)/
+    );
+    if (match) {
+      return {
+        h: match[1],
+        s: match[2].includes('%') ? match[2] : `${match[2]}%`,
+        l: match[3].includes('%') ? match[3] : `${match[3]}%`,
+      };
+    }
+  }
+
+  if (color.startsWith('hsla(')) {
+    const match = color.match(
+      /hsla\((\d+(?:\.\d+)?),\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)%?,\s*(\d+(?:\.\d+)?)\)/
+    );
+    if (match) {
+      return {
+        h: match[1],
+        s: match[2].includes('%') ? match[2] : `${match[2]}%`,
+        l: match[3].includes('%') ? match[3] : `${match[3]}%`,
+        a: match[4].includes('%') ? match[4] : `${match[4]}%`,
+      };
+    }
+  }
+
+  // Handle hex format (Storybook color picker often returns hex)
+  if (color.startsWith('#')) {
+    const r = parseInt(color.slice(1, 3), 16) / 255;
+    const g = parseInt(color.slice(3, 5), 16) / 255;
+    const b = parseInt(color.slice(5, 7), 16) / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0;
+    let s = 0;
+    const l = (max + min) / 2;
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+          break;
+        case g:
+          h = ((b - r) / d + 2) / 6;
+          break;
+        case b:
+          h = ((r - g) / d + 4) / 6;
+          break;
+      }
+    }
+    return {
+      h: Math.round(h * 360).toString(),
+      s: `${Math.round(s * 100)}%`,
+      l: `${Math.round(l * 100)}%`,
+      a: '100%',
+    };
+  }
+
+  // Default fallback
+  return { h: '46', s: '46%', l: '89%', a: '100%' };
+}
+
+export function getContrastText(material: HSL) {
+  const l = parseFloat(material.l);
+
+  // If background is light, return off-black for contrast.
+  // If background is dark, return off-white for contrast.
+  if (l > 50) {
+    // dark text for light background: "off-black"
+    return { h: '0', s: '0%', l: '12%' }; // near black, but not pure black
+  } else {
+    // light text for dark background: "off-white"
+    return { h: '0', s: '0%', l: '95%' }; // near white, but not pure white
+  }
+}
+
+export function formatHSLString(hsl: HSL) {
+  return `${hsl.h}, ${hsl.s}, ${hsl.l}`;
+}