@tcn/ui 0.1.1 → 0.3.0

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

@@ -24,34 +24,47 @@
     }
   }
 
+  :global(.tcn-surface) {
+    background: hsl(var(--material));
+    color: hsl(var(--on-material));
+  }
+
   :global(.tcn-card[data-tone="positive"]) {
-    --material: var(--positive);
-    --on-material: var(--white);
-    --action: var(--white);
-    --on-action: var(--positive);
+    :global(.tcn-header) {
+      --material: var(--positive);
+      --on-material: var(--white);
+      --action: var(--white);
+      --on-action: var(--positive);
+    }
   }
 
   :global(.tcn-card[data-tone="notice"]) {
-    --material: var(--notice);
-    --on-material: var(--white);
-    --action: var(--white);
-    --on-action: var(--notice);
+    :global(.tcn-header) {
+      --material: var(--notice);
+      --on-material: var(--white);
+      --action: var(--white);
+      --on-action: var(--notice);
+    }
   }
 
   /* :global(.tcn-card[data-tone="neutral"]) {} */
 
   :global(.tcn-card[data-tone="warning"]) {
-    --material: var(--warning);
-    --on-material: var(--navy);
-    --action: var(--navy);
-    --on-action: var(--white);
+    :global(.tcn-header) {
+      --material: var(--warning);
+      --on-material: var(--navy);
+      --action: var(--navy);
+      --on-action: var(--white);
+    }
   }
 
   :global(.tcn-card[data-tone="danger"]) {
-    --material: var(--danger);
-    --on-material: var(--white);
-    --action: var(--white);
-    --on-action: var(--danger);
+    :global(.tcn-header) {
+      --material: var(--danger);
+      --on-material: var(--white);
+      --action: var(--white);
+      --on-action: var(--danger);
+    }
   }
 }
 
@@ -103,8 +116,3 @@
   --material: var(--navy);
   --on-material: var(--white);
 }
-
-.surface {
-  background: hsl(var(--material));
-  color: hsl(var(--on-material));
-}

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

