@tcn/ui 0.8.0 → 0.8.1

package/src/surfaces/pop_confirm/pop_confirm.stories.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Footer, Header, VBody } from '../../layouts/index.js';
+import { Footer, Header, Section, VBody } from '../../layouts/index.js';
 import { HStack } from '../../stacks/h_stack.js';
 import { PopConfirm as PopConfirmComponent } from './pop_confirm.js';
 import { BodyText, Title } from '../../typography/index.js';
@@ -52,7 +52,9 @@ export const DefaultPopConfirm = () => {
             <Title>Confirmation Title</Title>
           </Header>
           <VBody>
-            <BodyText>Are you sure you want to confirm this action?</BodyText>
+            <Section>
+              <BodyText>Are you sure you want to confirm this action?</BodyText>
+            </Section>
           </VBody>
           <Footer>
             <Spacer />

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

@@ -1,10 +1,3 @@
-@layer tcn-reset {
-  * {
-    position: relative;
-    box-sizing: border-box;
-  }
-}
-
 @layer tcn-theme {
   /* ===== CSS VARIABLES ===== */
   :root {
@@ -63,6 +56,13 @@
     --padding-medium: 8px;
     --padding-large: 16px;
 
+    /* Sizing */
+    --bar-xs: 16px;
+    --bar-sm: 24px;
+    --bar-md: 32px;
+    --bar-lg: 40px;
+    --bar-xl: 48px;
+
     /* Status Colors */
     --status-color-disabled: var(--ergo-grey-light);
     --status-color-info: var(--ergo-status-blue);
@@ -70,7 +70,7 @@
     --status-color-positive: var(--ergo-status-green);
     --status-color-error: var(--ergo-status-red);
 
-    --async-color-initial: var(--ergo-grey-main);
+    --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);
@@ -193,6 +193,7 @@
 
     --btn-pad-delta: 4px;
     --btn-size-delta: 4px;
+    --btn-font-size-delta: 2px;
     --btn-step: 1;
 
     /* Increase size and pad by 4px for each size "step" from medium */
@@ -223,6 +224,7 @@
       --util-ratio: 0.75;
       --btn-size-base: 18px;
 
+      font-size: calc(var(--font-size) + var(--btn-font-size-delta) * var(--btn-step));
       .tcn-icon {
         min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));
         min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));
@@ -606,19 +608,26 @@
   }
 
   /* Scaffold: */
+  .tcn-footer,
+  .tcn-header,
+  .tcn-utility-bar {
+    padding-inline: var(--pad-inline, var(--padding-medium));
+    gap: var(--gap-medium);
+  }
+
+  .tcn-utility-bar {
+    min-height: var(--bar-md);
+  }
+
+  .tcn-footer,
+  .tcn-header {
+    min-height: var(--bar-lg);
+  }
+
   .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);
-    }
+    --pad-inline: var(--padding-large);
 
     /* Border appears on body only when it follows header or utility-bar */
     :where(.tcn-header) + :where(.tcn-body),
@@ -633,25 +642,8 @@
         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) {
-      --section-tab-start: var(--scaffold-v-inset);
-
-      gap: var(--gap-medium);
-      .tcn-section {
-        --section-tab-start: var(--scaffold-v-inset);
-      }
-    }
-
-    :where(.tcn-footer) {
       gap: var(--gap-medium);
-      min-height: var(--scaffold-footer-size);
-      padding: 0 var(--scaffold-v-inset);
     }
   }
 
@@ -712,9 +704,10 @@
 
   .tcn-pop-confirm {
     --divide-header: 0;
-    --v-inset: var(--padding-medium);
 
     :where(.tcn-scaffold) {
+      --pad-inline: var(--padding-medium);
+
       box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);
       border-radius: var(--shape-radius-medium);
       background-color: var(--background-color-primary);
@@ -722,7 +715,7 @@
     }
 
     :where(.tcn-header) {
-      min-height: 32px;
+      min-height: var(--bar-md);
 
       --material: var(--ergo-secondary-dark);
       --on-material: var(--ergo-white);
@@ -750,9 +743,6 @@
 
   /* Card */
   .tcn-card {
-    --header-size: 32px;
-    --footer-size: 32px;
-    --utility-bar-size: 24px;
     --divide-header: 0;
 
     background-color: var(--background-color-primary);
@@ -761,7 +751,7 @@
     overflow: hidden;
 
     :where(.tcn-header) {
-      min-height: 32px;
+      min-height: var(--bar-md);
 
       --material: var(--ergo-secondary-light);
       --on-material: var(--ergo-accent-blue);
@@ -774,13 +764,17 @@
         color: inherit;
       }
     }
+
+    :where(.tcn-utility-bar) {
+      min-height: var(--bar-sm);
+    }
   }
 
   /* SECTION */
   .tcn-section {
     --max-section-depth: 4;
     --section-tab-width: 4px;
-    --section-tab-start: 8px;
+    --section-tab-start: var(--pad-inline, var(--padding-medium));
     --section-tab-depth: 0;
     --section-tab: calc(
       var(--section-tab-start) +
@@ -867,4 +861,141 @@
       border-bottom: var(--caret-triangle-base);
     }
   }
