@tcn/ui 0.3.2 → 0.4.0

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

@@ -8,11 +8,44 @@
 @layer tcn-theme {
   /* ===== CSS VARIABLES ===== */
   :root {
+    /* ========== Ergo Brand Palette ========== */
+    --ergo-primary: #ce6b2b;
+    --ergo-secondary: #669eb4;
+    --ergo-secondary-light: #ecf4fb;
+    --ergo-secondary-dark: #497485;
+    --ergo-tertiary: #dfd7cd;
+    --ergo-white: #ffffff;
+
+    --ergo-accent-blue: #395578;
+    --ergo-accent-green: #97bba3;
+    --ergo-accent-yellow: #dbc97e;
+    --ergo-accent-green: #97bba3;
+
+    --ergo-grey: #aaaaaa;
+    --ergo-grey-light: #d3d3d3;
+    --ergo-grey-dark: #808080;
+
+    --ergo-status-red: #ff6565;
+    --ergo-status-red-dark: #c24848;
+
+    --ergo-status-yellow: #ffd439;
+    --ergo-status-yellow-dark: #dbb735;
+
+    --ergo-status-blue: var(--ergo-secondary);
+    --ergo-status-blue-dark: var(--ergo-secondary-dark);
+
+    --ergo-status-green: #3fbc6a;
+    --ergo-status-green-dark: #2d904f;
+
+    --ergo-ink-primary: var(--ergo-accent-blue);
+    --ergo-ink-inverse: var(--ergo-white);
+
+    /* ========== Blackcat System Tokens ========== */
     --scalar: 1;
-    --accent-color: #cd6b2c;
+    --accent-color: var(--ergo-primary);
 
     /* Typography */
-    --font-color: #395578;
+    --font-color: var(--ergo-ink-primary);
     --font-family: "Lato", sans-serif;
     --font-size: 12px;
 
@@ -26,16 +59,22 @@
     --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;
+    --status-color-disabled: var(--ergo-grey-light);
+    --status-color-info: var(--ergo-status-blue);
+    --status-color-warning: var(--ergo-status-yellow);
+    --status-color-positive: var(--ergo-status-green);
+    --status-color-error: var(--ergo-status-red);
+
+    --async-color-initial: var(--ergo-grey-main);
+    --async-color-pending: var(--ergo-status-blue);
+    --async-color-success: var(--ergo-status-green);
+    --async-color-failed: var(--ergo-status-red);
+
+    --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;
@@ -69,22 +108,26 @@
     --foreground-color-tertiary: #222222;
     --foreground-color-quaternary: #222222;
 
-    --material-disabled: #d3d3d3;
-    --material-secondary-dark: 197 29.1% 40.4%;
-    --material-tan: 33, 22%, 84%;
+    --material-disabled: var(--ergo-grey-light);
+    --on-material-disabled: var(--ergo-ink-inverse);
+    --ink-disabled: var(--ergo-grey-light);
+
+    --material-line: var(--ergo-grey);
 
     /* Default Material */
-    --action: 23, 65%, 49%;
-    --on-action: 0, 0%, 100%;
-    --material: 0, 0%, 100%;
-    --on-material: 213, 35.6%, 34.7%;
+    --action: var(--ergo-primary);
+    --on-action: var(--ergo-white);
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-accent-blue);
+  }
 
-    --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%;
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    --action: var(--ergo-primary);
+    --on-action: var(--ergo-white);
+    --material: var(--ergo-white);
+    --on-material: var(--ergo-accent-blue);
   }
 
   /* ===== Actions ===== */
@@ -97,191 +140,206 @@
       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-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);
-  }
+    --ink: var(--on-material);
+    --act: var(--action);
+    --mat: var(--material);
 
-  .tcn-interactive[data-hierarchy="primary"][data-is-disabled="true"] {
-    background: var(--material-disabled);
-    color: white;
-    border: 1px solid var(--material-disabled);
-  }
+    --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%);
 
-  .tcn-interactive[data-hierarchy="primary"]:hover {
-    background: var(--act-raised);
-  }
-
-  .tcn-interactive[data-hierarchy="primary"]:active {
-    background: var(--act-down);
-  }
+    background: var(--mat);
+    color: var(--ink);
+    transition:
+      background 0.1s,
+      color 0.1s;
 
-  .tcn-interactive[data-hierarchy="secondary"] {
-    background: transparent;
-    color: var(--on-mat);
-    border: 1px solid var(--on-mat);
-  }
+    &:focus-visible,
+    &[data-focus-visible] {
+      background: var(--act-focus);
+      outline: 2px solid var(--ergo-primary);
+      outline-offset: 2px;
+    }
 
-  .tcn-interactive[data-hierarchy="secondary"]:focus-visible {
-    outline: 2px dashed var(--on-mat);
-  }
+    &:hover,
+    &[data-hover] {
+      background: var(--act-raised);
+    }
 
-  .tcn-interactive[data-hierarchy="secondary"][data-is-disabled="true"] {
-    color: var(--material-disabled);
-    border: 1px solid var(--material-disabled);
-  }
+    &:active,
+    &[data-active] {
+      background: var(--act-down);
+    }
 
