/* ========================================================================== base.css ========================================================================== */ /* ========================================================================== Base ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap'); /* 1. Root height foundation */ html, body { height: 100%; margin: 0; /* ensure no default margin breaks calc */ } body { font-family: 'Geist'; font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text-primary); height: 100%; background-color: var(--color-bg-canvas); -webkit-font-smoothing: auto; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; overflow: hidden; } section { max-width: 1440px; margin: auto; padding: 2rem; } /* ========================================================================== Page chrome — intro text and family section headings ========================================================================== */ .page-intro { color: var(--color-text-secondary); margin-top: var(--space-sm); } .family-heading { max-width: 1440px; margin: var(--space-2xl) auto var(--space-lg); padding: 0 2rem; color: var(--color-text-primary); } .family-heading:first-of-type { margin-top: 0; } /* ========================================================================== Type scale display — layout for showing each size/weight spec row ========================================================================== */ .type-spec { border-top: 1px solid var(--color-border-subtle); padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .type-spec:first-of-type { border-top: none; } .type-spec__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); } .type-spec__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .type-spec__meta { font-size: var(--font-size-sm); color: var(--color-text-tertiary); } .type-spec__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .type-spec__example { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; } .type-spec__example code { font-size: var(--font-size-sm); color: var(--color-text-link); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: 4px; padding: var(--space-xs) var(--space-sm); width: fit-content; } @media (max-width: 1024px) { .type-spec__row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .type-spec__row { grid-template-columns: 1fr; } } /* ========================================================================== Homepage — page directory ========================================================================== */ .page-home { display: flex; align-items: center; justify-content: center; padding: var(--space-lg); } .home-content { max-width: 720px; width: 100%; text-align: center; } .home-content h1 { margin-bottom: var(--space-sm); } .page-list { margin-top: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); } .page-card { display: block; text-align: left; padding: var(--space-lg); background-color: var(--color-surface-default); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); transition: border-color var(--transition), transform var(--transition); text-decoration: none; color: inherit; } .page-card:hover { border-color: var(--color-border-focus); transform: translateY(-2px); } .page-card__title { display: block; color: var(--color-text-primary); margin-bottom: var(--space-xs); } .page-card__desc { display: block; color: var(--color-text-secondary); } @media (max-width: 600px) { .page-home { align-items: flex-start; padding-top: var(--space-2xl); } .page-card { padding: var(--space-md); } } /* ========================================================================== Logo page — asset display and URL blocks ========================================================================== */ .logo-spec__row { display: flex; flex-direction: column; gap: var(--space-lg); } .url-block { display: block; background-color: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: var(--space-md) var(--space-lg); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--color-text-primary); word-break: break-all; } .url-token { color: var(--color-text-link); font-weight: var(--font-weight-semibold); } .url-note { color: var(--color-text-secondary); } .inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background-color: var(--color-bg-subtle); padding: 0.1em 0.3em; border-radius: 4px; border: 1px solid var(--color-border-subtle); } .logo-example { display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start; } .logo-example img { max-height: 64px; width: auto; padding: var(--space-md); background-color: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); } .logo-table-wrap { overflow-x: auto; } .logo-table { width: 100%; text-align: left; } .logo-table th, .logo-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); } .logo-table th { color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .logo-table tbody tr:last-child td { border-bottom: none; } .logo-table code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background-color: var(--color-bg-subtle); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--color-border-subtle); } /* ========================================================================== Color page — swatch display and semantic tables ========================================================================== */ .color-family { margin-bottom: var(--space-2xl); } .color-family__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); } .color-family__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; } .color-family__desc { font-size: var(--font-size-sm); color: var(--color-text-tertiary); max-width: 480px; } .color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-md); } .color-swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border-subtle); transition: transform var(--transition), box-shadow var(--transition); } .color-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .color-swatch__preview { height: 80px; width: 100%; } .color-swatch__info { padding: var(--space-sm) var(--space-md); background: var(--color-surface-default); } .color-swatch__name { font-size: var(--text-body-sm-size); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.3; } .color-swatch__hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-body-xs-size); color: var(--color-text-tertiary); line-height: 1.3; margin-top: 2px; } .semantic-table-wrap { overflow-x: auto; border: 1px solid var(--color-border-subtle); border-radius: 8px; overflow: hidden; } .semantic-table { width: 100%; text-align: left; border-collapse: collapse; font-size: var(--text-body-sm-size); } .semantic-table th, .semantic-table td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--color-border-subtle); } .semantic-table th { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-label-md-size); white-space: nowrap; } .semantic-table tbody tr:last-child td { border-bottom: none; } .semantic-table tbody tr{ font-size: var(--text-body-xs-size); color: var(--color-text-primary); } .semantic-table tbody tr:hover { background: var(--color-bg-subtle); } .semantic-table tbody tr td:not(:last-child) { border-right: 1px solid var(--color-border-subtle); } .semantic-table thead tr th:not(:last-child) { border-right: 1px solid var(--color-border-subtle); } .semantic-table tbody tr td:first-child { width: 401px; } .semantic-table thead tr th:first-child { width: 401px; } .token-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-body-xs-size); color: var(--color-text-primary); } .token-value { display: flex; align-items: center; gap: var(--space-sm); } .token-dot { width: 16px; height: 16px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); flex-shrink: 0; } .token-hex { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-body-xs-size); color: var(--color-text-tertiary); } .theme-toggle { position: fixed; top: calc(var(--pg-topbar-height, 48px) + var(--space-md)); right: var(--space-lg); z-index: 90; } .theme-toggle__btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-surface-default); border: 1px solid var(--color-border-default); border-radius: var(--radius); color: var(--color-text-primary); font-size: var(--text-body-sm-size); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); box-shadow: var(--shadow-sm); } .theme-toggle__btn:hover { background: var(--color-bg-subtle); border-color: var(--color-border-medium); } .theme-toggle__icon { width: 16px; height: 16px; } .section-divider { border-top: 1px solid var(--color-border-subtle); margin: var(--space-2xl) 0; } .usage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); } .usage-card { border-radius: var(--radius); border: 1px solid var(--color-border-subtle); overflow: hidden; } .usage-card__preview { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); align-items: center; justify-content: center; min-height: 120px; } .usage-card__code { padding: var(--space-md) var(--space-lg); background: var(--color-bg-subtle); border-top: 1px solid var(--color-border-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--text-body-xs-size); color: var(--color-text-secondary); overflow-x: auto; white-space: pre-wrap; } .status-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-body-xs-size); font-weight: var(--font-weight-medium); } .status-badge--success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); } .status-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); } .status-badge--critical { background: var(--color-critical-bg); color: var(--color-critical-text); border: 1px solid var(--color-critical-border); } /* ========================================================================== avatars.css ========================================================================== */ /* ========================================================================== Avatar System — PEGMENT Design System Component: (Web Component, defined in js/pg-avatar.js) Attributes: email — used to fetch Gravatar. MD5-hashed client-side. name — display name; drives the initials fallback. size — xs | sm | md | lg | xl | 2xl | 3xl status — online | busy | away | offline (omit = no badge) badge — "app" renders the brand-badge variant (paw icon) shape — circle (default) | square Sizes (diameter): xs 20px sm 24px md 32px lg 40px xl 48px 2xl 56px 3xl 64px States: default — surface-sunken2 bg, 0.83px border (border-subtle) hover — same surface-sunken2 bg, 0.83px border (border-subtle) active — same surface-sunken2 bg, 4px border (border-subtle) Inner icon sizes (person placeholder): xs 13px sm 16px md 20px lg 24px xl 28px 2xl 32px 3xl 32px Icon color: --color-icon-primary Status badge diameter = 28% of avatar size, min 8px. Status badge sits at the bottom-right corner, with a 2px white ring. Avatar group: … Renders overlapping avatars (each shifted left) and a +N overflow pill. Gravatar fallback chain: 1. Gravatar (if email provided and Gravatar returns a real photo) 2. Initials derived from `name` (coloured by a hash of the name) 3. Generic person icon (if neither email nor name provided) ========================================================================== */ /* ── Size scale ─────────────────────────────────────────────────────────── */ pg-avatar { display: inline-block; line-height: 0; } .pg-av { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; /* so status badge can overflow */ font-family: var(--font-base); font-weight: var(--font-weight-medium); letter-spacing: -0.02em; user-select: none; } /* ── The actual circle/square ───────────────────────────────────────────── */ .pg-av__img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; border: 0.83px solid var(--color-border-subtle); } .pg-av__inner { position: relative; width: var(--av-size); height: var(--av-size); border-radius: var(--av-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--color-surface-default); color: var(--av-fg, var(--color-text-placeholder)); font-size: var(--av-font-size); line-height: 1; flex-shrink: 0; border: 0.83px solid var(--color-border-subtle); transition: border var(--transition-fast), border-width var(--transition-fast); box-sizing: border-box; } /* Anything other than plain initials — the placeholder icon, or a status/ app badge riding on top — gets sunken2 bg + a 2px border so the ring reads clearly against the badge. Pure initials (no badge) stay surface-default with the thin border above. Widens to 4px on active/ focus, same as every other avatar (see States, below). */ .pg-av__inner:has(.pg-av__placeholder), .pg-av:has(.pg-av__badge) .pg-av__inner, .pg-av:has(.pg-av__status) .pg-av__inner { background: var(--color-surface-sunken2); border-width: 2px; } /* ── States ─────────────────────────────────────────────────────────────── */ /* hover: same bg and border color; badge/placeholder avatars keep their 2px border, plain-initials avatars keep the thin 0.83px border */ .pg-av:hover .pg-av__inner { border-width: 0.83px; border-color: var(--color-border-subtle); background: var(--color-surface-sunken2); } .pg-av:hover .pg-av__inner:has(.pg-av__placeholder), .pg-av:hover:has(.pg-av__badge) .pg-av__inner, .pg-av:hover:has(.pg-av__status) .pg-av__inner { border-width: 2px; } /* active/focus: same bg and border color, but 4px border for every avatar */ .pg-av:active .pg-av__inner, .pg-av--active .pg-av__inner { border: 4px solid var(--color-border-subtle); background: var(--color-surface-sunken2); } /* ── Palette colors ─────────────────────────────────────────────────────── */ /* Applied by pg-avatar.js as .pg-av--pal-{0-8} whenever an avatar renders initials (never on the placeholder icon or a Gravatar photo) — the index is a hash of the name/email, so a given person always lands on the same color. 9 named colors, matching the Avatar palette tokens above. */ .pg-av--pal-0 .pg-av__inner { background: var(--color-avatar-blue-bg); color: var(--color-avatar-blue-text); } .pg-av--pal-1 .pg-av__inner { background: var(--color-avatar-indigo-bg); color: var(--color-avatar-indigo-text); } .pg-av--pal-2 .pg-av__inner { background: var(--color-avatar-violet-bg); color: var(--color-avatar-violet-text); } .pg-av--pal-3 .pg-av__inner { background: var(--color-avatar-plum-bg); color: var(--color-avatar-plum-text); } .pg-av--pal-4 .pg-av__inner { background: var(--color-avatar-rust-bg); color: var(--color-avatar-rust-text); } .pg-av--pal-5 .pg-av__inner { background: var(--color-avatar-amber-bg); color: var(--color-avatar-amber-text); } .pg-av--pal-6 .pg-av__inner { background: var(--color-avatar-forest-bg); color: var(--color-avatar-forest-text); } .pg-av--pal-7 .pg-av__inner { background: var(--color-avatar-teal-bg); color: var(--color-avatar-teal-text); } .pg-av--pal-8 .pg-av__inner { background: var(--color-avatar-slate-bg); color: var(--color-avatar-slate-text); } /* ── Size tokens ────────────────────────────────────────────────────────── */ /* 7 sizes: 20 | 24 | 32 | 40 | 48 | 56 | 64 px */ /* Icon sizes (placeholder SVG): */ /* xs=13px sm=16px md=20px lg=24px xl=28px 2xl=32px 3xl=32px */ .pg-av--xs { --av-size: 20px; --av-font-size: 10px; --av-icon-size: 13px; --av-badge-size: 7px; } .pg-av--sm { --av-size: 24px; --av-font-size: 12px; --av-icon-size: 16px; --av-badge-size: 8px; } .pg-av--md { --av-size: 32px; --av-font-size: 14px; --av-icon-size: 20px; --av-badge-size: 10px; } .pg-av--lg { --av-size: 40px; --av-font-size: 16px; --av-icon-size: 24px; --av-badge-size: 12px; } .pg-av--xl { --av-size: 48px; --av-font-size: 18px; --av-icon-size: 28px; --av-badge-size: 14px; } .pg-av--2xl { --av-size: 56px; --av-font-size: 20px; --av-icon-size: 32px; --av-badge-size: 16px; } .pg-av--3xl { --av-size: 64px; --av-font-size: 24px; --av-icon-size: 32px; --av-badge-size: 18px; } /* ── Shape ──────────────────────────────────────────────────────────────── */ .pg-av--circle .pg-av__inner { --av-radius: 9999px; } .pg-av--square .pg-av__inner { --av-radius: var(--radius-sm); } /* larger squares get a larger radius */ .pg-av--square.pg-av--lg .pg-av__inner, .pg-av--square.pg-av--xl .pg-av__inner { --av-radius: var(--radius); } .pg-av--square.pg-av--2xl .pg-av__inner, .pg-av--square.pg-av--3xl .pg-av__inner { --av-radius: var(--radius-lg); } /* ── Placeholder person icon ────────────────────────────────────────────── */ /* Sized via --av-icon-size; color set to icon-primary */ .pg-av__placeholder { width: var(--av-icon-size, 60%); height: var(--av-icon-size, 60%); color: var(--color-icon-primary); flex-shrink: 0; } /* ── Status badge ───────────────────────────────────────────────────────── */ .pg-av__status { position: absolute; bottom: -1px; right: -1px; width: var(--av-badge-size); height: var(--av-badge-size); border-radius: 9999px; border: 2px solid var(--color-bg-canvas); box-sizing: border-box; z-index: 1; } /* xs and sm: thinner ring */ .pg-av--xs .pg-av__status, .pg-av--sm .pg-av__status { border-width: 1.5px; } .pg-av__status--online { background: var(--color-success-icon); } .pg-av__status--busy { background: var(--color-critical-icon); } .pg-av__status--away { background: var(--color-warning-icon); } .pg-av__status--offline { background: var(--color-border-default); } /* ── App / brand badge ──────────────────────────────────────────────────── */ .pg-av__badge { position: absolute; bottom: -2px; right: -2px; width: calc(var(--av-badge-size) * 1.55); height: calc(var(--av-badge-size) * 1.55); border-radius: 9999px; background: var(--color-brand-primary); border: 2px solid var(--color-bg-canvas); display: flex; align-items: center; justify-content: center; z-index: 1; color: var(--color-brand-on-primary); font-size: calc(var(--av-badge-size) * 0.75); } /* xs/sm: smaller ring */ .pg-av--xs .pg-av__badge, .pg-av--sm .pg-av__badge { border-width: 1.5px; } /* ── Avatar group ────────────────────────────────────────────────────────── */ pg-avatar-group { display: inline-flex; align-items: center; } .pg-av-group { display: inline-flex; align-items: center; flex-direction: row; } .pg-av-group pg-avatar { flex-shrink: 0; } .pg-av-group pg-avatar + pg-avatar, .pg-av-group .pg-av-group__overflow { margin-left: var(--av-group-offset, -10px); } /* Size-specific overlaps */ .pg-av-group--xs { --av-group-offset: -5px; } .pg-av-group--sm { --av-group-offset: -6px; } .pg-av-group--md { --av-group-offset: -8px; } .pg-av-group--lg { --av-group-offset: -10px; } .pg-av-group--xl { --av-group-offset: -12px; } .pg-av-group--2xl { --av-group-offset: -14px; } .pg-av-group--3xl { --av-group-offset: -16px; } /* White ring around each avatar in a group so they visually separate */ .pg-av-group pg-avatar .pg-av__inner { box-shadow: 0 0 0 2px var(--color-bg-canvas); border-color: transparent; } /* Overflow pill (+N) */ .pg-av-group__overflow { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; width: var(--av-size); height: var(--av-size); border-radius: 9999px; background: var(--color-surface-default); color: var(--color-text-placeholder); font-family: var(--font-base); font-size: var(--av-font-size); font-weight: var(--font-weight-medium); border: 0.83px solid var(--color-border-subtle); box-shadow: 0 0 0 2px var(--color-bg-canvas); white-space: nowrap; cursor: default; } /* Add button (+ icon at end of group) */ .pg-av-group__add { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; width: var(--av-size); height: var(--av-size); border-radius: 9999px; background: transparent; color: var(--color-text-tertiary); font-size: var(--av-font-size); border: 0.83px dashed var(--color-border-default); cursor: pointer; margin-left: 6px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .pg-av-group__add:hover { background: var(--color-surface-sunken2); color: var(--color-text-primary); border-color: var(--color-border-strong); } /* ═══════════════════════════════════════════════════════════════════════ SHELL LAYOUT CONTRACT ═══════════════════════════════════════════════════════════════════════ */ .pg-shell { flex: 1; display: flex; overflow: hidden; min-height: 0; } .pg-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } #pg-overlay { position: fixed; inset: 0; z-index: 100; display: none; } #pg-overlay.is-open { display: block; } /* ═══════════════════════════════════════════════════════════════════════ TOPBAR — Minimal chrome bar Empty left area, chrome icons on right. ═══════════════════════════════════════════════════════════════════════ */ .pg-topbar { height: var(--pg-topbar-height, 48px); background: var(--color-bg-default); display: flex; align-items: center; /* padding: 0 12px; */ gap: 8px; position: sticky; top: 0; z-index: 30; } /* Left area: empty by default, for dynamic content */ .pg-topbar-left { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } /* Right area: chrome icons + dynamic buttons */ .pg-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* Chrome icon buttons */ .pg-chrome-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-primary); background: transparent; border: none; transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1); } .pg-chrome-btn:hover { background: var(--color-bg-active); color: var(--color-text-primary); } .pg-chrome-btn .ti { display: block; pointer-events: none; --icon-size: 18px; } .pg-chrome-btn.is-active { background: var(--color-surface-raised); color: var(--color-text-primary); } /* Page title */ .pg-topbar-title { font-size: 18px; font-weight: var(--font-weight-medium, 500); line-height: var(--text-title-sm-line-height, 20px); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; padding: 0; } /* Left additions — sits after title/tabs, still in the left flex area */ slot[name="pg-topbar-left-additions"]::slotted(*), .pg-topbar-left slot[name="pg-topbar-left-additions"] { display: flex; align-items: center; gap: 8px; margin-left: 4px; } /* Right additions — sits before actions/icons, in the right flex area */ slot[name="pg-topbar-right-additions"]::slotted(*), .pg-topbar-right slot[name="pg-topbar-right-additions"] { display: flex; align-items: center; gap: 4px; margin-right: 4px; } /* Optional: divider between left-additions and the rest of left content */ .pg-topbar-left-additions-divider { width: 1px; height: 20px; background: var(--color-border-subtle); margin: 0 4px; flex-shrink: 0; } /* Optional: divider between right-additions and actions/icons */ .pg-topbar-right-additions-divider { width: 1px; height: 20px; background: var(--color-border-subtle); margin: 0 4px; flex-shrink: 0; } .pg-topbar-left-additions { display: flex; align-items: center; gap: 8px; } .pg-topbar-right-additions { display: flex; align-items: center; gap: 4px; } /* ═══════════════════════════════════════════════════════════════════════ SHELL LAYOUT CONTRACT ═══════════════════════════════════════════════════════════════════════ */ /* Body layout: sidebar + content column */ .pg-shell { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* Content column: topbar + main stacked */ .pg-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* Main content area */ .pg-main { flex: 1; overflow: auto; position: relative; background: var(--color-bg-default); padding: 0px 12px 8px 12px; -ms-overflow-style: none; min-height: 0; scrollbar-width: none; } .pg-main.is-incognito { background: var(--color-surface-default-subtle); } /* Overlay for popup dismissal */ #pg-overlay { position: fixed; inset: 0; z-index: 100; display: none; } #pg-overlay.is-open { display: block; } /* Scrollable workspace list inside dropdown */ .pg-dropdown-content .pg-ws-list { max-height: 136px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.15) transparent; } .pg-dropdown-content .pg-ws-list::-webkit-scrollbar { width: 3px; } .pg-dropdown-content .pg-ws-list::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.15); border-radius: 3px; } /* ========================================================================== variables.css ========================================================================== */ /* ========================================================================== Design Tokens / CSS Custom Properties PEGMENT Design System — Complete Color System ========================================================================== */ :root { /* ======================================================================== 1. BASE COLORS ======================================================================== */ --color-white: #FFFFFF; --color-dark: #02050D; --color-black: #000000; /* ======================================================================== 2. NEUTRAL SCALE ======================================================================== */ --color-neutral-0: #FFFFFF; --color-neutral-10: #FAFAFA; --color-neutral-20: #F5F5F5; --color-neutral-30: #EBEBEC; --color-neutral-40: #DEDEDE; --color-neutral-50: #BFBFBF; --color-neutral-60: #B0B0B0; --color-neutral-70: #A3A3A3; --color-neutral-80: #949494; --color-neutral-90: #858585; --color-neutral-100: #757575; --color-neutral-200: #666666; --color-neutral-300: #575757; --color-neutral-400: #4A4A4A; --color-neutral-500: #3B3B3B; --color-neutral-600: #2E2E2E; --color-neutral-700: #1C1C1C; --color-neutral-800: #0D0D0D; --color-neutral-900: #000000; /* ======================================================================== 3. PEGGY BLUE SCALE (Brand) ======================================================================== */ --color-peggy-blue-50: #e6f0ff; --color-peggy-blue-100: #e6f0ff; --color-peggy-blue-200: #8ab8ff; --color-peggy-blue-300: #5497ff; --color-peggy-blue-400: #3383ff; --color-peggy-blue-500: #0064ff; --color-peggy-blue-600: #005be8; --color-peggy-blue-700: #0047b5; --color-peggy-blue-800: #00378c; --color-peggy-blue-900: #002a6b; /* ======================================================================== 4. CRITICAL SCALE (Error) ======================================================================== */ --color-critical-25: #FFF5F6; --color-critical-50: #FDE6E9; --color-critical-100: #F9B0BB; --color-critical-200: #F78A9B; --color-critical-300: #F3546D; --color-critical-400: #F13351; --color-critical-500: #ED0025; --color-critical-600: #D80022; --color-critical-700: #A8001A; --color-critical-800: #820014; --color-critical-900: #640010; /* ======================================================================== 5. WARNING SCALE ======================================================================== */ --color-warning-50: #FFFBE7; --color-warning-100: #FFF2B3; --color-warning-200: #FFEC8E; --color-warning-300: #FFE45B; --color-warning-400: #FFDE3B; --color-warning-500: #FFD60A; --color-warning-600: #E8C309; --color-warning-700: #B59807; --color-warning-800: #8C7606; --color-warning-900: #6B5A04; /* ======================================================================== 6. SUCCESS SCALE ======================================================================== */ --color-success-50: #E6F4EC; --color-success-100: #B0DCC3; --color-success-200: #8ACBA5; --color-success-400: #33A463; --color-success-500: #008D3C; --color-success-600: #008037; --color-success-700: #00642B; --color-success-800: #004E21; --color-success-900: #003B19; /* ======================================================================== 8. SEMANTIC TOKENS — LIGHT MODE ======================================================================== */ /* --- Background --- */ --color-bg-canvas: var(--color-neutral-20); --color-bg-default: var(--color-neutral-0); --color-bg-subtle: var(--color-neutral-10); --color-bg-muted: var(--color-neutral-30); --color-bg-emphasis: var(--color-neutral-900); --color-bg-inverse: var(--color-neutral-900); --color-bg-active: var(--color-neutral-40); /* --- Surface --- */ --color-surface-default: var(--color-neutral-0); --color-surface-default-subtle: #1C1C1C0A; --color-surface-raised: var(--color-neutral-30); --color-surface-overlay: var(--color-neutral-20); --color-surface-sunken: var(--color-neutral-10); --color-surface-sunken2: var(--color-neutral-20); /* --- Text --- */ --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-400); --color-text-tertiary: var(--color-neutral-200); --color-text-placeholder: var(--color-neutral-90); --color-text-placeholder-subtle: var(--color-neutral-30); --color-text-disabled: var(--color-neutral-60); --color-text-inverse: var(--color-neutral-0); --color-text-link: var(--color-peggy-blue-500); --color-text-link-hover: var(--color-peggy-blue-600); /* --- Icon --- */ --color-icon-primary: var(--color-neutral-900); --color-icon-secondary: var(--color-neutral-400); --color-icon-tertiary: var(--color-neutral-200); --color-icon-placeholder: var(--color-neutral-90); --color-icon-placeholder-subtle: var(--color-neutral-30); --color-icon-disabled: var(--color-neutral-60); --color-icon-inverse: var(--color-neutral-0); --color-icon-link: var(--color-peggy-blue-500); --color-icon-link-hover: var(--color-peggy-blue-600); /* --- Brand --- */ --color-brand-primary: var(--color-neutral-900); --color-brand-primary-hover: var(--color-neutral-700); --color-brand-primary-active: var(--color-neutral-600); --color-brand-on-primary: var(--color-neutral-0); --color-brand-primary-subtle: var(--color-neutral-10); --color-brand-primary-muted: var(--color-neutral-30); --color-brand-secondary: var(--color-peggy-blue-500); --color-brand-secondary-hover: var(--color-peggy-blue-600); --color-brand-secondary-active: var(--color-peggy-blue-700); --color-brand-on-secondary: var(--color-neutral-0); --color-brand-secondary-subtle: var(--color-peggy-blue-50); --color-brand-secondary-subtle2: #0064FF26; --color-brand-secondary-muted: var(--color-peggy-blue-100); --color-brand-tertiary: var(--color-neutral-400); --color-brand-tertiary-hover: var(--color-neutral-900); --color-brand-tertiary-active: var(--color-neutral-700); --color-brand-on-tertiary: var(--color-neutral-0); --color-brand-tertiary-subtle: var(--color-peggy-blue-50); --color-brand-tertiary-muted: var(--color-peggy-blue-100); /* --- Interactive --- */ --color-interactive-primary: var(--color-neutral-900); --color-interactive-primary-hover: var(--color-neutral-700); --color-interactive-primary-active: var(--color-neutral-600); --color-interactive-primary-disabled: var(--color-neutral-50); --color-interactive-secondary: var(--color-neutral-0); --color-interactive-secondary-hover: var(--color-neutral-10); --color-interactive-ghost-hover: var(--color-neutral-20); /* --- Border --- */ --color-border-on-canvas: var(--color-neutral-30); --color-border-subtle: var(--color-neutral-30); --color-border-medium: var(--color-neutral-40); --color-border-default: var(--color-neutral-50); --color-border-strong: var(--color-neutral-700); --color-border-focus: var(--color-peggy-blue-500); /* --- Status / Success --- */ --color-success-bg: var(--color-success-100); --color-success-bg-subtle: #008D3C26; --color-success-border: var(--color-success-200); --color-success-text: var(--color-success-700); --color-success-icon: var(--color-success-500); --color-success-action: var(--color-success-500); --color-success-action-hover: var(--color-success-600); /* --- Status / Warning --- */ --color-warning-bg: var(--color-warning-100); --color-warning-bg-subtle: #FFD60A26; --color-warning-border: var(--color-warning-300); --color-warning-text: var(--color-warning-800); --color-warning-icon: var(--color-warning-600); --color-warning-action: var(--color-warning-500); --color-warning-action-hover: var(--color-warning-600); /* --- Status / Critical --- */ --color-critical-bg: var(--color-critical-50); --color-critical-bg-subtle: #ED00251A; --color-critical-border: var(--color-critical-200); --color-critical-text: var(--color-critical-700); --color-critical-icon: var(--color-critical-500); --color-critical-action: var(--color-critical-500); --color-critical-action-hover: var(--color-critical-600); --color-critical-disabled: var(--color-critical-100); /* --- Avatar Palette --- */ --color-avatar-blue-bg: #E3E5F6; --color-avatar-blue-text: #132091; --color-avatar-indigo-bg: #E8E6F1; --color-avatar-indigo-text: #332473; --color-avatar-violet-bg: #EBE5F0; --color-avatar-violet-text: #4B226E; --color-avatar-plum-bg: #EFE5EC; --color-avatar-plum-text: #64224D; --color-avatar-rust-bg: #F1E8E6; --color-avatar-rust-text: #733223; --color-avatar-amber-bg: #F1EDE4; --color-avatar-amber-text: #735719; --color-avatar-forest-bg: #E6EDEA; --color-avatar-forest-text: #245841; --color-avatar-teal-bg: #E4EDEE; --color-avatar-teal-text: #19585D; --color-avatar-slate-bg: #E7E8EA; --color-avatar-slate-text: #303642; /* --- Toggle Button --- */ --toggle-btn-bg-default: #1C1C1C0A; --toggle-btn-bg-hover: var(--color-neutral-40); --toggle-btn-bg-selected: var(--color-brand-secondary-subtle2); --toggle-btn-bg-disabled: #1C1C1C0A; --toggle-btn-label-default: var(--color-neutral-800); --toggle-btn-label-selected: var(--color-brand-secondary); --toggle-btn-label-disabled: var(--color-neutral-60); --toggle-group-bg-default: var(--color-neutral-20); /* --- table --- */ --color-table-bg-white: #ffffff; --color-table-header-bg-grey: var(--color-neutral-10); /* ======================================================================== TYPOGRAPHY — base ======================================================================== */ --font-base: 'Geist', sans-serif; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-base: 1.5; /* ======================================================================== TYPOGRAPHY — Display scale ======================================================================== */ --text-display-2xl-size: 4.5rem; /* 72px */ --text-display-2xl-line-height: 5.625rem; /* 90px */ --text-display-2xl-letter-spacing: -0.02em; --text-display-xl-size: 3.75rem; /* 60px */ --text-display-xl-line-height: 4.5rem; /* 72px */ --text-display-xl-letter-spacing: -0.02em; --text-display-lg-size: 3rem; /* 48px */ --text-display-lg-line-height: 3.75rem; /* 60px */ --text-display-lg-letter-spacing: -0.02em; --text-display-md-size: 2.25rem; /* 36px */ --text-display-md-line-height: 2.75rem; /* 44px */ --text-display-md-letter-spacing: -0.02em; /* ======================================================================== TYPOGRAPHY — Headline scale ======================================================================== */ --text-headline-lg-size: 2rem; /* 32px */ --text-headline-lg-line-height: 2.5rem; /* 40px */ --text-headline-md-size: 1.75rem; /* 28px */ --text-headline-md-line-height: 2.25rem; /* 36px */ --text-headline-sm-size: 1.5rem; /* 24px */ --text-headline-sm-line-height: 2rem; /* 32px */ /* ======================================================================== TYPOGRAPHY — Title scale ======================================================================== */ --text-title-lg-size: 1.25rem; /* 20px */ --text-title-lg-line-height: 1.75rem; /* 28px */ --text-title-md-size: 1rem; /* 16px */ --text-title-md-line-height: 1.5rem; /* 24px */ --text-title-sm-size: 0.875rem; /* 14px */ --text-title-sm-line-height: 1.25rem; /* 20px */ /* ======================================================================== TYPOGRAPHY — Body scale ======================================================================== */ --text-body-xl-size: 1.125rem; /* 18px */ --text-body-xl-line-height: 1.5rem; /* 24px */ --text-body-lg-size: 1rem; /* 16px */ --text-body-lg-line-height: 1.5rem; /* 24px */ --text-body-md-size: 0.875rem; /* 14px */ --text-body-md-line-height: 1.25rem; /* 20px */ --text-body-sm-size: 0.8125rem; /* 13px */ --text-body-sm-line-height: 1rem; /* 16px */ --text-body-xs-size: 0.75rem; /* 12px */ --text-body-xs-line-height: 1rem; /* 16px */ /* ======================================================================== TYPOGRAPHY — Label scale ======================================================================== */ --text-label-lg-size: 0.875rem; /* 14px */ --text-label-lg-line-height: 1.25rem; /* 20px */ --text-label-md-size: 12px; /* 13px */ --text-label-md-line-height: 1rem; /* 16px */ --text-label-sm-size: 0.75rem; /* 12px */ --text-label-sm-line-height: 1rem; /* 16px */ --text-label-xs-size: 0.6875rem; /* 11px */ --text-label-xs-line-height: 0.875rem; /* 14px */ /* ======================================================================== SPACING SCALE ======================================================================== */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; /* ======================================================================== LAYOUT ======================================================================== */ --max-width: 1100px; --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; --transition: 0.2s ease; --transition-fast: 0.15s ease; /* ======================================================================== SHADOWS ======================================================================== */ --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-focus: 0px 0px 0px 4px; /* --- Buttons --- */ /* primary */ --btn-primary-bg: var(--color-neutral-900); --btn-primary-bg-hover: var(--color-neutral-700); --btn-primary-bg-active: var(--color-neutral-600); --btn-primary-label: var(--color-neutral-0); --btn-primary-bg-disabled: var(--color-neutral-30); --btn-primary-label-disabled: var(--color-neutral-0); --btn-primary-focus-ring: var(--color-peggy-blue-600); --btn-primary-focus-ring-offset: var(--color-neutral-0); /* secondary-color */ --btn-secondary-color-bg: var(--color-peggy-blue-500); --btn-secondary-color-bg-hover: var(--color-peggy-blue-600); --btn-secondary-color-bg-active: var(--color-peggy-blue-500); --btn-secondary-color-label: var(--color-neutral-0); --btn-secondary-color-border: var(--color-neutral-900); --btn-secondary-color-bg-disabled: var(--color-peggy-blue-100); --btn-secondary-color-label-disabled: var(--color-neutral-0); --btn-secondary-color-focus-ring: var(--color-peggy-blue-600); /* secondary-gray */ --btn-secondary-gray-bg: var(--color-neutral-30); --btn-secondary-gray-bg-hover: var(--color-neutral-40); --btn-secondary-gray-bg-active: var(--color-neutral-30); --btn-secondary-gray-bg-disabled: var(--color-neutral-30); --btn-secondary-gray-label: var(--color-neutral-600); --btn-secondary-gray-label-active: var(--color-neutral-900); --btn-secondary-gray-label-disabled: var(--color-neutral-0); /* outline-color */ --btn-outline-color-bg: var(--color-peggy-blue-50); --btn-outline-color-border: var(--color-peggy-blue-500); --btn-outline-color-border-hover: var(--color-peggy-blue-200); --btn-outline-color-border-active: var(--color-peggy-blue-700); --btn-outline-color-label: var(--color-peggy-blue-500); --btn-outline-color-label-active: var(--color-peggy-blue-600); --btn-outline-color-border-disabled: var(--color-peggy-blue-100); --btn-outline-color-label-disabled: var(--color-peggy-blue-100); --btn-outline-color-focus-ring: var(--color-peggy-blue-600); /* outline-gray */ --btn-outline-gray-bg: var(--color-neutral-40); --btn-outline-gray-border: var(--color-neutral-300); --btn-outline-gray-border-active: var(--color-neutral-800); --btn-outline-gray-label: var(--color-neutral-700); --btn-outline-gray-label-active: var(--color-neutral-800); --btn-outline-gray-border-disabled: var(--color-neutral-40); --btn-outline-gray-label-disabled: var(--color-neutral-50); --btn-outline-gray-focus-ring: var(--color-peggy-blue-600); /* ghost-color */ --btn-ghost-color-bg: var(--color-peggy-blue-50); --btn-ghost-color-label: var(--color-peggy-blue-500); --btn-ghost-color-label-active: var(--color-peggy-blue-500); --btn-ghost-color-border-disabled: var(--color-peggy-blue-100); --btn-ghost-color-label-disabled: var(--color-peggy-blue-100); /* ghost-gray */ --btn-ghost-gray-bg: var(--color-neutral-30); --btn-ghost-gray-bg-hover: var(--color-neutral-40); --btn-ghost-gray-bg-active: var(--color-neutral-30); --btn-ghost-gray-bg-disabled: var(--color-neutral-30); --btn-ghost-gray-label: var(--color-neutral-600); --btn-ghost-gray-label-active: var(--color-neutral-900); --btn-ghost-gray-label-disabled: var(--color-neutral-50); /* link-color */ --btn-link-color-label: var(--color-peggy-blue-600); --btn-link-color-label-hover: var(--color-peggy-blue-400); --btn-link-color-label-disabled: var(--color-peggy-blue-100); /* link-gray */ --btn-link-gray-label: var(--color-neutral-800); --btn-link-gray-label-hover: var(--color-neutral-600); --btn-link-gray-label-disabled: var(--color-neutral-50); /* --- tab --- */ --color-tab-on-bg: #1C1C1C0A; --color-tab-on-canvas: #1C1C1C0A; /* --- label (color picker / tag hues) --- */ --color-label-amber-bg: #FEF3C7; --color-label-amber-text: #92400E; --color-label-black-bg: #000000; --color-label-black-text: #FFFFFF; --color-label-red-bg: #FDE8E8; --color-label-red-text: #9B1C1C; --color-label-orange-bg: #FFEDD5; --color-label-orange-text: #9A3412; --color-label-grey-bg: #F2F2F2; --color-label-grey-text: #262626; --color-label-green-bg: #DCFCE7; --color-label-green-text: #166534; --color-label-teal-bg: #CCFBF1; --color-label-teal-text: #115E59; --color-label-sky-bg: #E0F2FE; --color-label-sky-text: #075985; --color-label-indigo-bg: #E0E7FF; --color-label-indigo-text: #3730A3; --color-label-purple-bg: #F3E8FF; --color-label-purple-text: #6B21A8; --color-label-pink-bg: #FCE7F3; --color-label-pink-text: #9D174D; } /* ========================================================================== DARK MODE ========================================================================== */ @media (prefers-color-scheme: dark) { :root { /* --- Background --- */ --color-bg-canvas: var(--color-neutral-900); --color-bg-default: var(--color-neutral-800); --color-bg-subtle: var(--color-neutral-700); --color-bg-muted: var(--color-neutral-600); --color-bg-emphasis: var(--color-neutral-0); --color-bg-inverse: var(--color-neutral-0); --color-bg-active: var(--color-neutral-700); /* --- Surface --- */ --color-surface-default: var(--color-neutral-700); --color-surface-default-subtle: #1C1C1C4D; --color-surface-raised: var(--color-neutral-600); --color-surface-overlay: var(--color-neutral-700); --color-surface-sunken: var(--color-neutral-800); --color-surface-sunken2: var(--color-neutral-900); /* --- Text --- */ --color-text-primary: var(--color-neutral-0); --color-text-secondary: var(--color-neutral-60); --color-text-tertiary: var(--color-neutral-90); --color-text-placeholder: var(--color-neutral-200); --color-text-placeholder-subtle: var(--color-neutral-600); --color-text-disabled: var(--color-neutral-400); --color-text-inverse: var(--color-neutral-900); --color-text-link: var(--color-peggy-blue-300); --color-text-link-hover: var(--color-peggy-blue-200); /* --- Icon --- */ --color-icon-primary: var(--color-neutral-0); --color-icon-secondary: var(--color-neutral-60); --color-icon-tertiary: var(--color-neutral-90); --color-icon-placeholder: var(--color-neutral-200); --color-icon-placeholder-subtle: var(--color-neutral-600); --color-icon-disabled: var(--color-neutral-400); --color-icon-inverse: var(--color-neutral-900); --color-icon-link: var(--color-peggy-blue-300); --color-icon-link-hover: var(--color-peggy-blue-200); /* --- Brand --- */ --color-brand-primary: var(--color-neutral-0); --color-brand-primary-hover: var(--color-neutral-30); --color-brand-primary-active: var(--color-neutral-30); --color-brand-on-primary: var(--color-neutral-900); --color-brand-primary-subtle: var(--color-neutral-800); --color-brand-primary-muted: var(--color-neutral-700); --color-brand-secondary: var(--color-peggy-blue-400); --color-brand-secondary-hover: var(--color-peggy-blue-300); --color-brand-secondary-active: var(--color-peggy-blue-200); --color-brand-on-secondary: var(--color-neutral-0); --color-brand-secondary-subtle: var(--color-peggy-blue-900); --color-brand-secondary-subtle2: #0064FF26; --color-brand-secondary-muted: var(--color-peggy-blue-800); --color-brand-tertiary: var(--color-neutral-60); --color-brand-tertiary-hover: var(--color-neutral-0); --color-brand-tertiary-active: var(--color-neutral-10); --color-brand-on-tertiary: var(--color-neutral-0); --color-brand-tertiary-subtle: var(--color-peggy-blue-900); --color-brand-tertiary-muted: var(--color-peggy-blue-800); /* --- Interactive --- */ --color-interactive-primary: var(--color-neutral-0); --color-interactive-primary-hover: var(--color-neutral-10); --color-interactive-primary-active: var(--color-neutral-30); --color-interactive-primary-disabled: var(--color-neutral-500); --color-interactive-secondary: var(--color-neutral-700); --color-interactive-secondary-hover: var(--color-neutral-600); --color-interactive-ghost-hover: var(--color-neutral-600); /* --- Border --- */ --color-border-on-canvas: var(--color-neutral-800); --color-border-subtle: var(--color-neutral-700); --color-border-medium: var(--color-neutral-600); --color-border-default: var(--color-neutral-500); --color-border-strong: var(--color-neutral-90); --color-border-focus: var(--color-peggy-blue-400); /* --- Status / Success --- */ --color-success-bg: var(--color-success-800); --color-success-bg-subtle: #008D3C26; --color-success-border: var(--color-success-700); --color-success-text: var(--color-success-200); --color-success-icon: var(--color-success-400); --color-success-action: var(--color-success-400); --color-success-action-hover: var(--color-success-600); /* --- Status / Warning --- */ --color-warning-bg: var(--color-warning-800); --color-warning-bg-subtle: #FFD60A26; --color-warning-border: var(--color-warning-700); --color-warning-text: var(--color-warning-200); --color-warning-icon: var(--color-warning-400); --color-warning-action: var(--color-warning-400); --color-warning-action-hover: var(--color-warning-300); /* --- Status / Critical --- */ --color-critical-bg: var(--color-critical-800); --color-critical-bg-subtle: #ED00251A; --color-critical-border: var(--color-critical-700); --color-critical-text: var(--color-critical-200); --color-critical-icon: var(--color-critical-400); --color-critical-action: var(--color-critical-400); --color-critical-action-hover: var(--color-critical-300); --color-critical-disabled: var(--color-critical-900); /* --- Avatar Palette --- */ --color-avatar-blue-bg: #1727B1; --color-avatar-blue-text: #FFFFFF; --color-avatar-indigo-bg: #3E2C8C; --color-avatar-indigo-text: #FFFFFF; --color-avatar-violet-bg: #EBE5F0; --color-avatar-violet-text: #FFFFFF; --color-avatar-plum-bg: #7A2A5E; --color-avatar-plum-text: #FFFFFF; --color-avatar-rust-bg: #8C3D2B; --color-avatar-rust-text: #FFFFFF; --color-avatar-amber-bg: #8C6A1F; --color-avatar-amber-text: #FFFFFF; --color-avatar-forest-bg: #2C6B4F; --color-avatar-forest-text: #FFFFFF; --color-avatar-teal-bg: #1F6B72; --color-avatar-teal-text: #FFFFFF; --color-avatar-slate-bg: #3A4250; --color-avatar-slate-text: #FFFFFF; /* --- Toggle Button --- */ --toggle-btn-bg-default: var(--color-neutral-700); --toggle-btn-bg-hover: var(--color-neutral-600); --toggle-btn-bg-selected: var(--color-brand-secondary-subtle2); --toggle-btn-bg-disabled: #1C1C1C4D; --toggle-btn-label-default: var(--color-neutral-10); --toggle-btn-label-selected: var(--color-brand-secondary); --toggle-btn-label-disabled: var(--color-neutral-400); --toggle-group-bg-default: var(--color-neutral-700); /* --- table --- */ --color-table-bg-white: var(--color-neutral-800); --color-table-header-bg-grey: #1c1c1c33; /* --- Buttons --- */ /* primary */ --btn-primary-bg: var(--color-neutral-0); --btn-primary-bg-hover: var(--color-neutral-40); --btn-primary-bg-active: var(--color-neutral-0); --btn-primary-label: var(--color-neutral-900); --btn-primary-bg-disabled: var(--color-neutral-700); --btn-primary-label-disabled: var(--color-neutral-900); --btn-primary-focus-ring: var(--color-peggy-blue-300); --btn-primary-focus-ring-offset: var(--color-neutral-900); /* secondary-color */ --btn-secondary-color-bg: var(--color-peggy-blue-400); --btn-secondary-color-bg-hover: var(--color-peggy-blue-300); --btn-secondary-color-bg-active: var(--color-peggy-blue-400); --btn-secondary-color-label: var(--color-neutral-0); --btn-secondary-color-border: var(--color-neutral-0); --btn-secondary-color-bg-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-secondary-color-label-disabled: var(--color-neutral-900); --btn-secondary-color-focus-ring: var(--color-peggy-blue-300); /* secondary-gray */ --btn-secondary-gray-bg: var(--color-neutral-600); --btn-secondary-gray-bg-hover: var(--color-neutral-700); --btn-secondary-gray-bg-active: var(--color-neutral-600); --btn-secondary-gray-bg-disabled: var(--color-neutral-700); --btn-secondary-gray-label: var(--color-neutral-60); --btn-secondary-gray-label-active: var(--color-neutral-0); --btn-secondary-gray-label-disabled: var(--color-neutral-500); /* outline-color */ --btn-outline-color-bg: #001943; --btn-outline-color-border: var(--color-peggy-blue-400); --btn-outline-color-border-hover: var(--color-peggy-blue-300); --btn-outline-color-border-active: var(--color-peggy-blue-600); --btn-outline-color-label: var(--color-peggy-blue-600); --btn-outline-color-label-active: var(--color-peggy-blue-400); --btn-outline-color-border-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-outline-color-label-disabled: var(--color-peggy-blue-900); --btn-outline-color-focus-ring: var(--color-peggy-blue-300); /* outline-gray */ --btn-outline-gray-bg: var(--color-neutral-700); --btn-outline-gray-border: var(--color-neutral-700); --btn-outline-gray-border-active: var(--color-neutral-0); --btn-outline-gray-label: var(--color-neutral-50); --btn-outline-gray-label-active: var(--color-neutral-0); --btn-outline-gray-border-disabled: var(--color-neutral-700); --btn-outline-gray-label-disabled: var(--color-neutral-500); --btn-outline-gray-focus-ring: var(--color-peggy-blue-300); /* ghost-color */ --btn-ghost-color-bg: #0B1A31; --btn-ghost-color-label: var(--color-peggy-blue-400); --btn-ghost-color-label-active: var(--color-peggy-blue-100); --btn-ghost-color-border-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-ghost-color-label-disabled: var(--color-peggy-blue-900); /* ghost-gray */ --btn-ghost-gray-bg: var(--color-neutral-600); --btn-ghost-gray-bg-hover: var(--color-neutral-700); --btn-ghost-gray-bg-active: var(--color-neutral-600); --btn-ghost-gray-bg-disabled: var(--color-neutral-700); --btn-ghost-gray-label: var(--color-neutral-60); --btn-ghost-gray-label-active: var(--color-neutral-0); --btn-ghost-gray-label-disabled: var(--color-neutral-500); /* link-color */ --btn-link-color-label: var(--color-peggy-blue-500); --btn-link-color-label-hover: var(--color-peggy-blue-100); --btn-link-color-label-disabled: var(--color-peggy-blue-900); /* link-gray */ --btn-link-gray-label: var(--color-neutral-0); --btn-link-gray-label-hover: var(--color-neutral-50); --btn-link-gray-label-disabled: var(--color-neutral-500); /* --- tab --- */ --color-tab-on-bg: var(--color-neutral-900); --color-tab-on-canvas: #1C1C1C4D; /* --- label (color picker / tag hues) --- */ --color-label-amber-bg: #40300A; --color-label-amber-text: #FCD34D; --color-label-black-bg: #FFFFFF; --color-label-black-text: #000000; --color-label-red-bg: #4A1414; --color-label-red-text: #FCA5A5; --color-label-orange-bg: #4A2108; --color-label-orange-text: #FDBA74; --color-label-grey-bg: #262626; --color-label-grey-text: #E5E5E5; --color-label-green-bg: #0F3A20; --color-label-green-text: #86EFAC; --color-label-teal-bg: #0B3B37; --color-label-teal-text: #5EEAD4; --color-label-sky-bg: #0C3350; --color-label-sky-text: #7DD3FC; --color-label-indigo-bg: #1E1B5E; --color-label-indigo-text: #A5B4FC; --color-label-purple-bg: #3B1466; --color-label-purple-text: #D8B4FE; --color-label-pink-bg: #4A1230; --color-label-pink-text: #F9A8D4; } } /* Manual dark mode override (add .dark class to html or body) */ .dark { /* --- Background --- */ --color-bg-canvas: var(--color-neutral-900); --color-bg-default: var(--color-neutral-800); --color-bg-subtle: var(--color-neutral-700); --color-bg-muted: var(--color-neutral-600); --color-bg-emphasis: var(--color-neutral-0); --color-bg-inverse: var(--color-neutral-0); --color-bg-active: var(--color-neutral-700); /* --- Surface --- */ --color-surface-default: var(--color-neutral-700); --color-surface-default-subtle: #1C1C1C4D; --color-surface-raised: var(--color-neutral-600); --color-surface-overlay: var(--color-neutral-700); --color-surface-sunken: var(--color-neutral-800); --color-surface-sunken2: var(--color-neutral-900); /* --- Text --- */ --color-text-primary: var(--color-neutral-0); --color-text-secondary: var(--color-neutral-60); --color-text-tertiary: var(--color-neutral-90); --color-text-placeholder: var(--color-neutral-200); --color-text-placeholder-subtle: var(--color-neutral-600); --color-text-disabled: var(--color-neutral-400); --color-text-inverse: var(--color-neutral-900); --color-text-link: var(--color-peggy-blue-300); --color-text-link-hover: var(--color-peggy-blue-200); /* --- Icon --- */ --color-icon-primary: var(--color-neutral-0); --color-icon-secondary: var(--color-neutral-60); --color-icon-tertiary: var(--color-neutral-90); --color-icon-placeholder: var(--color-neutral-200); --color-icon-placeholder-subtle: var(--color-neutral-600); --color-icon-disabled: var(--color-neutral-400); --color-icon-inverse: var(--color-neutral-900); --color-icon-link: var(--color-peggy-blue-300); --color-icon-link-hover: var(--color-peggy-blue-200); /* --- Brand --- */ --color-brand-primary: var(--color-neutral-0); --color-brand-primary-hover: var(--color-neutral-30); --color-brand-primary-active: var(--color-neutral-30); --color-brand-on-primary: var(--color-neutral-900); --color-brand-primary-subtle: var(--color-neutral-800); --color-brand-primary-muted: var(--color-neutral-700); --color-brand-secondary: var(--color-peggy-blue-400); --color-brand-secondary-hover: var(--color-peggy-blue-300); --color-brand-secondary-active: var(--color-peggy-blue-200); --color-brand-on-secondary: var(--color-neutral-0); --color-brand-secondary-subtle: var(--color-peggy-blue-900); --color-brand-secondary-subtle2: #0064FF26; --color-brand-secondary-muted: var(--color-peggy-blue-800); --color-brand-tertiary: var(--color-neutral-60); --color-brand-tertiary-hover: var(--color-neutral-0); --color-brand-tertiary-active: var(--color-neutral-10); --color-brand-on-tertiary: var(--color-neutral-0); --color-brand-tertiary-subtle: var(--color-peggy-blue-900); --color-brand-tertiary-muted: var(--color-peggy-blue-800); /* --- Interactive --- */ --color-interactive-primary: var(--color-neutral-0); --color-interactive-primary-hover: var(--color-neutral-10); --color-interactive-primary-active: var(--color-neutral-30); --color-interactive-primary-disabled: var(--color-neutral-500); --color-interactive-secondary: var(--color-neutral-700); --color-interactive-secondary-hover: var(--color-neutral-600); --color-interactive-ghost-hover: var(--color-neutral-600); /* --- Border --- */ --color-border-on-canvas: var(--color-neutral-800); --color-border-subtle: var(--color-neutral-700); --color-border-medium: var(--color-neutral-600); --color-border-default: var(--color-neutral-500); --color-border-strong: var(--color-neutral-90); --color-border-focus: var(--color-peggy-blue-400); /* --- Status / Success --- */ --color-success-bg: var(--color-success-800); --color-success-bg-subtle: #008D3C26; --color-success-border: var(--color-success-700); --color-success-text: var(--color-success-200); --color-success-icon: var(--color-success-400); --color-success-action: var(--color-success-400); --color-success-action-hover: var(--color-success-600); /* --- Status / Warning --- */ --color-warning-bg: var(--color-warning-800); --color-warning-bg-subtle: #FFD60A26; --color-warning-border: var(--color-warning-700); --color-warning-text: var(--color-warning-200); --color-warning-icon: var(--color-warning-400); --color-warning-action: var(--color-warning-400); --color-warning-action-hover: var(--color-warning-300); /* --- Status / Critical --- */ --color-critical-bg: var(--color-critical-800); --color-critical-bg-subtle: #ED00251A; --color-critical-border: var(--color-critical-700); --color-critical-text: var(--color-critical-200); --color-critical-icon: var(--color-critical-400); --color-critical-action: var(--color-critical-400); --color-critical-action-hover: var(--color-critical-300); --color-critical-disabled: var(--color-critical-900); /* --- Avatar Palette --- */ --color-avatar-blue-bg: #1727B1; --color-avatar-blue-text: #FFFFFF; --color-avatar-indigo-bg: #3E2C8C; --color-avatar-indigo-text: #FFFFFF; --color-avatar-violet-bg: #EBE5F0; --color-avatar-violet-text: #FFFFFF; --color-avatar-plum-bg: #7A2A5E; --color-avatar-plum-text: #FFFFFF; --color-avatar-rust-bg: #8C3D2B; --color-avatar-rust-text: #FFFFFF; --color-avatar-amber-bg: #8C6A1F; --color-avatar-amber-text: #FFFFFF; --color-avatar-forest-bg: #2C6B4F; --color-avatar-forest-text: #FFFFFF; --color-avatar-teal-bg: #1F6B72; --color-avatar-teal-text: #FFFFFF; --color-avatar-slate-bg: #3A4250; --color-avatar-slate-text: #FFFFFF; /* --- Toggle Button --- */ --toggle-btn-bg-default: var(--color-neutral-700); --toggle-btn-bg-hover: var(--color-neutral-600); --toggle-btn-bg-selected: var(--color-brand-secondary-subtle2); --toggle-btn-bg-disabled: #1C1C1C4D; --toggle-btn-label-default: var(--color-neutral-10); --toggle-btn-label-selected: var(--color-brand-secondary); --toggle-btn-label-disabled: var(--color-neutral-400); --toggle-group-bg-default: var(--color-neutral-700); /* --- table --- */ --color-table-bg-white: var(--color-neutral-800); --color-table-header-bg-grey: #1c1c1c33; /* --- Buttons --- */ /* primary */ --btn-primary-bg: var(--color-neutral-0); --btn-primary-bg-hover: var(--color-neutral-40); --btn-primary-bg-active: var(--color-neutral-0); --btn-primary-label: var(--color-neutral-900); --btn-primary-bg-disabled: var(--color-neutral-700); --btn-primary-label-disabled: var(--color-neutral-900); --btn-primary-focus-ring: var(--color-peggy-blue-300); --btn-primary-focus-ring-offset: var(--color-neutral-900); /* secondary-color */ --btn-secondary-color-bg: var(--color-peggy-blue-400); --btn-secondary-color-bg-hover: var(--color-peggy-blue-300); --btn-secondary-color-bg-active: var(--color-peggy-blue-400); --btn-secondary-color-label: var(--color-neutral-0); --btn-secondary-color-border: var(--color-neutral-0); --btn-secondary-color-bg-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-secondary-color-label-disabled: var(--color-neutral-900); --btn-secondary-color-focus-ring: var(--color-peggy-blue-300); /* secondary-gray */ --btn-secondary-gray-bg: var(--color-neutral-600); --btn-secondary-gray-bg-hover: var(--color-neutral-700); --btn-secondary-gray-bg-active: var(--color-neutral-600); --btn-secondary-gray-bg-disabled: var(--color-neutral-700); --btn-secondary-gray-label: var(--color-neutral-60); --btn-secondary-gray-label-active: var(--color-neutral-0); --btn-secondary-gray-label-disabled: var(--color-neutral-500); /* outline-color */ --btn-outline-color-bg: #001943; --btn-outline-color-border: var(--color-peggy-blue-400); --btn-outline-color-border-hover: var(--color-peggy-blue-300); --btn-outline-color-border-active: var(--color-peggy-blue-600); --btn-outline-color-label: var(--color-peggy-blue-600); --btn-outline-color-label-active: var(--color-peggy-blue-400); --btn-outline-color-border-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-outline-color-label-disabled: var(--color-peggy-blue-900); --btn-outline-color-focus-ring: var(--color-peggy-blue-300); /* outline-gray */ --btn-outline-gray-bg: var(--color-neutral-700); --btn-outline-gray-border: var(--color-neutral-700); --btn-outline-gray-border-active: var(--color-neutral-0); --btn-outline-gray-label: var(--color-neutral-50); --btn-outline-gray-label-active: var(--color-neutral-0); --btn-outline-gray-border-disabled: var(--color-neutral-700); --btn-outline-gray-label-disabled: var(--color-neutral-500); --btn-outline-gray-focus-ring: var(--color-peggy-blue-300); /* ghost-color */ --btn-ghost-color-bg: #0B1A31; --btn-ghost-color-label: var(--color-peggy-blue-400); --btn-ghost-color-label-active: var(--color-peggy-blue-100); --btn-ghost-color-border-disabled: color-mix(in srgb, var(--color-peggy-blue-800) 18%, transparent); --btn-ghost-color-label-disabled: var(--color-peggy-blue-900); /* ghost-gray */ --btn-ghost-gray-bg: var(--color-neutral-600); --btn-ghost-gray-bg-hover: var(--color-neutral-700); --btn-ghost-gray-bg-active: var(--color-neutral-600); --btn-ghost-gray-bg-disabled: var(--color-neutral-700); --btn-ghost-gray-label: var(--color-neutral-60); --btn-ghost-gray-label-active: var(--color-neutral-0); --btn-ghost-gray-label-disabled: var(--color-neutral-500); /* link-color */ --btn-link-color-label: var(--color-peggy-blue-500); --btn-link-color-label-hover: var(--color-peggy-blue-100); --btn-link-color-label-disabled: var(--color-peggy-blue-900); /* link-gray */ --btn-link-gray-label: var(--color-neutral-0); --btn-link-gray-label-hover: var(--color-neutral-50); --btn-link-gray-label-disabled: var(--color-neutral-500); /* --- tab --- */ --color-tab-on-bg: var(--color-neutral-900); --color-tab-on-canvas: #1C1C1C4D; /* --- label (color picker / tag hues) --- */ --color-label-amber-bg: #40300A; --color-label-amber-text: #FCD34D; --color-label-black-bg: #FFFFFF; --color-label-black-text: #000000; --color-label-red-bg: #4A1414; --color-label-red-text: #FCA5A5; --color-label-orange-bg: #4A2108; --color-label-orange-text: #FDBA74; --color-label-grey-bg: #262626; --color-label-grey-text: #E5E5E5; --color-label-green-bg: #0F3A20; --color-label-green-text: #86EFAC; --color-label-teal-bg: #0B3B37; --color-label-teal-text: #5EEAD4; --color-label-sky-bg: #0C3350; --color-label-sky-text: #7DD3FC; --color-label-indigo-bg: #1E1B5E; --color-label-indigo-text: #A5B4FC; --color-label-purple-bg: #3B1466; --color-label-purple-text: #D8B4FE; --color-label-pink-bg: #4A1230; --color-label-pink-text: #F9A8D4; } /* Manual light mode override (add .light class to html or body) — lets you force light even when the OS preference is dark, the mirror image of the .dark override above. Without either class, the page just follows prefers-color-scheme automatically. */ .light { /* --- Background --- */ --color-bg-canvas: var(--color-neutral-20); --color-bg-default: var(--color-neutral-0); --color-bg-subtle: var(--color-neutral-10); --color-bg-muted: var(--color-neutral-30); --color-bg-emphasis: var(--color-neutral-900); --color-bg-inverse: var(--color-neutral-900); --color-bg-active: var(--color-neutral-40); /* --- Surface --- */ --color-surface-default: var(--color-neutral-0); --color-surface-default-subtle: #1C1C1C0A; --color-surface-raised: var(--color-neutral-30); --color-surface-overlay: var(--color-neutral-20); --color-surface-sunken: var(--color-neutral-10); --color-surface-sunken2: var(--color-neutral-20); /* --- Text --- */ --color-text-primary: var(--color-neutral-900); --color-text-secondary: var(--color-neutral-400); --color-text-tertiary: var(--color-neutral-200); --color-text-placeholder: var(--color-neutral-90); --color-text-placeholder-subtle: var(--color-neutral-30); --color-text-disabled: var(--color-neutral-60); --color-text-inverse: var(--color-neutral-0); --color-text-link: var(--color-peggy-blue-500); --color-text-link-hover: var(--color-peggy-blue-600); /* --- Icon --- */ --color-icon-primary: var(--color-neutral-900); --color-icon-secondary: var(--color-neutral-400); --color-icon-tertiary: var(--color-neutral-200); --color-icon-placeholder: var(--color-neutral-90); --color-icon-placeholder-subtle: var(--color-neutral-30); --color-icon-disabled: var(--color-neutral-60); --color-icon-inverse: var(--color-neutral-0); --color-icon-link: var(--color-peggy-blue-500); --color-icon-link-hover: var(--color-peggy-blue-600); /* --- Brand --- */ --color-brand-primary: var(--color-neutral-900); --color-brand-primary-hover: var(--color-neutral-700); --color-brand-primary-active: var(--color-neutral-600); --color-brand-on-primary: var(--color-neutral-0); --color-brand-primary-subtle: var(--color-neutral-10); --color-brand-primary-muted: var(--color-neutral-30); --color-brand-secondary: var(--color-peggy-blue-500); --color-brand-secondary-hover: var(--color-peggy-blue-600); --color-brand-secondary-active: var(--color-peggy-blue-700); --color-brand-on-secondary: var(--color-neutral-0); --color-brand-secondary-subtle: var(--color-peggy-blue-50); --color-brand-secondary-subtle2: #0064FF26; --color-brand-secondary-muted: var(--color-peggy-blue-100); --color-brand-tertiary: var(--color-neutral-400); --color-brand-tertiary-hover: var(--color-neutral-900); --color-brand-tertiary-active: var(--color-neutral-700); --color-brand-on-tertiary: var(--color-neutral-0); --color-brand-tertiary-subtle: var(--color-peggy-blue-50); --color-brand-tertiary-muted: var(--color-peggy-blue-100); /* --- Interactive --- */ --color-interactive-primary: var(--color-neutral-900); --color-interactive-primary-hover: var(--color-neutral-700); --color-interactive-primary-active: var(--color-neutral-600); --color-interactive-primary-disabled: var(--color-neutral-50); --color-interactive-secondary: var(--color-neutral-0); --color-interactive-secondary-hover: var(--color-neutral-10); --color-interactive-ghost-hover: var(--color-neutral-20); /* --- Border --- */ --color-border-on-canvas: var(--color-neutral-30); --color-border-subtle: var(--color-neutral-30); --color-border-medium: var(--color-neutral-40); --color-border-default: var(--color-neutral-50); --color-border-strong: var(--color-neutral-700); --color-border-focus: var(--color-peggy-blue-500); /* --- Status / Success --- */ --color-success-bg: var(--color-success-100); --color-success-bg-subtle: #008D3C26; --color-success-border: var(--color-success-200); --color-success-text: var(--color-success-700); --color-success-icon: var(--color-success-500); --color-success-action: var(--color-success-500); --color-success-action-hover: var(--color-success-600); /* --- Status / Warning --- */ --color-warning-bg: var(--color-warning-100); --color-warning-bg-subtle: #FFD60A26; --color-warning-border: var(--color-warning-300); --color-warning-text: var(--color-warning-800); --color-warning-icon: var(--color-warning-600); --color-warning-action: var(--color-warning-500); --color-warning-action-hover: var(--color-warning-600); /* --- Status / Critical --- */ --color-critical-bg: var(--color-critical-50); --color-critical-bg-subtle: #ED00251A; --color-critical-border: var(--color-critical-200); --color-critical-text: var(--color-critical-700); --color-critical-icon: var(--color-critical-500); --color-critical-action: var(--color-critical-500); --color-critical-action-hover: var(--color-critical-600); --color-critical-disabled: var(--color-critical-100); /* --- Avatar Palette --- */ --color-avatar-blue-bg: #E3E5F6; --color-avatar-blue-text: #132091; --color-avatar-indigo-bg: #E8E6F1; --color-avatar-indigo-text: #332473; --color-avatar-violet-bg: #EBE5F0; --color-avatar-violet-text: #4B226E; --color-avatar-plum-bg: #EFE5EC; --color-avatar-plum-text: #64224D; --color-avatar-rust-bg: #F1E8E6; --color-avatar-rust-text: #733223; --color-avatar-amber-bg: #F1EDE4; --color-avatar-amber-text: #735719; --color-avatar-forest-bg: #E6EDEA; --color-avatar-forest-text: #245841; --color-avatar-teal-bg: #E4EDEE; --color-avatar-teal-text: #19585D; --color-avatar-slate-bg: #E7E8EA; --color-avatar-slate-text: #303642; /* --- Toggle Button --- */ --toggle-btn-bg-default: #1C1C1C0A; --toggle-btn-bg-hover: var(--color-neutral-40); --toggle-btn-bg-selected: var(--color-brand-secondary-subtle2); --toggle-btn-bg-disabled: #1C1C1C0A; --toggle-btn-label-default: var(--color-neutral-800); --toggle-btn-label-selected: var(--color-brand-secondary); --toggle-btn-label-disabled: var(--color-neutral-60); --toggle-group-bg-default: var(--color-neutral-20); /* --- table --- */ --color-table-bg-white: #ffffff; --color-table-header-bg-grey: var(--color-critical-10); /* --- Buttons --- */ /* primary */ --btn-primary-bg: var(--color-neutral-900); --btn-primary-bg-hover: var(--color-neutral-700); --btn-primary-bg-active: var(--color-neutral-600); --btn-primary-label: var(--color-neutral-0); --btn-primary-bg-disabled: var(--color-neutral-30); --btn-primary-label-disabled: var(--color-neutral-0); --btn-primary-focus-ring: var(--color-peggy-blue-600); --btn-primary-focus-ring-offset: var(--color-neutral-0); /* secondary-color */ --btn-secondary-color-bg: var(--color-peggy-blue-500); --btn-secondary-color-bg-hover: var(--color-peggy-blue-600); --btn-secondary-color-bg-active: var(--color-peggy-blue-500); --btn-secondary-color-label: var(--color-neutral-0); --btn-secondary-color-border: var(--color-neutral-900); --btn-secondary-color-bg-disabled: var(--color-peggy-blue-100); --btn-secondary-color-label-disabled: var(--color-neutral-0); --btn-secondary-color-focus-ring: var(--color-peggy-blue-600); /* secondary-gray */ --btn-secondary-gray-bg: var(--color-neutral-30); --btn-secondary-gray-bg-hover: var(--color-neutral-40); --btn-secondary-gray-bg-active: var(--color-neutral-30); --btn-secondary-gray-bg-disabled: var(--color-neutral-30); --btn-secondary-gray-label: var(--color-neutral-600); --btn-secondary-gray-label-active: var(--color-neutral-900); --btn-secondary-gray-label-disabled: var(--color-neutral-0); /* outline-color */ --btn-outline-color-bg: var(--color-peggy-blue-50); --btn-outline-color-border: var(--color-peggy-blue-500); --btn-outline-color-border-hover: var(--color-peggy-blue-200); --btn-outline-color-border-active: var(--color-peggy-blue-700); --btn-outline-color-label: var(--color-peggy-blue-500); --btn-outline-color-label-active: var(--color-peggy-blue-600); --btn-outline-color-border-disabled: var(--color-peggy-blue-100); --btn-outline-color-label-disabled: var(--color-peggy-blue-100); --btn-outline-color-focus-ring: var(--color-peggy-blue-600); /* outline-gray */ --btn-outline-gray-bg: var(--color-neutral-40); --btn-outline-gray-border: var(--color-neutral-300); --btn-outline-gray-border-active: var(--color-neutral-800); --btn-outline-gray-label: var(--color-neutral-700); --btn-outline-gray-label-active: var(--color-neutral-800); --btn-outline-gray-border-disabled: var(--color-neutral-40); --btn-outline-gray-label-disabled: var(--color-neutral-50); --btn-outline-gray-focus-ring: var(--color-peggy-blue-600); /* ghost-color */ --btn-ghost-color-bg: var(--color-peggy-blue-50); --btn-ghost-color-label: var(--color-peggy-blue-500); --btn-ghost-color-label-active: var(--color-peggy-blue-500); --btn-ghost-color-border-disabled: var(--color-peggy-blue-100); --btn-ghost-color-label-disabled: var(--color-peggy-blue-100); /* ghost-gray */ --btn-ghost-gray-bg: var(--color-neutral-30); --btn-ghost-gray-bg-hover: var(--color-neutral-40); --btn-ghost-gray-bg-active: var(--color-neutral-30); --btn-ghost-gray-bg-disabled: var(--color-neutral-30); --btn-ghost-gray-label: var(--color-neutral-600); --btn-ghost-gray-label-active: var(--color-neutral-900); --btn-ghost-gray-label-disabled: var(--color-neutral-50); /* link-color */ --btn-link-color-label: var(--color-peggy-blue-600); --btn-link-color-label-hover: var(--color-peggy-blue-400); --btn-link-color-label-disabled: var(--color-peggy-blue-100); /* link-gray */ --btn-link-gray-label: var(--color-neutral-800); --btn-link-gray-label-hover: var(--color-neutral-600); --btn-link-gray-label-disabled: var(--color-neutral-50); /* --- tab --- */ --color-tab-on-bg: #1C1C1C0A; --color-tab-on-canvas: #1C1C1C0A; /* --- label (color picker / tag hues) --- */ --color-label-amber-bg: #FEF3C7; --color-label-amber-text: #92400E; --color-label-black-bg: #000000; --color-label-black-text: #FFFFFF; --color-label-red-bg: #FDE8E8; --color-label-red-text: #9B1C1C; --color-label-orange-bg: #FFEDD5; --color-label-orange-text: #9A3412; --color-label-grey-bg: #F2F2F2; --color-label-grey-text: #262626; --color-label-green-bg: #DCFCE7; --color-label-green-text: #166534; --color-label-teal-bg: #CCFBF1; --color-label-teal-text: #115E59; --color-label-sky-bg: #E0F2FE; --color-label-sky-text: #075985; --color-label-indigo-bg: #E0E7FF; --color-label-indigo-text: #3730A3; --color-label-purple-bg: #F3E8FF; --color-label-purple-text: #6B21A8; --color-label-pink-bg: #FCE7F3; --color-label-pink-text: #9D174D; } /* ========================================================================== typography.css ========================================================================== */ /* ========================================================================== Typography System — Display, Headline, Title, Body, Label Usage: add ONE class to any element to get its complete type style (font-size, line-height, letter-spacing where applicable, weight, font-family) in one go.

