mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-03 16:10:21 +00:00
f15e27e5fd
# Design System Unification — one visual language, enforced end-to-end
Establishes **one source of truth for every visual decision**, wires the
whole app to it, and **locks it in with CI** so it can't drift back.
### Foundations
- **Design-token system ("one knob per decision").** Every colour, text
size, spacing, corner radius, and shadow is a named token defined in
exactly one place — change the token, every screen updates. Collapsed
hundreds of near-duplicate definitions and removed "fake" duplicates
that pretended to be different but weren't.
- **Shared component library (O2).** Buttons, tables, dialogs, drawers,
form fields, badges, etc. already know the correct colours, spacing, and
dark-mode behaviour; new screens compose them instead of hand-styling.
Added new primitives on this branch (`OContent`, `KpiCard`) and
standardized existing ones.
- **One page structure everywhere** (`PageLayout` / `AppPageHeader` /
`AppPage` / `OContent`) — titles, breadcrumbs, spacing, and content
edges line up identically across every screen.
- **One table implementation** — all tabular data uses the same table
(sorting, density, sticky headers, empty states).
- **Styling consolidated onto Tailwind; old systems removed** —
hand-written CSS driven to the practical minimum, the legacy **Quasar**
framework fully removed, surviving stylesheets required to justify
themselves.
- **Two-tier corner radius** — a tight **4px** for controls and a soft
**12px** for surfaces (dialogs, cards, the app shell), plus a
full-circle option — replacing five radius names that all secretly meant
the same thing.
### Detailed improvements across screens
**Page structure & alignment** — unified page shell rolled across ~40+
screens (IAM, Settings, Alerts, Dashboards, Functions, Pipelines, RUM,
Metrics, Synthetics, Billing, editors, lists); one header height; one
page-edge grid driving headers, tables, rails, and tabs; unified
side-rail widths; inset rail selection/hover pills; every tab strip on
the grid line; tightened title/subtitle spacing.
**Tables (cross-screen)** — action columns consistently centered (incl.
Organizations); unified row-number column with no "#" truncation;
non-standard tables restyled to match; loading skeletons made
geometrically identical to the loaded table; symmetric edge inset; IAM
first-column grid alignment fixed.
**Traces** — flame graph + span-detail correlation panel fixes;
correlated logs/metrics placeholder fit; sticky headers; removed a
double scrollbar + a 1px sliver; aligned table fonts/badges; polished
the service detail drawer; stream-selector + correlation alignment;
aligned loading spinners; floating overlay arrows for the
disabled-services strip.
**Logs** — field-list controls aligned (focus ring no longer clipped);
detail-drawer spacing + metrics-tab overflow fixed; Run Query toolbar
tidied; listing sizing + stray border fixed.
**Metrics** — search added to the "Type" facet rail and aligned with the
other rails; proper empty states for the explorer and facet rail.
**Dashboards** — removed inconsistent card shadows; tightened
borders/resizers/field-list spacing; aligned View Dashboard chrome to
the grid; chart colours via the token helper.
**Home** — redesigned the Usage tab; added reusable KPI stat cards so
summary strips stop drifting.
**Dark mode** — new theme-switch animation; fixed a 1px content shift on
toggle and a white flash on load; fixed AI-chat text and assorted
light/dark mismatches; completed the token-driven dark migration.
**Empty states, controls & small polish** — restored 3 broken
empty-state animations; adopted the standard empty state; added the
sliding indicator to the toggle control; fixed the Quality-page inset +
drawer badge; refreshed Search History / Schedulers; fixed the
alert-history drawer scrollbar + timeline hover; removed a stray
menu-bar border.
### Dead code & cruft removal
- **Deleted the entire legacy `utilities.css`** global stylesheet (well
over a thousand lines) — evacuated in waves, roughly half of it dead
once traced.
- **Removed Quasar entirely**, including dead `.q-*` styles and ~25
phantom `--q-*` variables that were silently breaking bits of the UI.
- Stripped hundreds of **dead CSS classes and tokens that compiled to
nothing** — e.g. 46 uses of a colour class with no backing token, a
no-op shadow class on 51 elements, dead layout/utility classes, a
leftover `card-container` block, a dead table-actions token, and a
mis-registered gradient that rendered nothing.
- Cut **unused keyframe animations (19 → 3)** and removed **unused
components** + a stray build artifact.
- Net effect: a much smaller, leaner styling surface — less to maintain,
fewer dead ends to copy.
## Safety & verification
Large but low-risk: this is overwhelmingly a **styling and structure**
change, not product behaviour or data. Guarded by the
design-token/consistency/type checks above plus the existing test suite,
and reviewed screen-by-screen.
---------
Co-authored-by: Kirtan Thakkar <kirtan@kiara.tech>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>
180 lines
9.7 KiB
JSON
180 lines
9.7 KiB
JSON
{
|
|
"_comment": "Phase 1 migration map: --o2-* -> --color-*. All targets are real --color-* tokens already defined in the token files. Consumed by codemod-o2-refs.mjs. Phase 2 (literal-owner families) appends to `migrate` as each family gets a --color-* token.",
|
|
"migrate": {
|
|
"--o2-primary-background": "--color-surface-base",
|
|
"--o2-secondary-background": "--color-surface-panel",
|
|
"--o2-muted-background": "--color-surface-subtle",
|
|
"--o2-text-heading": "--color-text-heading",
|
|
"--o2-text-primary": "--color-text-heading",
|
|
"--o2-text-body": "--color-text-body",
|
|
"--o2-text-secondary": "--color-text-secondary",
|
|
"--o2-text-caption": "--color-text-secondary",
|
|
"--o2-text-label": "--color-text-label",
|
|
"--o2-text-muted": "--color-text-muted",
|
|
"--o2-text-placeholder": "--color-text-placeholder",
|
|
"--o2-text-link": "--color-text-link",
|
|
"--o2-text-link-hover": "--color-text-link-hover",
|
|
"--o2-text-code": "--color-text-code",
|
|
"--o2-text-inverse": "--color-text-inverse",
|
|
"--o2-text-4": "--color-text-heading",
|
|
"--o2-text-2": "--color-text-secondary",
|
|
"--o2-text-1": "--color-text-secondary",
|
|
"--o2-text-3": "--color-text-label",
|
|
"--o2-card-background": "--color-surface-base",
|
|
"--o2-card-text": "--color-card-text",
|
|
"--o2-popover-background": "--color-surface-overlay",
|
|
"--o2-popover-text": "--color-text-heading",
|
|
"--o2-code-bg": "--color-code-bg",
|
|
"--o2-border": "--color-border-default",
|
|
"--o2-border-input": "--color-input-border",
|
|
"--o2-primary-foreground": "--color-button-primary-foreground",
|
|
"--o2-hover-accent": "--color-interactive-hover-bg",
|
|
"--o2-theme-color": "--color-theme-accent",
|
|
"--o2-dark-theme-color": "--color-theme-accent",
|
|
"--o2-body-primary-bg": "--color-theme-body-bg-primary",
|
|
"--o2-body-secondary-bg": "--color-theme-body-bg-secondary",
|
|
"--o2-primary-btn-bg": "--color-button-primary",
|
|
"--o2-primary-btn-text": "--color-button-primary-foreground",
|
|
"--o2-header-menu-bg": "--color-theme-header-menu-bg",
|
|
"--o2-border-2": "--color-border-subtle",
|
|
"--o2-menu-gradient-start": "--color-theme-menu-gradient-start",
|
|
"--o2-menu-gradient-end": "--color-theme-menu-gradient-end",
|
|
"--o2-menu-color": "--color-theme-menu-color",
|
|
"--o2-table-header-bg": "--color-theme-table-header-bg",
|
|
"--o2-tab-bg": "--color-theme-tab-bg",
|
|
"--o2-inactive-tab-bg": "--color-theme-tab-bg-inactive",
|
|
"--o2-input-label-text-color": "--color-input-label",
|
|
"--o2-label-chip-ip-bg": "--color-label-chip-ip-bg",
|
|
"--o2-label-chip-ip-text": "--color-label-chip-ip-text",
|
|
"--o2-label-chip-ipv4-bg": "--color-label-chip-ip-bg",
|
|
"--o2-label-chip-ipv4-text": "--color-label-chip-ip-text",
|
|
"--o2-label-chip-ipv6-bg": "--color-label-chip-ip-bg",
|
|
"--o2-label-chip-ipv6-text": "--color-label-chip-ip-text",
|
|
"--o2-label-chip-method-bg": "--color-label-chip-method-bg",
|
|
"--o2-label-chip-method-text": "--color-label-chip-method-text",
|
|
"--o2-label-chip-url-bg": "--color-label-chip-url-bg",
|
|
"--o2-label-chip-url-text": "--color-label-chip-url-text",
|
|
"--o2-label-chip-num-bg": "--color-label-chip-num-bg",
|
|
"--o2-label-chip-num-text": "--color-label-chip-num-text",
|
|
"--o2-label-chip-float-bg": "--color-label-chip-float-bg",
|
|
"--o2-label-chip-float-text": "--color-label-chip-float-text",
|
|
"--o2-label-chip-hex-bg": "--color-label-chip-hex-bg",
|
|
"--o2-label-chip-hex-text": "--color-label-chip-hex-text",
|
|
"--o2-label-chip-ts-bg": "--color-label-chip-ts-bg",
|
|
"--o2-label-chip-ts-text": "--color-label-chip-ts-text",
|
|
"--o2-label-chip-date-bg": "--color-label-chip-ts-bg",
|
|
"--o2-label-chip-date-text": "--color-label-chip-ts-text",
|
|
"--o2-label-chip-time-bg": "--color-label-chip-ts-bg",
|
|
"--o2-label-chip-time-text": "--color-label-chip-ts-text",
|
|
"--o2-label-chip-id-bg": "--color-label-chip-id-bg",
|
|
"--o2-label-chip-id-text": "--color-label-chip-id-text",
|
|
"--o2-label-chip-email-bg": "--color-label-chip-email-bg",
|
|
"--o2-label-chip-email-text": "--color-label-chip-email-text",
|
|
"--o2-label-chip-str-bg": "--color-label-chip-str-bg",
|
|
"--o2-label-chip-str-text": "--color-label-chip-str-text",
|
|
"--o2-label-chip-default-bg": "--color-label-chip-default-bg",
|
|
"--o2-label-chip-default-text": "--color-label-chip-default-text",
|
|
"--o2-label-chip-pattern-bg": "--color-label-chip-pattern-bg",
|
|
"--o2-label-chip-pattern-text": "--color-label-chip-pattern-text",
|
|
"--o2-status-success-text": "--color-status-success-text",
|
|
"--o2-status-success-bg": "--color-status-success-bg",
|
|
"--o2-status-error-text": "--color-status-error-text",
|
|
"--o2-status-error-bg": "--color-status-error-bg",
|
|
"--o2-positive": "--color-status-positive",
|
|
"--o2-negative": "--color-status-negative",
|
|
"--o2-secondary-btn-bg": "--color-button-secondary",
|
|
"--o2-secondary-btn-text": "--color-button-secondary-foreground",
|
|
"--o2-secondary-btn-border": "--color-button-secondary-border",
|
|
"--o2-primary-color": "--color-accent",
|
|
"--o2-actions-column-shawdow": "--color-actions-column-shadow",
|
|
"--o2-bg-gray": "--color-bg-gray",
|
|
"--o2-border-color": "--color-card-glass-border",
|
|
"--o2-cancel-query-bg": "--color-cancel-query-bg",
|
|
"--o2-card-bg": "--color-card-glass-bg",
|
|
"--o2-card-bg-solid": "--color-card-glass-solid",
|
|
"--o2-dashboard-placeholder-bg": "--color-dashboard-placeholder-bg",
|
|
"--o2-error-tag-bg": "--color-error-tag-bg",
|
|
"--o2-error-tag-text": "--color-error-tag-text",
|
|
"--o2-field-type-boolean-bg": "--color-field-type-boolean-bg",
|
|
"--o2-field-type-boolean-text": "--color-field-type-boolean-text",
|
|
"--o2-field-type-float-bg": "--color-field-type-float-bg",
|
|
"--o2-field-type-float-text": "--color-field-type-float-text",
|
|
"--o2-field-type-number-bg": "--color-field-type-number-bg",
|
|
"--o2-field-type-number-text": "--color-field-type-number-text",
|
|
"--o2-field-type-string-bg": "--color-field-type-string-bg",
|
|
"--o2-field-type-string-text": "--color-field-type-string-text",
|
|
"--o2-field-type-timestamp-bg": "--color-field-type-timestamp-bg",
|
|
"--o2-field-type-timestamp-text": "--color-field-type-timestamp-text",
|
|
"--o2-focus-ring": "--color-focus-ring",
|
|
"--o2-gray": "--color-gray",
|
|
"--o2-hover-gray": "--color-hover-gray",
|
|
"--o2-hover-shadow": "--color-hover-shadow",
|
|
"--o2-icon-color": "--color-icon-color",
|
|
"--o2-icon-color-dark": "--color-icon-color-dark",
|
|
"--o2-info": "--color-info",
|
|
"--o2-json-boolean": "--color-json-boolean",
|
|
"--o2-json-key": "--color-json-key",
|
|
"--o2-json-null": "--color-json-null",
|
|
"--o2-json-number": "--color-json-number",
|
|
"--o2-json-object": "--color-json-object",
|
|
"--o2-json-string": "--color-json-string",
|
|
"--o2-latency-p95": "--color-latency-p95",
|
|
"--o2-log-table-header-bg": "--color-log-table-header-bg",
|
|
"--o2-log-table-row-bg": "--color-log-table-row-bg",
|
|
"--o2-log-table-row-border": "--color-log-table-row-border",
|
|
"--o2-log-table-row-hover": "--color-log-table-row-hover",
|
|
"--o2-pivot-header-border": "--color-pivot-header-border",
|
|
"--o2-section-header-bg": "--color-section-header-bg",
|
|
"--o2-service-health-critical": "--color-service-health-critical",
|
|
"--o2-service-health-degraded": "--color-service-health-degraded",
|
|
"--o2-service-health-healthy": "--color-service-health-healthy",
|
|
"--o2-service-health-warning": "--color-service-health-warning",
|
|
"--o2-severity-error-color": "--color-severity-error-color",
|
|
"--o2-severity-warning-color": "--color-severity-warning-color",
|
|
"--o2-status-info-bg": "--color-status-info-bg",
|
|
"--o2-status-info-text": "--color-status-info-text",
|
|
"--o2-status-neutral-text": "--color-status-neutral-text",
|
|
"--o2-status-warning-bg": "--color-status-warning-bg",
|
|
"--o2-status-warning-text": "--color-status-warning-text",
|
|
"--o2-sticky-col-header-bg": "--color-sticky-col-header-bg",
|
|
"--o2-tab-text-color": "--color-tab-text-color",
|
|
"--o2-table-actions-bg": "--color-table-actions-bg",
|
|
"--o2-trace-border": "--color-trace-border",
|
|
"--o2-trace-hover": "--color-trace-hover",
|
|
"--o2-trace-selected": "--color-trace-selected",
|
|
"--o2-trace-surface": "--color-trace-surface",
|
|
"--o2-trace-text-primary": "--color-trace-text-primary",
|
|
"--o2-trace-text-secondary": "--color-trace-text-secondary",
|
|
"--o2-warning": "--color-warning",
|
|
"--o2-wildcard-bar-blue": "--color-wildcard-bar-blue",
|
|
"--o2-wildcard-bar-green": "--color-wildcard-bar-green",
|
|
"--o2-wildcard-bar-orange": "--color-wildcard-bar-orange",
|
|
"--o2-wildcard-bar-purple": "--color-wildcard-bar-purple",
|
|
"--o2-bg": "--color-surface-base",
|
|
"--o2-bg-color": "--color-surface-base",
|
|
"--o2-bg-primary": "--color-card-glass-bg",
|
|
"--o2-bg-light": "--color-surface-base",
|
|
"--o2-bg-dark": "--color-surface-base",
|
|
"--o2-bg-card-dark": "--color-surface-base",
|
|
"--o2-dark-page-bg": "--color-surface-base",
|
|
"--o2-surface": "--color-surface-base",
|
|
"--o2-text": "--color-text-heading",
|
|
"--o2-text-color": "--color-text-heading",
|
|
"--o2-text-primary-dark": "--color-text-heading",
|
|
"--o2-primary": "--color-accent",
|
|
"--o2-primary-dark": "--color-accent",
|
|
"--o2-color-primary": "--color-accent",
|
|
"--o2-color-primary-light": "--color-primary-100",
|
|
"--o2-brand": "--color-accent",
|
|
"--o2-destructive": "--color-error-500",
|
|
"--o2-status-error": "--color-status-error-text",
|
|
"--o2-status-error-border": "--color-error-300",
|
|
"--o2-hover-bg": "--color-interactive-hover-bg",
|
|
"--o2-hover-color": "--color-interactive-hover-bg",
|
|
"--o2-selected-color": "--color-primary-100",
|
|
"--o2-shadow-lg": "--shadow-lg",
|
|
"--o2-input-bg": "--color-input-bg",
|
|
"--o2-font-mono": "--font-mono"
|
|
}
|
|
}
|