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(--brand-5);
}
.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(--brand-5); }
.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-md-size);
line-height: var(--type-body-md-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(--neutral-2);
}
/* ================================================================
ROW SELECTION (opt-in via .table-selectable)
================================================================ */
.table-selectable tbody tr {
cursor: pointer;
}
.table tbody tr.row-selected {
background: var(--neutral-3);
}
.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);
}
/* Focus ring (inset) comes from recipes.css. */
/* 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.4;
}
.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(--neutral-2);
}
/* Hover always shifts one step darker than resting state */
.table-striped tbody tr:nth-child(odd):hover {
background: var(--neutral-2);
}
.table-striped tbody tr:nth-child(even):hover {
background: var(--neutral-3);
}
/* ================================================================
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(--neutral-1);
}
[data-theme="dark"] .table-sticky thead th {
background: var(--neutral-1);
}
/* ================================================================
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-md-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(--neutral-1);
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-label-sm-weight);
}
.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(--neutral-2);
color: var(--text-primary);
}
.page-btn[aria-current="page"] {
color: var(--text-brand);
font-weight: var(--type-label-md-weight);
}
.page-btn[disabled] {
opacity: 0.4;
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(--neutral-3);
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-md-size);
line-height: var(--type-body-md-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); }
/* Icon box: .cm-icon-16 in markup, inside the 24px tap-target button. The box
is the positioning context so the +/- glyphs (add.svg / minus.svg) overlay
for the crossfade; each svg fills the 16px box. */
.row-expand-toggle .cm-icon { position: relative; }
.row-expand-toggle svg {
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(--brand-5);
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(--neutral-2);
}
.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(--neutral-1);
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. Library add.svg / minus.svg
in a .cm-icon-16 box (markup); both svgs overlay and opacity flips with
aria-expanded. .cm-icon supplies the box + size; this adds the inline inset
and positioning context. */
.col-toggle-icon {
position: relative;
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: var(--z-dropdown);
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(--neutral-2); }
.col-toggle-popover .cm-checkbox-label {
font-size: var(--type-body-md-size);
font-weight: var(--type-body-md-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(--neutral-1);
}
.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-heading);
font-size: var(--type-heading-sm-size);
line-height: var(--type-heading-sm-lh);
font-weight: var(--type-heading-sm-weight-bold);
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-md-size);
line-height: var(--type-body-md-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(--neutral-1);
}
.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-heading);
font-size: var(--type-heading-sm-size);
line-height: var(--type-heading-sm-lh);
font-weight: var(--type-heading-sm-weight-bold);
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-md-size);
line-height: var(--type-body-md-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
================================================================ */
/* Custom scrollbar comes from recipes.css (.table-wrap). */
/* ================================================================
STICKY FIRST COLUMN — opt-in via .table-sticky-col
First column freezes during horizontal scroll. Uses --neutral-2
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(--neutral-2);
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(--neutral-3);
}
/* Corner cell when BOTH sticky header + sticky column are on: it matches the
sticky-col rule (z-index 1) on higher specificity than the header rule, which
would drop it below the --z-sticky header so a scrolling first-column cell
could paint over the header corner. Lift the corner to the header layer. */
.table-sticky.table-sticky-col thead th:first-child {
z-index: var(--z-sticky);
}
/* ─── 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(--neutral-2);
}
.tab.is-active,
.tab[aria-selected="true"] {
color: var(--text-primary);
font-weight: var(--type-label-md-weight);
}
.tab.is-active::after,
.tab[aria-selected="true"]::after {
background: var(--text-primary);
}
/* Focus ring (inset) + disabled treatment come from recipes.css. */
/* ================================================================
TAB with icon
================================================================ */
/* Icon = label size + 2 (the system rule in icons.css): md 14->16, lg 16->18,
sm 12->14. Icon-only tabs keep 20px — no label to size against. */
.tab svg {
width: 16px;
height: 16px;
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-label-sm-size);
line-height: var(--type-label-sm-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);
}
.tab-list-lg .tab svg {
width: 18px;
height: 18px;
}
/* ================================================================
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(--neutral-2);
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(--neutral-1);
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
* --------------------------------------------------------
* Transient feedback: neutral, success, error.
* Figma: CueDesign → Toast (node 3992:116); reference layout 4044:1326.
* Four optional parts — leading icon, progress, close, action button — each
* on or off independently. Progress is a 3px line along the top edge in the
* brand (neutral) or selected-border colour (success, error); close is a chip off the top-right
* corner; the icon is sized to the text's line-height (24 desktop / 20 mobile).
*
* 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.
* The toast is an INVERSE surface: a translucent fill (90%) with a
* background blur that is dark in light theme and light in dark theme.
* Everything on it uses the --*-inverse / --*-on-inverse tokens, so the
* flip is automatic and nothing is pinned to a hex or a primitive.
*/
/* ================================================================
TOAST CONTAINER — one fixed stack, placement is responsive
----------------------------------------------------------------
Desktop (≥1024px): top-right, 16px from top and right; enters from the top.
Tablet + mobile: bottom, 16px above the bottom nav bar (56px + safe
area); enters from the bottom. Tablet centres the
stack; mobile stretches it with 16px side margins.
================================================================ */
.toast-container {
position: fixed;
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-8);
pointer-events: none;
width: 100%;
max-width: 400px; /* Desktop + tablet: fixed 400 */
top: var(--space-16);
right: var(--space-16);
/* Bottom nav clearance, used by the tablet/mobile rule below. */
--toast-nav-clearance: 56px;
}
@media (max-width: 1023px) {
.toast-container {
top: auto;
right: auto;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--toast-nav-clearance) + var(--space-16) + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 767px) {
.toast-container {
left: var(--space-16);
right: var(--space-16);
transform: none;
width: auto;
max-width: none;
}
}
/* ================================================================
TOAST — the surface
================================================================ */
.toast {
/* Device tokens — overridden by .toast-mobile / the mobile media query */
--toast-pad: var(--space-16);
--toast-gap: var(--space-16);
--toast-font-size: var(--type-body-lg-size); /* 16px */
--toast-line-height: var(--type-body-lg-lh); /* 24px */
/* Nature fill — overridden by .toast-success / .toast-error */
--toast-fill: var(--neutral-11);
position: relative; /* anchors progress + close */
display: flex;
align-items: center;
gap: var(--toast-gap);
padding: var(--toast-pad);
/* No overflow clipping: progress and close sit on / past the edge. */
background: color-mix(in srgb, var(--toast-fill) 90%, transparent);
-webkit-backdrop-filter: blur(2.5px);
backdrop-filter: blur(2.5px); /* Figma background blur 5 ≈ CSS 2.5px */
color: var(--text-inverse-primary);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
pointer-events: auto;
opacity: 0;
transform: translateY(-8px); /* desktop: slides down from the top */
transition:
opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.toast.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Tablet + mobile: slides up from the bottom */
@media (max-width: 1023px) {
.toast { transform: translateY(8px); }
.toast.is-visible { transform: translateY(0); }
}
/* ----------------------------------------------------------------
DEVICE — two fixed widths, so toasts never resize with content.
Desktop + tablet (default): 400px wide, body-lg 16/24, 24px icon.
Mobile (≤767px, automatic): screen − 32px, body-md 14/20, 20px icon.
Padding, gap and the 32px controls are the same on both. Figma:
Toast / Device=Desktop (400) and Device=Mobile (343 on a 375 frame).
.toast-mobile forces the mobile treatment at any viewport (explorer,
docs, embedded previews).
---------------------------------------------------------------- */
.toast-mobile,
.toast-mobile.toast {
--toast-font-size: var(--type-body-md-size); /* 14px */
--toast-line-height: var(--type-body-md-lh); /* 20px */
}
@media (max-width: 767px) {
.toast {
--toast-font-size: var(--type-body-md-size);
--toast-line-height: var(--type-body-md-lh);
}
}
/* ================================================================
TOAST ICON — optional leading icon, sized to the line-height so it
sits on the first line of text: 24px desktop, 20px mobile. 12px to the
text (tighter than the 16px row gap), same colour as the text.
================================================================ */
.toast-icon {
flex-shrink: 0;
width: var(--toast-line-height);
height: var(--toast-line-height);
margin-right: calc(var(--space-12) - var(--toast-gap)); /* 16 → 12 */
color: inherit; /* = --text-inverse-primary */
}
.toast-icon svg { width: 100%; height: 100%; display: block; }
/* ================================================================
TOAST CONTENT
================================================================ */
.toast-content {
flex: 1;
min-width: 0;
}
.toast-message {
font-family: var(--font-body);
font-size: var(--toast-font-size);
line-height: var(--toast-line-height);
font-weight: var(--type-body-lg-weight);
overflow-wrap: break-word;
}
/* Inline emphasis inside the message, e.g. a countdown number. Medium weight. */
.toast-accent {
color: var(--brand-3); /* was a brand-on-inverse token at 2.14:1 on the dark toast, under AA */
font-weight: var(--type-label-md-weight);
}
/* ================================================================
TOAST ACTION — Button / Secondary Fill, SM in Figma: page-surface fill
with the interactive border. Light button on the dark toast in light
theme, and vice versa.
================================================================ */
.toast-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 32px;
padding: 0 var(--space-16);
gap: 6px;
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);
white-space: nowrap;
color: var(--text-primary);
background: var(--neutral-0);
border: 1px solid var(--border-selected);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--duration-instant) var(--ease-default);
}
.toast-action:hover {
background: var(--neutral-2);
}
/* Focus ring comes from recipes.css. */
/* ================================================================
TOAST CLOSE — 20px light chip floating off the top-right corner
(6px outside on both axes), 12px close-thick glyph, small shadow.
Reads as "peel this off" rather than a control inside the message.
================================================================ */
.toast-close {
position: absolute;
top: -6px;
right: -6px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: var(--space-4);
border: 1px solid var(--border-selected);
border-radius: var(--radius-full);
background: var(--neutral-0);
color: var(--text-primary);
box-shadow: var(--shadow-sm);
z-index: var(--z-raised); /* above the progress line */
cursor: pointer;
transition: background var(--duration-instant) var(--ease-default);
}
.toast-close .cm-icon { --icon-size: 12px; }
.toast-close:hover {
background: var(--neutral-2);
}
/* Focus ring comes from recipes.css. */
/* ================================================================
TOAST PROGRESS + AUTO-DISMISS
A 3px line along the top edge, inset 8px each side, that fills
left → right over --toast-duration (default 5s).
When it reaches 100% the toast fades out and stops taking clicks.
Hover pauses both, so a reader isn't racing the bar.
A runtime should remove the node on `animationend` of `toast-dismiss`.
Opt in by adding .toast-progress-auto to the track; a toast without it
(e.g. an error with Retry) stays until acted on.
================================================================ */
.toast-progress {
position: absolute;
top: -1.5px; /* centred on the top edge */
left: var(--space-8);
height: 3px;
width: calc(100% - var(--space-16));
background: var(--brand-5);
transform-origin: left;
transform: scaleX(0);
pointer-events: none;
}
.toast.is-visible .toast-progress-auto {
animation: toast-progress var(--toast-duration, 5s) linear forwards;
}
/* The toast itself exits when the bar completes. */
.toast.is-visible:has(.toast-progress-auto) {
animation: toast-dismiss var(--duration-fast) var(--ease-in) var(--toast-duration, 5s) forwards;
}
.toast:hover .toast-progress-auto,
.toast.is-visible:has(.toast-progress-auto):hover {
animation-play-state: paused;
}
@keyframes toast-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes toast-dismiss {
to { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
.toast { transition: opacity var(--duration-normal) var(--ease-out); transform: none; }
/* Keep the timer, drop the moving bar: it jumps to full at the end. */
.toast.is-visible .toast-progress-auto { animation-duration: 1ms; animation-delay: var(--toast-duration, 5s); }
}
/* ================================================================
NATURE VARIANTS — deep surface tiers, 90% over the page. The tiers
mirror across themes, so the toast is dark on light and light on dark.
Light theme: neutral-800 / success-800 / error-700 (the Figma values).
Dark theme: neutral-300 / success-400 / error-500.
================================================================ */
.toast-success { --toast-fill: var(--success-8); }
.toast-error { --toast-fill: var(--error-7); }
/* Progress: brand on neutral; the selected-border colour on success and
error, where a tinted line would fight the coloured surface. */
.toast-success .toast-progress,
.toast-error .toast-progress { background: var(--border-selected); }
/* ─── 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
================================================================ */
/* Base = SMALL tooltip (Figma "Default" variant, node 291:35).
Asymmetric top/bottom padding (less on top) optically centres the
single label line. Figma: padding 2 / 8 / 4 / 8, radius 2. */
.tooltip {
position: absolute;
z-index: var(--z-tooltip);
padding: var(--space-2) var(--space-8) var(--space-4);
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-inverse-primary);
background: var(--neutral-13);
border-radius: var(--radius-xs);
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);
}
/* BIG tooltip (Figma "Multiline" variant). Larger radius and roomier
padding; top still lighter than bottom to keep text optically centred.
Figma: padding 6 / 8 / 8 / 8, radius 4 (mapped 6 -> --space-4 to keep
the top-lighter optical correction on the spacing scale). */
.tooltip-lg {
padding: var(--space-4) var(--space-8) var(--space-8);
border-radius: var(--radius-sm);
}
/* Big tooltip uses a larger pointer to match its surface (Figma 12x6). */
.tooltip-lg::after {
width: 12px;
height: 12px;
}
/* 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 — rotated square (diamond) so the tip can carry the 1px
rounding Figma uses on the pointer's apex (a pure CSS
border-triangle has perfectly sharp corners and cannot be rounded).
The 8px square is rotated 45deg and pushed half-out past the surface
edge, so only the outer triangular point shows (≈8px wide × 4px tall,
matching Figma's arrow vector). It inherits the surface fill so it
reads as one continuous shape. The arrow geometry below uses raw px
(control dimensions, not spacing tokens).
================================================================ */
.tooltip::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: var(--neutral-13);
border-radius: 1px; /* 1px roundness on the pointer tip, per Figma */
}
/* Top arrow (default) — points down */
.tooltip::after,
.tooltip-top::after {
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
/* Bottom arrow — points up */
.tooltip-bottom::after {
bottom: 100%;
top: auto;
left: 50%;
transform: translate(-50%, 50%) rotate(45deg);
}
/* Left arrow — points right */
.tooltip-left::after {
left: 100%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
/* Right arrow — points left */
.tooltip-right::after {
right: 100%;
left: auto;
top: 50%;
transform: translate(50%, -50%) rotate(45deg);
}
/* ================================================================
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);
}
/* No dark-theme block needed: --neutral-13 and --text-inverse-primary already flip
(neutral-1000/neutral-100 → neutral-100/neutral-1000), so the tooltip inverts
on its own. The old override hardcoded exactly those values by hand. */
| |