defs.
Use a horizontal mask to soften the first/last 6% of the area.
================================================================ */
.sparkline-gradient .sparkline-area {
fill: url(#spark-grad-1);
stroke: none;
}
.spark-area-faded {
mask: url(#spark-edge-fade);
-webkit-mask: url(#spark-edge-fade);
}
/* ================================================================
ANIMATED DRAW-ON — line draws left-to-right via stroke-dashoffset.
Set --spark-len on the host SVG to match the path length.
End-point dot fades in 1800ms after start.
Honours prefers-reduced-motion.
================================================================ */
@keyframes spark-draw {
from { stroke-dashoffset: var(--spark-len, 300); }
to { stroke-dashoffset: 0; }
}
@keyframes spark-dot-in {
to { opacity: 1; }
}
.sparkline-animate polyline {
stroke-dasharray: var(--spark-len, 300);
stroke-dashoffset: var(--spark-len, 300);
animation: spark-draw 1800ms var(--ease-out) forwards;
}
.sparkline-animate circle {
opacity: 0;
animation: spark-dot-in var(--duration-fast) var(--ease-default) forwards;
animation-delay: 1800ms;
}
@media (prefers-reduced-motion: reduce) {
.sparkline-animate polyline {
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none;
}
.sparkline-animate circle {
opacity: 1;
animation: none;
}
}
/* ================================================================
REFERENCE LINE — dashed horizontal guide (target / avg / threshold)
================================================================ */
.sparkline-ref {
stroke: var(--text-tertiary);
stroke-width: 1;
stroke-dasharray: 3 3;
opacity: 0.7;
}
/* ================================================================
MULTI-SERIES — solid primary brand line + dashed secondary line.
Legend swatches mirror line styles for non-colour differentiation.
================================================================ */
.sparkline-multi-wrap {
display: inline-flex;
flex-direction: column;
gap: var(--space-8);
}
.sparkline-multi .series-line {
fill: none;
stroke-width: 1.5;
}
.sparkline-multi .series-primary {
stroke: var(--bg-brand);
}
.sparkline-multi .series-secondary {
stroke: var(--text-tertiary);
stroke-dasharray: 3 3;
}
.sparkline-multi-legend {
display: inline-flex;
gap: var(--space-16);
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
color: var(--text-secondary);
}
.sparkline-multi-legend span {
display: inline-flex;
align-items: center;
gap: var(--space-8);
}
.sparkline-multi-legend .swatch {
width: 16px;
height: 2px;
background: currentColor;
}
.sparkline-multi-legend .swatch.is-dashed {
background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
background-size: 5px 2px;
background-repeat: repeat-x;
background-color: transparent;
}
.sparkline-multi-legend .is-primary { color: var(--bg-brand); }
.sparkline-multi-legend .is-secondary { color: var(--text-tertiary); }
/* ─── components/table.css ─── */
/*
* Cuemath Design System — Table Component
* -----------------------------------------
* Data table with sorting, alignment, and responsive behaviour.
*
* Requires: base.css (or the underlying token files)
* @import '../../../context/design-resources/design-system/base.css';
*
* All colour values reference semantic tokens defined in base.css.
* Never hardcode hex values in this file.
*/
/* ================================================================
TABLE WRAPPER — enables horizontal scroll on narrow screens
================================================================ */
.table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ================================================================
BASE TABLE
================================================================ */
.table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
color: var(--text-primary);
}
/* ================================================================
HEAD
================================================================ */
.table thead {
border-bottom: 1px solid var(--border-primary);
}
.table th {
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
line-height: var(--type-label-sm-lh);
font-weight: var(--type-label-sm-weight);
color: var(--text-secondary);
text-align: left;
padding: var(--space-12) var(--space-16);
white-space: nowrap;
vertical-align: bottom;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* ================================================================
BODY ROWS
================================================================ */
.table td {
padding: var(--space-16);
vertical-align: middle;
border-bottom: 1px solid var(--border-tertiary);
}
.table tbody tr:last-child td {
border-bottom: none;
}
/* ================================================================
ROW HOVER — default behaviour for all .table rows.
Previously opt-in via .table-hoverable; now on by default since
tabular data almost always benefits from row affordance. The
.table-hoverable class is retained as a no-op alias for legacy
markup and won't cause harm if left in place.
================================================================ */
.table tbody tr {
transition:
background var(--duration-instant) var(--ease-default),
box-shadow var(--duration-instant) var(--ease-default);
}
.table tbody tr:hover {
background: var(--bg-secondary);
}
/* ================================================================
ROW SELECTION (opt-in via .table-selectable)
================================================================ */
.table-selectable tbody tr {
cursor: pointer;
}
.table tbody tr.row-selected {
background: var(--bg-tertiary);
}
.table tbody tr.row-selected td {
border-bottom: 1px solid var(--border-tertiary);
}
/* Table bottom boundary — visible at the end of the data, matches row separator colour */
.table {
border-bottom: 1px solid var(--border-tertiary);
}
/* ================================================================
ALIGNMENT
================================================================ */
.cell-right {
text-align: right;
}
.cell-centre {
text-align: center;
}
/* ================================================================
SORTABLE COLUMNS
================================================================ */
.th-sortable {
cursor: pointer;
user-select: none;
transition: color var(--duration-instant) var(--ease-default);
}
.th-sortable:hover {
color: var(--text-primary);
}
.th-sortable:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: calc(-1 * var(--focus-width));
}
/* Sort indicator icon */
.sort-icon {
display: inline-block;
width: 12px;
height: 12px;
margin-left: var(--space-4);
vertical-align: middle;
opacity: 0;
transition: opacity var(--duration-instant) var(--ease-default);
}
.th-sortable:hover .sort-icon {
opacity: 0.45;
}
.th-sortable[aria-sort] .sort-icon {
opacity: 1;
}
.th-sortable[aria-sort="ascending"] .sort-icon {
transform: rotate(0deg);
}
.th-sortable[aria-sort="descending"] .sort-icon {
transform: rotate(180deg);
}
/* ================================================================
COMPACT — tighter padding
================================================================ */
.table-compact th {
padding: var(--space-4) var(--space-12);
}
.table-compact td {
padding: var(--space-8) var(--space-12);
}
/* ================================================================
STRIPED — alternating row background
================================================================ */
.table-striped tbody tr:nth-child(even) {
background: var(--bg-secondary);
}
/* Hover always shifts one step darker than resting state */
.table-striped tbody tr:nth-child(odd):hover {
background: var(--bg-secondary);
}
.table-striped tbody tr:nth-child(even):hover {
background: var(--bg-tertiary);
}
/* ================================================================
BORDERED — all cell borders visible
================================================================ */
.table-bordered th,
.table-bordered td {
border: 1px solid var(--border-tertiary);
}
.table-bordered thead th {
border-bottom-color: var(--border-primary);
}
/* ================================================================
STICKY HEADER
================================================================ */
.table-sticky thead th {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--bg-primary);
}
[data-theme="dark"] .table-sticky thead th {
background: var(--bg-primary);
}
/* ================================================================
EMPTY STATE
================================================================ */
.table-empty {
padding: var(--space-48) var(--space-24);
text-align: center;
color: var(--text-tertiary);
font-family: var(--font-body);
font-size: var(--type-body-sm-size);
}
/* ================================================================
CAPTION
================================================================ */
.table caption {
caption-side: bottom;
padding: var(--space-8) var(--space-16);
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
color: var(--text-tertiary);
text-align: left;
}
/* ================================================================
LOADING SKELETON ROWS — opt-in via .table-loading
Skeleton bars sit inside real so columns don't shift.
Stagger via inline style="--skel-i:N" on each .skeleton-row.
================================================================ */
.table-loading tbody tr { background: transparent !important; }
.table-loading tbody tr:hover { box-shadow: none !important; }
.table-loading .skeleton-row { height: 44px; }
.table-loading .skeleton-row td { padding: var(--space-12) var(--space-16); }
.table-loading .skeleton-row .skeleton {
height: 10px;
border-radius: 0;
animation-delay: calc(var(--skel-i, 0) * 120ms);
}
/* ================================================================
PAGINATION DOCK — sits inside .table-wrap below the
================================================================ */
.table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-12) var(--space-16);
border-top: 1px solid var(--border-tertiary);
background: var(--bg-primary);
gap: var(--space-16);
flex-wrap: wrap;
}
.table-pagination-info {
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
.table-pagination-info strong {
color: var(--text-primary);
font-weight: var(--type-body-emphasis); /* 500 */
}
.table-pagination-pages {
display: inline-flex;
gap: var(--space-2);
}
.page-btn {
appearance: none;
min-width: 32px;
height: 32px;
padding: 0 var(--space-8);
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--text-secondary);
font-family: var(--font-label);
font-size: var(--type-label-md-size);
cursor: pointer;
font-variant-numeric: tabular-nums;
transition: background var(--duration-instant) var(--ease-default),
color var(--duration-instant) var(--ease-default),
border-color var(--duration-instant) var(--ease-default);
}
.page-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.page-btn[aria-current="page"] {
color: var(--text-brand);
font-weight: var(--type-body-emphasis);
}
.page-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.page-btn[disabled]:hover { background: transparent; }
.page-btn svg {
width: 16px;
height: 16px;
}
.page-btn.is-ellipsis {
color: var(--text-tertiary);
cursor: default;
}
.page-btn.is-ellipsis:hover { background: transparent; }
/* ================================================================
ROW SELECTION + BULK ACTION BAR
Per-row + master checkbox use the existing .cm-checkbox primitive.
.table-bulk-bar docks above the when rows are selected.
================================================================ */
.table-checkbox-cell {
width: 48px;
padding: 0 !important;
vertical-align: middle;
text-align: center;
}
th.table-checkbox-cell {
vertical-align: middle;
text-align: center;
}
.table-checkbox-cell .cm-checkbox {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 auto !important;
}
.table-checkbox-cell .cm-checkbox-box { margin-top: 0; }
.table-bulk-bar {
display: flex;
align-items: center;
gap: var(--space-16);
padding: var(--space-12) var(--space-20);
background: var(--bg-tertiary);
color: var(--text-primary);
font-family: var(--font-body);
border-bottom: 1px solid var(--border-tertiary);
}
.table-bulk-bar-count {
font-family: var(--font-label);
font-size: var(--type-label-md-size);
font-weight: var(--type-label-md-weight); /* 500 */
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.table-bulk-bar .spacer { flex: 1; }
.table-bulk-bar-actions { display: inline-flex; }
/* Bulk-bar action buttons compose .btn .btn-secondary .btn-sm
(or .btn .btn-danger .btn-sm for the destructive variant).
No bespoke rule needed — see snippet-library and table.md. */
/* ================================================================
EXPANDABLE ROWS
Always render the .row-expansion alongside its parent so the
layout stays put when toggling. The inner .row-expansion-content
animates max-height + opacity + padding — never the .
================================================================ */
.row-expansion {
display: table-row;
background: transparent;
}
.row-expansion > td {
padding: 0 !important;
border: 0 !important;
color: var(--text-secondary);
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
}
.row-expansion-content {
overflow: hidden;
max-height: 0;
opacity: 0;
padding: 0 var(--space-16) 0 var(--space-48);
transition: max-height var(--duration-normal) var(--ease-default),
opacity var(--duration-normal) var(--ease-default),
padding var(--duration-normal) var(--ease-default),
border-color var(--duration-normal) var(--ease-default);
border-bottom: 1px solid transparent;
}
.row-expanded + .row-expansion .row-expansion-content {
max-height: 200px;
opacity: 1;
padding: var(--space-16) var(--space-16) var(--space-16) var(--space-48);
border-bottom-color: var(--border-tertiary);
}
/* When expanded, drop the row's bottom border so content flows into expansion */
.row-expanded > td { border-bottom: 0 !important; }
/* +/- toggle with cross-fade rotation */
.row-expand-toggle {
appearance: none;
width: 24px;
height: 24px;
border: 0;
background: transparent;
color: var(--text-tertiary);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: color var(--duration-instant) var(--ease-default);
}
.row-expand-toggle:hover { color: var(--text-primary); }
.row-expanded .row-expand-toggle { color: var(--text-primary); }
.row-expand-toggle svg {
width: 18px;
height: 18px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: opacity var(--duration-normal) var(--ease-default),
transform var(--duration-normal) var(--ease-default);
}
.row-expand-toggle .icon-minus {
opacity: 0;
transform: translate(-50%, -50%) rotate(-90deg);
}
.row-expanded .row-expand-toggle .icon-plus {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.row-expanded .row-expand-toggle .icon-minus {
opacity: 1;
transform: translate(-50%, -50%) rotate(0);
}
/* ================================================================
FILTERABLE COLUMNS + CHIPS STRIP
Column header gets an inline filter button. Active filter = gold
dot with --text-primary stroke. Applied filters surface as
removable .filter-chip elements above the table.
================================================================ */
.th-filter-wrap {
display: inline-flex;
align-items: center;
gap: var(--space-4);
}
.th-filter-btn {
appearance: none;
width: 22px;
height: 22px;
border: 0;
background: transparent;
padding: 0;
color: var(--text-tertiary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: color var(--duration-instant) var(--ease-default);
}
.th-filter-btn:hover { color: var(--text-primary); }
.th-filter-btn svg {
width: 16px;
height: 16px;
}
.th-filter-btn.is-active { color: var(--text-primary); }
.th-filter-btn.is-active::after {
content: "";
position: absolute;
top: 1px;
right: 1px;
width: 7px;
height: 7px;
background: var(--bg-brand);
border: 1.5px solid var(--text-primary);
border-radius: 50%;
}
.table-filter-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-8);
padding: var(--space-12) var(--space-16);
border-bottom: 1px solid var(--border-tertiary);
background: var(--bg-secondary);
}
.table-filter-chips .spacer { flex: 1; }
/* ================================================================
COLUMN VISIBILITY TOGGLE — toolbar + popover
Trigger uses .btn .btn-secondary; .chev rotates on
[aria-expanded="true"]. Popover is absolutely positioned and
should not push table content.
================================================================ */
.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-12) var(--space-16);
border-bottom: 1px solid var(--border-tertiary);
background: var(--bg-primary);
gap: var(--space-16);
}
.table-toolbar-title {
font-family: var(--font-label);
font-size: var(--type-label-md-size);
color: var(--text-primary);
font-weight: var(--type-label-md-weight); /* 500 */
}
.table-toolbar-actions {
display: inline-flex;
gap: var(--space-8);
position: relative;
}
.table-toolbar-actions .btn .chev {
transition: transform var(--duration-normal) var(--ease-default);
margin-left: var(--space-8);
}
.table-toolbar-actions .btn[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
/* Column toggle button: + by default, − when open. Both svgs overlay at the
centre of a 14px box; opacity flips with aria-expanded. */
.col-toggle-icon {
position: relative;
display: inline-flex;
width: 14px;
height: 14px;
margin-left: var(--space-8);
}
.col-toggle-icon .icon-plus,
.col-toggle-icon .icon-minus {
position: absolute;
top: 0;
left: 0;
transition: opacity var(--duration-normal) var(--ease-default);
}
.table-toolbar-actions .btn[aria-expanded="false"] .col-toggle-icon .icon-plus { opacity: 1; }
.table-toolbar-actions .btn[aria-expanded="false"] .col-toggle-icon .icon-minus { opacity: 0; }
.table-toolbar-actions .btn[aria-expanded="true"] .col-toggle-icon .icon-plus { opacity: 0; }
.table-toolbar-actions .btn[aria-expanded="true"] .col-toggle-icon .icon-minus { opacity: 1; }
.table-toolbar-actions .btn[aria-expanded="false"] + .col-toggle-popover { display: none; }
/* Visual styling comes from .dropdown-menu; this rule is positioning only.
Visibility is controlled by the trigger's aria-expanded (via the
`+ .col-toggle-popover { display: none }` rule above), not via .is-open,
so override the default .dropdown-menu hidden state. */
.col-toggle-popover {
position: absolute;
top: calc(100% + var(--space-8));
right: 0;
left: auto;
margin-top: 0;
z-index: 20;
opacity: 1;
visibility: visible;
transform: none;
}
.col-toggle-popover .cm-checkbox {
width: 100%;
padding: var(--space-8) var(--space-16);
box-sizing: border-box;
transition: background var(--duration-instant) var(--ease-default);
}
.col-toggle-popover .cm-checkbox:hover { background: var(--bg-secondary); }
.col-toggle-popover .cm-checkbox-label {
font-size: var(--type-body-sm-size);
font-weight: var(--type-body-sm-weight); /* 400 */
}
/* ================================================================
RESPONSIVE CARDS — opt-in via .table-responsive-cards
Each | needs a data-label attr. Below 640px (or when the
.force-cards demo helper is applied) rows stack into cards:
first | becomes the heading, the rest become label/value rows.
================================================================ */
@media (max-width: 640px) {
.table-responsive-cards,
.table-responsive-cards thead,
.table-responsive-cards tbody,
.table-responsive-cards tr,
.table-responsive-cards td { display: block; width: 100%; }
.table-responsive-cards thead { display: none; }
.table-responsive-cards tbody tr {
border: 1px solid var(--border-secondary);
margin-bottom: var(--space-16);
padding: var(--space-20) var(--space-20) var(--space-16);
background: var(--bg-primary);
}
.table-responsive-cards tbody tr:last-child { margin-bottom: 0; }
.table-responsive-cards tbody td:first-child {
padding: 0 0 var(--space-12) 0;
border: 0;
border-bottom: 1px solid var(--border-secondary);
margin-bottom: var(--space-12);
display: block;
font-family: var(--font-display);
font-size: var(--type-heading-sm-size);
line-height: var(--type-heading-sm-lh);
font-weight: var(--type-heading-sm-weight);
color: var(--text-primary);
}
.table-responsive-cards tbody td:first-child::before { display: none; }
.table-responsive-cards tbody td {
padding: var(--space-8) 0;
border: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-16);
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
color: var(--text-primary);
}
.table-responsive-cards tbody td:last-child { padding-bottom: 0; }
.table-responsive-cards tbody td::before {
content: attr(data-label);
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
font-weight: var(--type-label-sm-weight); /* 500 */
}
}
/* .force-cards — demo helper that mirrors the mobile state at any width */
.force-cards .table-responsive-cards,
.force-cards .table-responsive-cards thead,
.force-cards .table-responsive-cards tbody,
.force-cards .table-responsive-cards tr,
.force-cards .table-responsive-cards td { display: block; width: 100%; }
.force-cards .table-responsive-cards thead { display: none; }
.force-cards .table-responsive-cards tbody tr {
border: 1px solid var(--border-secondary);
margin-bottom: var(--space-16);
padding: var(--space-20) var(--space-20) var(--space-16);
background: var(--bg-primary);
}
.force-cards .table-responsive-cards tbody tr:last-child { margin-bottom: 0; }
.force-cards .table-responsive-cards tbody td:first-child {
padding: 0 0 var(--space-12) 0;
border: 0;
border-bottom: 1px solid var(--border-secondary);
margin-bottom: var(--space-12);
display: block;
font-family: var(--font-display);
font-size: var(--type-heading-sm-size);
line-height: var(--type-heading-sm-lh);
font-weight: var(--type-heading-sm-weight);
color: var(--text-primary);
}
.force-cards .table-responsive-cards tbody td:first-child::before { display: none; }
.force-cards .table-responsive-cards tbody td {
padding: var(--space-8) 0;
border: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-16);
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
color: var(--text-primary);
}
.force-cards .table-responsive-cards tbody td:last-child { padding-bottom: 0; }
.force-cards .table-responsive-cards tbody td::before {
content: attr(data-label);
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
font-weight: var(--type-label-sm-weight); /* 500 */
}
/* ================================================================
SCROLLBAR — shared with .dropdown-scroll treatment
================================================================ */
.table-wrap {
scrollbar-width: thin;
scrollbar-color: var(--neutral-300) transparent;
}
.table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
background: var(--neutral-300);
border: 2px solid var(--bg-primary);
border-radius: var(--radius-full);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
[data-theme="dark"] .table-wrap { scrollbar-color: var(--neutral-700) transparent; }
[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb {
background: var(--neutral-700);
border-color: var(--bg-primary);
}
[data-theme="dark"] .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--neutral-600); }
/* ================================================================
STICKY FIRST COLUMN — opt-in via .table-sticky-col
First column freezes during horizontal scroll. Uses --bg-secondary
as the fixed-column indicator + 1px shadow on the right edge.
================================================================ */
.table-sticky-col td:first-child,
.table-sticky-col th:first-child {
position: sticky;
left: 0;
background: var(--bg-secondary);
z-index: 1;
box-shadow: 1px 0 0 var(--border-secondary);
font-weight: var(--type-body-emphasis); /* 500 */
}
.table-sticky-col tbody tr:hover td:first-child {
background: var(--bg-tertiary);
}
/* ─── components/tabs.css ─── */
/*
* Cuemath Design System — Tabs Component
* ----------------------------------------
* Tab bar with content panels.
*
* Requires: base.css (or the underlying token files)
* @import '../../../context/design-resources/design-system/base.css';
*
* All colour values reference semantic tokens defined in base.css.
* Never hardcode hex values in this file.
*/
/* ================================================================
TAB GROUP — wrapper for tab list + panels
================================================================ */
.tabs {
display: flex;
flex-direction: column;
}
/* ================================================================
TAB LIST — horizontal row of tab triggers
================================================================ */
.tab-list {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--border-tertiary);
gap: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tab-list::-webkit-scrollbar {
display: none;
}
/* ================================================================
TAB — individual trigger
Underline indicator on the active tab.
================================================================ */
.tab {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
font-family: var(--font-label);
font-size: var(--type-label-md-size);
line-height: var(--type-label-md-lh);
font-weight: var(--type-label-md-weight);
color: var(--text-secondary);
padding: var(--space-12) var(--space-16);
border: none;
background: transparent;
cursor: pointer;
white-space: nowrap;
position: relative;
transition:
color var(--duration-instant) var(--ease-default),
box-shadow var(--duration-instant) var(--ease-default);
}
/* Active indicator — 2px bottom border inside the tab */
.tab::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: transparent;
transition: background var(--duration-instant) var(--ease-default);
}
/* ================================================================
STATES
================================================================ */
.tab:hover {
color: var(--text-primary);
background: var(--bg-secondary);
}
.tab.is-active,
.tab[aria-selected="true"] {
color: var(--text-primary);
font-weight: var(--type-body-emphasis);
}
.tab.is-active::after,
.tab[aria-selected="true"]::after {
background: var(--text-primary);
}
.tab:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: calc(-1 * var(--focus-width));
}
.tab[disabled],
.tab.is-disabled {
opacity: 0.45;
pointer-events: none;
cursor: not-allowed;
}
/* ================================================================
TAB with icon
================================================================ */
.tab svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ================================================================
ICON-ONLY TAB
Hides label, enlarges icon. Use aria-label for accessibility.
================================================================ */
.tab-icon-only {
padding: var(--space-12);
}
.tab-icon-only svg {
width: 20px;
height: 20px;
}
/* ================================================================
TAB with badge / count
================================================================ */
.tab-count {
font-family: var(--font-label);
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
font-weight: var(--type-label-sm-weight);
color: var(--text-tertiary);
/* Pull the count closer to the label — tab parent uses gap: var(--space-8)
for icons, so a negative margin reduces the visible gap to var(--space-4). */
margin-left: calc(-1 * var(--space-4));
}
.tab.is-active .tab-count,
.tab[aria-selected="true"] .tab-count {
color: var(--text-secondary);
}
/* ================================================================
TAB PANEL — content container
================================================================ */
.tab-panel {
padding: var(--space-24) 0;
}
.tab-panel[hidden] {
display: none;
}
/* ================================================================
SIZE VARIANTS
================================================================ */
/* Small tabs — compact for toolbars and secondary navigation */
.tab-list-sm .tab {
font-size: var(--type-label-sm-size);
line-height: var(--type-label-sm-lh);
padding: var(--space-8) var(--space-12);
}
.tab-list-sm .tab svg {
width: 14px;
height: 14px;
}
/* Large tabs — for primary page-level navigation */
.tab-list-lg .tab {
font-size: var(--type-label-lg-size);
line-height: var(--type-label-lg-lh);
padding: var(--space-16) var(--space-20) var(--space-12);
}
/* ================================================================
CONTAINED VARIANT — tabs with background fill
For tabs inside cards or panels where underline is too subtle.
================================================================ */
.tab-list-contained {
border-bottom: none;
background: var(--bg-secondary);
padding: var(--space-4);
gap: var(--space-4);
}
.tab-list-contained .tab {
border-radius: var(--radius-none);
padding: var(--space-8) var(--space-16);
}
.tab-list-contained .tab::after {
display: none;
}
.tab-list-contained .tab.is-active,
.tab-list-contained .tab[aria-selected="true"] {
background: var(--bg-primary);
box-shadow: var(--shadow-xs);
}
/* ================================================================
FULL-WIDTH — tabs stretch to fill container
================================================================ */
.tab-list-full .tab {
flex: 1;
}
/* ================================================================
DARK THEME — automatic via semantic tokens.
================================================================ */
/* ─── components/toast.css ─── */
/*
* Cuemath Design System — Toast / Notification Component
* --------------------------------------------------------
* Feedback messages: success, error, info, warning.
*
* Requires: base.css (or the underlying token files)
* @import '../../../context/design-resources/design-system/base.css';
*
* Toasts float above the page. Shadow at rest is correct here.
* Like modals, they genuinely sit above the page surface.
*/
/* ================================================================
TOAST CONTAINER — positions toasts on screen
================================================================ */
.toast-container {
position: fixed;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-8);
pointer-events: none;
max-width: 420px;
width: 100%;
}
/* Position variants */
.toast-container-top-right {
top: var(--space-16);
right: var(--space-16);
}
.toast-container-top-center {
top: var(--space-16);
left: 50%;
transform: translateX(-50%);
}
.toast-container-bottom-right {
bottom: var(--space-16);
right: var(--space-16);
}
.toast-container-bottom-center {
bottom: var(--space-16);
left: 50%;
transform: translateX(-50%);
}
@media (max-width: 767px) {
.toast-container {
max-width: calc(100vw - var(--space-32));
left: var(--space-16);
right: var(--space-16);
}
.toast-container-top-right,
.toast-container-top-center {
top: var(--space-16);
transform: none;
}
.toast-container-bottom-right,
.toast-container-bottom-center {
bottom: var(--space-16);
transform: none;
}
}
/* ================================================================
TOAST
================================================================ */
.toast {
position: relative; /* anchors the absolute close button */
display: flex;
align-items: flex-start;
padding: var(--space-16) var(--space-40) var(--space-16) var(--space-20);
background: var(--bg-inverse);
color: var(--text-on-inverse);
border: 1px solid transparent;
border-radius: var(--radius-none);
box-shadow: var(--shadow-lg);
pointer-events: auto;
opacity: 0;
transform: translateY(-8px);
transition:
opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.toast.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Bottom-positioned toasts slide up instead */
.toast-container-bottom-right .toast,
.toast-container-bottom-center .toast {
transform: translateY(8px);
}
.toast-container-bottom-right .toast.is-visible,
.toast-container-bottom-center .toast.is-visible {
transform: translateY(0);
}
/* ================================================================
TOAST CONTENT
================================================================ */
.toast-content {
flex: 1;
min-width: 0;
}
.toast-title {
font-family: var(--font-label);
font-size: var(--type-label-md-size);
line-height: var(--type-label-md-lh);
font-weight: var(--type-body-emphasis);
}
.toast-message {
font-family: var(--font-body);
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
font-weight: var(--type-body-sm-weight);
margin-top: var(--space-4);
opacity: 0.85;
}
/* When there's only a message (no title), remove the top margin */
.toast-message:first-child {
margin-top: 0;
opacity: 1;
}
/* ================================================================
TOAST CLOSE
================================================================ */
/* Anchored to top-right of the toast with 8px from edges.
Always secondary; primary on hover — independent of toast variant. */
.toast-close {
position: absolute;
top: var(--space-8);
right: var(--space-8);
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
transition: color var(--duration-instant) var(--ease-default);
}
.toast-close:hover {
color: var(--text-primary);
}
.toast-close:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
/* Library close.svg at 20px — system's standard filled path. */
.toast-close svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* ================================================================
TOAST ACTION — inline text button
================================================================ */
.toast-action {
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
line-height: var(--type-label-sm-lh);
font-weight: var(--type-body-emphasis);
color: currentColor;
text-decoration: underline;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
margin-top: var(--space-4);
display: inline-block;
}
.toast-action:hover {
opacity: 0.8;
}
.toast-action:focus-visible {
outline: var(--focus-width) solid var(--focus-color);
outline-offset: var(--focus-offset);
}
/* ================================================================
STATUS VARIANTS
Neutral (default) is inverse. Status variants use tinted fills.
================================================================ */
.toast-success {
background: var(--bg-success-1);
color: var(--text-success);
border-color: var(--border-success);
}
.toast-error {
background: var(--bg-error-1);
color: var(--text-error);
border-color: var(--border-error);
}
.toast-warning {
background: var(--bg-warning-1);
color: var(--text-warning);
border-color: var(--border-warning);
}
.toast-info {
background: var(--bg-info-1);
color: var(--text-info);
border-color: var(--border-info);
}
/* ─── components/tooltip.css ─── */
/*
* Cuemath Design System — Tooltip Component
* --------------------------------------------
* Contextual hints on hover or focus.
*
* Requires: base.css (or the underlying token files)
* @import '../../../context/design-resources/design-system/base.css';
*
* All colour values reference semantic tokens defined in base.css.
* Never hardcode hex values in this file.
*/
/* ================================================================
TOOLTIP WRAPPER — positions the tooltip relative to trigger
================================================================ */
.tooltip-wrap {
position: relative;
display: inline-flex;
}
/* ================================================================
TOOLTIP SURFACE
================================================================ */
.tooltip {
position: absolute;
z-index: var(--z-tooltip);
padding: var(--space-8) var(--space-12);
font-family: var(--font-label);
font-size: var(--type-label-sm-size);
line-height: var(--type-label-sm-lh);
font-weight: var(--type-label-sm-weight);
color: var(--text-on-inverse);
background: var(--bg-inverse);
border-radius: var(--radius-none);
white-space: nowrap;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity var(--duration-fast) var(--ease-default),
visibility var(--duration-fast) var(--ease-default);
}
/* Show on hover/focus of wrapper */
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
opacity: 1;
visibility: visible;
}
/* ================================================================
PLACEMENT
================================================================ */
/* Top (default) */
.tooltip,
.tooltip-top {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: var(--space-4);
}
/* Bottom */
.tooltip-bottom {
top: 100%;
bottom: auto;
left: 50%;
transform: translateX(-50%);
margin-top: var(--space-4);
margin-bottom: 0;
}
/* Left */
.tooltip-left {
right: 100%;
left: auto;
top: 50%;
bottom: auto;
transform: translateY(-50%);
margin-right: var(--space-4);
margin-bottom: 0;
}
/* Right */
.tooltip-right {
left: 100%;
right: auto;
top: 50%;
bottom: auto;
transform: translateY(-50%);
margin-left: var(--space-4);
margin-bottom: 0;
}
/* ================================================================
ARROW — CSS triangle pointing toward trigger
================================================================ */
.tooltip::after {
content: '';
position: absolute;
border: 4px solid transparent;
}
/* Top arrow (default) — points down */
.tooltip::after,
.tooltip-top::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--bg-inverse);
}
/* Bottom arrow — points up */
.tooltip-bottom::after {
bottom: 100%;
top: auto;
left: 50%;
transform: translateX(-50%);
border-top-color: transparent;
border-bottom-color: var(--bg-inverse);
}
/* Left arrow — points right */
.tooltip-left::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-top-color: transparent;
border-left-color: var(--bg-inverse);
}
/* Right arrow — points left */
.tooltip-right::after {
right: 100%;
left: auto;
top: 50%;
transform: translateY(-50%);
border-top-color: transparent;
border-right-color: var(--bg-inverse);
}
/* ================================================================
MULTILINE — allows wrapping for longer content
================================================================ */
.tooltip-multiline {
white-space: normal;
max-width: 240px;
text-align: left;
}
/* ================================================================
DELAY — slight show delay to prevent flicker on mouse pass
Hidden state: no delay (disappears instantly).
Visible state: delay before appearing (prevents flash on pass-through).
================================================================ */
.tooltip-delay {
transition-delay: 0ms;
}
.tooltip-wrap:hover .tooltip-delay,
.tooltip-wrap:focus-within .tooltip-delay {
transition-delay: var(--duration-fast);
}
/* ================================================================
DARK THEME
Inverts the tooltip: light surface on dark background
================================================================ */
[data-theme="dark"] .tooltip {
background: var(--neutral-100);
color: var(--neutral-1000);
}
[data-theme="dark"] .tooltip::after,
[data-theme="dark"] .tooltip-top::after {
border-top-color: var(--neutral-100);
}
[data-theme="dark"] .tooltip-bottom::after {
border-top-color: transparent;
border-bottom-color: var(--neutral-100);
}
[data-theme="dark"] .tooltip-left::after {
border-top-color: transparent;
border-left-color: var(--neutral-100);
}
[data-theme="dark"] .tooltip-right::after {
border-top-color: transparent;
border-right-color: var(--neutral-100);
}
| |