@tcn/ui 0.14.0 → 0.15.0

package/src/themes/themes/ergo/tokens/system_tokens.css

@@ -0,0 +1,68 @@
+@layer tcn-theme {
+  :root {
+    /* ========== Blackcat System Tokens ========== */
+    --scalar: 1;
+    --accent-color: var(--ergo-primary);
+
+    /* Typography */
+    --font-color: var(--ergo-text-color-primary);
+    --font-family: "Lato", sans-serif;
+    --font-size: var(--ergo-text-size-default);
+
+    /* Spacing */
+    --gap-small: var(--ergo-spacing-sm);
+    --gap-medium: var(--ergo-spacing-md);
+    --gap-large: var(--ergo-spacing-lg);
+
+    --padding-small: var(--ergo-spacing-sm);
+    --padding-medium: var(--ergo-spacing-md);
+    --padding-large: var(--ergo-spacing-lg);
+
+    /* Status Colors */
+    --status-color-disabled: var(--ergo-grey-light);
+    --status-color-info: var(--ergo-status-blue);
+    --status-color-warning: var(--ergo-status-yellow);
+    --status-color-positive: var(--ergo-status-green);
+    --status-color-error: var(--ergo-status-red);
+
+    --async-color-initial: var(--ergo-grey);
+    --async-color-pending: var(--ergo-status-blue);
+    --async-color-success: var(--ergo-status-green);
+    --async-color-failed: var(--ergo-status-red);
+
+    /* Action Severity */
+    --action-severity-dangerous: var(--ergo-status-red);
+    --action-severity-cautious: var(--ergo-status-yellow);
+    --action-severity-neutral: var(--ergo-primary);
+    --action-severity-suggested: var(--ergo-status-blue);
+    --action-severity-encouraged: var(--ergo-status-green);
+
+    /* Palette */
+    --primary-color-faint: var(--ergo-grey-light);
+    --primary-color: var(--ergo-primary);
+    --primary-color-strong: var(--ergo-primary-dark);
+
+    --secondary-color-faint: var(--ergo-secondary-light);
+    --secondary-color: var(--ergo-secondary);
+    --secondary-color-strong: var(--ergo-secondary-dark);
+
+    --tertiary-color-faint: var(--ergo-tertiary-light);
+    --tertiary-color: var(--ergo-tertiary);
+    --tertiary-color-strong: var(--ergo-tertiary-dark);
+
+    --quaternary-color-faint: var(--ergo-accent-blue-light);
+    --quaternary-color: var(--ergo-accent-blue);
+    --quaternary-color-strong: var(--ergo-accent-blue-dark);
+
+    --background-color-primary: var(--ergo-material-bg-primary);
+    --background-color-secondary: var(--ergo-material-bg-secondary);
+    --background-color-tertiary: var(--ergo-material-bg-tertiary);
+    --background-color-quaternary: var(--ergo-material-bg-quaternary);
+
+    /* Not sure what other text colors are needed */
+    --foreground-color-primary: var(--ergo-text-color-primary);
+    --foreground-color-secondary: var(--ergo-text-color-primary);
+    --foreground-color-tertiary: var(--ergo-text-color-primary);
+    --foreground-color-quaternary: var(--ergo-text-color-primary);
+  }
+}

package/src/themes/themes/ergo/tokens/theme_tokens.css

