@tcn/ui 0.3.1 → 0.3.2

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

@@ -1,629 +1,587 @@
-/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-legend {
-  all: unset;
-  display: block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  color: inherit;
+@layer tcn-reset {
+  * {
+    position: relative;
+    box-sizing: border-box;
+  }
 }
 
-/* ===== 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;
-
-  --padding-small: 4px;
-  --padding-medium: 8px;
-  --padding-large: 16px;
-
-  /* Status Colors */
-  --status-color-disabled: #7f7f7f;
-  --status-color-info: #008cff;
-  --status-color-warning: #ffff00;
-  --status-color-positive: #00ff00;
-  --status-color-error: #ff0000;
-
-  --async-color-initial: #c0c0c0;
-  --async-color-pending: #008cff;
-  --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;
-
-  --secondary-color-faint: #c0c0c0;
-  --secondary-color: #008cff;
-  --secondary-color-strong: #008cff;
-
-  --tertiary-color-faint: #c0c0c0;
-  --tertiary-color: #008cff;
-  --tertiary-color-strong: #008cff;
-
-  --quaternary-color-faint: #c0c0c0;
-  --quaternary-color: #008cff;
-  --quaternary-color-strong: #008cff;
-
-  --background-color-primary: #ffffff;
-  --background-color-secondary: #ffffff;
-  --background-color-tertiary: #ffffff;
-  --background-color-quaternary: #ffffff;
-
-  --foreground-color-primary: #aaa;
-  --foreground-color-secondary: #222222;
-  --foreground-color-tertiary: #222222;
-  --foreground-color-quaternary: #222222;
-
-  --material-disabled: #d3d3d3;
-  --material-secondary-dark: 197 29.1% 40.4%;
-  --material-tan: 33, 22%, 84%;
-
-  /* Default Material */
-  --action: 23, 65%, 49%;
-  --on-action: 0, 0%, 100%;
-  --material: 0, 0%, 100%;
-  --on-material: 213, 35.6%, 34.7%;
-
-  --action-dangerous: 0, 90%, 50%;
-  --action-cautious: 53, 90%, 60%;
-  --action-neutral: var(--action);
-  --action-suggested: 202, 90%, 40%;
-  --action-encouraged: 120, 90%, 40%;
-}
+@layer tcn-theme {
+  /* ===== 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;
+
+    --padding-small: 4px;
+    --padding-medium: 8px;
+    --padding-large: 16px;
+
+    /* Status Colors */
+    --status-color-disabled: #7f7f7f;
+    --status-color-info: #008cff;
+    --status-color-warning: #ffff00;
+    --status-color-positive: #00ff00;
+    --status-color-error: #ff0000;
+
+    --async-color-initial: #c0c0c0;
+    --async-color-pending: #008cff;
+    --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;
+
+    --secondary-color-faint: #c0c0c0;
+    --secondary-color: #008cff;
+    --secondary-color-strong: #008cff;
+
+    --tertiary-color-faint: #c0c0c0;
+    --tertiary-color: #008cff;
+    --tertiary-color-strong: #008cff;
+
+    --quaternary-color-faint: #c0c0c0;
+    --quaternary-color: #008cff;
+    --quaternary-color-strong: #008cff;
+
+    --background-color-primary: #ffffff;
+    --background-color-secondary: #ffffff;
+    --background-color-tertiary: #ffffff;
+    --background-color-quaternary: #ffffff;
+
+    --foreground-color-primary: #aaa;
+    --foreground-color-secondary: #222222;
+    --foreground-color-tertiary: #222222;
+    --foreground-color-quaternary: #222222;
+
+    --material-disabled: #d3d3d3;
+    --material-secondary-dark: 197 29.1% 40.4%;
+    --material-tan: 33, 22%, 84%;
+
+    /* Default Material */
+    --action: 23, 65%, 49%;
+    --on-action: 0, 0%, 100%;
+    --material: 0, 0%, 100%;
+    --on-material: 213, 35.6%, 34.7%;
+
+    --action-dangerous: 0, 90%, 50%;
+    --action-cautious: 53, 90%, 60%;
+    --on-action-cautious: 213, 35.6%, 34.7%;
+    --action-neutral: var(--action);
+    --action-suggested: 202, 90%, 40%;
+    --action-encouraged: 120, 90%, 40%;
+  }
 
