@tcn/ui 0.17.0 → 0.18.1

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

@@ -1,504 +1,16 @@
 @layer tcn-theme {
-  /* ===== CSS VARIABLES ===== */
+  /* ===== DIVIDER ===== */
 
-  .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);
-    --on-material: var(--ergo-accent-blue);
-  }
-
-  /* ===== Actions ===== */
-
-  .tcn-interactive {
-    cursor: pointer;
-    user-select: none;
-    transition:
-      transform 0.1s,
-      background 0.1s,
-      color 0.1s;
-
-    --ink: var(--on-material);
-    --act: var(--action);
-    --mat: var(--material);
-
-    --act-down: color-mix(in srgb, var(--mat), black 12%);
-    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
-    --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);
-    --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);
-
-    background: var(--mat);
-    color: var(--ink);
-    transition:
-      background 0.1s,
-      color 0.1s;
-
-    &:focus-visible,
-    &[data-focus-visible] {
-      background: var(--act-focus);
-      outline: 2px solid var(--ergo-primary);
-      outline-offset: 2px;
-    }
-
-    &:hover,
-    &[data-hover] {
-      background: var(--act-raised);
-    }
-
-    &:active,
-    &[data-active] {
-      background: var(--act-down);
-    }
-
-    &[data-is-disabled="true"] {
-      pointer-events: none;
-    }
-  }
-
-  /* ===== Base Button ===== 
-  * Shared between Button and Toggle.
-  * Primarily manages button dimensions and sizing ratios.
-  */
-  .tcn-base-button {
-    --btn-size-base: 26px;
-    --btn-pad-base: 12px;
-
-    --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 */
-    --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(--ergo-shape-radius-medium);
-    min-height: var(--btn-size);
-    padding: var(--padding-small) var(--btn-pad);
-
-    &[data-size="sm"] {
-      --btn-step: -1;
-    }
-    &[data-size="md"] {
-      --btn-step: 0;
-    }
-    &[data-size="lg"] {
-      --btn-step: 1;
-    }
-
-    &[data-is-utility="true"] {
-      height: auto;
-      width: auto;
-      min-width: var(--btn-size);
-      padding: 0;
-
-      /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset */
-      --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)));
-      }
-    }
-  }
-
-  /* ===== Button ===== 
-  * Manages Hierarchy and Severity.
-  */
-  .tcn-button {
-    --btn-primary: var(--action);
-    --btn-on-primary: var(--on-action);
-    --btn-variant: var(--on-material);
-
-    &[data-severity="dangerous"] {
-      --btn-primary: var(--action-severity-dangerous);
-      --btn-variant: var(--ergo-status-red-dark);
-    }
-    &[data-severity="cautious"] {
-      --btn-primary: var(--action-severity-cautious);
-      --btn-on-primary: var(--ergo-accent-blue);
-      --btn-variant: var(--ergo-status-yellow-dark);
-    }
-    &[data-severity="suggested"] {
-      --btn-primary: var(--action-severity-suggested);
-      --btn-variant: var(--ergo-status-blue-dark);
-    }
-    &[data-severity="encouraged"] {
-      --btn-primary: var(--action-severity-encouraged);
-      --btn-variant: var(--ergo-status-green-dark);
-    }
-
-    &[data-hierarchy="primary"] {
-      --act: var(--ergo-white);
-      --ink: var(--tcn-button-text-color, var(--btn-on-primary));
-      --mat: var(--tcn-button-color, var(--btn-primary));
-      &[data-is-disabled="true"] {
-        --ink: var(--ergo-white);
-        --mat: var(--ergo-grey-light);
-      }
-    }
-
-    &[data-hierarchy="secondary"],
-    &[data-hierarchy="tertiary"] {
-      --act: var(--tcn-button-color, var(--btn-variant));
-      --ink: var(--tcn-button-color, var(--btn-variant));
-      &[data-is-disabled="true"] {
-        --ink: var(--ergo-grey-light);
-      }
-    }
-
-    /* Decorations */
-    &[data-hierarchy="tertiary"]:hover {
-      text-decoration: underline;
-      text-decoration-color: var(--ink);
-      text-decoration-thickness: 1px;
-      text-underline-offset: 4px;
-    }
-
-    &[data-hierarchy="tertiary"] {
-      border: 1px solid transparent;
-    }
-
-    &[data-hierarchy="secondary"] {
-      border: 1px solid var(--ink);
-    }
-
-    &[data-hierarchy="primary"] {
-      border: 1px solid var(--mat);
-    }
-
-    transition:
-      box-shadow 0.1s,
-      transform 0.1s;
-
-    &:hover,
-    &[data-hover] {
-      transform: translateY(-1px);
-      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
-
-      /* Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles */
-      :not(.tcn-select) {
-        &::before,
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          right: 0;
-          height: 4px;
-        }
-
-        &::before {
-          top: -2px;
-        }
-
-        &::after {
-          bottom: -2px;
-        }
-      }
-    }
-
-    &:active,
-    &[data-active] {
-      transform: translateY(1px);
-      box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);
-    }
-  }
-
-  /* @deprecated - use Button with utility prop instead */
-  .tcn-slim-button {
-    height: auto;
-    width: auto;
-    padding: 0;
-
-    &[data-size="sm"] {
-      min-height: 12px;
-      min-width: 12px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 10px;
-        min-width: 10px;
-      }
-    }
-    &[data-size="md"] {
-      min-height: 18px;
-      min-width: 18px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 14px;
-        min-width: 14px;
-      }
-    }
-
-    &[data-size="lg"] {
-      min-height: 24px;
-      min-width: 24px;
-      padding: 0;
-      .tcn-icon {
-        min-height: 20px;
-        min-width: 20px;
-      }
-    }
-  }
-
-  .tcn-button[data-size].tcn-select {
-    padding-inline-end: 26px;
-  }
-
-  /* Toggle */
-  .tcn-toggle {
-    --tgl-false: var(--ergo-accent-blue);
-    --tgl-true: var(--ergo-accent-blue);
-    --on-tgl-true: var(--ergo-white);
-
-    --ink: var(--tcn-button-color, var(--tgl-false));
-    --act: var(--tcn-button-color, var(--tgl-false));
-    &[data-is-disabled="true"] {
-      --ink: var(--ergo-grey-light);
-    }
-    &[data-is-selected="true"] {
-      --mat: var(--tcn-button-color, var(--tgl-true));
-      --ink: var(--tcn-button-text-color, var(--ergo-white));
-      --act: var(--ergo-white);
-      &[data-is-disabled="true"] {
-        --ink: var(--ergo-white);
-        --mat: var(--ergo-grey-light);
-      }
-    }
-  }
-
-  .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 {
-      transform: none;
-    }
-
-    .tcn-button-group-button {
-      border-radius: 0;
-    }
-    .tcn-button-group-button:first-child {
-      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-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;
-    }
-    .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);
-    }
-  }
-
-  .tcn-select-group {
-    .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(--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(--ergo-material-disabled-outline);
-      color: white;
-      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(--ergo-shape-radius-medium);
-      border-bottom-left-radius: var(--ergo-shape-radius-medium);
-    }
-    .tcn-select-group-option:last-child {
-      border-top-right-radius: var(--ergo-shape-radius-medium);
-      border-bottom-right-radius: var(--ergo-shape-radius-medium);
-    }
-  }
-
-  /* ===== Tabs ===== */
-  .tcn-tabs-bar {
-    .tcn-tabs-list {
-      .tcn-tab-item {
-        min-height: 24px;
-        padding: 0px var(--padding-medium);
-        text-decoration: none;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  /* Default */
-  .tcn-tabs-bar[data-variant="default"] {
-    .tcn-tabs-list {
-      .tcn-tab-item {
-        box-sizing: border-box;
-        border: none;
-        padding: 0px var(--padding-medium);
-        border-radius: 0;
-      }
-      .tcn-tab-item[data-is-selected="true"] {
-        --mat: var(--tcn-button-color, var(--material));
-        --ink: var(--tcn-button-text-color, var(--ergo-primary));
-        --act: var(--ergo-primary);
-      }
-
-      .tcn-tab-item:focus-visible {
-        z-index: 2;
-      }
-      /* Hover Indicator */
-      .tcn-tab-item[data-is-selected="false"]:hover::after,
-      .tcn-tab-item[data-is-selected="false"]:focus-visible::after {
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0px;
-        height: 1px;
-        background: var(--ergo-accent-blue);
-        pointer-events: none;
-        width: 100%;
-        z-index: 3;
-      }
-
-      /* Indicator */
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: -1px;
-        left: 0;
-        min-height: 2px;
-        transform: translateX(var(--tabs-active-rectangle-position-x, 0));
-        width: var(--tabs-active-rectangle-width, 0);
-        background: var(--ergo-primary);
-        pointer-events: none;
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        transition:
-          transform 300ms ease-in-out,
-          width 300ms ease-in-out;
-        will-change: transform, width;
-        z-index: 2;
-      }
-    }
-
-    /* Rail */
-    &::before {
-      content: "";
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      background: var(--ergo-material-divider);
-      pointer-events: none;
-      z-index: 1;
-    }
-  }
-
-  /* Inline  */
-  .tcn-tabs-bar[data-variant="inline"] {
-    font-size: 12px;
-    min-width: min-content;
-    width: auto;
-    flex-grow: 0;
-    border-radius: 6px;
-    border: 1px solid var(--on-material);
-    padding: 2px;
-
-    .tcn-tabs-list {
-      height: 20px;
-      gap: var(--ergo-spacing-xs);
-      .tcn-tab-item {
-        border-radius: var(--ergo-shape-radius-medium);
-        min-height: 20px;
-      }
-    }
-  }
-
-  /* ===== MATERIAL ===== */
-
-  .material {
-    background-color: var(--material);
-    color: var(--on-material);
-  }
-
-  /* Divider: use material-line; emphasis variants for strong/faint */
+  /* Divider: use ergo-material-divider token; emphasis variants for strong/faint */
   .tcn-divider-line,
   .tcn-divider-line[data-emphasis="normal"] {
-    background: var(--material-line);
+    background: var(--ergo-material-divider, #aaa);
   }
   .tcn-divider-line[data-emphasis="strong"] {
-    background: color-mix(in srgb, var(--material-line) 80%, black 20%);
+    background: color-mix(in srgb, var(--ergo-material-divider, #aaa) 80%, black 20%);
   }
   .tcn-divider-line[data-emphasis="faint"] {
-    background: color-mix(in srgb, var(--material-line) 80%, white 20%);
+    background: color-mix(in srgb, var(--ergo-material-divider, #aaa) 80%, white 20%);
   }
 
   /* ===== SURFACES ===== */
@@ -656,6 +168,14 @@
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  :where(.tcn-frame) {
+    --resize-offset: -6px;
+  }
+
+  .tcn-frame > .tcn-scaffold {
+    overflow: hidden;
+  }
+
   /* PAGE: */
   .tcn-page {
     --divide-header: 0;
@@ -672,7 +192,6 @@
     box-shadow: 0px 4px 34px 0px #00000096;
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
-    overflow: hidden;
     border: 1px solid var(--ergo-material-border);
 
     :where(.tcn-header) {
@@ -695,7 +214,6 @@
     --pad-inline: var(--padding-large);
     box-shadow: 0px 4px 34px 0px #00000096;
     background-color: var(--background-color-primary);
-    overflow: hidden;
 
     :where(.tcn-header) {
       --material: var(--ergo-material-overlay);
@@ -718,7 +236,6 @@
     --pad-inline: var(--padding-large);
     border-radius: var(--ergo-shape-radius-medium);
     background-color: var(--background-color-primary);
-    overflow: hidden;
     border: 2px solid white;
 
     :where(.tcn-header) {
@@ -1177,228 +694,16 @@
     }
   }
 
-  /* ===== INPUTS ===== */
-  .tcn-entry,
-  .tcn-control {
-    --act: var(--action);
-    --mat: var(--material);
-    --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);
-
-    font-size: var(--ergo-text-size-input);
-    border: 1px solid var(--ergo-grey);
-    box-sizing: border-box;
-    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);
-  }
-
-  .tcn-control:focus-within {
-    outline: 2px solid var(--ergo-primary);
-    outline-offset: 2px;
-  }
-
-  .tcn-control:focus {
-    border: 1px solid var(--act);
-  }
-
-  .tcn-control::placeholder {
-    color: var(--ergo-grey);
-  }
-
-  .tcn-control[data-is-disabled="true"] {
-    cursor: not-allowed;
-    background: var(--ergo-material-disabled-outline);
-    color: var(--ergo-text-color-disabled-outline);
-  }
-
-  .tcn-control[data-is-disabled="true"]::placeholder {
-    color: var(--ergo-text-color-disabled-outline);
-  }
-
-  .tcn-control {
-    display: flex;
-    justify-content: center;
-    gap: var(--gap-small);
-  }
-
-  .tcn-control-row {
-    min-height: 22px;
-    height: auto;
-    align-items: center;
-    gap: var(--gap-small);
-    padding-block: 2px;
-  }
-
-  .tcn-control-row > .tcn-icon {
-    color: var(--ergo-grey);
-  }
-
-  .tcn-control .tcn-entry {
-    border: none;
-    background: transparent;
-    padding: 0;
-    min-height: unset;
-    border-radius: 0;
-    height: 100%;
-    flex-grow: 1;
-
-    &:hover,
-    &:active,
-    &:focus-visible,
-    &:focus {
-      outline: none;
-      border: none;
-      background: transparent;
-    }
-  }
-
-  .tcn-input {
-    height: auto;
-  }
+  /* ===== TYPOGRAPHY ===== */
 
-  .tcn-textarea,
-  .tcn-input {
-    cursor: text;
-  }
-
-  .tcn-control-set {
-    border-radius: var(--ergo-shape-radius-medium);
-
-    &:focus-within {
-      outline: 2px solid var(--ergo-primary);
-      outline-offset: 2px;
-    }
-
-    .tcn-control-set-item {
-      z-index: 1;
-      border-radius: 0;
-      height: auto;
-      min-height: var(--ergo-sizing-action-md);
-      padding-block: 0;
-      &:focus,
-      &:focus-visible {
-        z-index: 3;
-        outline: none;
-      }
-    }
-
-    .tcn-control-set-item:first-child {
-      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) {
-      margin-right: -1px;
-    }
-
-    .tcn-control-set-item:last-child {
-      border-top-right-radius: var(--ergo-shape-radius-medium);
-      border-bottom-right-radius: var(--ergo-shape-radius-medium);
-    }
-
-    .tcn-select,
-    .tcn-button,
-    .tcn-button[data-hierarchy] {
-      border: 1px solid var(--ergo-grey);
-      height: auto;
-      min-height: var(--ergo-sizing-action-md);
-      min-width: var(--ergo-sizing-action-md);
-      box-sizing: border-box;
-      &:hover,
-      &[data-hover] {
-        transform: none;
-      }
-    }
-
-    .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 {
-      border-color: var(--ergo-primary);
-    }
-  }
-
-  .tcn-slider[data-is-disabled="true"] {
-    &::-webkit-slider-runnable-track {
-      background: var(--ergo-grey-light);
-    }
-
-    &::-webkit-slider-thumb {
-      background-color: var(--ergo-white);
-      border: 1px solid var(--ergo-grey-light);
-    }
-  }
-
-  .tcn-checkbox {
-    --checkbox-color: var(--action, var(--ergo-primary));
-
-    border-color: var(--checkbox-color);
-
-    &:focus-visible,
-    &:focus {
-      outline: 2px solid var(--checkbox-color);
-      outline-offset: 2px;
-    }
-
-    &[data-is-disabled="true"] {
-      cursor: not-allowed;
-      border-color: var(--ergo-material-disabled-outline);
-    }
-
-    &[data-checked="true"] {
-      background-color: var(--checkbox-color);
-    }
-
-    &[data-checked="true"][data-is-disabled="true"] {
-      background-color: var(--ergo-grey-light);
-    }
-
-    &[data-checked="false"][data-is-disabled="true"] {
-      background: var(--material);
-      border-color: var(--ergo-grey-light);
-      color: var(--ergo-grey-light);
-    }
-
-    &[data-is-disabled="false"]:active {
-      background-color: var(--checkbox-color);
-    }
-  }
-
-  .tcn-switch-wrapper[data-focused="true"][data-is-checked="false"],
-  .tcn-switch-wrapper[data-focused="true"][data-is-checked="true"] {
-    outline: 2px solid var(--ergo-primary);
-    outline-offset: 2px;
-  }
-
-  /* Quick fix to use some of the default module styles.*/
-  .tcn-input,
-  .tcn-select,
-  .tcn-slider,
-  .tcn-textarea,
-  .tcn-checkbox,
-  .tcn-switch-wrapper,
-  .tcn-date-picker,
-  .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);
+  .tcn-body-text[data-emphasis="faint"],
+  .tcn-headline[data-emphasis="faint"],
+  .tcn-subheadline[data-emphasis="faint"],
+  .tcn-callout[data-emphasis="faint"],
+  .tcn-footnote[data-emphasis="faint"],
+  .tcn-caption[data-emphasis="faint"],
+  .tcn-title[data-emphasis="faint"] {
+    color: color-mix(in srgb, var(--font-color) 70%, transparent);
   }
 
   /* Datum/Tokens */