-  .tcn-interactive[data-hierarchy="secondary"]:hover {
-    background: var(--on-mat-faint);
+    &[data-is-disabled="true"] {
+      pointer-events: none;
+    }
   }
 
-  .tcn-interactive[data-hierarchy="secondary"]:active {
-    background: var(--mat-down);
-  }
+  /* ===== Base Button ===== 
+  * Shared between Button and Toggle.
+  * Primarily manages button dimensions and sizing ratios.
+  */
+  .tcn-base-button {
+    /* TODO: btn size should look for "--tcn-action-size" variable before defaulting. */
+    --btn-size-base: 26px;
+    --btn-pad-base: 12px;
 
-  .tcn-interactive[data-hierarchy="tertiary"] {
-    background: transparent;
-    color: var(--on-mat);
-    border: 1px solid transparent;
-  }
+    --btn-pad-delta: 4px;
+    --btn-size-delta: 4px;
+    --btn-step: 1;
 
-  .tcn-interactive[data-hierarchy="tertiary"]:focus-visible {
-    outline: 2px dashed var(--on-mat);
-  }
+    /* 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));
 
-  .tcn-interactive[data-hierarchy="tertiary"][data-is-disabled="true"] {
-    color: var(--material-disabled);
-  }
+    border-radius: var(--shape-radius-medium);
+    min-height: var(--btn-size);
+    padding: var(--padding-small) var(--btn-pad);
 
-  .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);
-  }
+    &[data-size="sm"] {
+      --btn-step: -1;
+    }
+    &[data-size="md"] {
+      --btn-step: 0;
+    }
+    &[data-size="lg"] {
+      --btn-step: 1;
+    }
 
-  .tcn-interactive[data-hierarchy="tertiary"]:active {
-    background: var(--mat-down);
-  }
+    &[data-is-utility="true"] {
+      height: auto;
+      width: auto;
+      min-width: var(--btn-size);
+      padding: 0;
 
-  /* Button */
+      /* 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;
 
-  .tcn-base-button {
-    --action: var(var(--button-color), var(--action));
+      .tcn-icon {
+        min-height: min(2px, calc(var(--btn-size) * var(--util-ratio)));
+        min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));
+      }
+    }
   }
 
-  .tcn-base-button[data-severity="dangerous"] {
-    --action: var(--action-dangerous);
-    --on-material: var(--action-dangerous);
-  }
+  /* ===== Button ===== 
+  * Manages Hierarchy and Severity.
+  */
+  .tcn-button {
+    --btn-primary: var(--action);
+    --btn-on-primary: var(--on-action);
+    --btn-variant: var(--on-material);
 
-  .tcn-base-button[data-severity="cautious"] {
-    --action: var(--action-cautious);
-    --on-action: var(--on-action-cautious);
-    --on-material: var(--action-cautious);
-  }
+    &[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);
+    }
 
-  /* .tcn-base-button[data-severity="neutral"] {
-  --action: var(--action-neutral);
-} */
+    &[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);
+      }
+    }
 
-  .tcn-base-button[data-severity="suggested"] {
-    --action: var(--action-suggested);
-    --on-material: var(--action-suggested);
-  }
+    &[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);
+      }
+    }
 
-  .tcn-base-button[data-severity="encouraged"] {
-    --action: var(--action-encouraged);
-    --on-material: var(--action-encouraged);
-  }
+    /* Decorations */
+    &[data-hierarchy="tertiary"]:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--ink);
+      text-decoration-thickness: 1px;
+      text-underline-offset: 4px;
+    }
 
-  .tcn-button {
-    border-radius: 4px;
-  }
+    &[data-hierarchy="tertiary"] {
+      border: 1px solid transparent;
+    }
 
-  .tcn-button[data-size="sm"] {
-    padding: 0px 8px;
-    min-height: 22px;
-  }
+    &[data-hierarchy="secondary"] {
+      border: 1px solid var(--ink);
+    }
 
-  .tcn-button[data-size="md"] {
-    padding: 0px 12px;
-    min-height: 26px;
-  }
+    &[data-hierarchy="primary"] {
+      border: 1px solid var(--mat);
+    }
 
-  .tcn-button[data-size="lg"] {
-    padding: 0px 16px;
-    min-height: 32px;
-  }
+    transition:
+      box-shadow 0.1s,
+      transform 0.1s;
 
-  .tcn-button:hover {
-    transform: translateY(-1px);
-    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
-  }
+    &:hover,
+    &[data-hover] {
+      transform: translateY(-1px);
+      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);
+    }
 
-  .tcn-button:active {
-    transform: translateY(1px);
-    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    &: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;
-  }
 