@@ -0,0 +1,99 @@
+@layer tcn-theme {
+  :root {
+    /* ========== Ergo  Palette ========== */
+    --ergo-white: #ffffff;
+
+    --ergo-primary: #ce6b2b;
+    --ergo-primary-light: #fff7f0;
+    --ergo-primary-dark: #b86128;
+
+    --ergo-secondary: #669eb4;
+    --ergo-secondary-light: #ecf4fb;
+    --ergo-secondary-dark: #497485;
+
+    --ergo-tertiary: #dfd7cd;
+    --ergo-tertiary-light: #f9f4ed;
+    --ergo-tertiary-dark: #7e6c5d;
+
+    --ergo-accent-blue: #395578;
+    --ergo-accent-blue-light: #f3f4f6;
+    --ergo-accent-blue-dark: #627083;
+
+    --ergo-accent-green: #97bba3;
+    --ergo-accent-green-light: #eef8ef;
+    --ergo-accent-green-dark: #4f785c;
+
+    --ergo-accent-yellow: #dbc97e;
+    --ergo-accent-yellow-light: #fef9e7;
+    --ergo-accent-yellow-dark: #82722b;
+
+    --ergo-grey: #aaaaaa;
+    --ergo-grey-light: #d3d3d3;
+    --ergo-grey-dark: #808080;
+
+    --ergo-status-red: #ff6565;
+    --ergo-status-red-dark: #c24848;
+    --ergo-status-red-light: #fff4f4;
+
+    --ergo-status-yellow: #ffd439;
+    --ergo-status-yellow-dark: #dbb735;
+    --ergo-status-yellow-light: #ffeca9;
+
+    --ergo-status-blue: var(--ergo-secondary);
+    --ergo-status-blue-dark: var(--ergo-secondary-dark);
+    --ergo-status-blue-light: var(--ergo-secondary-light);
+
+    --ergo-status-green: #3fbc6a;
+    --ergo-status-green-dark: #2d904f;
+    --ergo-status-green-light: #87e8a8;
+
+    --ergo-material-bg-primary: #ffffff;
+    --ergo-material-bg-secondary: #fafafa;
+    --ergo-material-bg-tertiary: #f1f1f1;
+    --ergo-material-bg-quaternary: #ffffff;
+
+    --ergo-material-overlay: var(--ergo-secondary-dark);
+    --ergo-material-border: var(--ergo-grey);
+    --ergo-material-divider: var(--ergo-grey);
+    --ergo-material-disabled-outline: var(--ergo-grey-light);
+    --ergo-material-disabled-fill: var(--ergo-grey);
+
+    /* ========== Ergo Text  ========== */
+    --ergo-text-size-input: 12px;
+    --ergo-text-size-default: 12px;
+    --ergo-text-color-primary: var(--ergo-accent-blue);
+    --ergo-text-color-inverse: var(--ergo-white);
+    --ergo-text-color-disabled-outline: var(--ergo-grey);
+    --ergo-text-color-disabled-fill: var(--ergo-white);
+
+    /* ========== Spacing  ========== */
+    --ergo-spacing-xs: 2px;
+    --ergo-spacing-sm: 4px;
+    --ergo-spacing-md: 8px;
+    --ergo-spacing-lg: 16px;
+    --ergo-spacing-xl: 32px;
+
+    /* ========== Sizing  ========== */
+    --ergo-sizing-bar-xs: 16px;
+    --ergo-sizing-bar-sm: 24px;
+    --ergo-sizing-bar-md: 32px;
+    --ergo-sizing-bar-lg: 40px;
+    --ergo-sizing-bar-xl: 48px;
+
+    --ergo-sizing-action-sm: 20px;
+    --ergo-sizing-action-md: 24px;
+    --ergo-sizing-action-lg: 32px;
+
+    /* ========== Shape  ========== */
+    --ergo-shape-radius-small: 2px;
+    --ergo-shape-radius-medium: 4px;
+    --ergo-shape-radius-large: 8px;
+    --ergo-shape-triangle-medium: 12px;
+
+    /* Default Material - TODO: move to system once blackcat support material */
+    --action: var(--ergo-primary);
+    --on-action: var(--ergo-white);
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-accent-blue);
+  }
+}

package/src/tokens/index.ts

@@ -3,3 +3,4 @@ export * from './badge/badge.js';
 export * from './bubble/bubble.js';
 export * from './key/key.js';
 export * from './value/value.js';
+export * from './term/term.js';

package/src/tokens/key/key.tsx

@@ -1,9 +1,30 @@
 import clsx from 'clsx';
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
+import type { Emphasis, Severity } from '../../utils/index.js';
 
