@tcn/ui 0.13.1 → 0.15.0

package/src/themes/themes/ergo/ergo_theme.ts

@@ -1,5 +1,7 @@
+import { buildStyleSheet } from '../../build_stylesheet';
+import tokensCss from './tokens/theme_tokens.css?raw';
+import systemTokensCss from './tokens/system_tokens.css?raw';
 import css from './ergo_theme.css?raw';
 import '@fontsource/lato';
 
-export const ergoStyleSheet = new CSSStyleSheet();
-ergoStyleSheet.replaceSync(css);
+export const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);

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/tsconfig.json

@@ -1,36 +1,8 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "esModuleInterop": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "~aip-160/*": [
-        "../aip-160/src/*"
-      ],
-      "~aip-160-editor/*": [
-        "../aip-160-editor/src/*"
-      ],
-      "~icons/*": [
-        "../icons/src/*"
-      ],
-      "~resource-store/*": [
-        "../resource-store/src/*"
-      ],
-      "~sb-blackcat-addon/*": [
-        "../sb-blackcat-addon/src/*"
-      ],
-      "~state/*": [
-        "../state/src/*"
-      ],
-      "~ui/*": [
-        "./src/*"
-      ],
-      "~ui-table/*": [
-        "../ui-table/src/*"
-      ]
-    }
+    "rootDir": ".",
+    "noImplicitAny": false
   },
-  "include": [
-    "src/**/*",
-    "types/**/*"
-  ]
-}
+  "include": ["src/**/*", ".storybook/**/*", "types/**/*", "package.json"]
+}