@ponchia/ui 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/css/site.css CHANGED
@@ -1 +1 @@
1
- @layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: 60}.ui-skiplink:focus{inset-block-start: var(--space-md)}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]{color: var(--accent-text)}.ui-sitenav a[aria-current]::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: 30}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}.ui-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--accent-text)}.ui-meta{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.55rem;letter-spacing: var(--tracking-wide);list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-meta__item{align-items: center;display: inline-flex;gap: 0.55rem}.ui-meta__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}}
1
+ @layer bronto{.ui-container{inline-size: 100%;margin-inline: auto;max-inline-size: var(--container,72rem);padding-inline: var(--space-md)}.ui-container--narrow{max-inline-size: var(--container-narrow,44rem)}.ui-container--wide{max-inline-size: var(--container-wide,82rem)}.ui-skiplink{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);inset-block-start: -4rem;inset-inline-start: var(--space-md);padding: 0.7rem 1rem;position: fixed;z-index: var(--z-toast)}.ui-skiplink:focus{inset-block-start: var(--space-md)}.ui-siteheader{align-items: center;border-block-end: 1px solid var(--line);display: flex;flex-wrap: wrap;gap: var(--space-md);justify-content: space-between;padding-block: var(--space-sm)}.ui-siteheader--sticky{position: sticky;inset-block-start: 0;z-index: var(--z-sticky)}.ui-siteheader__brand{align-items: center;color: var(--text);display: inline-flex;font-family: var(--display);font-size: var(--text-lg);gap: 0.5rem;letter-spacing: var(--tracking-wide);text-transform: uppercase}.ui-siteheader__brand::before{background: var(--accent);border-radius: 50%;block-size: 0.5rem;content: '';flex: 0 0 auto;inline-size: 0.5rem}.ui-siteheader__actions{align-items: center;display: inline-flex;gap: var(--space-xs)}.ui-sitenav{display: inline-flex;flex-wrap: wrap;gap: 0.15rem}.ui-sitenav a{align-items: center;border: 1px solid transparent;border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);gap: 0.45rem;letter-spacing: var(--tracking-wide);padding: 0.4rem 0.6rem;text-transform: uppercase;transition: border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.ui-sitenav a::before{background: currentColor;border-radius: 50%;block-size: 0.32rem;content: '';inline-size: 0.32rem;opacity: 0;transform: scale(0.5);transition: opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-spring)}.ui-sitenav a[aria-current]{color: var(--accent-text)}.ui-sitenav a[aria-current]::before{opacity: 1;transform: scale(1)}@media (hover: hover){.ui-sitenav a:hover{color: var(--text)}.ui-sitenav a:hover::before{opacity: 1;transform: scale(1)}}.ui-sitemenu{display: none;position: relative}.ui-sitemenu > summary{align-items: center;background: transparent;border: 1px solid var(--line-strong);border-radius: var(--radius-md);color: var(--text);cursor: pointer;display: inline-flex;font-family: var(--mono);font-size: var(--text-xs);font-weight: 600;gap: 0.4rem;letter-spacing: var(--tracking-wide);list-style: none;min-block-size: 2.4rem;padding: 0.42rem 0.7rem;text-transform: uppercase}.ui-sitemenu > summary::-webkit-details-marker{display: none}.ui-sitemenu[open] > summary{border-color: var(--accent);color: var(--accent-text)}.ui-sitemenu__panel{background: var(--panel-strong);border: 1px solid var(--line-strong);border-radius: var(--radius-md);box-shadow: var(--shadow-raised);display: grid;gap: 0.15rem;inset-block-start: calc(100% + 0.4rem);inset-inline-end: 0;min-inline-size: 12rem;padding: 0.4rem;position: absolute;z-index: var(--z-overlay)}@media (max-width: 720px){.ui-siteheader .ui-sitenav{display: none}.ui-sitemenu{display: block}.ui-sitemenu .ui-sitenav{display: grid}}.ui-sitefooter{align-items: center;border-block-start: 1px solid var(--line);color: var(--text-dim);display: flex;flex-wrap: wrap;font-size: var(--text-sm);gap: var(--space-sm);justify-content: space-between;margin-block-start: var(--space-2xl);padding-block: var(--space-md)}.ui-sitefooter__links{display: flex;flex-wrap: wrap;gap: var(--space-md)}.ui-sitefooter__links a{color: var(--text);text-decoration: underline;text-decoration-color: color-mix(in srgb,var(--accent) 45%,transparent);text-underline-offset: 0.2rem;transition: text-decoration-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-sitefooter__links a:hover{text-decoration-color: var(--accent)}}.ui-tags{display: flex;flex-wrap: wrap;gap: 0.5rem;list-style: none;margin: 0;padding: 0}.ui-tag{background: var(--panel-soft);border: 1px solid var(--line);border-radius: var(--radius-md);color: var(--text-soft);display: inline-flex;font-size: var(--text-xs);padding: 0.28rem 0.6rem}.ui-tag--accent{background: var(--accent-soft);border-color: color-mix(in srgb,var(--accent) 42%,var(--line));color: var(--accent-text)}.ui-meta{align-items: center;color: var(--text-dim);display: flex;flex-wrap: wrap;font-family: var(--mono);font-size: var(--text-2xs);gap: 0.55rem;letter-spacing: var(--tracking-wide);list-style: none;margin: 0;padding: 0;text-transform: uppercase}.ui-meta__item{align-items: center;display: inline-flex;gap: 0.55rem}.ui-meta__item:not(:last-child)::after{background: var(--line-strong);border-radius: 50%;block-size: 0.22rem;content: '';inline-size: 0.22rem}}
@@ -1 +1 @@
1
- @layer bronto{.ui-table-wrap{border: 1px solid var(--line);border-radius: var(--radius-md);overflow: auto}.ui-table{border-collapse: collapse;font-family: var(--mono);font-size: var(--text-sm);min-inline-size: 100%;inline-size: 100%}.ui-table th,.ui-table td{border-block-end: 1px solid var(--line);overflow-wrap: anywhere;padding: 0.7rem 0.85rem;text-align: start;vertical-align: top}.ui-table th{background: var(--panel);color: var(--text-dim);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);position: sticky;text-transform: uppercase;inset-block-start: 0}.ui-table td{color: var(--text-soft)}.ui-table tbody tr:last-child td{border-block-end: 0}.ui-table tbody tr{transition: background-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-table tbody tr:hover td{background: var(--bg-accent)}}.ui-table--dense th,.ui-table--dense td{font-size: var(--text-xs);padding: 0.42rem 0.6rem}.ui-table--comfortable th,.ui-table--comfortable td{padding: 0.95rem 1.1rem}.ui-table--lined td{border-inline-end: 1px solid var(--line)}.ui-table--lined td:last-child{border-inline-end: 0}.ui-table .is-num,.ui-table th.is-num{font-variant-numeric: tabular-nums;text-align: end}.ui-table .is-pos{color: var(--success)}.ui-table .is-neg{color: var(--danger)}.ui-table .is-key{color: var(--text);font-weight: 600}.ui-table__empty td{color: var(--text-dim);padding: 2rem;text-align: center}}
1
+ @layer bronto{.ui-table-wrap{border: 1px solid var(--line);border-radius: var(--radius-md);overflow: auto}.ui-table{border-collapse: collapse;font-family: var(--mono);font-size: var(--text-sm);min-inline-size: 100%;inline-size: 100%}.ui-table th,.ui-table td{border-block-end: 1px solid var(--line);overflow-wrap: anywhere;padding: 0.7rem 0.85rem;text-align: start;vertical-align: top}.ui-table th{background: var(--panel);color: var(--text-dim);font-size: var(--text-2xs);font-weight: 700;letter-spacing: var(--tracking-wide);position: sticky;text-transform: uppercase;inset-block-start: 0}.ui-table td{color: var(--text-soft)}.ui-table tbody tr:last-child td{border-block-end: 0}.ui-table tbody tr{transition: background-color var(--duration-fast) var(--ease-standard)}@media (hover: hover){.ui-table tbody tr:hover td{background: var(--bg-accent)}}.ui-table--dense th,.ui-table--dense td{font-size: var(--text-xs);padding: 0.42rem 0.6rem}.ui-table--comfortable th,.ui-table--comfortable td{padding: 0.95rem 1.1rem}.ui-table--lined td{border-inline-end: 1px solid var(--line)}.ui-table--lined td:last-child{border-inline-end: 0}.ui-table .is-num,.ui-table th.is-num{font-variant-numeric: tabular-nums;text-align: end}.ui-table .is-pos{color: var(--success)}.ui-table .is-neg{color: var(--danger)}.ui-table .is-key{color: var(--text);font-weight: 600}.ui-table__empty td{color: var(--text-dim);padding: 2rem;text-align: center}.ui-table__sort{align-items: center;background: none;border: 0;color: inherit;cursor: pointer;display: flex;font: inherit;gap: 0.4rem;letter-spacing: inherit;padding: 0;text-transform: inherit;inline-size: 100%}.ui-table__sort::after{content: '↕';opacity: 0.4}.ui-table th[aria-sort='ascending'] .ui-table__sort::after{content: '↑';opacity: 1}.ui-table th[aria-sort='descending'] .ui-table__sort::after{content: '↓';opacity: 1}.ui-table__select{inline-size: 1px;white-space: nowrap}.ui-table--selectable tbody tr[aria-selected='true'] td{background: var(--bg-accent)}.ui-table__toolbar{align-items: center;border: 1px solid var(--line);border-block-end: 0;border-start-start-radius: var(--radius-md);border-start-end-radius: var(--radius-md);display: flex;gap: var(--space-sm);padding: var(--space-sm) var(--space-md)}.ui-table--loading{opacity: 0.6;pointer-events: none}}
@@ -1 +1 @@
1
- @layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--display: 'Doto',var(--mono);--dot-font: 'Doto',var(--mono);--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgba(47,125,79,0.12);--warning: #806414;--warning-soft: rgba(128,100,20,0.13);--orange: #a85f32;--orange-soft: rgba(168,95,50,0.13);--danger: #c01622;--danger-soft: rgba(192,22,34,0.1);--code-bg: rgba(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgba(10,10,10,0.16);--field-dot-hot: rgba(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgba(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgba(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgba(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgba(255,77,84,0.15);--code-bg: rgba(255,255,255,0.05);--button-text: #000000;--field-dot: rgba(242,242,242,0.14);--field-dot-hot: rgba(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgba(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgba(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgba(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgba(255,77,84,0.15);--code-bg: rgba(255,255,255,0.05);--button-text: #000000;--field-dot: rgba(242,242,242,0.14);--field-dot-hot: rgba(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}}
1
+ @layer bronto{:root{--radius-xl: 4px;--radius-lg: 3px;--radius-md: 2px;--radius-sm: 1px;--radius-pill: 999px;--space-2xs: 0.25rem;--space-xs: 0.5rem;--space-sm: 0.75rem;--space-md: 1rem;--space-lg: 1.35rem;--space-xl: 1.75rem;--space-2xl: 2.5rem;--mono: 'JetBrains Mono','Fira Code','Cascadia Code','SF Mono',ui-monospace,monospace;--sans: 'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--display: 'Doto',var(--mono);--dot-font: 'Doto',var(--mono);--text-2xs: 0.68rem;--text-xs: 0.76rem;--text-sm: 0.86rem;--text-base: 0.95rem;--text-lg: 1.15rem;--text-xl: 1.45rem;--tracking-wide: 0.14em;--tracking-wider: 0.22em;--ease-standard: cubic-bezier(0.2,0.8,0.2,1);--ease-spring: cubic-bezier(0.16,1,0.3,1);--ease-out: cubic-bezier(0.33,1,0.68,1);--duration-fast: 130ms;--duration-base: 200ms;--duration-slow: 360ms;--dot-size: 2px;--dot-gap: 14px;--z-base: 0;--z-raised: 10;--z-sticky: 20;--z-overlay: 30;--z-popover: 50;--z-toast: 60;--accent-1: color-mix(in srgb,var(--accent) 8%,var(--bg));--accent-2: color-mix(in srgb,var(--accent) 16%,var(--bg));--accent-3: color-mix(in srgb,var(--accent) 32%,var(--bg));--accent-4: color-mix(in srgb,var(--accent) 60%,var(--bg));--accent-5: var(--accent);--accent-6: var(--accent-strong);--surface-1: var(--bg);--surface-2: var(--bg-elevated);--surface-3: var(--panel);--surface-4: var(--panel-soft);--surface-5: var(--line);--surface-6: var(--line-strong);--bronto-color-bg: var(--bg);--bronto-color-surface: var(--panel);--bronto-color-surface-raised: var(--panel-strong);--bronto-color-border: var(--line);--bronto-color-border-strong: var(--line-strong);--bronto-color-text: var(--text);--bronto-color-text-muted: var(--text-dim);--bronto-color-action: var(--accent);--bronto-color-on-action: var(--button-text);--bronto-color-focus: var(--focus-ring);--bronto-color-success: var(--success);--bronto-color-warning: var(--warning);--bronto-color-danger: var(--danger);--surface: var(--panel);--surface-raised: var(--panel-strong);--surface-muted: var(--panel-soft);--border: var(--line);--border-strong: var(--line-strong)}:root,:root[data-theme='light']{color-scheme: light;--bg: #f4f4f2;--bg-elevated: #fbfbfa;--bg-accent: color-mix(in srgb,var(--accent) 6%,transparent);--panel: #ffffff;--panel-strong: #ffffff;--panel-soft: #ececea;--line: #d8d8d4;--line-strong: #a8a8a2;--text: #0a0a0a;--text-soft: #353533;--text-dim: #686863;--accent: #d71921;--accent-strong: color-mix(in srgb,var(--accent) 83%,#000);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 10%,transparent);--success: #2f7d4f;--success-soft: rgb(47,125,79,0.12);--warning: #806414;--warning-soft: rgb(128,100,20,0.13);--orange: #a85f32;--orange-soft: rgb(168,95,50,0.13);--danger: #c01622;--danger-soft: rgb(192,22,34,0.1);--code-bg: rgb(10,10,10,0.05);--button-text: #ffffff;--field-dot: rgb(10,10,10,0.16);--field-dot-hot: rgb(10,10,10,0.4);--field-dot-accent: color-mix(in srgb,var(--accent) 78%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}@media (prefers-color-scheme: dark){:root:not([data-theme='light']){color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}}:root[data-theme='dark']{color-scheme: dark;--bg: #000000;--bg-elevated: #0a0a0a;--bg-accent: color-mix(in srgb,var(--accent) 8%,transparent);--panel: #0c0c0c;--panel-strong: #141414;--panel-soft: #1a1a1a;--line: #2a2a2a;--line-strong: #444444;--text: #f2f2f2;--text-soft: #c4c4c4;--text-dim: #858585;--accent: #ff3b41;--accent-strong: color-mix(in srgb,var(--accent) 84%,#fff);--accent-text: var(--accent-strong);--accent-soft: color-mix(in srgb,var(--accent) 14%,transparent);--success: #4ec27e;--success-soft: rgb(78,194,126,0.14);--warning: #d8bd72;--warning-soft: rgb(216,189,114,0.14);--orange: #d08c5b;--orange-soft: rgb(208,140,91,0.15);--danger: #ff4d54;--danger-soft: rgb(255,77,84,0.15);--code-bg: rgb(255,255,255,0.05);--button-text: #000000;--field-dot: rgb(242,242,242,0.14);--field-dot-hot: rgb(242,242,242,0.36);--field-dot-accent: color-mix(in srgb,var(--accent) 82%,transparent);--focus-ring: var(--accent);--shadow: none;--shadow-raised: 0 0 0 1px var(--line-strong)}[data-density='compact']{--space-2xs: 0.2rem;--space-xs: 0.4rem;--space-sm: 0.6rem;--space-md: 0.8rem;--space-lg: 1.05rem;--space-xl: 1.35rem;--space-2xl: 1.9rem}[data-density='comfortable']{--space-2xs: 0.3rem;--space-xs: 0.6rem;--space-sm: 0.95rem;--space-md: 1.25rem;--space-lg: 1.7rem;--space-xl: 2.2rem;--space-2xl: 3.1rem}[data-contrast='high']{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}@media (prefers-contrast: more){:root{--line: var(--line-strong);--text-dim: var(--text-soft);--focus-ring: var(--accent);--shadow-raised: 0 0 0 1px var(--text)}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ponchia/ui",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "type": "module",
5
5
  "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
6
6
  "license": "MIT",
@@ -35,6 +35,8 @@
35
35
  "tokens:build": "node scripts/gen-tokens-json.mjs",
36
36
  "dtcg:build": "node scripts/gen-dtcg.mjs",
37
37
  "dts:build": "node scripts/gen-dts.mjs",
38
+ "reference:build": "node scripts/gen-reference.mjs",
39
+ "vscode:build": "node scripts/gen-vscode-data.mjs",
38
40
  "dist:build": "node scripts/build-dist.mjs",
39
41
  "check:exports": "node scripts/check-exports.mjs",
40
42
  "check:tokens": "node scripts/check-tokens.mjs",
@@ -45,20 +47,23 @@
45
47
  "check:shiki": "node scripts/check-shiki.mjs",
46
48
  "check:dist": "node scripts/check-dist.mjs",
47
49
  "check:pack": "node scripts/check-pack.mjs",
48
- "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:shiki && npm run check:dist && npm run check:pack",
50
+ "check:release": "node scripts/check-release.mjs",
51
+ "check:reference": "node scripts/check-reference.mjs",
52
+ "check:vscode": "node scripts/check-vscode-data.mjs",
53
+ "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:release && npm run check:reference && npm run check:vscode",
49
54
  "test": "node --test \"test/*.test.mjs\"",
50
- "prepack": "npm run tokens:build && npm run dtcg:build && npm run dts:build && npm run dist:build",
55
+ "prepack": "npm run tokens:build && npm run dtcg:build && npm run dts:build && npm run reference:build && npm run vscode:build && npm run dist:build",
51
56
  "prepublishOnly": "npm run check && npm test"
52
57
  },
53
58
  "devDependencies": {
54
59
  "@axe-core/playwright": "^4.11.3",
55
60
  "@playwright/test": "^1.60.0",
56
- "jsdom": "^25.0.1",
61
+ "jsdom": "^29.1.1",
57
62
  "prettier": "^3.8.3",
58
- "stylelint": "^16.10.0",
59
- "stylelint-config-standard": "^36.0.1",
63
+ "stylelint": "^17.11.1",
64
+ "stylelint-config-standard": "^40.0.0",
60
65
  "stylelint-use-logical": "^2.1.3",
61
- "typescript": "^5.9.3"
66
+ "typescript": "^6.0.3"
62
67
  },
63
68
  "exports": {
64
69
  ".": {
@@ -102,6 +107,7 @@
102
107
  "types": "./tokens/index.d.ts",
103
108
  "default": "./tokens/index.js"
104
109
  },
110
+ "./vscode.css-custom-data.json": "./classes/vscode.css-custom-data.json",
105
111
  "./tokens.json": "./tokens/index.json",
106
112
  "./tokens.dtcg.json": "./tokens/tokens.dtcg.json",
107
113
  "./shiki/nothing.json": "./shiki/nothing.json",
package/tokens/index.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  export type ThemeName = 'light' | 'dark';
5
5
 
6
- export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--display' | '--dot-font' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
6
+ export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--display' | '--dot-font' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
7
7
  export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
8
8
  export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
9
9
 
@@ -14,7 +14,7 @@ export declare const cssVars: {
14
14
  dark: Record<DarkTokenName, string>;
15
15
  };
16
16
 
17
- export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'display' | 'dot-font' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
17
+ export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'display' | 'dot-font' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
18
18
  export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-soft' | 'danger' | 'danger-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
19
19
 
20
20
  /** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
package/tokens/index.js CHANGED
@@ -50,6 +50,37 @@ export const cssVars = {
50
50
  '--duration-slow': '360ms',
51
51
  '--dot-size': '2px',
52
52
  '--dot-gap': '14px',
53
+ '--z-base': '0',
54
+ '--z-raised': '10',
55
+ '--z-sticky': '20',
56
+ '--z-overlay': '30',
57
+ '--z-popover': '50',
58
+ '--z-toast': '60',
59
+ '--accent-1': 'color-mix(in srgb, var(--accent) 8%, var(--bg))',
60
+ '--accent-2': 'color-mix(in srgb, var(--accent) 16%, var(--bg))',
61
+ '--accent-3': 'color-mix(in srgb, var(--accent) 32%, var(--bg))',
62
+ '--accent-4': 'color-mix(in srgb, var(--accent) 60%, var(--bg))',
63
+ '--accent-5': 'var(--accent)',
64
+ '--accent-6': 'var(--accent-strong)',
65
+ '--surface-1': 'var(--bg)',
66
+ '--surface-2': 'var(--bg-elevated)',
67
+ '--surface-3': 'var(--panel)',
68
+ '--surface-4': 'var(--panel-soft)',
69
+ '--surface-5': 'var(--line)',
70
+ '--surface-6': 'var(--line-strong)',
71
+ '--bronto-color-bg': 'var(--bg)',
72
+ '--bronto-color-surface': 'var(--panel)',
73
+ '--bronto-color-surface-raised': 'var(--panel-strong)',
74
+ '--bronto-color-border': 'var(--line)',
75
+ '--bronto-color-border-strong': 'var(--line-strong)',
76
+ '--bronto-color-text': 'var(--text)',
77
+ '--bronto-color-text-muted': 'var(--text-dim)',
78
+ '--bronto-color-action': 'var(--accent)',
79
+ '--bronto-color-on-action': 'var(--button-text)',
80
+ '--bronto-color-focus': 'var(--focus-ring)',
81
+ '--bronto-color-success': 'var(--success)',
82
+ '--bronto-color-warning': 'var(--warning)',
83
+ '--bronto-color-danger': 'var(--danger)',
53
84
  '--surface': 'var(--panel)',
54
85
  '--surface-raised': 'var(--panel-strong)',
55
86
  '--surface-muted': 'var(--panel-soft)',
@@ -74,17 +105,17 @@ export const cssVars = {
74
105
  '--accent-text': 'var(--accent-strong)',
75
106
  '--accent-soft': 'color-mix(in srgb, var(--accent) 10%, transparent)',
76
107
  '--success': '#2f7d4f',
77
- '--success-soft': 'rgba(47, 125, 79, 0.12)',
108
+ '--success-soft': 'rgb(47, 125, 79, 0.12)',
78
109
  '--warning': '#806414',
79
- '--warning-soft': 'rgba(128, 100, 20, 0.13)',
110
+ '--warning-soft': 'rgb(128, 100, 20, 0.13)',
80
111
  '--orange': '#a85f32',
81
- '--orange-soft': 'rgba(168, 95, 50, 0.13)',
112
+ '--orange-soft': 'rgb(168, 95, 50, 0.13)',
82
113
  '--danger': '#c01622',
83
- '--danger-soft': 'rgba(192, 22, 34, 0.1)',
84
- '--code-bg': 'rgba(10, 10, 10, 0.05)',
114
+ '--danger-soft': 'rgb(192, 22, 34, 0.1)',
115
+ '--code-bg': 'rgb(10, 10, 10, 0.05)',
85
116
  '--button-text': '#ffffff',
86
- '--field-dot': 'rgba(10, 10, 10, 0.16)',
87
- '--field-dot-hot': 'rgba(10, 10, 10, 0.4)',
117
+ '--field-dot': 'rgb(10, 10, 10, 0.16)',
118
+ '--field-dot-hot': 'rgb(10, 10, 10, 0.4)',
88
119
  '--field-dot-accent': 'color-mix(in srgb, var(--accent) 78%, transparent)',
89
120
  '--focus-ring': 'var(--accent)',
90
121
  '--shadow': 'none',
@@ -108,17 +139,17 @@ export const cssVars = {
108
139
  '--accent-text': 'var(--accent-strong)',
109
140
  '--accent-soft': 'color-mix(in srgb, var(--accent) 14%, transparent)',
110
141
  '--success': '#4ec27e',
111
- '--success-soft': 'rgba(78, 194, 126, 0.14)',
142
+ '--success-soft': 'rgb(78, 194, 126, 0.14)',
112
143
  '--warning': '#d8bd72',
113
- '--warning-soft': 'rgba(216, 189, 114, 0.14)',
144
+ '--warning-soft': 'rgb(216, 189, 114, 0.14)',
114
145
  '--orange': '#d08c5b',
115
- '--orange-soft': 'rgba(208, 140, 91, 0.15)',
146
+ '--orange-soft': 'rgb(208, 140, 91, 0.15)',
116
147
  '--danger': '#ff4d54',
117
- '--danger-soft': 'rgba(255, 77, 84, 0.15)',
118
- '--code-bg': 'rgba(255, 255, 255, 0.05)',
148
+ '--danger-soft': 'rgb(255, 77, 84, 0.15)',
149
+ '--code-bg': 'rgb(255, 255, 255, 0.05)',
119
150
  '--button-text': '#000000',
120
- '--field-dot': 'rgba(242, 242, 242, 0.14)',
121
- '--field-dot-hot': 'rgba(242, 242, 242, 0.36)',
151
+ '--field-dot': 'rgb(242, 242, 242, 0.14)',
152
+ '--field-dot-hot': 'rgb(242, 242, 242, 0.36)',
122
153
  '--field-dot-accent': 'color-mix(in srgb, var(--accent) 82%, transparent)',
123
154
  '--focus-ring': 'var(--accent)',
124
155
  '--shadow': 'none',
package/tokens/index.json CHANGED
@@ -33,6 +33,37 @@
33
33
  "--duration-slow": "360ms",
34
34
  "--dot-size": "2px",
35
35
  "--dot-gap": "14px",
36
+ "--z-base": "0",
37
+ "--z-raised": "10",
38
+ "--z-sticky": "20",
39
+ "--z-overlay": "30",
40
+ "--z-popover": "50",
41
+ "--z-toast": "60",
42
+ "--accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
43
+ "--accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
44
+ "--accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
45
+ "--accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
46
+ "--accent-5": "var(--accent)",
47
+ "--accent-6": "var(--accent-strong)",
48
+ "--surface-1": "var(--bg)",
49
+ "--surface-2": "var(--bg-elevated)",
50
+ "--surface-3": "var(--panel)",
51
+ "--surface-4": "var(--panel-soft)",
52
+ "--surface-5": "var(--line)",
53
+ "--surface-6": "var(--line-strong)",
54
+ "--bronto-color-bg": "var(--bg)",
55
+ "--bronto-color-surface": "var(--panel)",
56
+ "--bronto-color-surface-raised": "var(--panel-strong)",
57
+ "--bronto-color-border": "var(--line)",
58
+ "--bronto-color-border-strong": "var(--line-strong)",
59
+ "--bronto-color-text": "var(--text)",
60
+ "--bronto-color-text-muted": "var(--text-dim)",
61
+ "--bronto-color-action": "var(--accent)",
62
+ "--bronto-color-on-action": "var(--button-text)",
63
+ "--bronto-color-focus": "var(--focus-ring)",
64
+ "--bronto-color-success": "var(--success)",
65
+ "--bronto-color-warning": "var(--warning)",
66
+ "--bronto-color-danger": "var(--danger)",
36
67
  "--surface": "var(--panel)",
37
68
  "--surface-raised": "var(--panel-strong)",
38
69
  "--surface-muted": "var(--panel-soft)",
@@ -56,17 +87,17 @@
56
87
  "--accent-text": "var(--accent-strong)",
57
88
  "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
58
89
  "--success": "#2f7d4f",
59
- "--success-soft": "rgba(47, 125, 79, 0.12)",
90
+ "--success-soft": "rgb(47, 125, 79, 0.12)",
60
91
  "--warning": "#806414",
61
- "--warning-soft": "rgba(128, 100, 20, 0.13)",
92
+ "--warning-soft": "rgb(128, 100, 20, 0.13)",
62
93
  "--orange": "#a85f32",
63
- "--orange-soft": "rgba(168, 95, 50, 0.13)",
94
+ "--orange-soft": "rgb(168, 95, 50, 0.13)",
64
95
  "--danger": "#c01622",
65
- "--danger-soft": "rgba(192, 22, 34, 0.1)",
66
- "--code-bg": "rgba(10, 10, 10, 0.05)",
96
+ "--danger-soft": "rgb(192, 22, 34, 0.1)",
97
+ "--code-bg": "rgb(10, 10, 10, 0.05)",
67
98
  "--button-text": "#ffffff",
68
- "--field-dot": "rgba(10, 10, 10, 0.16)",
69
- "--field-dot-hot": "rgba(10, 10, 10, 0.4)",
99
+ "--field-dot": "rgb(10, 10, 10, 0.16)",
100
+ "--field-dot-hot": "rgb(10, 10, 10, 0.4)",
70
101
  "--field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
71
102
  "--focus-ring": "var(--accent)",
72
103
  "--shadow": "none",
@@ -89,17 +120,17 @@
89
120
  "--accent-text": "var(--accent-strong)",
90
121
  "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
91
122
  "--success": "#4ec27e",
92
- "--success-soft": "rgba(78, 194, 126, 0.14)",
123
+ "--success-soft": "rgb(78, 194, 126, 0.14)",
93
124
  "--warning": "#d8bd72",
94
- "--warning-soft": "rgba(216, 189, 114, 0.14)",
125
+ "--warning-soft": "rgb(216, 189, 114, 0.14)",
95
126
  "--orange": "#d08c5b",
96
- "--orange-soft": "rgba(208, 140, 91, 0.15)",
127
+ "--orange-soft": "rgb(208, 140, 91, 0.15)",
97
128
  "--danger": "#ff4d54",
98
- "--danger-soft": "rgba(255, 77, 84, 0.15)",
99
- "--code-bg": "rgba(255, 255, 255, 0.05)",
129
+ "--danger-soft": "rgb(255, 77, 84, 0.15)",
130
+ "--code-bg": "rgb(255, 255, 255, 0.05)",
100
131
  "--button-text": "#000000",
101
- "--field-dot": "rgba(242, 242, 242, 0.14)",
102
- "--field-dot-hot": "rgba(242, 242, 242, 0.36)",
132
+ "--field-dot": "rgb(242, 242, 242, 0.14)",
133
+ "--field-dot-hot": "rgb(242, 242, 242, 0.36)",
103
134
  "--field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
104
135
  "--focus-ring": "var(--accent)",
105
136
  "--shadow": "none",
@@ -140,6 +171,37 @@
140
171
  "duration-slow": "360ms",
141
172
  "dot-size": "2px",
142
173
  "dot-gap": "14px",
174
+ "z-base": "0",
175
+ "z-raised": "10",
176
+ "z-sticky": "20",
177
+ "z-overlay": "30",
178
+ "z-popover": "50",
179
+ "z-toast": "60",
180
+ "accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
181
+ "accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
182
+ "accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
183
+ "accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
184
+ "accent-5": "var(--accent)",
185
+ "accent-6": "var(--accent-strong)",
186
+ "surface-1": "var(--bg)",
187
+ "surface-2": "var(--bg-elevated)",
188
+ "surface-3": "var(--panel)",
189
+ "surface-4": "var(--panel-soft)",
190
+ "surface-5": "var(--line)",
191
+ "surface-6": "var(--line-strong)",
192
+ "bronto-color-bg": "var(--bg)",
193
+ "bronto-color-surface": "var(--panel)",
194
+ "bronto-color-surface-raised": "var(--panel-strong)",
195
+ "bronto-color-border": "var(--line)",
196
+ "bronto-color-border-strong": "var(--line-strong)",
197
+ "bronto-color-text": "var(--text)",
198
+ "bronto-color-text-muted": "var(--text-dim)",
199
+ "bronto-color-action": "var(--accent)",
200
+ "bronto-color-on-action": "var(--button-text)",
201
+ "bronto-color-focus": "var(--focus-ring)",
202
+ "bronto-color-success": "var(--success)",
203
+ "bronto-color-warning": "var(--warning)",
204
+ "bronto-color-danger": "var(--danger)",
143
205
  "surface": "var(--panel)",
144
206
  "surface-raised": "var(--panel-strong)",
145
207
  "surface-muted": "var(--panel-soft)",
@@ -164,17 +226,17 @@
164
226
  "accent-text": "var(--accent-strong)",
165
227
  "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
166
228
  "success": "#2f7d4f",
167
- "success-soft": "rgba(47, 125, 79, 0.12)",
229
+ "success-soft": "rgb(47, 125, 79, 0.12)",
168
230
  "warning": "#806414",
169
- "warning-soft": "rgba(128, 100, 20, 0.13)",
231
+ "warning-soft": "rgb(128, 100, 20, 0.13)",
170
232
  "orange": "#a85f32",
171
- "orange-soft": "rgba(168, 95, 50, 0.13)",
233
+ "orange-soft": "rgb(168, 95, 50, 0.13)",
172
234
  "danger": "#c01622",
173
- "danger-soft": "rgba(192, 22, 34, 0.1)",
174
- "code-bg": "rgba(10, 10, 10, 0.05)",
235
+ "danger-soft": "rgb(192, 22, 34, 0.1)",
236
+ "code-bg": "rgb(10, 10, 10, 0.05)",
175
237
  "button-text": "#ffffff",
176
- "field-dot": "rgba(10, 10, 10, 0.16)",
177
- "field-dot-hot": "rgba(10, 10, 10, 0.4)",
238
+ "field-dot": "rgb(10, 10, 10, 0.16)",
239
+ "field-dot-hot": "rgb(10, 10, 10, 0.4)",
178
240
  "field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
179
241
  "focus-ring": "var(--accent)",
180
242
  "shadow": "none",
@@ -197,17 +259,17 @@
197
259
  "accent-text": "var(--accent-strong)",
198
260
  "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
199
261
  "success": "#4ec27e",
200
- "success-soft": "rgba(78, 194, 126, 0.14)",
262
+ "success-soft": "rgb(78, 194, 126, 0.14)",
201
263
  "warning": "#d8bd72",
202
- "warning-soft": "rgba(216, 189, 114, 0.14)",
264
+ "warning-soft": "rgb(216, 189, 114, 0.14)",
203
265
  "orange": "#d08c5b",
204
- "orange-soft": "rgba(208, 140, 91, 0.15)",
266
+ "orange-soft": "rgb(208, 140, 91, 0.15)",
205
267
  "danger": "#ff4d54",
206
- "danger-soft": "rgba(255, 77, 84, 0.15)",
207
- "code-bg": "rgba(255, 255, 255, 0.05)",
268
+ "danger-soft": "rgb(255, 77, 84, 0.15)",
269
+ "code-bg": "rgb(255, 255, 255, 0.05)",
208
270
  "button-text": "#000000",
209
- "field-dot": "rgba(242, 242, 242, 0.14)",
210
- "field-dot-hot": "rgba(242, 242, 242, 0.36)",
271
+ "field-dot": "rgb(242, 242, 242, 0.14)",
272
+ "field-dot-hot": "rgb(242, 242, 242, 0.36)",
211
273
  "field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
212
274
  "focus-ring": "var(--accent)",
213
275
  "shadow": "none",