@tcn/ui 0.17.0 → 0.18.1

package/src/themes/themes/ergo/ergo_theme.ts

@@ -1,7 +1,21 @@
 import { buildStyleSheet } from '../../build_stylesheet';
 import tokensCss from './tokens/theme_tokens.css?raw';
 import systemTokensCss from './tokens/system_tokens.css?raw';
+import baseCss from './parts/base.css?raw';
+import actionsCss from './parts/actions.css?raw';
+import inputsCss from './parts/inputs.css?raw';
+import formCss from './parts/form.css?raw';
+import navigationCss from './parts/navigation.css?raw';
 import css from './ergo_theme.css?raw';
 import '@fontsource/lato';
 
-export const ergoStyleSheet = buildStyleSheet([tokensCss, systemTokensCss, css]);
+export const ergoStyleSheet = buildStyleSheet([
+  tokensCss,
+  systemTokensCss,
+  baseCss,
+  actionsCss,
+  inputsCss,
+  formCss,
+  navigationCss,
+  css,
+]);

package/src/themes/themes/ergo/parts/actions.css

@@ -0,0 +1,287 @@
+@layer tcn-theme {
+  /* ===== 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);
+    }
+  }
+
+  .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);
+    }
+  }
+
+  /* TODO: move to inputs.css once that part file is extracted */
+  .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);
+    }
+  }
+}

package/src/themes/themes/ergo/parts/base.css

@@ -0,0 +1,62 @@
+@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);
+    --on-material: var(--ergo-accent-blue);
+  }
+
+  /* ===== Actions ===== */
+
+  .tcn-interactive {
+    --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%);
+
+    cursor: pointer;
+    user-select: none;
+    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;
+    }
+  }
+
+  /* ===== MATERIAL ===== */
+
+  .material {
+    background-color: var(--material);
+    color: var(--on-material);
+  }
+}

package/src/themes/themes/ergo/parts/form.css

@@ -0,0 +1,23 @@
+@layer tcn-theme {
+  /* ===== FIELD SET ===== */
+
+  .tcn-field-set {
+    gap: var(--gap-medium);
+
+    .tcn-field-set-legend {
+      padding-block: var(--padding-medium);
+      min-height: var(--ergo-sizing-bar-md);
+      border-bottom: 1px solid var(--ergo-material-divider);
+    }
+  }
+
+  .tcn-field-set[data-is-disabled="true"] .tcn-entry {
+    cursor: not-allowed;
+    background: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
+  }
+
+  .tcn-field-set[data-is-disabled="true"] .tcn-entry::placeholder {
+    color: var(--ergo-text-color-disabled-outline);
+  }
+}

package/src/themes/themes/ergo/parts/inputs.css

@@ -0,0 +1,252 @@
+@layer tcn-theme {
+  /* ===== 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;
+  }
+
+  .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);
+  }
+
+  /* ===== MultiSelect / MultiComboBox =====
+   * Some visual styles below override chrome that is currently baked into
+   * the system layer (CSS modules) and should not be there.
+   * See: https://git.tcncloud.net/blackcat-ui/blackcat/-/issues/318
+   */
+
+  .tcn-multiselect-values-container {
+    background-color: var(--material);
+    border: 1px solid var(--ergo-grey);
+    border-radius: var(--ergo-shape-radius-medium);
+  }
+
+  .tcn-multiselect-values-container[data-is-disabled="true"] {
+    background-color: var(--ergo-material-disabled-outline);
+    color: var(--ergo-text-color-disabled-outline);
+    cursor: not-allowed;
+  }
+
+  .tcn-multiselect-values-container[data-is-disabled="true"] > .tcn-multiselect-chip {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tcn-multiselect-chip {
+    --accent-color: var(--ergo-accent-blue);
+  }
+}