-export const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {
+export interface KeyOwnProps {
+  emphasis?: Emphasis;
+  severity?: Severity;
+}
+
+export interface KeyProps extends HStackProps, KeyOwnProps {}
+
+export const Key = ({
+  children,
+  className,
+  hAlign = 'start',
+  emphasis = 'normal',
+  severity = 'neutral',
+  ...props
+}: KeyProps) => {
   return (
-    <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>
+    <HStack
+      data-emphasis={emphasis}
+      data-severity={severity}
+      className={clsx(className, 'tcn-datum', 'tcn-key')}
+      hAlign={hAlign}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/tokens/term/term.module.css

@@ -0,0 +1,14 @@
+@layer tcn-system {
+  :where(.term) {
+    padding-block: 4px;
+  }
+
+  :where(.term) > :where(.tcn-key) {
+    flex-shrink: 0;
+  }
+
+  :where(.term) > :where(.tcn-value) {
+    flex: 1;
+    min-width: 0;
+  }
+}

package/src/tokens/term/term.stories.tsx

@@ -0,0 +1,84 @@
+import { Term } from './term.js';
+import { Key } from '../key/key.js';
+import { Value } from '../value/value.js';
+import { Chip } from '../chip/chip.js';
+import { VStack } from '../../stacks/v_stack.js';
+
+export default {
+  title: 'Tokens/Term',
+  component: Term,
+  tags: ['autodocs'],
+};
+
+export const Default = () => (
+  <Term maxWidth="300px">
+    <Key>Status:</Key>
+    <Value>Active</Value>
+  </Term>
+);
+
+export const WithChipValue = () => (
+  <Term maxWidth="300px">
+    <Key>Category:</Key>
+    <Value>
+      <Chip>Engineering</Chip>
+    </Value>
+  </Term>
+);
+
+export const WithLongText = () => (
+  <Term maxWidth="300px">
+    <Key>Description:</Key>
+    <Value>This is a long value that will wrap across multiple lines</Value>
+  </Term>
+);
+
+export const Severity = () => (
+  <VStack maxWidth="300px">
+    <Term>
+      <Key>Neutral:</Key>
+      <Value severity="neutral">Default</Value>
+    </Term>
+    <Term>
+      <Key>Dangerous:</Key>
+      <Value severity="dangerous">Deleted</Value>
+    </Term>
+    <Term>
+      <Key>Cautious:</Key>
+      <Value severity="cautious">Pending Review</Value>
+    </Term>
+    <Term>
+      <Key>Suggested:</Key>
+      <Value severity="suggested">Recommended</Value>
+    </Term>
+    <Term>
+      <Key>Encouraged:</Key>
+      <Value severity="encouraged">Verified</Value>
+    </Term>
+  </VStack>
+);
+
+export const MultipleTerms = () => (
+  <VStack maxWidth="300px">
+    <Term>
+      <Key>Name:</Key>
+      <Value>Jane Smith</Value>
+    </Term>
+    <Term>
+      <Key>Role:</Key>
+      <Value>
+        <Chip>Admin</Chip>
+      </Value>
+    </Term>
+    <Term>
+      <Key emphasis="strong">Status (Strong):</Key>
+      <Value>
+        <Chip>Active</Chip>
+      </Value>
+    </Term>
+    <Term>
+      <Key emphasis="faint">Department (Faint):</Key>
+      <Value>Engineering</Value>
+    </Term>
+  </VStack>
+);

package/src/tokens/term/term.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { HStackProps, HStack } from '../../stacks/h_stack.js';
+import { clsx } from 'clsx';
+import styles from './term.module.css';
+
+export const Term = React.forwardRef<HTMLDivElement, HStackProps>(function Term(
+  { children, className, vAlign = 'start', as = 'div', ...props },
+  ref
+) {
+  return (
+    <HStack
+      ref={ref}
+      vAlign={vAlign}
+      className={clsx(className, styles.term, 'tcn-term')}
+      {...props}
+    >
+      {children}
+    </HStack>
+  );
+});

package/src/tokens/value/value.module.css

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  :where(.value) {
+    text-align: end;
+  }
+}

package/src/tokens/value/value.tsx

@@ -1,9 +1,31 @@
 import clsx from 'clsx';
 import { HStack, HStackProps } from '../../stacks/h_stack.js';
+import type { Emphasis, Severity } from '../../utils/index.js';
+import styles from './value.module.css';
 
-export const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {
+export interface ValueOwnProps {
+  emphasis?: Emphasis;
+  severity?: Severity;
+}
+
+export interface ValueProps extends HStackProps, ValueOwnProps {}
+
+export const Value = ({
+  children,
+  className,
+  hAlign = 'end',
+  emphasis = 'normal',
+  severity = 'neutral',
+  ...props
+}: ValueProps) => {
   return (
-    <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>
+    <HStack
+      data-emphasis={emphasis}
+      data-severity={severity}
+      className={clsx(className, styles.value, 'tcn-datum', 'tcn-value')}
+      hAlign={hAlign}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/utils/types/variations.ts

@@ -2,3 +2,4 @@ export type Size = 'sm' | 'md' | 'lg';
 export type ExpandedSize = Size | 'xs' | 'xl';
 export type Hierarchy = 'primary' | 'secondary' | 'tertiary';
 export type Emphasis = 'strong' | 'normal' | 'faint';
+export type Severity = 'dangerous' | 'cautious' | 'neutral' | 'suggested' | 'encouraged';

package/dist/layouts/row/row.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { HStackProps } from '../../stacks/h_stack.js';
-export declare const Row: React.ForwardRefExoticComponent<HStackProps<HTMLElement> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=row.d.ts.map

package/dist/layouts/row/row.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/layouts/row/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAU,MAAM,yBAAyB,CAAC;AAI9D,eAAO,MAAM,GAAG,iGASd,CAAC"}

package/dist/layouts/row/row.js

@@ -1,11 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import m from "react";
-import { HStack as f } from "../../stacks/h_stack.js";
-import { clsx as a } from "clsx";
-import '../../row.css';const e = "_row_59c35b2", n = { row: e }, d = m.forwardRef(function({ children: o, className: r, as: i = "div", ...t }, c) {
-  return /* @__PURE__ */ s(f, { ref: c, className: a(r, n.row, "tcn-row"), ...t, children: o });
-});
-export {
-  d as Row
-};
-//# sourceMappingURL=row.js.map

package/dist/layouts/row/row.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"row.js","sources":["../../../src/layouts/row/row.tsx"],"sourcesContent":["import React from 'react';\nimport { HStackProps, HStack } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport styles from './row.module.css';\n\nexport const Row = React.forwardRef<HTMLDivElement, HStackProps>(function Row(\n  { children, className, as = 'div', ...props },\n  ref\n) {\n  return (\n    <HStack ref={ref} className={clsx(className, styles.row, 'tcn-row')} {...props}>\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Row","React","children","className","as","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;0CAKaA,IAAMC,EAAM,WAAwC,SAC/D,EAAE,UAAAC,GAAU,WAAAC,GAAW,IAAAC,IAAK,OAAO,GAAGC,EAAA,GACtCC,GACA;AACA,SACE,gBAAAC,EAACC,GAAA,EAAO,KAAAF,GAAU,WAAWG,EAAKN,GAAWO,EAAO,KAAK,SAAS,GAAI,GAAGL,GACtE,UAAAH,EAAA,CACH;AAEJ,CAAC;"}

package/dist/row.css

@@ -1 +0,0 @@
-@layer tcn-system{:where(._row_59c35b2){padding-block:4px}}

package/dist/section.module-0wyGkhDg.js

@@ -1,5 +0,0 @@
-import './section.css';const s = "_section_0d82329", e = "_heading_7bf5e47", n = { section: s, heading: e };
-export {
-  n as s
-};
-//# sourceMappingURL=section.module-0wyGkhDg.js.map

package/dist/section.module-0wyGkhDg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"section.module-0wyGkhDg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/src/layouts/row/row.module.css

@@ -1,5 +0,0 @@
-@layer tcn-system {
-  :where(.row) {
-    padding-block: 4px;
-  }
-}

package/src/layouts/row/row.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { HStackProps, HStack } from '../../stacks/h_stack.js';
-import { clsx } from 'clsx';
-import styles from './row.module.css';
-
-export const Row = React.forwardRef<HTMLDivElement, HStackProps>(function Row(
-  { children, className, as = 'div', ...props },
-  ref
-) {
-  return (
-    <HStack ref={ref} className={clsx(className, styles.row, 'tcn-row')} {...props}>
-      {children}
-    </HStack>
-  );
-});