-* {
-  position: relative;
-  box-sizing: border-box;
-}
-/* ===== Actions ===== */
-
-.tcn-interactive {
-  cursor: pointer;
-  user-select: none;
-  transition:
-    transform 0.1s,
-    background 0.1s,
-    color 0.1s;
-
-  --act: hsl(var(--interactive-color, var(--action)));
-  --on-act: hsl(var(--on-action));
-  /* Could use hsl here if we made three color variables for each of the hsl values */
-  --act-down: color-mix(in srgb, var(--act), black 8%);
-  --act-raised: color-mix(in srgb, var(--act), white 8%);
-  --act-faint: hsla(var(--action), 0.2);
-  --on-mat: hsl(var(--on-material));
-  --on-mat-faint: hsla(var(--on-material), 0.2);
-  --mat: hsl(var(--material));
-  --mat-down: color-mix(in srgb, var(--mat), black 8%);
-  --mat-raised: color-mix(in srgb, var(--mat), white 8%);
-}
+  /* ===== Actions ===== */
+
+  .tcn-interactive {
+    cursor: pointer;
+    user-select: none;
+    transition:
+      transform 0.1s,
+      background 0.1s,
+      color 0.1s;
+
+    --act: hsl(var(--tcn-interactive-color, var(--action)));
+    --on-act: hsl(var(--on-action));
+    /* Could use hsl here if we made three color variables for each of the hsl values */
+    --act-down: color-mix(in srgb, var(--act), black 8%);
+    --act-raised: color-mix(in srgb, var(--act), white 8%);
+    --act-faint: hsla(var(--action), 0.2);
+    --on-mat: hsl(var(--on-material));
+    --on-mat-faint: hsla(var(--on-material), 0.2);
+    --mat: hsl(var(--material));
+    --mat-down: color-mix(in srgb, var(--mat), black 8%);
+    --mat-raised: color-mix(in srgb, var(--mat), white 8%);
+  }
 
-.tcn-interactive[data-is-disabled="true"] {
-  pointer-events: none;
-  cursor: not-allowed;
-}
+  .tcn-interactive[data-is-disabled="true"] {
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 
-.tcn-interactive[data-hierarchy="primary"] {
-  background: var(--act);
-  color: var(--on-act);
-  border: 1px solid var(--act);
-}
+  .tcn-interactive[data-hierarchy="primary"] {
+    background: var(--act);
+    color: var(--on-act);
+    border: 1px solid var(--act);
+  }
 
-.tcn-interactive[data-hierarchy="primary"]:focus-visible {
-  outline: 2px dashed var(--act);
-}
+  .tcn-interactive[data-hierarchy="primary"]:focus-visible {
+    outline: 2px dashed var(--act);
+  }
 
-.tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
-  background: var(--material-disabled);
-  color: white;
-  border: 1px solid var(--material-disabled);
-}
+  .tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
+    background: var(--material-disabled);
+    color: white;
+    border: 1px solid var(--material-disabled);
+  }
 
-.tcn-interactive[data-hierarchy="primary"]:hover {
-  background: var(--act-raised);
-}
+  .tcn-interactive[data-hierarchy="primary"]:hover {
+    background: var(--act-raised);
+  }
 
-.tcn-interactive[data-hierarchy="primary"]:active {
-  background: var(--act-down);
-}
+  .tcn-interactive[data-hierarchy="primary"]:active {
+    background: var(--act-down);
+  }
 
-.tcn-interactive[data-hierarchy="secondary"] {
-  background: transparent;
-  color: var(--on-mat);
-  border: 1px solid var(--on-mat);
-}
+  .tcn-interactive[data-hierarchy="secondary"] {
+    background: transparent;
+    color: var(--on-mat);
+    border: 1px solid var(--on-mat);
+  }
 
-.tcn-interactive[data-hierarchy="secondary"]:focus-visible {
-  outline: 2px dashed var(--on-mat);
-}
+  .tcn-interactive[data-hierarchy="secondary"]:focus-visible {
+    outline: 2px dashed var(--on-mat);
+  }
 
-.tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
-  color: var(--material-disabled);
-  border: 1px solid var(--material-disabled);
-}
+  .tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
+    color: var(--material-disabled);
+    border: 1px solid var(--material-disabled);
+  }
 
-.tcn-interactive[data-hierarchy="secondary"]:hover {
-  background: var(--on-mat-faint);
-}
+  .tcn-interactive[data-hierarchy="secondary"]:hover {
+    background: var(--on-mat-faint);
+  }
 
