@profpowell/vb-design-system 0.1.0

package/dist/vb-design-system.min.css

@@ -0,0 +1 @@
+color-palette:not(:defined){display:block}color-palette{display:block}color-palette .palette{display:flex;flex-wrap:wrap;gap:var(--size-xs, .5rem)}color-palette .palette.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}color-palette .palette.list{flex-direction:column}color-palette .palette.list .swatch-wrap{flex-direction:row;align-items:center;gap:var(--size-s, .75rem)}color-palette .palette.list .color-box{inline-size:36px!important;block-size:36px!important}color-palette .swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--size-2xs, .25rem)}color-palette .color-box{position:relative;border:1px solid oklch(0% 0 0 / .15);border-radius:var(--radius-s, .25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono, monospace);transition:transform .15s ease,box-shadow .15s ease;overflow:hidden}color-palette .color-box:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026;z-index:1}color-palette .color-box:focus-visible{outline:2px solid var(--color-focus-ring, currentColor);outline-offset:2px}color-palette .color-value{font-size:.625rem;line-height:1.2;opacity:0;transition:opacity .15s ease;text-align:center;padding:2px 4px;word-break:break-all}color-palette .color-box:hover .color-value,color-palette .color-box:focus-visible .color-value,color-palette .color-value.visible{opacity:1}color-palette .color-box.copied:after{content:"Copied!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;color:#fff;font-size:var(--font-size-xs, .75rem);font-weight:600;font-family:var(--font-sans, system-ui);border-radius:inherit}color-palette .color-name{font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}palette-generator{display:block}palette-generator .pg-seed-label{display:block;font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem)}palette-generator>color-picker,palette-generator>input[type=color]{margin-block-end:var(--size-s, .75rem);padding-block-end:var(--size-s, .75rem);border-block-end:1px solid var(--color-border-subtle, #e5e5e5)}palette-generator .pg-export{margin-block-start:var(--size-s, .75rem)}palette-generator .pg-export button:hover{background:var(--surface-hover, #f5f5f5)}palette-generator .pg-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}type-specimen:not(:defined){display:block}type-specimen{display:block}type-specimen .specimen-header{margin-block-end:var(--size-s, .75rem)}type-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-2xs, .25rem);font-family:var(--font-sans, system-ui)}type-specimen .specimen-sample{font-size:var(--font-size-3xl, 1.875rem);line-height:1.2;margin:0;padding:var(--size-xs, .5rem);border:1px dashed transparent;border-radius:var(--radius-s, .25rem);transition:border-color .15s ease;cursor:text}type-specimen .specimen-sample:hover{border-color:var(--color-border, #ddd)}type-specimen .specimen-sample:focus{outline:none;border-color:var(--color-primary, #333)}type-specimen .specimen-chars{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem);margin-block-end:var(--size-s, .75rem);padding:var(--size-xs, .5rem);background:var(--color-surface-raised, #f8f8f8);border-radius:var(--radius-s, .25rem)}type-specimen .char-row{display:flex;flex-wrap:wrap;gap:2px;align-items:center;font-size:var(--font-size-sm, .875rem)}type-specimen .char-label{font-family:var(--font-sans, system-ui);font-size:var(--font-size-xs, .75rem);font-weight:600;color:var(--color-text-muted, #666);inline-size:3.5rem;flex-shrink:0}type-specimen .char-row span:not(.char-label){inline-size:1.25em;text-align:center}type-specimen .specimen-weights{display:flex;flex-wrap:wrap;gap:var(--size-s, .75rem);margin-block-end:var(--size-s, .75rem)}type-specimen .weight-sample{display:flex;flex-direction:column;align-items:center;gap:2px}type-specimen .weight-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666)}type-specimen .weight-text{font-size:var(--font-size-2xl, 1.5rem)}type-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}type-specimen .scale-step{display:flex;align-items:baseline;gap:var(--size-s, .75rem);line-height:1.3}type-specimen .scale-label{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);inline-size:2.5rem;flex-shrink:0;text-align:end}type-specimen .scale-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}spacing-specimen:not(:defined){display:block}spacing-specimen{display:block}spacing-specimen .specimen-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem);font-family:var(--font-sans, system-ui)}spacing-specimen .specimen-scale{display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}spacing-specimen .scale-step{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:var(--size-s, .75rem);min-block-size:1.75rem}spacing-specimen .scale-name{font-family:var(--font-mono, monospace);font-size:var(--font-size-sm, .875rem);color:var(--color-text-muted, #666);text-align:end}spacing-specimen .scale-bar{display:block;block-size:var(--size-m, 1rem);min-inline-size:2px;background:var(--color-interactive, oklch(55% .2 260));border-radius:var(--radius-s, .25rem);transition:inline-size .3s ease}spacing-specimen .scale-value{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end}token-specimen:not(:defined){display:block;min-height:2rem}token-specimen{display:block}component-sampler:not(:defined){display:block}component-sampler{display:block}semantic-palette[data-upgraded]>dl,semantic-palette[data-upgraded]>ul,semantic-palette[data-upgraded]>ol{display:none}semantic-palette .sp-export button:hover{background:var(--color-surface-hover, var(--color-surface-raised, #f5f5f5))}semantic-palette .sp-export button:focus-visible{outline:var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);outline-offset:2px}@keyframes ms-slide{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 1rem)}}@keyframes ms-fill{0%{transform:scaleX(0)}60%{transform:scaleX(1)}to{transform:scaleX(1);opacity:.3}}@media(prefers-reduced-motion:reduce){motion-specimen .ms-dot{animation:none!important;inset-inline-start:calc(50% - .5rem)!important}motion-specimen .ms-bar-fill{animation:none!important;transform:scaleX(.6)!important;opacity:.6!important}}accessibility-specimen{display:block;font:inherit}accessibility-specimen .as-contrast-table{inline-size:100%;border-collapse:collapse;border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);overflow:hidden;font-size:.95em}accessibility-specimen .as-contrast-table th,accessibility-specimen .as-contrast-table td{padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);text-align:start;border-block-end:var(--border-width-thin, 1px) solid var(--color-border, #ddd)}accessibility-specimen .as-contrast-table tr:last-child th,accessibility-specimen .as-contrast-table tr:last-child td{border-block-end:none}accessibility-specimen .as-contrast-table thead{background:var(--color-surface-raised, var(--color-surface, #fff));font-size:.85em;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted, currentColor)}accessibility-specimen .as-pair-label{font-weight:500;display:flex;align-items:center;gap:var(--size-2xs, .375rem);font-variant-numeric:tabular-nums}accessibility-specimen .as-swatch{display:inline-block;inline-size:1.25rem;block-size:1.25rem;border-radius:var(--radius-s, .25rem);border:var(--border-width-thin, 1px) solid currentColor;flex-shrink:0}accessibility-specimen .as-pair-sample{font-weight:500;font-size:1em;white-space:nowrap;text-align:center}accessibility-specimen .as-pair-ratio{font-variant-numeric:tabular-nums;font-weight:600}accessibility-specimen .as-badge{text-align:center;font-weight:600;font-size:1.1em;inline-size:3em}accessibility-specimen .as-pass{color:var(--color-success, #2e7d32)}accessibility-specimen .as-fail{color:var(--color-error, #c62828)}accessibility-specimen .as-empty{text-align:center;font-style:italic;color:var(--color-text-muted, currentColor);padding-block:var(--size-l, 1.5rem)!important}accessibility-specimen .as-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs, .375rem)}accessibility-specimen .as-checklist>li{display:flex;align-items:flex-start;gap:var(--size-xs, .5rem);padding-block:var(--size-2xs, .375rem);padding-inline:var(--size-s, .5rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-s, .25rem)}accessibility-specimen .as-checklist-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;border-radius:var(--radius-full, 999px);font-weight:700;line-height:1}accessibility-specimen .as-status-pass{border-color:var(--color-success, #2e7d32)}accessibility-specimen .as-status-pass .as-checklist-icon{background:var(--color-success, #2e7d32);color:var(--color-text-on-success, white)}accessibility-specimen .as-status-fail{border-color:var(--color-error, #c62828)}accessibility-specimen .as-status-fail .as-checklist-icon{background:var(--color-error, #c62828);color:var(--color-text-on-error, white)}accessibility-specimen .as-status-warn{border-color:var(--color-warning, #b8860b)}accessibility-specimen .as-status-warn .as-checklist-icon{background:var(--color-warning, #b8860b);color:var(--color-text-on-warning, white)}accessibility-specimen .as-status-na .as-checklist-icon{background:var(--color-text-muted, oklch(60% 0 0));color:var(--color-surface, white)}accessibility-specimen .as-sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}breakpoint-specimen:not(:defined){display:block}breakpoint-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(breakpoint-specimen){.bps-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.bps-readout{display:inline-flex;align-items:baseline;gap:var(--size-s, .75rem);font-family:var(--font-mono, ui-monospace, monospace);font-variant-numeric:tabular-nums;margin-block-end:var(--size-m, 1rem)}.bps-width{font-size:var(--font-size-l, 1.25rem);font-weight:600}.bps-active{font-size:var(--font-size-sm, .875rem);padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);background:var(--color-surface-raised, oklch(96% 0 0));color:var(--color-text-muted, #666);border:1px solid var(--color-border, oklch(85% 0 0))}.bps-active[data-active]:not([data-active=""]){background:var(--color-accent-soft, oklch(94% .04 260));color:var(--color-accent, oklch(45% .18 260));border-color:currentColor}.bps-ruler{position:relative;block-size:var(--size-xl, 2.5rem);margin:var(--size-s, .75rem) 0 var(--size-l, 1.5rem);border-block-start:2px solid var(--color-border, oklch(85% 0 0))}.bps-cursor{position:absolute;inset-block:-.5rem auto;inline-size:2px;block-size:calc(100% + 1rem);background:var(--color-accent, oklch(45% .18 260));inset-inline-start:var(--bps-pos, 0%);transform:translate(-1px);transition:inset-inline-start .12s linear;z-index:1}.bps-stop{position:absolute;inset-block-start:-2px;inset-inline-start:var(--bps-pos, 0%);display:block}.bps-tick{display:block;inline-size:1px;block-size:var(--size-xs, .5rem);background:var(--color-text-muted, #666)}.bps-stop-label{position:absolute;inset-block-start:var(--size-s, .75rem);inset-inline-start:0;transform:translate(-50%);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:center;white-space:nowrap;line-height:1.2}.bps-stop[data-current] .bps-stop-label{color:var(--color-accent, oklch(45% .18 260));font-weight:600}.bps-stop[data-current] .bps-tick{background:var(--color-accent, oklch(45% .18 260));inline-size:2px}.bps-list{display:grid;grid-template-columns:max-content 1fr;gap:var(--size-2xs, .25rem) var(--size-m, 1rem);margin:0;font-size:var(--font-size-sm, .875rem)}.bps-row{display:contents}.bps-row dt{font-family:var(--font-mono, ui-monospace, monospace);font-weight:600;color:var(--color-text-muted, #666)}.bps-row dd{margin:0;color:var(--color-text-muted, #666)}.bps-row[data-current] dt,.bps-row[data-current] dd{color:var(--color-accent, oklch(45% .18 260));font-weight:600}}breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:italic}@media(width>=37.5rem){breakpoint-specimen:not([data-observe]) [data-bp=sm]{font-style:normal}breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dd{color:var(--color-text, currentColor)}}@media(width>=48rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dd{color:var(--color-text, currentColor)}}@media(width>=64rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dd{color:var(--color-text, currentColor)}}@media(width>=87.5rem){breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dt,breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dd{color:var(--color-text, currentColor)}}@media print{breakpoint-specimen .bps-readout,breakpoint-specimen .bps-ruler{display:none}}layout-specimen{display:flex;flex-direction:column;gap:var(--size-l, 1.5rem);font:inherit}layout-specimen .ls-entry{display:grid;grid-template-columns:1fr;gap:var(--size-s, .75rem);padding:var(--size-s, .75rem);border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-m, .5rem);background:var(--color-surface, #fff)}layout-specimen .ls-entry-head{display:flex;flex-direction:column;gap:var(--size-3xs, .125rem)}layout-specimen .ls-entry-name{margin:0;font-size:1em;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a)}layout-specimen .ls-entry-desc{margin:0;font-size:.875em;color:var(--color-text-muted, currentColor)}layout-specimen .ls-live{padding:var(--size-s, .75rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);min-block-size:4rem}layout-specimen .ls-snippet{margin:0;padding:var(--size-2xs, .375rem) var(--size-s, .5rem);background:var(--color-surface-sunken, oklch(94% 0 0));border-radius:var(--radius-s, .25rem);font-size:.8em;line-height:1.4;font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text, #1a1a1a);overflow-x:auto;white-space:pre}layout-specimen .ls-box{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xs, .5rem);background:var(--color-action-subtle, color-mix(in oklch, var(--color-interactive, oklch(55% .2 260)) 15%, transparent));color:var(--color-text, #1a1a1a);border:var(--border-width-thin, 1px) solid var(--color-interactive, currentColor);border-radius:var(--radius-s, .25rem);font-size:.85em;font-weight:500;min-block-size:2rem}layout-specimen .ls-box-main{background:var(--color-surface, #fff);border-style:dashed}layout-specimen .ls-box-reel{inline-size:5rem;flex-shrink:0}layout-specimen .ls-chip{display:inline-flex;align-items:center;padding:var(--size-3xs, .125rem) var(--size-2xs, .375rem);background:var(--color-surface-raised, var(--color-surface, #fff));border:var(--border-width-thin, 1px) solid var(--color-border, #ddd);border-radius:var(--radius-full, 999px);font-size:.85em}font-pairer{display:block;max-inline-size:56rem}font-pairer:not(:defined){display:none}gradient-builder{display:block;max-inline-size:32rem}gradient-builder:not(:defined){display:none}.brand-specimen{display:grid;gap:var(--size-l, 1.5rem)}.bs-surfaces{display:grid;grid-template-columns:1fr 1fr;gap:var(--size-m, 1rem)}.bs-surfaces figure{margin:0;padding:var(--size-l, 1.5rem);border-radius:var(--radius-m, .5rem);display:grid;place-items:center;gap:var(--size-s, .75rem)}.bs-surfaces [data-surface=light]{background:#fff;color:#111}.bs-surfaces [data-surface=dark]{background:#111;color:#fff}.bs-scale{display:flex;align-items:end;gap:var(--size-l, 1.5rem);flex-wrap:wrap}.bs-scale span{display:grid;justify-items:center;gap:var(--size-2xs, .25rem)}.bs-clear-box{display:inline-block;padding:1em;outline:1px dashed var(--color-border, #d4d4d8);outline-offset:.25em}icon-set:not(:defined){display:block}icon-set{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-set){.icon-set__search input{inline-size:100%;padding:var(--size-s, .5rem);border:1px solid var(--color-border, #d4d4d8);border-radius:var(--radius-s, .25rem);font:inherit;color:inherit;background:var(--color-surface, #fff)}.icon-set__grid{list-style:none;margin:var(--size-m, 1rem) 0 0;padding:0;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:var(--size-2xs, .25rem)}.icon-set__grid [hidden]{display:none}.icon-set__grid button{inline-size:100%;block-size:100%;display:grid;align-content:start;justify-items:center;gap:var(--size-2xs, .25rem);padding:var(--size-s, .75rem);background:none;border:1px solid transparent;border-radius:var(--radius-s, .25rem);cursor:pointer;font-size:var(--font-size-xs, .75rem);color:inherit}.icon-set__grid button>span:last-child{min-block-size:2lh;text-align:center;overflow-wrap:anywhere}.icon-set__grid button:hover{border-color:var(--color-border, #d4d4d8);background:var(--color-surface-2, #f4f4f5)}.icon-set__icon{display:inline-flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem}.icon-set__grid [data-icon]{font-size:1.5rem}}icon-specimen:not(:defined){display:block}icon-specimen{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(icon-specimen){.icon-specimen{inline-size:100%;border-collapse:collapse}.icon-specimen th,.icon-specimen td{text-align:start;padding:var(--size-s, .75rem);border-block-end:1px solid var(--color-border, #d4d4d8)}.icon-specimen thead th{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #71717a)}.icon-specimen td [data-icon]{color:inherit;vertical-align:middle}}[data-list=do-dont],[data-list=pro-con]{list-style:none;padding-inline-start:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--size-s, .5rem)}[data-list]>[data-do],[data-list]>[data-pro]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-success, oklch(55% .2 145));background:var(--color-success-subtle, oklch(95% .03 145));border-radius:var(--radius-s, .25rem)}[data-list]>[data-dont],[data-list]>[data-con]{padding:var(--size-s, .5rem) var(--size-m, 1rem);border-inline-start:4px solid var(--color-error, oklch(55% .22 25));background:var(--color-error-subtle, oklch(95% .03 25));border-radius:var(--radius-s, .25rem)}[data-list=do-dont]>[data-do]:before{content:"Do";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=do-dont]>[data-dont]:before{content:"Don\2019t";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-pro]:before{content:"Pro";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-success, oklch(45% .2 145));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}[data-list=pro-con]>[data-con]:before{content:"Con";display:block;font-weight:700;font-size:var(--font-size-xs, .75rem);color:var(--color-error, oklch(45% .22 25));margin-block-end:var(--size-2xs, .25rem);text-transform:uppercase;letter-spacing:.05em}.ds-token-table{width:100%;border-collapse:collapse;font-size:var(--font-size-s, .875rem)}.ds-token-table thead{border-block-end:2px solid var(--color-border, #ddd)}.ds-token-table th{text-align:start;padding:var(--size-xs, .25rem) var(--size-s, .5rem);font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666)}.ds-token-table td{padding:var(--size-xs, .25rem) var(--size-s, .5rem);border-block-end:1px solid var(--color-border, #eee);vertical-align:middle}.ds-token-table code{font-family:var(--font-mono, monospace);font-size:var(--font-size-xs, .75rem)}.ds-token-table .ds-swatch{display:inline-block;width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd);vertical-align:middle}.ds-token-table token-swatch{display:inline-flex}.ds-token-table token-swatch>[data-preview]{width:2.5rem;height:1.5rem;border-radius:var(--radius-s, .25rem);border:1px solid var(--color-border, #ddd)}