@mono-lit/helper 0.0.0-stage → 0.0.1

package/dist/ui/theme/vega.css

@@ -0,0 +1,467 @@
+/* ============================================================
+   The vega base — prepended to every Basecoat-style flavor at build time
+   (vite.config.ts `mono-emit-flavor-themes` replaces `vega` with the
+   flavor's name; `ui/theme/vega.css` is this block alone).
+
+   ONE is @mono-lit/helper's DEFAULT flavor: `flavors/one.css` is imported by
+   index.css on `:root`, so its font, radius ladder, shadows and ring are what
+   a page starts with. A Basecoat style is a delta against vega, so before a
+   style's own knobs apply, this resets everything ONE changed back to
+   Basecoat's vega values (the same values the component CSS uses as
+   fallbacks). Not a source of truth — every value here is vega's, as
+   generated in src/data/theme/generated/tokens.css.
+   ============================================================ */
+.theme-vega {
+  font-family: var(--font-sans);
+  /* vega's own family; an imported font sheet (@mono-lit/helper/ui/font/*.css) sets
+     --mono-font-sans on :root and wins here, whichever theme is active */
+  --font-sans: var(--mono-font-sans, "Geist Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+
+  --radius: 0.625rem;
+  --mono-radius-sm: calc(var(--radius) - 4px);
+  --mono-radius-md: calc(var(--radius) - 2px);
+  --mono-radius-lg: var(--radius);
+  --mono-radius-xl: calc(var(--radius) + 4px);
+  --mono-radius-2xl: 1rem;
+
+  --mono-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --mono-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mono-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mono-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --mono-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  --mono-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --mono-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --mono-duration: 150ms;
+  --mono-duration-fast: 100ms;
+  --mono-duration-slow: 200ms;
+
+  --mono-font-weight-normal: 400;
+  --mono-font-weight-medium: 500;
+  --mono-font-weight-semibold: 600;
+  --mono-font-weight-bold: 700;
+  --mono-label-font-weight: 500;
+  --mono-title-font-weight: 500;
+
+  --mono-border-width: 1px;
+  --mono-ring-width: 3px;
+  --mono-ring-alpha: 50%;
+  --mono-ring-color: color-mix(in oklab, var(--ring) var(--mono-ring-alpha), transparent);
+
+  /* ONE's public component knobs, neutralised: `initial` makes a custom
+     property guaranteed-invalid, so the component's own var() fallback — the
+     vega value — applies. Add a line here for every knob one.css sets. */
+  --mono-button-font-weight: initial;
+  --mono-button-text-transform: initial;
+  --mono-button-letter-spacing: initial;
+  --mono-button-md-radius: initial;
+  --mono-button-xs-radius: initial;
+  --mono-button-sm-radius: initial;
+  --mono-button-md-padding-inline: initial;
+  --mono-button-md-icon-padding: initial;
+  --mono-button-sm-padding-inline: initial;
+  --mono-button-sm-icon-padding: initial;
+  --mono-button-lg-padding-inline: initial;
+  --mono-button-lg-icon-padding: initial;
+  --mono-button-outline-shadow: initial;
+
+  /* dropdown-font */
+  --mono-dropdown-font-lg: initial;
+  --mono-dropdown-font-md: initial;
+  --mono-dropdown-font-sm: initial;
+  --mono-dropdown-font-xl: initial;
+  --mono-dropdown-font-xs: initial;
+  --mono-dropdown-font-xxl: initial;
+
+  /* dropdown-max */
+  --mono-dropdown-max-width-lg: initial;
+  --mono-dropdown-max-width-md: initial;
+  --mono-dropdown-max-width-sm: initial;
+  --mono-dropdown-max-width-xl: initial;
+  --mono-dropdown-max-width-xs: initial;
+  --mono-dropdown-max-width-xxl: initial;
+
+  /* dropdown-min */
+  --mono-dropdown-min-width-lg: initial;
+  --mono-dropdown-min-width-md: initial;
+  --mono-dropdown-min-width-sm: initial;
+  --mono-dropdown-min-width-xl: initial;
+  --mono-dropdown-min-width-xs: initial;
+  --mono-dropdown-min-width-xxl: initial;
+
+  /* dropdown-pad */
+  --mono-dropdown-pad-x-lg: initial;
+  --mono-dropdown-pad-x-md: initial;
+  --mono-dropdown-pad-x-sm: initial;
+  --mono-dropdown-pad-x-xl: initial;
+  --mono-dropdown-pad-x-xs: initial;
+  --mono-dropdown-pad-x-xxl: initial;
+  --mono-dropdown-pad-y-lg: initial;
+  --mono-dropdown-pad-y-md: initial;
+  --mono-dropdown-pad-y-sm: initial;
+  --mono-dropdown-pad-y-xl: initial;
+  --mono-dropdown-pad-y-xs: initial;
+  --mono-dropdown-pad-y-xxl: initial;
+
+  /* dropdown-radius */
+  --mono-dropdown-radius: initial;
+
+  /* dropdown-shadow */
+  --mono-dropdown-shadow: initial;
+
+  /* modal */
+  --mono-modal-body-font-md: initial;
+  --mono-modal-body-line-height: initial;
+  --mono-modal-close-glyph: initial;
+  --mono-modal-close-size-md: initial;
+  --mono-modal-footer-gap-md: initial;
+  --mono-modal-gap-md: initial;
+  --mono-modal-header-gap-md: initial;
+  --mono-modal-overlay-backdrop-filter: initial;
+  --mono-modal-overlay-bg: initial;
+  --mono-modal-pad-md: initial;
+  --mono-modal-radius: initial;
+  --mono-modal-shadow: initial;
+  --mono-modal-title-font-md: initial;
+  --mono-modal-title-weight: initial;
+  --mono-modal-width: initial;
+
+  /* drawer */
+  --mono-drawer-body-font-md: initial;
+  --mono-drawer-body-line-height: initial;
+  --mono-drawer-close-glyph: initial;
+  --mono-drawer-close-radius: initial;
+  --mono-drawer-close-size-md: initial;
+  --mono-drawer-duration: initial;
+  --mono-drawer-ease: initial;
+  --mono-drawer-footer-align: initial;
+  --mono-drawer-footer-direction: initial;
+  --mono-drawer-footer-gap-md: initial;
+  --mono-drawer-footer-justify: initial;
+  --mono-drawer-header-gap-md: initial;
+  --mono-drawer-height: initial;
+  --mono-drawer-overlay-backdrop-filter: initial;
+  --mono-drawer-overlay-bg: initial;
+  --mono-drawer-pad-md: initial;
+  --mono-drawer-radius: initial;
+  --mono-drawer-shadow: initial;
+  --mono-drawer-title-font-md: initial;
+  --mono-drawer-title-line-height: initial;
+  --mono-drawer-title-tracking: initial;
+  --mono-drawer-title-weight: initial;
+  --mono-drawer-width: initial;
+
+  /* nav */
+  --mono-nav-border-lite: initial;
+  --mono-nav-pad-x-comfortable: initial;
+  --mono-nav-radius: initial;
+  --mono-nav-ring-color: initial;
+  --mono-nav-shadow: initial;
+  --mono-nav-text-soft: initial;
+
+  /* breadcrumb */
+  --mono-breadcrumb-contained-pad-x: initial;
+  --mono-breadcrumb-contained-pad-y: initial;
+  --mono-breadcrumb-current-tracking: initial;
+  --mono-breadcrumb-current-transform: initial;
+  --mono-breadcrumb-current-weight: initial;
+  --mono-breadcrumb-font-md: initial;
+  --mono-breadcrumb-font-weight: initial;
+  --mono-breadcrumb-gap-md: initial;
+  --mono-breadcrumb-gap-wide-md: initial;
+  --mono-breadcrumb-icon-size-md: initial;
+  --mono-breadcrumb-pad-x: initial;
+  --mono-breadcrumb-pad-y: initial;
+  --mono-breadcrumb-radius-md: initial;
+  --mono-breadcrumb-sep-font-md: initial;
+
+  /* menu */
+  --mono-menu-active-weight: initial;
+  --mono-menu-font-comfortable: initial;
+  --mono-menu-gap-comfortable: initial;
+  --mono-menu-height-comfortable: initial;
+  --mono-menu-icon-size-comfortable: initial;
+  --mono-menu-pad-x-comfortable: initial;
+  --mono-menu-pad-y-comfortable: initial;
+  --mono-menu-radius-comfortable: initial;
+  --mono-menu-subheader-pad-x: initial;
+  --mono-menu-subheader-radius: initial;
+  --mono-menu-subheader-tracking: initial;
+  --mono-menu-subheader-transform: initial;
+  --mono-menu-subheader-weight: initial;
+  /* ONE paints the menu's hover itself and re-tints its active pill; a Basecoat
+     flavour wants upstream's `--sidebar-accent` wash and the shared tint. */
+  --mono-menu-hover-bg: initial;
+  --mono-menu-hover-border-color: initial;
+  --_mono-menu-active-tint-preset: initial;
+
+  /* sidebar — ONE's shell signature is a deep brand-primary slab with muted
+     white ink, written to the `-preset` tier so the `color` prop can still beat
+     it. That tier is neutral ground the flavour layer has to clear too: left
+     standing, every Basecoat flavour rendered the same navy slab instead of
+     upstream's `--sidebar` / `--sidebar-foreground`, in light AND in dark. */
+  --_mono-sidebar-surface-preset: initial;
+  --_mono-sidebar-bg-preset: initial;
+  --_mono-sidebar-text-preset: initial;
+  --_mono-sidebar-text-soft-preset: initial;
+  --_mono-sidebar-border-preset: initial;
+  --_mono-sidebar-border-lite-preset: initial;
+  --_mono-sidebar-accent-preset: initial;
+  --mono-sidebar-surface-soft: initial;
+  --mono-sidebar-gap-comfortable: initial;
+
+  /* table */
+  --mono-table-surface: initial;
+  --mono-table-zebra: initial;
+  --mono-table-border-lite: initial;
+  --mono-table-head-bg: initial;
+  --mono-table-group-bg: initial;
+  --mono-table-group-hover-bg: initial;
+  --mono-table-soft: initial;
+  --mono-table-foot-bg: initial;
+  --mono-table-cell-font: initial;
+  --mono-table-ink-mid: initial;
+  --mono-table-th-height: initial;
+  --mono-table-th-pad-x: initial;
+  --mono-table-th-font: initial;
+  --mono-table-th-weight: initial;
+  --mono-table-th-color: initial;
+  --mono-table-th-transform: initial;
+  --mono-table-th-tracking: initial;
+  --mono-table-cell-pad: initial;
+  --mono-table-font: initial;
+  --mono-table-line-height: initial;
+  --mono-table-radius: initial;
+  --mono-table-panel-radius: initial;
+  --mono-table-panel-shadow: initial;
+  --mono-table-panel-ring: initial;
+  --mono-table-panel-bg: initial;
+  --mono-table-panel-color: initial;
+  --mono-sidebar-pad-x-comfortable: initial;
+  --mono-sidebar-pad-y-comfortable: initial;
+  --mono-sidebar-radius: initial;
+  --mono-sidebar-shadow: initial;
+  --mono-sidebar-width: initial;
+
+  /* tabs */
+  --mono-tabs-badge-font: initial;
+  --mono-tabs-badge-size: initial;
+  --mono-tabs-font-weight: initial;
+  --mono-tabs-height-md: initial;
+  --mono-tabs-icon-size-md: initial;
+  --mono-tabs-line-offset: initial;
+  --mono-tabs-line-size: initial;
+  --mono-tabs-line-track-color: initial;
+  --mono-tabs-line-track-size: initial;
+  --mono-tabs-padding-md: initial;
+  --mono-tabs-radius-md: initial;
+  --mono-tabs-tab-font-md: initial;
+  --mono-tabs-tab-gap-md: initial;
+  --mono-tabs-tab-pad-x-md: initial;
+  --mono-tabs-tab-pad-y-md: initial;
+  --mono-tabs-tab-radius-md: initial;
+  --mono-tabs-text-transform: initial;
+
+  /* accordion */
+  --mono-accordion-arrow-size: initial;
+  --mono-accordion-body-color: initial;
+  --mono-accordion-body-font-md: initial;
+  --mono-accordion-body-line-height: initial;
+  --mono-accordion-description-font: initial;
+  --mono-accordion-gap: initial;
+  --mono-accordion-group-gap: initial;
+  --mono-accordion-head-hover-tint: initial;
+  --mono-accordion-open-bg: initial;
+  --mono-accordion-open-border-color: initial;
+  --mono-accordion-open-shadow: initial;
+  --mono-accordion-pad-x-md: initial;
+  --mono-accordion-pad-y-md: initial;
+  /* ONE's full size ladder (see flavors/one.css) */
+  --mono-accordion-pad-x-xs: initial;
+  --mono-accordion-pad-y-xs: initial;
+  --mono-accordion-pad-x-sm: initial;
+  --mono-accordion-pad-y-sm: initial;
+  --mono-accordion-pad-x-lg: initial;
+  --mono-accordion-pad-y-lg: initial;
+  --mono-accordion-pad-x-xl: initial;
+  --mono-accordion-pad-y-xl: initial;
+  --mono-accordion-pad-x-xxl: initial;
+  --mono-accordion-pad-y-xxl: initial;
+  --mono-accordion-title-font-xs: initial;
+  --mono-accordion-title-font-sm: initial;
+  --mono-accordion-title-font-lg: initial;
+  --mono-accordion-title-font-xl: initial;
+  --mono-accordion-title-font-xxl: initial;
+  --mono-accordion-body-font-xs: initial;
+  --mono-accordion-body-font-sm: initial;
+  --mono-accordion-body-font-lg: initial;
+  --mono-accordion-body-font-xl: initial;
+  --mono-accordion-body-font-xxl: initial;
+  --mono-accordion-radius: initial;
+  --mono-accordion-shadow: initial;
+  --mono-accordion-title-font-md: initial;
+  --mono-accordion-title-hover-decoration: initial;
+  --mono-accordion-title-weight: initial;
+
+  /* button-dropdown */
+  --mono-button-dropdown-gap: initial;
+  --mono-button-dropdown-item-base-hover-bg: initial;
+  --mono-button-dropdown-item-base-hover-color: initial;
+  --mono-button-dropdown-item-radius: initial;
+  --mono-button-dropdown-list-gap: initial;
+  --mono-button-dropdown-min-width: initial;
+  --mono-button-dropdown-padding: initial;
+  --mono-button-dropdown-radius: initial;
+  --mono-button-dropdown-ring-color: initial;
+  --mono-button-dropdown-shadow: initial;
+  --mono-button-dropdown-text: initial;
+
+  /* chip */
+  --mono-chip-dot-size: initial;
+  --mono-chip-font-size-lg: initial;
+  --mono-chip-font-size-md: initial;
+  --mono-chip-font-size-sm: initial;
+  --mono-chip-font-size-xl: initial;
+  --mono-chip-font-size-xs: initial;
+  --mono-chip-font-size-xxl: initial;
+  --mono-chip-gap-lg: initial;
+  --mono-chip-gap-md: initial;
+  --mono-chip-gap-sm: initial;
+  --mono-chip-gap-xl: initial;
+  --mono-chip-gap-xs: initial;
+  --mono-chip-gap-xxl: initial;
+  --mono-chip-glyph-size-lg: initial;
+  --mono-chip-glyph-size-md: initial;
+  --mono-chip-glyph-size-sm: initial;
+  --mono-chip-glyph-size-xl: initial;
+  --mono-chip-glyph-size-xs: initial;
+  --mono-chip-glyph-size-xxl: initial;
+  --mono-chip-height-lg: initial;
+  --mono-chip-height-md: initial;
+  --mono-chip-height-sm: initial;
+  --mono-chip-height-xl: initial;
+  --mono-chip-height-xs: initial;
+  --mono-chip-height-xxl: initial;
+  --mono-chip-padding-x-lg: initial;
+  --mono-chip-padding-x-md: initial;
+  --mono-chip-padding-x-sm: initial;
+  --mono-chip-padding-x-xl: initial;
+  --mono-chip-padding-x-xs: initial;
+  --mono-chip-padding-x-xxl: initial;
+  /* the radius is written at the PRESET tier because the `rounded` prop drives
+     the same value — a flavor setting the public `--mono-chip-radius` would
+     out-rank the prop and freeze every chip at one shape */
+  --_mono-chip-radius-preset: initial;
+  --mono-chip-soft-bg: initial;
+  --mono-chip-soft-border-color: initial;
+
+  /* alert (what one.css sets) */
+  --mono-alert-radius: initial;
+  --mono-alert-padding-x: initial;
+  --mono-alert-padding-y: initial;
+  --mono-alert-font-size: initial;
+  --mono-alert-title-weight: initial;
+  --mono-alert-subtitle-font-size: initial;
+
+  /* card */
+  --mono-card-actions-gap-md: initial;
+  --mono-card-gap-lg: initial;
+  --mono-card-gap-md: initial;
+  --mono-card-gap-sm: initial;
+  --mono-card-gap-xl: initial;
+  --mono-card-gap-xs: initial;
+  --mono-card-gap-xxl: initial;
+  --mono-card-header-gap-md: initial;
+  --mono-card-padding-lg: initial;
+  --mono-card-padding-md: initial;
+  --mono-card-padding-sm: initial;
+  --mono-card-padding-xl: initial;
+  --mono-card-padding-xs: initial;
+  --mono-card-padding-xxl: initial;
+  /* ONE writes the card radius at the PRESET tier (the `rounded` prop drives
+     the public knob, so a flavor that set it would out-rank the prop). That
+     tier is a private, but it is still a declaration ONE makes on :root, so it
+     needs the same twin as every public knob — without it vega and nova, the
+     two flavors that do not set a card radius of their own, inherited ONE's
+     rounded-lg where upstream .card is rounded-xl. */
+  --_mono-card-radius-preset: initial;
+  --mono-card-ring-color: initial;
+  --mono-card-shadow-elevated: initial;
+  --mono-card-subtitle-font-lg: initial;
+  --mono-card-subtitle-font-md: initial;
+  --mono-card-subtitle-font-sm: initial;
+  --mono-card-subtitle-font-xl: initial;
+  --mono-card-subtitle-font-xs: initial;
+  --mono-card-subtitle-font-xxl: initial;
+  --mono-card-subtitle-line-height: initial;
+  --mono-card-title-font-lg: initial;
+  --mono-card-title-font-md: initial;
+  --mono-card-title-font-sm: initial;
+  --mono-card-title-font-weight: initial;
+  --mono-card-title-font-xl: initial;
+  --mono-card-title-font-xs: initial;
+  --mono-card-title-font-xxl: initial;
+  --mono-card-title-line-height: initial;
+
+  /* file-upload */
+  --mono-file-upload-border-width: initial;
+  --mono-file-upload-dropzone-bg: initial;
+  --mono-file-upload-dropzone-gap: initial;
+  --mono-file-upload-dropzone-padding: initial;
+  --mono-file-upload-gap: initial;
+  --mono-file-upload-icon-bg: initial;
+  --mono-file-upload-icon-color: initial;
+  --mono-file-upload-icon-glyph-size: initial;
+  --mono-file-upload-icon-offset: initial;
+  --mono-file-upload-icon-radius: initial;
+  --mono-file-upload-icon-size: initial;
+  --mono-file-upload-item-bg: initial;
+  --mono-file-upload-item-border-color: initial;
+  --mono-file-upload-item-gap: initial;
+  --mono-file-upload-item-padding-x: initial;
+  --mono-file-upload-item-padding-y: initial;
+  --mono-file-upload-item-radius: initial;
+  --mono-file-upload-label-font-weight: initial;
+  --mono-file-upload-list-gap: initial;
+  --mono-file-upload-message-color: initial;
+  --mono-file-upload-message-font-size: initial;
+  --mono-file-upload-message-line-height: initial;
+  --mono-file-upload-meta-color: initial;
+  --mono-file-upload-meta-font-size: initial;
+  --mono-file-upload-meta-line-height: initial;
+  --mono-file-upload-name-font-size: initial;
+  --mono-file-upload-name-font-weight: initial;
+  --mono-file-upload-name-line-height: initial;
+  --mono-file-upload-radius: initial;
+  --mono-file-upload-remove-radius: initial;
+  --mono-file-upload-remove-size: initial;
+  --mono-file-upload-subtext-color: initial;
+  --mono-file-upload-subtext-font-size: initial;
+  --mono-file-upload-subtext-line-height: initial;
+  --mono-file-upload-thumb-bg: initial;
+  --mono-file-upload-thumb-color: initial;
+  --mono-file-upload-thumb-radius: initial;
+  --mono-file-upload-thumb-size: initial;
+  --mono-file-upload-title-font-size: initial;
+  --mono-file-upload-title-font-weight: initial;
+  --mono-file-upload-title-line-height: initial;
+  --mono-file-upload-title-tracking: initial;
+
+  /* chip */
+  --mono-chip-font-weight: initial;
+
+  /* switch */
+  --mono-switch-thumb-shadow: initial;
+
+  /* textarea */
+  --mono-textarea-rows-lg: initial;
+  --mono-textarea-rows-md: initial;
+
+  --mono-control-height-xs: 1.5rem;
+  --mono-control-height-sm: 2rem;
+  --mono-control-height-md: 2.25rem;
+  --mono-control-height-lg: 2.5rem;
+  --mono-control-height-xl: 2.75rem;
+  --mono-control-height-xxl: 3rem;
+}
+