@@ -136,6 +136,14 @@ legend {
 /* ===== CSS VARIABLES ===== */
 :root {
   --scalar: 1;
+  --accent-color: #cd6b2c;
+
+  /* Typography */
+  --font-color: #395578;
+  --font-family: "Lato", sans-serif;
+  --font-size: 12px;
+
+  /* Spacing */
   --gap-small: 4px;
   --gap-medium: 8px;
   --gap-large: 16px;
@@ -144,6 +152,7 @@ legend {
   --padding-medium: 8px;
   --padding-large: 16px;
 
+  /* Status Colors */
   --status-color-disabled: #7f7f7f;
   --status-color-info: #008cff;
   --status-color-warning: #ffff00;
@@ -155,6 +164,12 @@ legend {
   --async-color-success: #00ff00;
   --async-color-failed: #ff0000;
 
+  /* Shape */
+  --shape-radius-small: 2px;
+  --shape-radius-medium: 4px;
+  --shape-radius-large: 8px;
+
+  /* Palette */
   --primary-color-faint: #c0c0c0;
   --primary-color: #008cff;
   --primary-color-strong: #008cff;
@@ -171,10 +186,6 @@ legend {
   --quaternary-color: #008cff;
   --quaternary-color-strong: #008cff;
 
-  --font-color: #395578;
-  --font-family: "Lato", sans-serif;
-  --font-size: 12px;
-
   --background-color-primary: #ffffff;
   --background-color-secondary: #ffffff;
   --background-color-tertiary: #ffffff;
@@ -189,12 +200,7 @@ legend {
   --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;
-
+  /* Default Material */
   --action: 23, 65%, 49%;
   --on-action: 0, 0%, 100%;
   --material: 0, 0%, 100%;
@@ -373,78 +379,30 @@ legend {
   }
 }
 
-/* ===== 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%;
+.material {
+  background-color: hsl(var(--material));
+  color: hsl(var(--on-material));
 }
 
-/* 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%;
+/* ===== SURFACES ===== */
+.tcn-draggable[data-is-draggable="true"] {
+  .tcn-drag-handle {
+    cursor: move;
+  }
 }
 
-/* White on Red */
-.material-async-failed {
-  --action: 0, 0%, 100%;
-  --on-action: 0, 100%, 50%;
-  --material: 0, 100%, 50%;
-  --on-material: 0, 0%, 100%;
+.tcn-frame[data-is-veil="true"] {
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-.material {
-  background-color: hsl(var(--material));
-  color: hsl(var(--on-material));
+.tcn-tooltip {
+  background: rgba(57, 85, 120, 0.85);
+  box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
+  color: rgba(255, 255, 255, 1);
+  border-radius: var(--shape-radius-medium);
+  padding: var(--padding-medium);
 }
 
-/* ===== SURFACES ===== */
 .tcn-list {
   gap: var(--gap-medium);
   .tcn-item {
@@ -454,19 +412,66 @@ legend {
   }
 }
 
-.tcn-veil {
+/* Scaffold: */
+.tcn-scaffold {
+  --scaffold-v-inset: var(--v-inset, var(--padding-large));
+  --scaffold-header-size: var(--header-size, 40px);
+  --scaffold-footer-size: var(--footer-size, 40px);
+  --scaffold-utility-bar-size: var(--utility-bar-size, 32px);
+  --scaffold-divide-footer: var(--divide-footer, 1);
+  --scaffold-divide-header: var(--divide-header, 1);
+
+  :where(.tcn-header) {
+    min-height: var(--scaffold-header-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  /* 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: calc(var(--scaffold-divide-header) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */
+  :where(.tcn-body) + :where(.tcn-footer) {
+    border-top: calc(var(--scaffold-divide-footer) * 1px) solid
+      var(--foreground-color-primary);
+  }
+
+  :where(.tcn-utility-bar) {
+    min-height: var(--scaffold-utility-bar-size);
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-body) {
+    padding: 0 var(--scaffold-v-inset);
+    gap: var(--gap-medium);
+  }
+
+  :where(.tcn-footer) {
+    gap: var(--gap-medium);
+    min-height: var(--scaffold-footer-size);
+    padding: 0 var(--scaffold-v-inset);
+  }
+}
+
+.tcn-frame-veil[data-is-veil="true"] {
   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;
+  --divide-header: 0;
+
+  :where(.tcn-scaffold) {
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 1px solid var(--foreground-color-primary);
+  }
 
   :where(.tcn-typography) {
     color: inherit;
@@ -479,111 +484,114 @@ legend {
     --on-action: 0, 0%, 100%;
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
   }
 
   :where(.tcn-utility-bar) {
-    min-height: 32px;
-    border-bottom: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
-
-    :where(.tcn-button) {
-      padding: 0;
-      min-width: 18px;
-      min-height: 18px;
-    }
+    --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));
   }
+}
 
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
-  }
+/* WINDOW: */
+.tcn-window {
+  --divide-header: 0;
 
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    border-top: 1px solid var(--foreground-color-primary);
-    padding: 0 var(--v-inset);
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 34px 0px #00000096;
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
+    border: 2px solid white;
   }
-}
 
-/* PANEL */
-.tcn-panel {
-  --v-inset: var(--padding-large);
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  overflow: hidden;
+  :where(.tcn-typography) {
+    color: inherit;
+  }
 
   :where(.tcn-header) {
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
+    --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));
+  }
 
-    :where(.tcn-title) {
-      font-weight: 700;
-    }
-
-    :where(.tcn-divider) {
-      padding: 4px 0;
-      :where(.tcn-divider-line) {
-        width: 1.5px;
-        min-height: 18px;
-        height: auto;
-      }
-    }
+  :where(.tcn-utility-bar) {
+    --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));
   }
+}
 
-  /* 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);
+.tcn-pop-confirm {
+  --divide-header: 0;
+  --v-inset: var(--padding-medium);
+
+  :where(.tcn-scaffold) {
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
+    border-radius: var(--shape-radius-medium);
+    background-color: var(--background-color-primary);
+    overflow: hidden;
   }
 
-  /* 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-typography) {
+    color: inherit;
   }
 
-  :where(.tcn-utility-bar) {
+  :where(.tcn-header) {
     min-height: 32px;
-    padding: 0 var(--v-inset);
+    --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));
   }
 
-  :where(.tcn-body) {
-    padding: 0 var(--v-inset);
-    gap: var(--gap-medium);
+  :where(.tcn-utility-bar) {
+    --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));
   }
+}
 
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: 40px;
-    padding: 0 var(--v-inset);
-  }
+/* PANEL */
+.tcn-panel {
+  background-color: var(--background-color-primary);
+  border-radius: var(--shape-radius-medium);
+  overflow: hidden;
 }
 
 /* Card */
 .tcn-card {
-  padding: 0;
-  gap: 0px;
-  border: 1px solid var(--foreground-color-primary);
+  --header-size: 32px;
+  --footer-size: 32px;
+  --utility-bar-size: 24px;
+  --divide-header: 0;
+
+  background-color: var(--background-color-primary);
   border-radius: var(--shape-radius-medium);
+  border: 1px solid var(--foreground-color-primary);
   overflow: hidden;
+
   :where(.tcn-header) {
-    /* TODO: Color header */
-    min-height: 32px;
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
-  :where(.tcn-body) {
-    padding: var(--padding-medium) var(--v-inset);
+
+  :where(.tcn-utility-bar) {
+    /* TODO: This should be a variable */
+    background-color: #ecf4fb;
   }
 }

package/src/typography/title/title.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { clsx } from 'clsx';
 import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
 import type { Emphasis, Hierarchy, Size } from '../../utils/index.js';
@@ -21,22 +21,25 @@ export interface TitleOwnProps {
 
 export type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;
 
-export function Title({
-  size = 'md',
-  emphasis = 'normal',
-  hierarchy = 'primary',
-  color,
-  children,
-  className,
-  style = {},
-  padStart,
-  padEnd,
-  padBottom,
-  padTop,
-  pad,
-  selectable = true,
-  as,
-}: TitleProps) {
+export const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
+  {
+    size = 'md',
+    emphasis = 'normal',
+    hierarchy = 'primary',
+    color,
+    children,
+    className,
+    style = {},
+    padStart,
+    padEnd,
+    padBottom,
+    padTop,
+    pad,
+    selectable = true,
+    as,
+  },
+  ref
+) {
   let As: React.ElementType = as as React.ElementType;
 
   if (as == null) {
@@ -75,6 +78,7 @@ export function Title({
 
   return (
     <As
+      ref={ref}
       data-hierarchy={hierarchy}
       data-emphasis={emphasis}
       data-selectable={selectable}
@@ -85,4 +89,4 @@ export function Title({
       {children}
     </As>
   );
-}
+});

package/src/utils/click_away_listener.tsx

@@ -19,7 +19,7 @@ const touchMap = {
   onTouchEnd: 'touchend',
 };
 
-function isEventWithinElement(
+export function isEventWithinElement(
   event: MouseEvent | TouchEvent,
   node: HTMLElement | null,
   activated: boolean,

package/src/utils/dnd/__stories__/draggable.stories.tsx

@@ -0,0 +1,48 @@
+import { Draggable } from '../draggable/draggable.js';
+import { VStack } from '../../../stacks/v_stack.js';
+import { DragHandle } from '../handle.js';
+import { Box } from '../../../stacks/box/box.js';
+import { BodyText } from '../../../typography/index.js';
+import styles from './draggable_stories.module.css';
+
+export default {
+  title: 'Utils/Draggable',
+  component: Draggable,
+  tags: ['autodocs'],
+};
+
+export const DraggableStory = () => {
+  return (
+    <VStack minHeight="600px" height="100%" width="100%">
+      <Draggable>
+        <Box width="400px" height="300px" className={styles['handle-container']}>
+          <DragHandle>
+            <Box
+              className={styles.handle}
+              width="100px"
+              style={{
+                top: 50,
+                left: 100,
+              }}
+            >
+              <BodyText>Drag Handle</BodyText>
+            </Box>
+          </DragHandle>
+
+          <DragHandle>
+            <Box
+              className={styles.handle}
+              width="150px"
+              style={{
+                top: 200,
+                left: 50,
+              }}
+            >
+              <BodyText>Another Drag Handle</BodyText>
+            </Box>
+          </DragHandle>
+        </Box>
+      </Draggable>
+    </VStack>
+  );
+};

package/src/utils/dnd/__stories__/draggable_stories.module.css

@@ -0,0 +1,21 @@
+.handle {
+  position: relative;
+  background: var(--accent-color);
+  color: white;
+  font-weight: bold;
+  border: 2px solid black;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-medium);
+}
+
+.handle-container {
+  background: #f7e9fe;
+  padding: var(--padding-medium);
+  border-radius: var(--shape-radius-large);
+}
+
+.handle-container[data-is-dragging="true"] {
+  box-shadow:
+    0 4px 16px 0 rgba(25, 118, 210, 0.2),
+    0 1.5px 4px 0 rgba(21, 101, 192, 0.15);
+}