Hello

Paragraph text

A tag Naming pattern: text-{family}-{size}-{weight} family: display | headline | title | body | label size: varies per family (see variables.css for the exact list) weight: regular | medium | semibold | bold (headline has no semibold step — regular/medium/bold only) All values are pulled from CSS custom properties in variables.css, so redesigning the scale means editing tokens in ONE place — every class built from a token updates automatically. ========================================================================== */ /* Shared resets/behavior for every typography class, regardless of family/size/weight */ [class*="text-"] { font-family: var(--font-base); margin: 0; } /* ============================================================================ Display scale ============================================================================ */ /* Display 2XL — 72px / 90px line-height */ .text-display-2xl-regular, .text-display-2xl-medium, .text-display-2xl-semibold, .text-display-2xl-bold { font-size: var(--text-display-2xl-size); line-height: var(--text-display-2xl-line-height); letter-spacing: var(--text-display-2xl-letter-spacing); } .text-display-2xl-regular { font-weight: var(--font-weight-normal); } .text-display-2xl-medium { font-weight: var(--font-weight-medium); } .text-display-2xl-semibold { font-weight: var(--font-weight-semibold); } .text-display-2xl-bold { font-weight: var(--font-weight-bold); } /* Display XL — 60px / 72px line-height */ .text-display-xl-regular, .text-display-xl-medium, .text-display-xl-semibold, .text-display-xl-bold { font-size: var(--text-display-xl-size); line-height: var(--text-display-xl-line-height); letter-spacing: var(--text-display-xl-letter-spacing); } .text-display-xl-regular { font-weight: var(--font-weight-normal); } .text-display-xl-medium { font-weight: var(--font-weight-medium); } .text-display-xl-semibold { font-weight: var(--font-weight-semibold); } .text-display-xl-bold { font-weight: var(--font-weight-bold); } /* Display Large — 48px / 60px line-height */ .text-display-lg-regular, .text-display-lg-medium, .text-display-lg-semibold, .text-display-lg-bold { font-size: var(--text-display-lg-size); line-height: var(--text-display-lg-line-height); letter-spacing: var(--text-display-lg-letter-spacing); } .text-display-lg-regular { font-weight: var(--font-weight-normal); } .text-display-lg-medium { font-weight: var(--font-weight-medium); } .text-display-lg-semibold { font-weight: var(--font-weight-semibold); } .text-display-lg-bold { font-weight: var(--font-weight-bold); } /* Display Medium — 36px / 44px line-height */ .text-display-md-regular, .text-display-md-medium, .text-display-md-semibold, .text-display-md-bold { font-size: var(--text-display-md-size); line-height: var(--text-display-md-line-height); letter-spacing: var(--text-display-md-letter-spacing); } .text-display-md-regular { font-weight: var(--font-weight-normal); } .text-display-md-medium { font-weight: var(--font-weight-medium); } .text-display-md-semibold { font-weight: var(--font-weight-semibold); } .text-display-md-bold { font-weight: var(--font-weight-bold); } /* ============================================================================ Headline scale ============================================================================ */ /* Headline Large — 32px / 40px line-height */ .text-headline-lg-regular, .text-headline-lg-medium, .text-headline-lg-bold { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-line-height); } .text-headline-lg-regular { font-weight: var(--font-weight-normal); } .text-headline-lg-medium { font-weight: var(--font-weight-medium); } .text-headline-lg-bold { font-weight: var(--font-weight-bold); } /* Headline Medium — 28px / 36px line-height */ .text-headline-md-regular, .text-headline-md-medium, .text-headline-md-bold { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-line-height); } .text-headline-md-regular { font-weight: var(--font-weight-normal); } .text-headline-md-medium { font-weight: var(--font-weight-medium); } .text-headline-md-bold { font-weight: var(--font-weight-bold); } /* Headline Small — 24px / 32px line-height */ .text-headline-sm-regular, .text-headline-sm-medium, .text-headline-sm-bold { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-line-height); } .text-headline-sm-regular { font-weight: var(--font-weight-normal); } .text-headline-sm-medium { font-weight: var(--font-weight-medium); } .text-headline-sm-bold { font-weight: var(--font-weight-bold); } /* ============================================================================ Title scale ============================================================================ */ /* Title Large — 20px / 28px line-height */ .text-title-lg-regular, .text-title-lg-medium, .text-title-lg-semibold, .text-title-lg-bold { font-size: var(--text-title-lg-size); line-height: var(--text-title-lg-line-height); } .text-title-lg-regular { font-weight: var(--font-weight-normal); } .text-title-lg-medium { font-weight: var(--font-weight-medium); } .text-title-lg-semibold { font-weight: var(--font-weight-semibold); } .text-title-lg-bold { font-weight: var(--font-weight-bold); } /* Title Medium — 16px / 24px line-height */ .text-title-md-regular, .text-title-md-medium, .text-title-md-semibold, .text-title-md-bold { font-size: var(--text-title-md-size); line-height: var(--text-title-md-line-height); } .text-title-md-regular { font-weight: var(--font-weight-normal); } .text-title-md-medium { font-weight: var(--font-weight-medium); } .text-title-md-semibold { font-weight: var(--font-weight-semibold); } .text-title-md-bold { font-weight: var(--font-weight-bold); } /* Title Small — 14px / 20px line-height */ .text-title-sm-regular, .text-title-sm-medium, .text-title-sm-semibold, .text-title-sm-bold { font-size: var(--text-title-sm-size); line-height: var(--text-title-sm-line-height); } .text-title-sm-regular { font-weight: var(--font-weight-normal); } .text-title-sm-medium { font-weight: var(--font-weight-medium); } .text-title-sm-semibold { font-weight: var(--font-weight-semibold); } .text-title-sm-bold { font-weight: var(--font-weight-bold); } /* ============================================================================ Body scale ============================================================================ */ /* Body XL — 18px / 24px line-height */ .text-body-xl-regular, .text-body-xl-medium, .text-body-xl-semibold, .text-body-xl-bold { font-size: var(--text-body-xl-size); line-height: var(--text-body-xl-line-height); } .text-body-xl-regular { font-weight: var(--font-weight-normal); } .text-body-xl-medium { font-weight: var(--font-weight-medium); } .text-body-xl-semibold { font-weight: var(--font-weight-semibold); } .text-body-xl-bold { font-weight: var(--font-weight-bold); } /* Body Large — 16px / 24px line-height */ .text-body-lg-regular, .text-body-lg-medium, .text-body-lg-semibold, .text-body-lg-bold { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line-height); } .text-body-lg-regular { font-weight: var(--font-weight-normal); } .text-body-lg-medium { font-weight: var(--font-weight-medium); } .text-body-lg-semibold { font-weight: var(--font-weight-semibold); } .text-body-lg-bold { font-weight: var(--font-weight-bold); } /* Body Medium — 14px / 20px line-height */ .text-body-md-regular, .text-body-md-medium, .text-body-md-semibold, .text-body-md-bold { font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); } .text-body-md-regular { font-weight: var(--font-weight-normal); } .text-body-md-medium { font-weight: var(--font-weight-medium); } .text-body-md-semibold { font-weight: var(--font-weight-semibold); } .text-body-md-bold { font-weight: var(--font-weight-bold); } /* Body Small — 13px / 16px line-height */ .text-body-sm-regular, .text-body-sm-medium, .text-body-sm-semibold, .text-body-sm-bold { font-size: var(--text-body-sm-size); line-height: var(--text-body-sm-line-height); } .text-body-sm-regular { font-weight: var(--font-weight-normal); } .text-body-sm-medium { font-weight: var(--font-weight-medium); } .text-body-sm-semibold { font-weight: var(--font-weight-semibold); } .text-body-sm-bold { font-weight: var(--font-weight-bold); } /* Body XS — 12px / 16px line-height */ .text-body-xs-regular, .text-body-xs-medium, .text-body-xs-semibold, .text-body-xs-bold { font-size: var(--text-body-xs-size); line-height: var(--text-body-xs-line-height); } .text-body-xs-regular { font-weight: var(--font-weight-normal); } .text-body-xs-medium { font-weight: var(--font-weight-medium); } .text-body-xs-semibold { font-weight: var(--font-weight-semibold); } .text-body-xs-bold { font-weight: var(--font-weight-bold); } /* ============================================================================ Label scale ============================================================================ */ /* Label Large — 14px / 20px line-height */ .text-label-lg-regular, .text-label-lg-medium, .text-label-lg-semibold, .text-label-lg-bold { font-size: var(--text-label-lg-size); line-height: var(--text-label-lg-line-height); } .text-label-lg-regular { font-weight: var(--font-weight-normal); } .text-label-lg-medium { font-weight: var(--font-weight-medium); } .text-label-lg-semibold { font-weight: var(--font-weight-semibold); } .text-label-lg-bold { font-weight: var(--font-weight-bold); } /* Label Medium — 13px / 16px line-height */ .text-label-md-regular, .text-label-md-medium, .text-label-md-semibold, .text-label-md-bold { font-size: var(--text-label-md-size); line-height: var(--text-label-md-line-height); } .text-label-md-regular { font-weight: var(--font-weight-normal); } .text-label-md-medium { font-weight: var(--font-weight-medium); } .text-label-md-semibold { font-weight: var(--font-weight-semibold); } .text-label-md-bold { font-weight: var(--font-weight-bold); } /* Label Small — 12px / 16px line-height */ .text-label-sm-regular, .text-label-sm-medium, .text-label-sm-semibold, .text-label-sm-bold { font-size: var(--text-label-sm-size); line-height: var(--text-label-sm-line-height); } .text-label-sm-regular { font-weight: var(--font-weight-normal); } .text-label-sm-medium { font-weight: var(--font-weight-medium); } .text-label-sm-semibold { font-weight: var(--font-weight-semibold); } .text-label-sm-bold { font-weight: var(--font-weight-bold); } /* Label XS — 11px / 14px line-height */ .text-label-xs-regular, .text-label-xs-medium, .text-label-xs-semibold, .text-label-xs-bold { font-size: var(--text-label-xs-size); line-height: var(--text-label-xs-line-height); } .text-label-xs-regular { font-weight: var(--font-weight-normal); } .text-label-xs-medium { font-weight: var(--font-weight-medium); } .text-label-xs-semibold { font-weight: var(--font-weight-semibold); } .text-label-xs-bold { font-weight: var(--font-weight-bold); } /* ========================================================================== accordion.css Accordion System — PEGMENT Design System ========================================================================== */ /* ========================================================================== Accordion — PEGMENT Design System Component:
(pure CSS + minimal JS) Variants: .accordion--default — flat, border-separated items .accordion--elevated — surface-default bg, 24px radius, shadow .accordion--no-separator — removes border between items Item states: .is-open — expanded panel visible .is-disabled — non-interactive, muted colours Custom indicators: .accordion--indicator--double — double chevron .accordion--indicator--circle — chevron inside circle .accordion--indicator--plusminus — plus/minus morph Accessibility: - aria-expanded toggled by JS - button element used for keyboard focus - 200ms ease-out height transition on panel Specifications: Header height: 52px Header padding-x: 12px Header padding-y: 16px Title: text-title-sm-medium, color-text-primary Icon (optional): 20×20, gap 8px to title Indicator: 20×20, color-icon-secondary Border: 1px solid color-border-medium Elevated bg: color-surface-default Elevated shadow: 0px 1px 2px 0px #0000000D Expanded content: py 8px, px 20px, text-body-md-regular, color-text-secondary Disabled: color-text-disabled Container radius: 24px Animation: 200ms ease-out height transition ========================================================================== */ /* ── Container ──────────────────────────────────────────────────────────── */ .accordion { display: flex; flex-direction: column; width: 100%; max-width: 387px; /* margin: 0 auto; */ } /* ═══════════════════════════════════════════════════════════════════════ VARIANT: ELEVATED ═══════════════════════════════════════════════════════════════════════ */ .accordion--elevated { background: var(--color-surface-default); border-radius: 24px; box-shadow: 0px 1px 2px 0px #0000000D; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════ VARIANT: NO SEPARATOR ═══════════════════════════════════════════════════════════════════════ */ .accordion--no-separator .accordion--item { border-bottom: none; } /* ── Item ─────────────────────────────────────────────────────────────── */ .accordion--item { border-bottom: 1px solid var(--color-border-medium); background: transparent; padding: 16px 12px; cursor: pointer; } .accordion--item:last-child { border-bottom: none; } /* Elevated variant: each item gets the surface background */ .accordion--elevated .accordion--item { background: var(--color-surface-default); } /* ── Header ───────────────────────────────────────────────────────────── */ .accordion--header { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; background: transparent; border: none; text-align: left; transition: background-color 0.15s ease; position: relative; } .accordion--item:not(.is-open):hover { background: var(--color-surface-raised); } /* Disabled header */ .accordion--item.is-disabled .accordion--header, .accordion.is-disabled .accordion--header { cursor: not-allowed; background: transparent; } .accordion--item.is-disabled .accordion--header:hover, .accordion.is-disabled .accordion--header:hover { background: transparent; } /* ── Title wrap (icon + text) ──────────────────────────────────────────── */ .accordion--title-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } /* ── Optional lead icon ────────────────────────────────────────────────── */ .accordion--icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-icon-secondary); } .accordion--icon svg { width: 100%; height: 100%; } /* ── Title ─────────────────────────────────────────────────────────────── */ .accordion--title { font-size: var(--text-title-sm-size); /* 14px */ line-height: var(--text-title-sm-line-height); /* 20px */ font-weight: var(--font-weight-medium); /* 500 */ color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Disabled title colour */ .accordion--item.is-disabled .accordion--title, .accordion.is-disabled .accordion--title { color: var(--color-text-disabled); } /* ── Indicator (chevron / custom) ────────────────────────────────────── */ .accordion--indicator { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-icon-secondary); transition: transform 0.2s ease-out; } .accordion--indicator svg { width: 100%; height: 100%; } /* Rotate chevron when expanded */ .accordion--item.is-open .accordion--indicator { transform: rotate(180deg); } /* Disabled indicator */ .accordion--item.is-disabled .accordion--indicator, .accordion.is-disabled .accordion--indicator { color: var(--color-text-disabled); } /* ═══════════════════════════════════════════════════════════════════════ CUSTOM INDICATORS ═══════════════════════════════════════════════════════════════════════ */ /* Double chevron — second chevron fades in on open */ .accordion--indicator--double svg { transition: opacity 0.2s ease, transform 0.2s ease-out; } .accordion--indicator--double svg:nth-child(2) { opacity: 0.4; } .accordion--item.is-open .accordion--indicator--double svg:nth-child(2) { opacity: 1; } /* Circle chevron — no extra rotation, just the arrow flips */ .accordion--indicator--circle { border-radius: 9999px; } /* Plus/minus morph */ .accordion--indicator--plusminus { position: relative; } .accordion--indicator--plusminus .plus, .accordion--indicator--plusminus .minus { position: absolute; inset: 0; transition: opacity 0.2s ease, transform 0.2s ease-out; } .accordion--indicator--plusminus .minus { opacity: 0; transform: rotate(-90deg); } .accordion--item.is-open .accordion--indicator--plusminus .plus { opacity: 0; transform: rotate(90deg); } .accordion--item.is-open .accordion--indicator--plusminus .minus { opacity: 1; transform: rotate(0deg); } /* ═══════════════════════════════════════════════════════════════════════ PANEL (expandable content) — FIXED: no peek-through when collapsed ═══════════════════════════════════════════════════════════════════════ */ .accordion--panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease-out; } /* Panel padding: 40px when icon present, 20px when no icon */ .accordion--item:has(.accordion--icon).is-open .accordion--panel { grid-template-rows: 1fr; padding: 8px 29px 0px 25px; } .accordion--item:not(:has(.accordion--icon)).is-open .accordion--panel { grid-template-rows: 1fr; padding: 8px 20px 0px 0px; } /* The inner wrapper must have overflow:hidden so that when grid-template-rows is 0fr, the wrapper fully collapses to 0. */ .accordion--panel > .accordion--content { overflow: hidden; min-height: 0; } /* Reset any padding that was on content */ .accordion--content { padding: 0; /* or remove this rule entirely */ font-size: var(--text-body-md-size); line-height: var(--text-body-md-line-height); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); } /* Disabled panel content */ .accordion--item.is-disabled .accordion--content, .accordion.is-disabled .accordion--content { color: var(--color-text-disabled); } /* ═══════════════════════════════════════════════════════════════════════ DISABLED STATE OVERRIDES ═══════════════════════════════════════════════════════════════════════ */ .accordion--item.is-disabled .accordion--header, .accordion.is-disabled .accordion--header { pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════ FOCUS RING (keyboard accessibility) ═══════════════════════════════════════════════════════════════════════ */ .accordion--header:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; border-radius: var(--radius-sm); }