-.tcn-interactive[data-hierarchy="secondary"]:active {
-  background: var(--mat-down);
-}
+  .tcn-interactive[data-hierarchy="secondary"]:active {
+    background: var(--mat-down);
+  }
 
-.tcn-interactive[data-hierarchy="tertiary"] {
-  background: transparent;
-  color: var(--on-mat);
-  border: 1px solid transparent;
-}
+  .tcn-interactive[data-hierarchy="tertiary"] {
+    background: transparent;
+    color: var(--on-mat);
+    border: 1px solid transparent;
+  }
 
-.tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
-  outline: 2px dashed var(--on-mat);
-}
+  .tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
+    outline: 2px dashed var(--on-mat);
+  }
 
-.tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  color: var(--material-disabled);
-}
+  .tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
+    color: var(--material-disabled);
+  }
 
-.tcn-interactive[data-hierarchy="tertiary"]:hover {
-  text-decoration: underline;
-  text-decoration-color: var(--on-mat);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 4px;
-  color: var(--on-mat);
-  background: var(--on-mat-faint);
-}
+  .tcn-interactive[data-hierarchy="tertiary"]:hover {
+    text-decoration: underline;
+    text-decoration-color: var(--on-mat);
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+    color: var(--on-mat);
+    background: var(--on-mat-faint);
+  }
 
-.tcn-interactive[data-hierarchy="tertiary"]:active {
-  background: var(--mat-down);
-}
+  .tcn-interactive[data-hierarchy="tertiary"]:active {
+    background: var(--mat-down);
+  }
 
-/* Button */
+  /* Button */
 
-.tcn-base-button {
-  --action: var(var(--button-color), var(--action));
-}
+  .tcn-base-button {
+    --action: var(var(--button-color), var(--action));
+  }
 
-.tcn-base-button[data-severity="dangerous"] {
-  --action: var(--action-dangerous);
-}
+  .tcn-base-button[data-severity="dangerous"] {
+    --action: var(--action-dangerous);
+    --on-material: var(--action-dangerous);
+  }
 
-.tcn-base-button[data-severity="cautious"] {
-  --action: var(--action-cautious);
-  --on-action: var(--on-material);
-}
+  .tcn-base-button[data-severity="cautious"] {
+    --action: var(--action-cautious);
+    --on-action: var(--on-action-cautious);
+    --on-material: var(--action-cautious);
+  }
 
-/* .tcn-base-button[data-severity="neutral"] {
+  /* .tcn-base-button[data-severity="neutral"] {
   --action: var(--action-neutral);
 } */
 
