@tcn/ui 0.3.3 → 0.4.0

package/src/overlay/carrot/base_carrot.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import { Box, type BoxProps } from '../../stacks/box/box.js';
+
+export interface BaseCarrotOwnProps {
+  direction: 'top' | 'bottom' | 'start' | 'end';
+}
+
+export interface BaseCarrotProps extends BaseCarrotOwnProps, BoxProps {}
+
+export const BaseCarrot = ({
+  direction,
+  className,
+  as = 'span',
+  ...rest
+}: BaseCarrotProps) => {
+  return (
+    <Box
+      as="span"
+      data-direction={direction}
+      className={clsx('tcn-base-carrot', className)}
+      {...rest}
+    />
+  );
+};

package/src/overlay/carrot/carrot.stories.tsx

@@ -0,0 +1,54 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Box } from '../../stacks/index.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { BaseCarrot } from './base_carrot.js';
+
+export default {
+  title: 'Overlays/Carrot',
+  component: BaseCarrot,
+  tags: ['autodocs'],
+};
+
+interface CarrotStoryProps {
+  direction: 'top' | 'bottom' | 'start' | 'end';
+}
+
+const CarrotStory = ({ direction }: CarrotStoryProps) => {
+  return (
+    <VStack
+      minWidth="100px"
+      minHeight="100px"
+      height="100%"
+      style={{ backgroundColor: 'gray' }}
+    >
+      <Box width="100px" height="100px" padding="24px" style={{ backgroundColor: 'red' }}>
+        <BaseCarrot direction={direction} />
+      </Box>
+    </VStack>
+  );
+};
+
+export const Top: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'top',
+  },
+};
+export const Bottom: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'bottom',
+  },
+};
+export const Start: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'start',
+  },
+};
+export const End: StoryObj<CarrotStoryProps> = {
+  render: args => <CarrotStory {...args} />,
+  args: {
+    direction: 'end',
+  },
+};

package/src/surfaces/card/card.stories.tsx

@@ -5,7 +5,7 @@ import { VBody } from '../../layouts/body/v_body.js';
 import { UtilityBar } from '../../layouts/utility_bar/utility_bar.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { Title } from '../../typography/title/title.js';
-import { SlimButton } from '../../actions/index.js';
+import { Button } from '../../actions/index.js';
 import { Card } from './card.js';
 
 // Styles
@@ -24,28 +24,28 @@ export const Default = () => {
         <Header>
           <Title>Card Header</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <GridOneIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <GridOneIcon />
-          </SlimButton>
+          </Button>
+          <Button utility hierarchy="primary">
+            <GridOneIcon />
+          </Button>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
-            <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton size="md" hierarchy="tertiary">
+          </Button>
+          <Button utility hierarchy="secondary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility size="md" hierarchy="primary">
             <BugIcon />
-          </SlimButton>
+          </Button>
         </UtilityBar>
 
         <VBody>

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Button, SlimButton } from '../../../actions/index.js';
+import { Button } from '../../../actions/index.js';
 import { Footer, Header, UtilityBar, VBody } from '../../../layouts/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
@@ -31,19 +31,28 @@ export const ModalStory = () => {
         <Header>
           <Title>Modal Title</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary" size="md" onClick={toggle}>
+          <Button utility hierarchy="tertiary" size="md" onClick={toggle}>
             <CrossIcon />
-          </SlimButton>
+          </Button>
+          <Button hierarchy="secondary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </Button>
+          <Button utility hierarchy="primary" size="md" onClick={toggle}>
+            <CrossIcon />
+          </Button>
         </Header>
         <UtilityBar>
           <Title>Utility Bar</Title>
           <Spacer />
-          <SlimButton hierarchy="tertiary">
+          <Button utility hierarchy="tertiary">
+            <BugIcon />
+          </Button>
+          <Button hierarchy="secondary">
             <BugIcon />
-          </SlimButton>
-          <SlimButton hierarchy="tertiary">
+          </Button>
+          <Button utility size="md" hierarchy="primary">
             <BugIcon />
-          </SlimButton>
+          </Button>
         </UtilityBar>
         <VBody>
           <BodyText>This is a modal</BodyText>

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/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);
 }