@tcn/ui 0.13.1 → 0.15.0

package/dist/themes/themes/ergo/ergo_theme.js

@@ -1,24 +1,33 @@
+import { buildStyleSheet as n } from "../../build_stylesheet.js";
 import "@fontsource/lato";
-const n = `@layer tcn-theme {
-  /* ===== CSS VARIABLES ===== */
+const r = `@layer tcn-theme {
   :root {
-    /* ========== Ergo Brand Palette ========== */
+    /* ========== 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-white: #ffffff;
 
     --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;
@@ -26,48 +35,89 @@ const n = `@layer tcn-theme {
 
     --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-ink-primary: var(--ergo-accent-blue);
-    --ergo-ink-inverse: var(--ergo-white);
-
+    --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);
+  }
+}
+`, a = `@layer tcn-theme {
+  :root {
     /* ========== Blackcat System Tokens ========== */
     --scalar: 1;
     --accent-color: var(--ergo-primary);
 
     /* Typography */
-    --font-color: var(--ergo-ink-primary);
+    --font-color: var(--ergo-text-color-primary);
     --font-family: "Lato", sans-serif;
-    --font-size: 12px;
+    --font-size: var(--ergo-text-size-default);
 
     /* Spacing */
-    --gap-xs: 2px;
-    --gap-small: 4px;
-    --gap-medium: 8px;
-    --gap-large: 16px;
-
-    --padding-small: 4px;
-    --padding-medium: 8px;
-    --padding-large: 16px;
-
-    /* Sizing */
-    --bar-xs: 16px;
-    --bar-sm: 24px;
-    --bar-md: 32px;
-    --bar-lg: 40px;
-    --bar-xl: 48px;
-
-    --action-sm: 20px;
-    --action-md: 24px;
-    --action-lg: 32px;
+    --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);
@@ -81,61 +131,49 @@ const n = `@layer tcn-theme {
     --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);
 
-    /* Shape */
-    --shape-radius-small: 2px;
-    --shape-radius-medium: 4px;
-    --shape-radius-large: 8px;
-    --shape-triangle-medium: 12px;
-
     /* Palette */
-    --primary-color-faint: #c0c0c0;
-    --primary-color: #008cff;
-    --primary-color-strong: #008cff;
-
-    --secondary-color-faint: #c0c0c0;
-    --secondary-color: #008cff;
-    --secondary-color-strong: #008cff;
-
-    --tertiary-color-faint: #c0c0c0;
-    --tertiary-color: #008cff;
-    --tertiary-color-strong: #008cff;
+    --primary-color-faint: var(--ergo-grey-light);
+    --primary-color: var(--ergo-primary);
+    --primary-color-strong: var(--ergo-primary-dark);
 
-    --quaternary-color-faint: #c0c0c0;
-    --quaternary-color: #008cff;
-    --quaternary-color-strong: #008cff;
+    --secondary-color-faint: var(--ergo-secondary-light);
+    --secondary-color: var(--ergo-secondary);
+    --secondary-color-strong: var(--ergo-secondary-dark);
 
-    --background-color-primary: #ffffff;
-    --background-color-secondary: #fafafa;
-    --background-color-tertiary: #f1f1f1;
-    --background-color-quaternary: #ffffff;
+    --tertiary-color-faint: var(--ergo-tertiary-light);
+    --tertiary-color: var(--ergo-tertiary);
+    --tertiary-color-strong: var(--ergo-tertiary-dark);
 
-    --foreground-color-primary: #aaa;
-    --foreground-color-secondary: #222222;
-    --foreground-color-tertiary: #222222;
-    --foreground-color-quaternary: #222222;
+    --quaternary-color-faint: var(--ergo-accent-blue-light);
+    --quaternary-color: var(--ergo-accent-blue);
+    --quaternary-color-strong: var(--ergo-accent-blue-dark);
 
-    --material-disabled: var(--ergo-grey-light);
-    --on-material-disabled: var(--ergo-ink-inverse);
-    --ink-disabled: var(--ergo-grey-light);
+    --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);
 
-    --material-line: var(--ergo-grey);
-
-    /* Default Material */
-    --action: var(--ergo-primary);
-    --on-action: var(--ergo-white);
-    --material: var(--ergo-white);
-    --on-material: var(--ergo-accent-blue);
+    /* 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);
   }
+}
+`, e = `@layer tcn-theme {
+  /* ===== CSS VARIABLES ===== */
 
   .tcn-theme-root {
     font-family: var(--font-family);
     color: var(--font-color);
+    /* TODO: move to system */
     --action: var(--ergo-primary);
     --on-action: var(--ergo-white);
     --material: var(--ergo-white);
@@ -206,7 +244,7 @@ const n = `@layer tcn-theme {
     --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) * var(--btn-step));
     --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));
 
