@tcn/ui 0.3.2 → 0.4.0

package/src/surfaces/window/window.stories.tsx

@@ -3,7 +3,7 @@ import { Window } from './window.js';
 import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Spacer } from '../../stacks/spacer.js';
-import { Button, SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { DragHandle } from '../../utils/dnd/handle.js';
@@ -24,29 +24,35 @@ export const WindowStory = () => {
 
   return (
     <ZStack height="100%" width="100%" minHeight="600px">
-      <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>
+      <Button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</Button>
       <Window isOpen={isOpen} width="400px" height="500px">
         <DragHandle>
           <Header>
             <Title>Window Title</Title>
             <Spacer />
-            <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+            <Button utility hierarchy="tertiary" size="md" onClick={toggle}>
               <CrossIcon />
-            </SlimButton>
+            </Button>
+            <Button utility hierarchy="secondary" size="md" onClick={toggle}>
+              <CrossIcon />
+            </Button>
+            <Button utility hierarchy="primary" size="md" onClick={toggle}>
+              <CrossIcon />
+            </Button>
           </Header>
         </DragHandle>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton size="md" hierarchy="tertiary">
+          </Button>
+          <Button utility size="md" hierarchy="primary">
             <BugIcon />
-          </SlimButton>
+          </Button>
         </UtilityBar>
         <VBody>
           <BodyText>This is a window</BodyText>

package/src/themes/stylesheets/reset.css

@@ -80,6 +80,7 @@
   time,
   mark,
   audio,
+  button,
   video {
     margin: 0;
     padding: 0;

package/src/themes/theme.tsx

@@ -1,13 +1,18 @@
 import React, { useLayoutEffect } from 'react';
-import layers from '../css/layers.css?raw';
+import { Box, type BoxProps } from '../stacks/index.js';
+import { clsx } from 'clsx';
+
+// Styles
 import './stylesheets/reset.css';
+import styles from './theme_provider.module.css';
+import layers from '../css/layers.css?raw';
 
-export interface ThemeProps {
+export interface ThemeProps extends BoxProps {
   styleSheets: CSSStyleSheet[];
   children: React.ReactNode;
 }
 
-export function Theme({ styleSheets, children }: ThemeProps) {
+export function Theme({ styleSheets, children, ...boxProps }: ThemeProps) {
   useLayoutEffect(() => {
     document.adoptedStyleSheets = styleSheets;
   }, [styleSheets]);
@@ -27,5 +32,9 @@ export function Theme({ styleSheets, children }: ThemeProps) {
     };
   }, []);
 
-  return children;
+  return (
+    <Box className={clsx('tcn-theme-root', styles['tcn-theme-provider'])} {...boxProps}>
+      {children}
+    </Box>
+  );
 }

package/src/themes/theme_provider.module.css

@@ -0,0 +1,6 @@
+@layer tcn-system {
+  .tcn-theme-provider {
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/themes/themes/ergo/__stories__/components/material_picker/sb_inverted_materials.module.css

@@ -27,8 +27,8 @@
 }
 
 .surface-custom-inverted {
-  --action: var(--custom-material);
-  --on-action: var(--custom-on-material);
-  --material: var(--navy);
-  --on-material: var(--white);
+  --action: var(--custom-material-value);
+  --on-action: var(--custom-on-material-value);
+  --material: var(--custom-material-value);
+  --on-material: var(--custom-on-material-value);
 }

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.module.css

@@ -0,0 +1,3 @@
+.heading {
+  background-color: color-mix(in srgb, var(--material), white 20%);
+}

package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_picker.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { BodyText } from '../../../../../../typography/body_text/body_text.js';
-import { Item, List, SectionHeader } from '../../../../../../layouts/index.js';
+import { Item, List } from '../../../../../../layouts/index.js';
 import { HStack } from '../../../../../../stacks/h_stack.js';
 import type { SB_ToneListItem } from './types.js';
 import { SB_ToneCard } from './sb_tone_card.js';
 import { theme } from '../../../../../theme_variables.js';
 import { VStack } from '../../../../../../stacks/v_stack.js';
+import { Heading } from '../../../../../../layouts/section/heading.js';
+
+import styles from './sb_tone_picker.module.css';
 
 const items: SB_ToneListItem[] = [
   {
@@ -60,7 +63,7 @@ export const SB_TonePicker = () => {
         maxWidth="300px"
         minWidth="200px"
       >
-        <SectionHeader>Tone Picker (WIP)</SectionHeader>
+        <Heading className={styles.heading}>Tone Picker (WIP)</Heading>
         <List padding={theme.padding.md} growWeight={1} height="100%" overflowY="auto">
           {items.map(item => (
             <Item

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

@@ -23,12 +23,12 @@ export default {
     materialColor: {
       control: { type: 'color', presetColors: [], disableAlpha: false },
       label: 'Custom Material Color',
-      format: 'hsla',
+      format: 'rgb',
     },
     accentColor: {
       control: { type: 'color', presetColors: [], disableAlpha: false },
       label: 'Custom Accent Color',
-      format: 'hsla',
+      format: 'rgb',
     },
   },
   args: {

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

@@ -1,32 +1,37 @@
 .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(--ergo-white);
+  --primary: var(--ergo-primary);
+  --navy: var(--ergo-accent-blue);
+  --white: var(--ergo-white);
+  --tan: var(--ergo-tertiary);
+  --secondary: var(--ergo-secondary);
+  --secondary-light: var(--ergo-secondary-light);
+  --slate: #1e293b;
+
+  --positive: var(--ergo-status-green);
+  --notice: var(--ergo-status-blue);
+  --neutral: var(--ergo-primary);
+  --warning: var(--ergo-status-yellow);
+  --danger: var(--ergo-status-red);
+
+  --custom-action-value: hsl(var(--custom-action));
+  --custom-on-action-value: hsl(var(--custom-on-action));
+  --custom-material-value: hsl(var(--custom-material));
+  --custom-on-material-value: hsl(var(--custom-on-material));
 
   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));
+      background: var(--material);
+      color: var(--on-material);
     }
   }
 
   :global(.tcn-surface) {
-    background: hsl(var(--material));
-    color: hsl(var(--on-material));
+    background: var(--material);
+    color: var(--on-material);
   }
 
   :global(.tcn-card[data-tone="positive"]) {
@@ -104,15 +109,15 @@
 }
 
 .surface-custom {
-  --action: var(--custom-action);
-  --on-action: var(--custom-on-action);
-  --material: var(--custom-material);
-  --on-material: var(--custom-on-material);
+  --action: var(--custom-action-value);
+  --on-action: var(--custom-on-action-value);
+  --material: var(--custom-material-value);
+  --on-material: var(--custom-on-material-value);
 }
 
 .surface-custom-inverted {
-  --action: var(--custom-material);
-  --on-action: var(--custom-on-material);
-  --material: var(--navy);
-  --on-material: var(--white);
+  --action: var(--custom-material-value);
+  --on-action: var(--custom-on-material-value);
+  --material: var(--custom-action-value);
+  --on-material: var(--custom-on-action-value);
 }