+
+  /* ===== TABLE ===== */
+  .tcn-table {
+    --table-pad-inline: var(--pad-inline, var(--padding-medium));
+
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-ink-primary);
+    --action: var(--ergo-accent-blue);
+    --on-action: var(--ergo-white);
+    background-color: var(--material);
+    color: var(--on-material);
+    border-collapse: separate;
+    display: block;
+  }
+
+  /* TODO: cleanup  - this needs merged with ui-table sticky logic/styles */
+  .tcn-table[data-is-sticky="true"] {
+    .tcn-tbody {
+      th:first-of-type {
+        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+
+      th:last-of-type {
+        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+    }
+    .tcn-thead {
+      th:first-of-type {
+        border-right: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+
+      th:last-of-type {
+        border-left: 1px solid color-mix(in srgb, var(--material) 80%, black);
+      }
+    }
+  }
+
+  .tcn-td {
+    text-align: start;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .tcn-thead {
+    /* Border for header row */
+    .tcn-tr {
+      height: var(--bar-md);
+      .tcn-th {
+        border-bottom: 1px solid var(--ergo-grey-light);
+      }
+      .tcn-th:not(:last-of-type):not(:nth-last-of-type(2)) {
+        border-right: 1px solid var(--ergo-grey);
+      }
+      .tcn-th:last-of-type {
+        border-left: 1px solid var(--ergo-grey);
+      }
+    }
+  }
+
+  .tcn-tfoot {
+    font-weight: bold;
+    /* Border for footer row */
+    .tcn-tr {
+      height: var(--bar-sm);
+      .tcn-th,
+      .tcn-td {
+        border-top: 1px solid var(--ergo-grey-light);
+      }
+    }
+  }
+
+  /* Header and footer - both are light blue  */
+  .tcn-thead,
+  .tcn-tfoot {
+    font-size: 14px;
+    --material: var(--ergo-secondary-light);
+    --on-material: var(--ergo-accent-blue);
+    --action: var(--ergo-secondary);
+    --on-action: var(--ergo-white);
+
+    background-color: var(--material);
+    color: var(--on-material);
+  }
+
+  .tcn-tr {
+    height: var(--bar-sm);
+    align-content: center;
+  }
+
+  .tcn-td,
+  .tcn-th {
+    padding-inline: var(--padding-medium);
+    vertical-align: middle;
+    text-align: start;
+    background: var(--material);
+  }
+
+  /* First column (header, body, footer): use context for pad inline or default 8px */
+  .tcn-table .tcn-tr > .tcn-th:first-child,
+  .tcn-table .tcn-tr > .tcn-td:first-child {
+    padding-inline-start: var(--table-pad-inline);
+  }
+
+  /* Last column (header, body, footer): use context for pad inline or default 8px */
+  .tcn-table .tcn-tr > .tcn-th:last-child,
+  .tcn-table .tcn-tr > .tcn-td:last-child {
+    padding-inline-end: var(--table-pad-inline);
+  }
+
+  .tcn-tbody {
+    font-size: 12px;
+    .tcn-tr:nth-of-type(even) {
+      --material: var(--ergo-accent-blue-light);
+    }
+    .tcn-tr:nth-of-type(odd) {
+      --material: var(--ergo-white);
+    }
+    .tcn-tr:hover {
+      --material: color-mix(in srgb, var(--ergo-accent-blue-light), var(--action) 12%);
+    }
+    .tcn-tr[data-is-selected="true"] {
+      --material: var(--ergo-secondary);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-accent-blue);
+    }
+
+    .tcn-tr {
+      --material: var(--bg-row);
+      --on-material: var(--ergo-accent-blue);
+      --action: var(--ergo-accent-blue);
+      --on-action: var(--ergo-white);
+      background-color: var(--material);
+      color: var(--on-material);
+    }
+  }
 }

package/dist/formatter-EIJCOSYU-D6nmx63h.js

@@ -1,6 +0,0 @@
-import { d as a, _ as i, r as m } from "./showcase-DK557szS.js";
-var t = i(m(), 1), f = (0, t.default)(2)(async (e, r) => e === !1 ? r : a(r));
-export {
-  f as formatter
-};
-//# sourceMappingURL=formatter-EIJCOSYU-D6nmx63h.js.map