-  .tcn-slim-button[data-size="sm"] {
-    min-height: 12px;
-    min-width: 12px;
-    padding: 0;
-    .tcn-icon {
-      min-height: 10px;
-      min-width: 10px;
+    &[data-size="sm"] {
+      min-height: 12px;
+      min-width: 12px;
+      padding: 0;
+      .tcn-icon {
+        min-height: 10px;
+        min-width: 10px;
+      }
     }
-  }
-
-  .tcn-slim-button[data-size="md"] {
-    min-height: 18px;
-    min-width: 18px;
-    padding: 0;
-    .tcn-icon {
-      min-height: 14px;
-      min-width: 14px;
+    &[data-size="md"] {
+      min-height: 18px;
+      min-width: 18px;
+      padding: 0;
+      .tcn-icon {
+        min-height: 14px;
+        min-width: 14px;
+      }
     }
-  }
 
-  .tcn-slim-button[data-size="lg"] {
-    min-height: 24px;
-    min-width: 24px;
-    padding: 0;
-    .tcn-icon {
-      min-height: 20px;
-      min-width: 20px;
+    &[data-size="lg"] {
+      min-height: 24px;
+      min-width: 24px;
+      padding: 0;
+      .tcn-icon {
+        min-height: 20px;
+        min-width: 20px;
+      }
     }
   }
 
@@ -289,6 +347,28 @@
     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-button-group {
     .tcn-button-group-button:hover,
     .tcn-button-group-button:active {
@@ -324,7 +404,6 @@
   }
 
   .tcn-select-group {
-    --action: var(--action-neutral);
     .tcn-select-group-option:hover,
     .tcn-select-group-option:active {
       transform: none;
@@ -368,9 +447,107 @@
     }
   }
 
+  /* ===== 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);
+      }
+
+      /* Hover Indicator */
+      .tcn-tab-item[data-is-selected="false"]:hover::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(--material-line);
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  /* Inline  */
+  .tcn-tabs-bar[data-variant="inline"] {
+    min-width: min-content;
+    width: auto;
+    flex-grow: 0;
+    border-radius: var(--shape-radius-medium);
+    border: 1px solid var(--on-material);
+
+    .tcn-tabs-list {
+      gap: var(--gap-small);
+      padding: var(--padding-small);
+      .tcn-tab-item {
+        border-radius: var(--shape-radius-medium);
+      }
+    }
+  }
+
+  /* ===== MATERIAL ===== */
+
   .material {
-    background-color: hsl(var(--material));
-    color: hsl(var(--on-material));
+    background-color: var(--material);
+    color: var(--on-material);
   }
 
   /* ===== SURFACES ===== */
@@ -462,26 +639,17 @@
       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));
-    }
+      --material: var(--ergo-secondary-dark);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-secondary-dark);
 
-    :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));
+      background-color: var(--material);
+      color: var(--on-material);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
     }
   }
 
@@ -497,26 +665,17 @@
       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));
-    }
+      --material: var(--ergo-secondary-dark);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-secondary-dark);
 
-    :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));
+      background-color: var(--material);
+      color: var(--on-material);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
     }
   }
 
@@ -531,27 +690,19 @@
       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));
+      --material: var(--ergo-secondary-dark);
+      --on-material: var(--ergo-white);
+      --action: var(--ergo-tertiary);
+      --on-action: var(--ergo-secondary-dark);
+
+      background-color: var(--material);
+      color: var(--on-material);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
     }
   }
 
@@ -575,13 +726,111 @@
     overflow: hidden;
 
     :where(.tcn-header) {
-      /* TODO: This should be a variable */
-      background-color: #ecf4fb;
+      min-height: 32px;
+
+      --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);
+      :where(.tcn-typography) {
+        color: inherit;
+      }
     }
+  }
 
-    :where(.tcn-utility-bar) {
-      /* TODO: This should be a variable */
-      background-color: #ecf4fb;
+  /* SECTION */
+  .tcn-heading {
+    background-color: #f1f1f1;
+    padding-inline-start: 8px;
+    height: 30px;
+    z-index: 5;
+  }
+
+  .tcn-section > .tcn-heading {
+    background-color: #f2f4f6;
+    padding-inline-start: 8px;
+    color: rgb(51, 51, 51);
+    z-index: 4;
+  }
+
+  .tcn-section > .tcn-section > .tcn-heading {
+    background-color: #fff7f0;
+    padding-inline-start: 12px;
+    color: #395578;
+    z-index: 3;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-heading {
+    background-color: #eef8ef;
+    padding-inline-start: 16px;
+    color: #395578;
+    z-index: 2;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {
+    background-color: #ecf4fb;
+    padding-inline-start: 20px;
+    color: #395578;
+    z-index: 1;
+  }
+
+  .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 8px;
+  }
+
+  .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 12px;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 16px;
+  }
+
+  .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 20px;
+  }
+
+  .tcn-base-carrot {
+    --carrot-size: 12px;
+    --carrot-triangle-height: calc(var(--carrot-size) / 2);
+    --carrot-triangle-width: var(--carrot-size);
+    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
+    --carrot-triangle-peak: var(--carrot-triangle-width) solid var(--material);
+
+    width: 0;
+    height: 0;
+    flex-grow: 0;
+    display: inline-block;
+
+    &[data-direction="top"] {
+      border-bottom: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="bottom"] {
+      border-top: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="start"] {
+      border-right: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="end"] {
+      border-left: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
     }
   }
 }