-    border-radius: var(--shape-radius-medium);
+    border-radius: var(--ergo-shape-radius-medium);
     min-height: var(--btn-size);
     padding: var(--padding-small) var(--btn-pad);
 
@@ -402,6 +440,36 @@ const n = `@layer tcn-theme {
     }
   }
 
+  .tcn-fab {
+    border-radius: 50%;
+  }
+
+  .tcn-mobile-button {
+    --btn-size-base: 44px;
+    --btn-pad-base: 16px;
+    --btn-size-delta: 8px;
+    --btn-pad-delta: 4px;
+
+    font-size: calc(16px * var(--scalar, 1));
+  }
+
+  .tcn-mobile-button[data-size="sm"] {
+    --btn-size-base: 36px;
+  }
+
+  .tcn-mobile-button[data-size="lg"] {
+    --btn-size-base: 52px;
+  }
+
+  .tcn-button-group .tcn-button-group-button.tcn-mobile-button {
+    --btn-size-base: 44px;
+    --btn-pad-base: 16px;
+    --btn-size-delta: 8px;
+    --btn-pad-delta: 4px;
+
+    font-size: calc(16px * var(--scalar, 1));
+  }
+
   .tcn-button-group {
     .tcn-button-group-button:hover,
     .tcn-button-group-button:active {
@@ -412,12 +480,12 @@ const n = `@layer tcn-theme {
       border-radius: 0;
     }
     .tcn-button-group-button:first-child {
-      border-top-left-radius: var(--shape-radius-medium);
-      border-bottom-left-radius: var(--shape-radius-medium);
+      border-start-start-radius: var(--ergo-shape-radius-medium);
+      border-end-start-radius: var(--ergo-shape-radius-medium);
     }
     .tcn-button-group-button:last-child {
-      border-top-right-radius: var(--shape-radius-medium);
-      border-bottom-right-radius: var(--shape-radius-medium);
+      border-start-end-radius: var(--ergo-shape-radius-medium);
+      border-end-end-radius: var(--ergo-shape-radius-medium);
     }
     .tcn-button-group-button[data-hierarchy="tertiary"] {
       border: 0;
@@ -457,26 +525,26 @@ const n = `@layer tcn-theme {
     }
 
     .tcn-select-group-option[data-hierarchy="secondary"][data-is-disabled="true"] {
-      color: var(--material-disabled);
-      border: 1px solid var(--material-disabled);
+      color: var(--ergo-material-disabled-outline);
+      border: 1px solid var(--ergo-material-disabled-outline);
     }
 
     .tcn-select-group-option[data-hierarchy="primary"][data-is-disabled="true"] {
-      background: var(--material-disabled);
+      background: var(--ergo-material-disabled-outline);
       color: white;
-      border: 1px solid var(--material-disabled);
+      border: 1px solid var(--ergo-material-disabled-outline);
     }
 
     .tcn-select-group-option {
       border-radius: 0;
     }
     .tcn-select-group-option:first-child {
-      border-top-left-radius: var(--shape-radius-medium);
-      border-bottom-left-radius: var(--shape-radius-medium);
+      border-top-left-radius: var(--ergo-shape-radius-medium);
+      border-bottom-left-radius: var(--ergo-shape-radius-medium);
     }
     .tcn-select-group-option:last-child {
-      border-top-right-radius: var(--shape-radius-medium);
-      border-bottom-right-radius: var(--shape-radius-medium);
+      border-top-right-radius: var(--ergo-shape-radius-medium);
+      border-bottom-right-radius: var(--ergo-shape-radius-medium);
     }
   }
 
@@ -557,7 +625,7 @@ const n = `@layer tcn-theme {
       left: 0;
       width: 100%;
       height: 1px;
-      background: var(--material-line);
+      background: var(--ergo-material-divider);
       pointer-events: none;
       z-index: 1;
     }
@@ -569,16 +637,15 @@ const n = `@layer tcn-theme {
     min-width: min-content;
     width: auto;
     flex-grow: 0;
-    border-radius: var(--shape-radius-medium);
+    border-radius: 6px;
     border: 1px solid var(--on-material);
-    padding-block: 1px;
-    padding-inline: 2px;
+    padding: 2px;
 
     .tcn-tabs-list {
       height: 20px;
-      gap: var(--gap-xs);
+      gap: var(--ergo-spacing-xs);
       .tcn-tab-item {
-        border-radius: var(--shape-radius-medium);
+        border-radius: var(--ergo-shape-radius-medium);
         min-height: 20px;
       }
     }
@@ -666,19 +733,19 @@ const n = `@layer tcn-theme {
     }
 
     &[data-anchor-direction="bottom"] {
-      padding-bottom: var(--shape-triangle-medium);
+      padding-bottom: var(--ergo-shape-triangle-medium);
     }
 
     &[data-anchor-direction="top"] {
-      padding-top: var(--shape-triangle-medium);
+      padding-top: var(--ergo-shape-triangle-medium);
     }
 
     &[data-anchor-direction="start"] {
-      padding-left: var(--shape-triangle-medium);
+      padding-left: var(--ergo-shape-triangle-medium);
     }
 
     &[data-anchor-direction="end"] {
-      padding-right: var(--shape-triangle-medium);
+      padding-right: var(--ergo-shape-triangle-medium);
     }
   }
 
