@tcn/ui 0.0.3 → 0.1.1

package/src/themes/themes/ergo/ergo_theme.css

@@ -146,7 +146,8 @@ legend {
 
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
-  --status-color-warning: #ff0000;
+  --status-color-warning: #ffff00;
+  --status-color-positive: #00ff00;
   --status-color-error: #ff0000;
 
   --async-color-initial: #c0c0c0;
@@ -184,42 +185,304 @@ legend {
   --foreground-color-tertiary: #222222;
   --foreground-color-quaternary: #222222;
 
-  --accent-color: #008cff;
+  --material-disabled: #d3d3d3;
+  --material-secondary-dark: 197 29.1% 40.4%;
+  --material-tan: 33, 22%, 84%;
 
   --shape-radius-small: 2px;
   --shape-radius-medium: 4px;
   --shape-radius-large: 8px;
+
+  --accent-color: #cd6b2c;
+
+  --action: 23, 65%, 49%;
+  --on-action: 0, 0%, 100%;
+  --material: 0, 0%, 100%;
+  --on-material: 213, 35.6%, 34.7%;
 }
 
 * {
   position: relative;
   box-sizing: border-box;
 }
+/* ===== Actions ===== */
+
+.tcn-interactive {
+  cursor: pointer;
+  user-select: none;
+  transition:
+    transform 0.1s,
+    background 0.1s,
+    color 0.1s;
+
+  --act: hsl(var(--action));
+  --on-act: hsl(var(--on-action));
+  /* Could use hsl here if we made three color variables for each of the hsl values */
+  --act-down: color-mix(in srgb, var(--act), black 8%);
+  --act-raised: color-mix(in srgb, var(--act), white 8%);
+  --act-faint: hsla(var(--action), 0.2);
+  --on-mat: hsl(var(--on-material));
+  --on-mat-faint: hsla(var(--on-material), 0.2);
+  --mat: hsl(var(--material));
+  --mat-down: color-mix(in srgb, var(--mat), black 8%);
+  --mat-raised: color-mix(in srgb, var(--mat), white 8%);
+}
+
+.tcn-interactive[data-is-disabled="true"] {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.tcn-interactive[data-hierarchy="primary"] {
+  background: var(--act);
+  color: var(--on-act);
+  border: 1px solid var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:focus-visible {
+  outline: 2px dashed var(--act);
+}
+
+.tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
+  background: var(--material-disabled);
+  color: white;
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:hover {
+  background: var(--act-raised);
+}
+
+.tcn-interactive[data-hierarchy="primary"]:active {
+  background: var(--act-down);
+}
+
+.tcn-interactive[data-hierarchy="secondary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+  border: 1px solid var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:hover {
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="secondary"]:active {
+  background: var(--mat-down);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"] {
+  background: transparent;
+  color: var(--on-mat);
+  border: 1px solid transparent;
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
+  outline: 2px dashed var(--on-mat);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
+  color: var(--material-disabled);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:hover {
+  text-decoration: underline;
+  text-decoration-color: var(--on-mat);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  color: var(--on-mat);
+  background: var(--on-mat-faint);
+}
+
+.tcn-interactive[data-hierarchy="tertiary"]:active {
+  background: var(--mat-down);
+}
+
+/* Button */
+.tcn-button {
+  border-radius: 4px;
+}
+
+.tcn-button[data-size="sm"] {
+  padding: 0px 8px;
+  min-height: 22px;
+}
+
+.tcn-button[data-size="md"] {
+  padding: 0px 12px;
+  min-height: 26px;
+}
+
+.tcn-button[data-size="lg"] {
+  padding: 0px 16px;
+  min-height: 32px;
+}
+
+.tcn-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+.tcn-button:active {
+  transform: translateY(1px);
+  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}
+
+.tcn-slim-button {
+  height: auto;
+  width: auto;
+  padding: 0;
+}
+
+.tcn-slim-button[data-size="sm"] {
+  min-height: 12px;
+  min-width: 12px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 10px;
+    min-width: 10px;
+  }
+}
+
+.tcn-slim-button[data-size="md"] {
+  min-height: 18px;
+  min-width: 18px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 14px;
+    min-width: 14px;
+  }
+}
+
+.tcn-slim-button[data-size="lg"] {
+  min-height: 24px;
+  min-width: 24px;
+  padding: 0;
+  .tcn-icon {
+    min-height: 20px;
+    min-width: 20px;
+  }
+}
+
+/* ===== Materials ===== */
+
+/* White on Gray */
+.material-status-disabled {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 0%, 49.8%;
+  --material: 0, 0%, 49.8%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Blue */
+.material-status-info {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Yellow */
+.material-status-warning {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 60, 100%, 50%;
+  --material: 60, 100%, 50%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Red  */
+.material-status-error {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* Navy on Light Grey */
+.material-async-initial {
+  --action: 213, 35.6%, 34.7%;
+  --on-action: 0, 0%, 75.3%;
+  --material: 0, 0%, 75.3%;
+  --on-material: 213, 35.6%, 34.7%;
+}
+
+/* White on Loading Blue */
+.material-async-pending {
+  --action: 0, 0%, 100%;
+  --on-action: 207, 100%, 50%;
+  --material: 207, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Vivid Green */
+.material-async-success {
+  --action: 0, 0%, 100%;
+  --on-action: 120, 100%, 50%;
+  --material: 120, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+/* White on Red */
+.material-async-failed {
+  --action: 0, 0%, 100%;
+  --on-action: 0, 100%, 50%;
+  --material: 0, 100%, 50%;
+  --on-material: 0, 0%, 100%;
+}
+
+.material {
+  background-color: hsl(var(--material));
+  color: hsl(var(--on-material));
+}
 
 /* ===== SURFACES ===== */
+.tcn-list {
+  gap: var(--gap-medium);
+  .tcn-item {
+    height: 24px;
+    padding: 0px var(--padding-medium);
+    border-radius: var(--shape-radius-medium);
+  }
+}
 
-/* PANEL */
-.tcn-panel {
+.tcn-veil {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: FIX Borders on modal header and footer -- when there are multiple header/footers */
+/* MODAL: */
+.tcn-modal {
   --v-inset: var(--padding-large);
   background-color: var(--background-color-primary);
   border-radius: var(--shape-radius-medium);
+  /* TODO: This should be a variable */
+  border: 1px solid rgba(170, 170, 170, 1);
+  overflow: hidden;
+
+  :where(.tcn-typography) {
+    color: inherit;
+  }
 
   :where(.tcn-header) {
+    --material: var(--material-secondary-dark);
+    --on-material: 0, 0%, 100%;
+    --action: var(--material-tan);
+    --on-action: 0, 0%, 100%;
+    background-color: hsl(var(--material));
+    color: hsl(var(--on-material));
     min-height: 40px;
-    border-bottom: 1px solid var(--foreground-color-primary);
     padding: 0 var(--v-inset);
     gap: var(--gap-medium);
 
-    :where(.tcn-title) {
-      font-weight: 700;
-    }
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
-
     :where(.tcn-divider) {
       padding: 4px 0;
       :where(.tcn-divider-line) {
@@ -254,3 +517,73 @@ legend {
     padding: 0 var(--v-inset);
   }
 }
+
+/* PANEL */
+.tcn-panel {
+  --v-inset: var(--padding-large);
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+
+  :where(.tcn-header) {
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+
+    :where(.tcn-title) {
+      font-weight: 700;
+    }
+
+    :where(.tcn-divider) {
+      padding: 4px 0;
+      :where(.tcn-divider-line) {
+        width: 1.5px;
+        min-height: 18px;
+        height: auto;
+      }
+    }
+  }
+
+  /* Border appears on body only when it follows header or utility-bar */
+  :where(.tcn-header) + :where(.tcn-body),
+  :where(.tcn-utility-bar) + :where(.tcn-body) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: 1px solid var(--foreground-color-primary);
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: 32px;
+    padding: 0 var(--v-inset);
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: 40px;
+    padding: 0 var(--v-inset);
+  }
+}
+
+/* Card */
+.tcn-card {
+  padding: 0;
+  gap: 0px;
+  border: 1px solid var(--foreground-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
+  :where(.tcn-header) {
+    /* TODO: Color header */
+    min-height: 32px;
+  }
+  :where(.tcn-body) {
+    padding: var(--padding-medium) var(--v-inset);
+  }
+}

package/src/tokens/badge/badge.stories.tsx

@@ -1,25 +1,25 @@
 import { ZStack } from '../../stacks/z_stack.js';
 import React from 'react';
-import { Badge } from './badge.js';
+import { Badge as BadgeComponent } from './badge.js';
 import { Button } from '../../actions/index.js';
 
 export default {
-  title: 'src/Badge',
-  component: Badge,
+  title: 'Tokens/Badge',
+  component: BadgeComponent,
   tags: ['autodocs'],
 };
 
-export function Default(props: any) {
+export function Badge(props: any) {
   return (
     <ZStack>
-      <Badge
+      <BadgeComponent
         value={10}
         // backgroundColor="var(--accent-color)"
         // textColor="white"
         {...props}
       >
         <Button>Hello</Button>
-      </Badge>
+      </BadgeComponent>
     </ZStack>
   );
 }

package/src/tokens/badge/badge.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Spacer } from '../../stacks/spacer.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { ZStack } from '../../stacks/z_stack.js';
@@ -33,7 +33,7 @@ export const Badge = React.forwardRef(
         vAlign="end"
         hAlign="end"
         zIndex={0}
-        className={classNames('badge', className)}
+        className={clsx('badge', className)}
         {...props}
       >
         <ZStack zIndex={0} inline width="auto" height="auto">
@@ -41,7 +41,7 @@ export const Badge = React.forwardRef(
         </ZStack>
         <VStack zIndex={1} height="100%" width="auto">
           <Bubble
-            className={classNames(styles['badge-bubble'], 'badge-bubble')}
+            className={clsx(styles['badge-bubble'], 'badge-bubble')}
             backgroundColor={backgroundColor}
             textColor={color}
             elevate

package/src/tokens/bubble/bubble.stories.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
-import { Bubble } from './bubble.js';
+import { Bubble as BubbleComponent } from './bubble.js';
 
-export const Base = (args: any) => {
-  return <Bubble {...args}>0</Bubble>;
+export default {
+  title: 'Tokens/Bubble',
+  component: BubbleComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A bubble component that can be used to display a badge.',
+      },
+    },
+  },
 };
 
+export function Bubble(args: any) {
+  return <BubbleComponent {...args}>0</BubbleComponent>;
+}
+
 export const Styled = () => {
   return (
     <div>This story needs to be updated.</div>
@@ -160,9 +173,3 @@ const _randomWords = [
   'Enduring',
   'Lasting',
 ];
-
-export default {
-  title: 'src/Bubble',
-  component: Bubble,
-  tags: ['autodocs'],
-};

package/src/tokens/bubble/bubble.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { HTMLAttributes } from 'react';
 import styles from './bubble.module.css';
 import { theme } from '../../themes/index.js';
@@ -35,7 +35,7 @@ export const Bubble = React.forwardRef(function Bubble(
   return (
     <HStack
       inline
-      className={classNames(styles.bubble, 'bubble', className)}
+      className={clsx(styles.bubble, 'bubble', className)}
       width="auto"
       height="auto"
       ref={ref}

package/src/tokens/chip/chip.stories.tsx

@@ -7,7 +7,7 @@ import { BodyText } from '../../typography/index.js';
 import { CrossIcon } from '@tcn/icons/cross_icon.js';
 
 export default {
-  title: 'src/Chip',
+  title: 'Tokens/Chip',
   component: Chip,
   tags: ['autodocs'],
 };

package/src/tokens/chip/chip.tsx

@@ -1,5 +1,5 @@
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './chip.module.css';
 import { theme } from '../../themes/index.js';
@@ -26,7 +26,7 @@ export const Chip = React.forwardRef(function Chip(
       width="auto"
       height="auto"
       vAlign="center"
-      className={classNames(styles.chip, 'chip', className)}
+      className={clsx(styles.chip, 'chip', className)}
       style={finalStyle}
       {...props}
     >

package/src/typography/body_text/body_text.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import styles from './body_text.module.css';
 
 export interface BodyTextOwnProps {
@@ -65,7 +65,7 @@ export function BodyText({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['body-text'], 'body-text', className)}
+      className={clsx(styles['body-text'], 'body-text', className)}
       style={style}
       data-size={size}
       data-word-break={breakWords}

package/src/typography/callout/callout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './callout.module.css';
@@ -64,7 +64,7 @@ export function Callout({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['callout'], 'callout', className)}
+      className={clsx(styles['callout'], 'callout', className)}
       style={style}
       data-size={size}
     >

package/src/typography/caption/caption.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './caption.module.css';
@@ -64,7 +64,7 @@ export function Caption({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['caption'], 'caption', className)}
+      className={clsx(styles['caption'], 'caption', className)}
       style={style}
       data-size={size}
     >

package/src/typography/footnote/footnote.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './footnote.module.css';
@@ -64,7 +64,7 @@ export function Footnote({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['footnote'], 'footnote', className)}
+      className={clsx(styles['footnote'], 'footnote', className)}
       style={style}
       data-size={size}
     >

package/src/typography/headline/headline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './headline.module.css';
@@ -74,7 +74,7 @@ export function Headline({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['headline'], 'headline', className)}
+      className={clsx(styles['headline'], 'headline', className)}
       style={style}
       data-size={size}
     >

package/src/typography/subheadline/subheadline.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import styles from './subheadline.module.css';
@@ -77,7 +77,7 @@ export function Subheadline({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['subheadline'], 'subheadline', className)}
+      className={clsx(styles['subheadline'], 'subheadline', className)}
       style={style}
       data-size={size}
     >

package/src/typography/title/title.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import type { Emphasis, Hierarchy, Size } from '../../utils/index.js';
 import styles from './title.module.css';
@@ -78,7 +78,7 @@ export function Title({
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
-      className={classnames(styles['title'], 'title', 'tcn-title', className)}
+      className={clsx(styles['title'], 'title', 'tcn-typography', 'tcn-title', className)}
       style={style}
       data-size={size}
     >

package/src/typography/typography-showcase.stories.tsx

@@ -11,13 +11,13 @@ import { Subheadline } from './subheadline/subheadline.js';
 import { Title } from './title/title.js';
 
 export default {
-  title: 'Showcase',
+  title: 'Typography/Showcase',
   parameters: {
     layout: 'fullscreen',
   },
 };
 
-export function Typography() {
+export function Showcase() {
   return (
     <VStack gap="30px" maxWidth="800px">
       <HStack height="auto">