mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-06 00:09:22 +00:00
65666e4ed9
<img width="2658" height="420" alt="image" src="https://github.com/user-attachments/assets/90d7bd1a-012d-4185-a832-35135d696baf" /> <img width="2640" height="486" alt="image" src="https://github.com/user-attachments/assets/d9543813-1cca-4f83-8da6-a12b7514a986" /> --------- Co-authored-by: Shrinath Rao <shnath@openobserve.ai> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
45 lines
2.0 KiB
CSS
45 lines
2.0 KiB
CSS
/* ============================================================
|
|
COMPONENT TOKENS — per-component design decisions
|
|
Each section is owned exclusively by one component.
|
|
============================================================ */
|
|
|
|
@theme inline {
|
|
/* ---- Button ------------------------------------------------ */
|
|
|
|
/* primary */
|
|
--color-button-primary: var(--color-primary-600);
|
|
--color-button-primary-hover: var(--color-primary-700);
|
|
--color-button-primary-active: var(--color-primary-800);
|
|
--color-button-primary-disabled: var(--color-primary-300);
|
|
--color-button-primary-foreground: var(--color-white);
|
|
--color-button-primary-focus-ring: var(--color-primary-400);
|
|
|
|
/* secondary */
|
|
--color-button-secondary: var(--color-grey-100);
|
|
--color-button-secondary-hover: var(--color-grey-200);
|
|
--color-button-secondary-active: var(--color-grey-300);
|
|
--color-button-secondary-disabled: var(--color-grey-100);
|
|
--color-button-secondary-foreground: var(--color-grey-800);
|
|
--color-button-secondary-focus-ring: var(--color-grey-400);
|
|
|
|
/* outline */
|
|
--color-button-outline-text: var(--color-grey-800);
|
|
--color-button-outline-border: var(--color-grey-300);
|
|
--color-button-outline-hover-bg: var(--color-grey-50);
|
|
--color-button-outline-hover-border: var(--color-grey-400);
|
|
--color-button-outline-active-bg: var(--color-grey-100);
|
|
--color-button-outline-focus-ring: var(--color-grey-400);
|
|
|
|
/* ghost */
|
|
--color-button-ghost-text: var(--color-grey-700);
|
|
--color-button-ghost-hover-bg: var(--color-grey-100);
|
|
--color-button-ghost-active-bg: var(--color-grey-200);
|
|
--color-button-ghost-focus-ring: var(--color-grey-400);
|
|
|
|
/* destructive */
|
|
--color-button-destructive: var(--color-error-600);
|
|
--color-button-destructive-hover: var(--color-error-700);
|
|
--color-button-destructive-disabled: var(--color-error-300);
|
|
--color-button-destructive-foreground: var(--color-white);
|
|
}
|