@@ -693,7 +760,7 @@ const n = `@layer tcn-theme {
       box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);
       color: var(--on-material);
       background: var(--material);
-      border-radius: var(--shape-radius-medium);
+      border-radius: var(--ergo-shape-radius-medium);
       padding: var(--padding-medium);
     }
   }
@@ -703,12 +770,12 @@ const n = `@layer tcn-theme {
     .tcn-item {
       height: 24px;
       padding: 0px var(--padding-medium);
-      border-radius: var(--shape-radius-medium);
+      border-radius: var(--ergo-shape-radius-medium);
     }
   }
   /* Rail: */
   .tcn-utility-strip {
-    min-width: var(--bar-md);
+    min-width: var(--ergo-sizing-bar-md);
   }
 
   .tcn-utility-strip,
@@ -726,12 +793,12 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-utility-bar {
-    min-height: var(--bar-md);
+    min-height: var(--ergo-sizing-bar-md);
   }
 
   .tcn-footer,
   .tcn-header {
-    min-height: var(--bar-lg);
+    min-height: var(--ergo-sizing-bar-lg);
   }
 
   .tcn-scaffold {
@@ -739,25 +806,23 @@ const n = `@layer tcn-theme {
     --scaffold-divide-header: var(--divide-header, 1);
     --pad-inline: var(--padding-large);
 
-    /* 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 appears on nested scaffold/rail when it follows header or utility-bar */
+    :where(.tcn-header) + :where(.tcn-scaffold),
+    :where(.tcn-header) + :where(.tcn-rail),
+    :where(.tcn-utility-bar) + :where(.tcn-scaffold),
+    :where(.tcn-utility-bar) + :where(.tcn-rail) {
       border-top: calc(var(--scaffold-divide-header) * 1px) solid
-        var(--foreground-color-primary);
+        var(--ergo-material-border);
     }
 
-    /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 */
-    :where(.tcn-body) + :where(.tcn-footer) {
+    /* Border appears on footer when it follows scaffold/rail */
+    :where(.tcn-scaffold) + :where(.tcn-footer),
+    :where(.tcn-rail) + :where(.tcn-footer) {
       border-top: calc(var(--scaffold-divide-footer) * 1px) solid
-        var(--foreground-color-primary);
+        var(--ergo-material-border);
     }
   }
 
-  /* .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
-  .tcn-body > .tcn-rail > .tcn-rail-stack {
-    gap: var(--gap-medium);
-  } */
-
   .tcn-frame-veil[data-is-veil="true"] {
     background-color: rgba(0, 0, 0, 0.5);
   }
@@ -771,8 +836,9 @@ const n = `@layer tcn-theme {
     padding: var(--padding-medium);
   }
 
-  .tcn-body > .tcn-scaffold > .tcn-scaffold-stack,
-  .tcn-body > .tcn-rail > .tcn-rail-stack {
+  /* TODO: remove - shim to replicate Column at Page level */
+  .tcn-page > .tcn-scaffold-stack > .tcn-scaffold > .tcn-scaffold-stack,
+  .tcn-page > .tcn-scaffold-stack > .tcn-rail > .tcn-rail-stack {
     gap: var(--gap-medium);
   }
 
@@ -780,13 +846,13 @@ const n = `@layer tcn-theme {
   .tcn-modal {
     --divide-header: 0;
     box-shadow: 0px 4px 34px 0px #00000096;
-    border-radius: var(--shape-radius-medium);
+    border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
     overflow: hidden;
-    border: 1px solid var(--foreground-color-primary);
+    border: 1px solid var(--ergo-material-border);
 
     :where(.tcn-header) {
-      --material: var(--ergo-secondary-dark);
+      --material: var(--ergo-material-overlay);
       --on-material: var(--ergo-white);
       --action: var(--ergo-tertiary);
       --on-action: var(--ergo-secondary-dark);
@@ -807,7 +873,7 @@ const n = `@layer tcn-theme {
     overflow: hidden;
 
     :where(.tcn-header) {
-      --material: var(--ergo-secondary-dark);
+      --material: var(--ergo-material-overlay);
       --on-material: var(--ergo-white);
       --action: var(--ergo-tertiary);
       --on-action: var(--ergo-secondary-dark);
@@ -824,13 +890,13 @@ const n = `@layer tcn-theme {
   .tcn-window {
     box-shadow: 0px 4px 34px 0px #00000096;
     --divide-header: 0;
-    border-radius: var(--shape-radius-medium);
+    border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
     overflow: hidden;
     border: 2px solid white;
 
     :where(.tcn-header) {
-      --material: var(--ergo-secondary-dark);
+      --material: var(--ergo-material-overlay);
       --on-material: var(--ergo-white);
       --action: var(--ergo-tertiary);
       --on-action: var(--ergo-secondary-dark);
@@ -849,7 +915,7 @@ const n = `@layer tcn-theme {
     --pad-inline: var(--padding-medium);
 
     .tcn-pop-confirm-scaffold > .tcn-scaffold-stack {
-      border-radius: var(--shape-radius-medium);
+      border-radius: var(--ergo-shape-radius-medium);
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
       background-color: var(--background-color-primary);
     }
@@ -861,14 +927,14 @@ const n = `@layer tcn-theme {
     /* Set the indicator to match the header color */
     &[data-v-origin="top"] {
       :where(.tcn-tethered-origin-indicator) {
-        --material: var(--ergo-secondary-dark);
+        --material: var(--ergo-material-overlay);
       }
     }
 
     :where(.tcn-header) {
-      min-height: var(--bar-md);
+      min-height: var(--ergo-sizing-bar-md);
 
-      --material: var(--ergo-secondary-dark);
+      --material: var(--ergo-material-overlay);
       --on-material: var(--ergo-white);
       --action: var(--ergo-tertiary);
       --on-action: var(--ergo-secondary-dark);
@@ -896,7 +962,7 @@ const n = `@layer tcn-theme {
       min-width: 2px;
       height: 18px;
       background: var(--ergo-grey);
-      border-radius: var(--shape-radius-small);
+      border-radius: var(--ergo-shape-radius-small);
       align-self: center;
     }
   }
@@ -907,7 +973,7 @@ const n = `@layer tcn-theme {
     --divide-footer: 1;
     --material: var(--background-color-primary);
     background-color: var(--material);
-    border-radius: var(--shape-radius-medium);
+    border-radius: var(--ergo-shape-radius-medium);
     overflow: hidden;
 
     :where(.tcn-title) {
@@ -925,11 +991,11 @@ const n = `@layer tcn-theme {
     overflow: hidden;
 
     :where(.tcn-header) {
-      min-height: var(--bar-md);
+      min-height: var(--ergo-sizing-bar-md);
     }
 
     :where(.tcn-footer) {
-      min-height: var(--bar-md);
+      min-height: var(--ergo-sizing-bar-md);
     }
 
     :where(.tcn-title) {
@@ -941,14 +1007,15 @@ const n = `@layer tcn-theme {
   .tcn-card {
     --divide-header: 0;
     --divide-footer: 1;
+    --pad-inline: var(--padding-medium);
 
     background-color: var(--background-color-primary);
-    border-radius: var(--shape-radius-medium);
-    border: 1px solid var(--foreground-color-primary);
+    border-radius: var(--ergo-shape-radius-medium);
+    border: 1px solid var(--ergo-material-border);
     overflow: hidden;
 
     :where(.tcn-header) {
-      min-height: var(--bar-md);
+      min-height: var(--ergo-sizing-bar-md);
 
       --material: var(--ergo-secondary-light);
       --on-material: var(--ergo-accent-blue);
@@ -963,7 +1030,14 @@ const n = `@layer tcn-theme {
     }
 
     :where(.tcn-utility-bar) {
-      min-height: var(--bar-sm);
+      min-height: var(--ergo-sizing-bar-sm);
+    }
+
+    :where(.tcn-scaffold-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
+    :where(.tcn-scaffold-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack),
+    :where(.tcn-rail-stack) > :where(.tcn-scaffold) > :where(.tcn-scaffold-stack),
+    :where(.tcn-rail-stack) > :where(.tcn-rail) > :where(.tcn-rail-stack) {
+      padding-inline: var(--padding-medium);
     }
   }
 
@@ -977,19 +1051,24 @@ const n = `@layer tcn-theme {
       var(--section-tab-start) +
       (var(--section-tab-width) * var(--section-tab-depth))
     );
+    --section-heading-height: var(--ergo-sizing-bar-md);
     --section-action: var(--ergo-secondary);
     --section-mat: var(--ergo-secondary-light);
-    --section-on-mat: var(--ergo-ink-primary);
+    --section-on-mat: var(--ergo-text-color-primary);
   }
 
   .tcn-heading {
-    background-color: #f1f1f1;
+    position: sticky;
+    background-color: var(--material);
     padding-inline-start: var(--pad-inline, var(--padding-medium));
-    height: 30px;
+    padding-inline-end: var(--pad-inline, var(--padding-medium));
+    height: var(--section-heading-height);
     z-index: 5;
+    user-select: none;
   }
 
   .tcn-section > .tcn-heading {
+    top: calc(var(--section-heading-height) * var(--section-tab-depth));
     z-index: calc(var(--max-section-depth) - var(--section-tab-depth));
     padding-inline-start: var(--section-tab);
     --material: var(--section-mat);
@@ -1000,8 +1079,18 @@ const n = `@layer tcn-theme {
     gap: var(--gap-small);
   }
 
-  .tcn-section > :not(.tcn-heading, .tcn-section) {
+  .tcn-detail {
+    padding-block: var(--padding-medium);
+    gap: var(--padding-medium);
+  }
+
+  .tcn-section > .tcn-detail {
     padding-inline-start: var(--section-tab);
+    padding-inline-end: var(--pad-inline, var(--padding-medium));
+  }
+
+  .tcn-scaffold-stack > .tcn-detail {
+    padding-inline: var(--pad-inline, var(--padding-medium));
   }
 
   .tcn-section > .tcn-section {
@@ -1023,7 +1112,7 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-caret {
-    --caret-size: var(--shape-triangle-medium);
+    --caret-size: var(--ergo-shape-triangle-medium);
     --caret-triangle-height: calc(var(--caret-size) / 2);
     --caret-triangle-width: var(--caret-size);
     --caret-triangle-base: var(--caret-triangle-height) solid transparent;
@@ -1066,7 +1155,7 @@ const n = `@layer tcn-theme {
     --table-pad-inline: var(--pad-inline, var(--padding-medium));
 
     --material: var(--ergo-white);
-    --on-material: var(--ergo-ink-primary);
+    --on-material: var(--ergo-text-color-primary);
     --action: var(--ergo-accent-blue);
     --on-action: var(--ergo-white);
     background-color: var(--material);
@@ -1107,7 +1196,7 @@ const n = `@layer tcn-theme {
   .tcn-thead {
     /* Border for header row */
     .tcn-tr {
-      height: var(--bar-md);
+      height: var(--ergo-sizing-bar-md);
       .tcn-th {
         border-bottom: 1px solid var(--ergo-grey-light);
       }
@@ -1124,7 +1213,7 @@ const n = `@layer tcn-theme {
     font-weight: bold;
     /* Border for footer row */
     .tcn-tr {
-      height: var(--bar-sm);
+      height: var(--ergo-sizing-bar-sm);
       .tcn-th,
       .tcn-td {
         border-top: 1px solid var(--ergo-grey-light);
@@ -1150,7 +1239,7 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-tr {
-    height: var(--bar-sm);
+    height: var(--ergo-sizing-bar-sm);
     align-content: center;
   }
 
@@ -1209,14 +1298,19 @@ const n = `@layer tcn-theme {
     --mat: var(--material);
     --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
 
-    font-size: 12px;
+    font-size: var(--ergo-text-size-input);
     border: 1px solid var(--ergo-grey);
     box-sizing: border-box;
-    min-height: var(--action-md);
-    border-radius: var(--shape-radius-medium);
+    min-height: var(--ergo-sizing-action-md);
+    border-radius: var(--ergo-shape-radius-medium);
     padding-inline: 4px;
   }
 
+  .tcn-radio-label,
+  .tcn-select-selected-label {
+    font-size: var(--ergo-text-size-input);
+  }
+
   .tcn-control[data-is-disabled="false"]:hover {
     background: var(--act-raised);
   }
@@ -1236,12 +1330,12 @@ const n = `@layer tcn-theme {
 
   .tcn-control[data-is-disabled="true"] {
     cursor: not-allowed;
-    background: var(--material-disabled);
-    color: var(--on-material-disabled);
+    background: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
   }
 
   .tcn-control[data-is-disabled="true"]::placeholder {
-    color: var(--on-material-disabled);
+    color: var(--ergo-text-color-disabled-outline);
   }
 
   .tcn-control {
@@ -1291,7 +1385,7 @@ const n = `@layer tcn-theme {
   }
 
   .tcn-control-set {
-    border-radius: var(--shape-radius-medium);
+    border-radius: var(--ergo-shape-radius-medium);
 
     &:focus-within {
       outline: 2px solid var(--ergo-primary);
@@ -1302,7 +1396,7 @@ const n = `@layer tcn-theme {
       z-index: 1;
       border-radius: 0;
       height: auto;
-      min-height: var(--action-md);
+      min-height: var(--ergo-sizing-action-md);
       padding-block: 0;
       &:focus,
       &:focus-visible {
@@ -1312,8 +1406,8 @@ const n = `@layer tcn-theme {
     }
 
     .tcn-control-set-item:first-child {
-      border-top-left-radius: var(--shape-radius-medium);
-      border-bottom-left-radius: var(--shape-radius-medium);
+      border-top-left-radius: var(--ergo-shape-radius-medium);
+      border-bottom-left-radius: var(--ergo-shape-radius-medium);
     }
 
     .tcn-control-set-item:not(:last-child) {
@@ -1321,8 +1415,8 @@ const n = `@layer tcn-theme {
     }
 
     .tcn-control-set-item:last-child {
-      border-top-right-radius: var(--shape-radius-medium);
-      border-bottom-right-radius: var(--shape-radius-medium);
+      border-top-right-radius: var(--ergo-shape-radius-medium);
+      border-bottom-right-radius: var(--ergo-shape-radius-medium);
     }
 
     .tcn-select,
@@ -1330,8 +1424,8 @@ const n = `@layer tcn-theme {
     .tcn-button[data-hierarchy] {
       border: 1px solid var(--ergo-grey);
       height: auto;
-      min-height: var(--action-md);
-      min-width: var(--action-md);
+      min-height: var(--ergo-sizing-action-md);
+      min-width: var(--ergo-sizing-action-md);
       box-sizing: border-box;
       &:hover,
       &[data-hover] {
@@ -1339,6 +1433,11 @@ const n = `@layer tcn-theme {
       }
     }
 
+    .tcn-button.tcn-select,
+    .tcn-button[data-hierarchy].tcn-select {
+      border-color: var(--ergo-grey);
+    }
+
     .tcn-select:focus-visible,
     .tcn-button:focus-visible,
     .tcn-button[data-hierarchy]:focus-visible {
@@ -1370,7 +1469,7 @@ const n = `@layer tcn-theme {
 
     &[data-is-disabled="true"] {
       cursor: not-allowed;
-      border-color: var(--material-disabled);
+      border-color: var(--ergo-material-disabled-outline);
     }
 
     &[data-checked="true"] {
@@ -1409,14 +1508,75 @@ const n = `@layer tcn-theme {
   .tcn-date-picker-year-selector,
   .tcn-radio,
   .tcn-date-picker-input,
+  .tcn-mobile-date-picker,
+  .tcn-mobile-date-picker-year-selector,
   .tcn-suggestion-list-search-input,
   .tcn-suggestion-list {
     --accent-color: var(--ergo-primary);
   }
+
+  /* Datum/Tokens */
+  .tcn-chip {
+    --action: var(--ergo-primary);
+    --accent-color: var(--ergo-primary);
+  }
+
+  .tcn-datum[data-emphasis="normal"] {
+    --datum-font-color: var(--on-material);
+  }
+
+  .tcn-datum[data-emphasis="strong"] {
+    --datum-font-weight: 700;
+  }
+
+  .tcn-datum[data-emphasis="faint"] {
+    --datum-font-color: color-mix(in srgb, var(--on-material), transparent 12%);
+  }
+
+  .tcn-datum[data-severity="dangerous"] {
+    --datum-font-color: var(--ergo-status-red);
+  }
+
+  .tcn-datum[data-severity="cautious"] {
+    --datum-font-color: var(--ergo-status-yellow);
+  }
+
+  .tcn-datum[data-severity="suggested"] {
+    --datum-font-color: var(--ergo-status-blue);
+  }
+
+  .tcn-datum[data-severity="encouraged"] {
+    --datum-font-color: var(--ergo-status-green);
+  }
+
+  .tcn-key {
+    --accent-color: var(--action);
+    font-size: 14px;
+    color: var(--datum-font-color);
+    font-weight: var(--datum-font-weight, 400);
+  }
+
+  .tcn-value {
+    font-size: 12px;
+
+    color: var(--datum-font-color);
+    font-weight: var(--datum-font-weight, 400);
+  }
+
+  .tcn-term > .tcn-key,
+  .tcn-term > .tcn-value {
+    max-width: 50%;
+  }
+
+  .tcn-value {
+    :where(.tcn-chip) {
+      --action: var(--ergo-accent-blue);
+      --accent-color: var(--ergo-accent-blue);
+    }
+  }
 }
-`, r = new CSSStyleSheet();
-r.replaceSync(n);
+`, i = n([r, a, e]);
 export {
-  r as ergoStyleSheet
+  i as ergoStyleSheet
 };
 //# sourceMappingURL=ergo_theme.js.map