-.tcn-base-button[data-severity="suggested"] {
-  --action: var(--action-suggested);
-}
-
-.tcn-base-button[data-severity="encouraged"] {
-  --action: var(--action-encouraged);
-}
-
-.tcn-button {
-  border-radius: 4px;
-}
-
-.tcn-button[data-size="sm"] {
-  padding: 0px 8px;
-  min-height: 22px;
-}
-
-.tcn-button[data-size="md"] {
-  padding: 0px 12px;
-  min-height: 26px;
-}
-
-.tcn-button[data-size="lg"] {
-  padding: 0px 16px;
-  min-height: 32px;
-}
-
-.tcn-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-}
-
-.tcn-button:active {
-  transform: translateY(1px);
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-}
-
-.tcn-slim-button {
-  height: auto;
-  width: auto;
-  padding: 0;
-}
-
-.tcn-slim-button[data-size="sm"] {
-  min-height: 12px;
-  min-width: 12px;
-  padding: 0;
-  .tcn-icon {
-    min-height: 10px;
-    min-width: 10px;
+  .tcn-base-button[data-severity="suggested"] {
+    --action: var(--action-suggested);
+    --on-material: var(--action-suggested);
   }
-}
 
-.tcn-slim-button[data-size="md"] {
-  min-height: 18px;
-  min-width: 18px;
-  padding: 0;
-  .tcn-icon {
-    min-height: 14px;
-    min-width: 14px;
+  .tcn-base-button[data-severity="encouraged"] {
+    --action: var(--action-encouraged);
+    --on-material: var(--action-encouraged);
   }
-}
 
-.tcn-slim-button[data-size="lg"] {
-  min-height: 24px;
-  min-width: 24px;
-  padding: 0;
-  .tcn-icon {
-    min-height: 20px;
-    min-width: 20px;
+  .tcn-button {
+    border-radius: 4px;
   }
-}
-
-.material {
-  background-color: hsl(var(--material));
-  color: hsl(var(--on-material));
-}
 
-/* ===== SURFACES ===== */
-.tcn-draggable[data-is-draggable="true"] {
-  .tcn-drag-handle {
-    cursor: move;
+  .tcn-button[data-size="sm"] {
+    padding: 0px 8px;
+    min-height: 22px;
   }
-}
-
-.tcn-frame[data-is-veil="true"] {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.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);
-}
 
-.tcn-list {
-  gap: var(--gap-medium);
-  .tcn-item {
-    height: 24px;
-    padding: 0px var(--padding-medium);
-    border-radius: var(--shape-radius-medium);
+  .tcn-button[data-size="md"] {
+    padding: 0px 12px;
+    min-height: 26px;
   }
-}
 
-/* 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);
+  .tcn-button[data-size="lg"] {
+    padding: 0px 16px;
+    min-height: 32px;
   }
 
-  /* 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);
+  .tcn-button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
   }
 
-  /* 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);
+  .tcn-button:active {
+    transform: translateY(1px);
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   }
 
-  :where(.tcn-utility-bar) {
-    min-height: var(--scaffold-utility-bar-size);
-    padding: 0 var(--scaffold-v-inset);
-    gap: var(--gap-medium);
+  .tcn-slim-button {
+    height: auto;
+    width: auto;
+    padding: 0;
   }
 
-  :where(.tcn-body) {
-    padding: 0 var(--scaffold-v-inset);
-    gap: var(--gap-medium);
+  .tcn-slim-button[data-size="sm"] {
+    min-height: 12px;
+    min-width: 12px;
+    padding: 0;
+    .tcn-icon {
+      min-height: 10px;
+      min-width: 10px;
+    }
   }
 
-  :where(.tcn-footer) {
-    gap: var(--gap-medium);
-    min-height: var(--scaffold-footer-size);
-    padding: 0 var(--scaffold-v-inset);
+  .tcn-slim-button[data-size="md"] {
+    min-height: 18px;
+    min-width: 18px;
+    padding: 0;
+    .tcn-icon {
+      min-height: 14px;
+      min-width: 14px;
+    }
   }
-}
 
-.tcn-frame-veil[data-is-veil="true"] {
-  background-color: rgba(0, 0, 0, 0.5);
-}
+  .tcn-slim-button[data-size="lg"] {
+    min-height: 24px;
+    min-width: 24px;
+    padding: 0;
+    .tcn-icon {
+      min-height: 20px;
+      min-width: 20px;
+    }
+  }
 
-/* MODAL: */
-.tcn-modal {
-  --divide-header: 0;
+  .tcn-button[data-size].tcn-select {
+    padding-inline-end: 26px;
+  }
 
-  :where(.tcn-scaffold) {
-    border-radius: var(--shape-radius-medium);
-    background-color: var(--background-color-primary);
-    overflow: hidden;
-    border: 1px solid var(--foreground-color-primary);
+  .tcn-button-group {
+    .tcn-button-group-button:hover,
+    .tcn-button-group-button:active {
+      transform: none;
+    }
+
+    .tcn-button-group-button {
+      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);
+    }
+    .tcn-button-group-button:last-child {
+      border-top-right-radius: var(--shape-radius-medium);
+      border-bottom-right-radius: var(--shape-radius-medium);
+    }
+    .tcn-button-group-button[data-hierarchy="tertiary"] {
+      border: 0;
+    }
+    .tcn-button-group-button[data-hierarchy="tertiary"]:not(:last-child) {
+      border-right: 1px solid var(--on-mat-faint);
+    }
+    .tcn-button-group-button[data-hierarchy="tertiary"]:not(:first-child) {
+      border-left: 1px solid var(--on-mat-faint);
+    }
+    .tcn-button-group-button[data-hierarchy="primary"]:not(:last-child) {
+      border-right: 1px solid var(--act-down);
+    }
+    .tcn-button-group-button[data-hierarchy="primary"]:not(:first-child) {
+      border-left: 1px solid var(--act-down);
+    }
   }
 
-  :where(.tcn-typography) {
-    color: inherit;
+  .tcn-select-group {
+    --action: var(--action-neutral);
+    .tcn-select-group-option:hover,
+    .tcn-select-group-option:active {
+      transform: none;
+    }
+
+    .tcn-select-group-option[data-hierarchy="secondary"] {
+      color: var(--act);
+      border-color: var(--act);
+    }
+
+    .tcn-select-group-option[data-hierarchy="secondary"]:hover {
+      background: var(--act-faint);
+    }
+
+    .tcn-select-group-option[data-hierarchy="secondary"]:active {
+      background: var(--act-down);
+      color: var(--on-act);
+    }
+
+    .tcn-select-group-option[data-hierarchy="secondary"][data-is-disabled="true"] {
+      color: var(--material-disabled);
+      border: 1px solid var(--material-disabled);
+    }
+
+    .tcn-select-group-option[data-hierarchy="primary"][data-is-disabled="true"] {
+      background: var(--material-disabled);
+      color: white;
+      border: 1px solid var(--material-disabled);
+    }
+
+    .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);
+    }
+    .tcn-select-group-option:last-child {
+      border-top-right-radius: var(--shape-radius-medium);
+      border-bottom-right-radius: var(--shape-radius-medium);
+    }
   }
 
-  :where(.tcn-header) {
-    --material: var(--material-secondary-dark);
-    --on-material: 0, 0%, 100%;
-    --action: var(--material-tan);
-    --on-action: 0, 0%, 100%;
+  .material {
     background-color: hsl(var(--material));
     color: hsl(var(--on-material));
   }
 
-  :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));
+  /* ===== SURFACES ===== */
+  .tcn-draggable[data-is-draggable="true"] {
+    .tcn-drag-handle {
+      cursor: move;
+    }
   }
-}
 
-/* WINDOW: */
-.tcn-window {
-  --divide-header: 0;
+  .tcn-frame[data-is-veil="true"] {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
-  :where(.tcn-scaffold) {
-    box-shadow: 0px 4px 34px 0px #00000096;
+  .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);
-    background-color: var(--background-color-primary);
-    overflow: hidden;
-    border: 2px solid white;
+    padding: var(--padding-medium);
   }
 
-  :where(.tcn-typography) {
-    color: inherit;
+  .tcn-list {
+    gap: var(--gap-medium);
+    .tcn-item {
+      height: 24px;
+      padding: 0px var(--padding-medium);
+      border-radius: var(--shape-radius-medium);
+    }
   }
 
-  :where(.tcn-header) {
-    --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));
+  /* 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);
+    }
   }
 
-  :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));
+  .tcn-frame-veil[data-is-veil="true"] {
+    background-color: rgba(0, 0, 0, 0.5);
   }
-}
 
-.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;
+  /* MODAL: */
+  .tcn-modal {
+    --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;
+    }
+
+    :where(.tcn-header) {
+      --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-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-typography) {
-    color: inherit;
+  /* WINDOW: */
+  .tcn-window {
+    --divide-header: 0;
+
+    :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;
+    }
+
+    :where(.tcn-typography) {
+      color: inherit;
+    }
+
+    :where(.tcn-header) {
+      --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-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-header) {
-    min-height: 32px;
-    --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));
+  .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;
+    }
+
+    :where(.tcn-typography) {
+      color: inherit;
+    }
+
+    :where(.tcn-header) {
+      min-height: 32px;
+      --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-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-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));
+  /* PANEL */
+  .tcn-panel {
+    background-color: var(--background-color-primary);
+    border-radius: var(--shape-radius-medium);
+    overflow: hidden;
   }
-}
-
-/* PANEL */
-.tcn-panel {
-  background-color: var(--background-color-primary);
-  border-radius: var(--shape-radius-medium);
-  overflow: hidden;
-}
 
-/* Card */
-.tcn-card {
-  --header-size: 32px;
-  --footer-size: 32px;
-  --utility-bar-size: 24px;
-  --divide-header: 0;
+  /* Card */
+  .tcn-card {
+    --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;
+    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: This should be a variable */
-    background-color: #ecf4fb;
-  }
+    :where(.tcn-header) {
+      /* TODO: This should be a variable */
+      background-color: #ecf4fb;
+    }
 
-  :where(.tcn-utility-bar) {
-    /* TODO: This should be a variable */
-    background-color: #ecf4fb;
+    :where(.tcn-utility-bar) {
+      /* TODO: This should be a variable */
+      background-color: #ecf4fb;
+    }
   }
 }