/** * Seeds Design System — Tailwind CSS v4 Preset * * Import this file in your CSS entry point: * @import "tailwindcss"; * @import "@sproutsocial/seeds-react-theme/css/tailwind-preset"; * * All values are sourced from Seeds token packages — no hardcoded values. * Dark mode is handled via the .dark class on . */ @theme { /* Spacing — from @sproutsocial/seeds-space */ --spacing-0: 0px; --spacing-100: 2px; --spacing-200: 4px; --spacing-300: 8px; --spacing-350: 12px; --spacing-400: 16px; --spacing-450: 24px; --spacing-500: 32px; --spacing-600: 40px; /* Border radius — from @sproutsocial/seeds-border */ --radius-400: 4px; --radius-500: 6px; --radius-600: 8px; --radius-800: 12px; --radius-900: 24px; --radius-1000: 999999px; --radius-pill: 999999px; --radius-inner: 4px; --radius-outer: 8px; /* Border width — from @sproutsocial/seeds-border */ --border-width-500: 1px; --border-width-600: 2px; --border-width-700: 3px; /* Font size — from @sproutsocial/seeds-typography */ --text-100--font-size: 11px; --text-100--line-height: 18.666666666666668px; --text-200--font-size: 13px; --text-200--line-height: 21.333333333333332px; --text-300--font-size: 16px; --text-300--line-height: 24px; --text-400--font-size: 18px; --text-400--line-height: 26.666666666666668px; --text-500--font-size: 21px; --text-500--line-height: 29.333333333333332px; --text-600--font-size: 24px; --text-600--line-height: 32px; --text-700--font-size: 32px; --text-700--line-height: 40px; /* Button colors — from @sproutsocial/seeds-color (light mode) */ --color-button-primary-bg-base: #205bc3; --color-button-primary-bg-hover: #1150aa; --color-button-primary-bg-active: #0c3f89; --color-button-primary-text-base: #FFFFFF; --color-button-primary-text-hover: #FFFFFF; --color-button-primary-border-base: transparent; --color-button-secondary-bg-base: transparent; --color-button-secondary-bg-hover: #364141; --color-button-secondary-bg-active: #273333; --color-button-secondary-text-base: #364141; --color-button-secondary-text-hover: #FFFFFF; --color-button-secondary-border-base: #364141; --color-button-destructive-bg-base: #c63434; --color-button-destructive-bg-hover: #992222; --color-button-destructive-bg-active: #6d1313; --color-button-destructive-text-base: #FFFFFF; --color-button-destructive-text-hover: #FFFFFF; --color-button-destructive-border-base: transparent; --color-button-placeholder-bg-base: transparent; --color-button-placeholder-bg-hover: #FFFFFF; --color-button-placeholder-bg-active: #FFFFFF; --color-button-placeholder-text-base: #205bc3; --color-button-placeholder-text-hover: #1150aa; --color-button-placeholder-border-base: #929a9b; /* Semantic tokens — reference CSS vars from theme-all.css */ --color-app-bg-base: var(--color-app-bg-base); --color-container-bg-base: var(--color-container-bg-base); --color-container-bg-success: var(--color-container-bg-success); --color-container-bg-warning: var(--color-container-bg-warning); --color-container-bg-error: var(--color-container-bg-error); --color-container-bg-info: var(--color-container-bg-info); --color-container-bg-opportunity: var(--color-container-bg-opportunity); --color-container-border-base: var(--color-container-border-base); --color-container-border-success: var(--color-container-border-success); --color-container-border-warning: var(--color-container-border-warning); --color-container-border-error: var(--color-container-border-error); --color-container-border-info: var(--color-container-border-info); --color-container-border-opportunity: var(--color-container-border-opportunity); --color-text-body: var(--color-text-body); --color-text-headline: var(--color-text-headline); --color-text-subtext: var(--color-text-subtext); --color-form-bg-base: var(--color-form-bg-base); --color-form-border-base: var(--color-form-border-base); --color-form-border-selected: var(--color-form-border-selected); --color-form-placeholder-base: var(--color-form-placeholder-base); /* Button colors — dark mode variants (use with dark: prefix) */ --color-button-primary-bg-base-dark: #679eff; --color-button-primary-bg-hover-dark: #a1c2f8; --color-button-primary-bg-active-dark: #c7dbf9; --color-button-primary-text-base-dark: #273333; --color-button-primary-text-hover-dark: #162020; --color-button-secondary-bg-hover-dark: #f3f4f4; --color-button-secondary-bg-active-dark: #FFFFFF; --color-button-secondary-text-base-dark: #FFFFFF; --color-button-secondary-text-hover-dark: #364141; --color-button-secondary-border-base-dark: #FFFFFF; --color-button-destructive-bg-base-dark: #ff7f6e; --color-button-destructive-bg-hover-dark: #ff9c8f; --color-button-destructive-bg-active-dark: #ffb8b1; --color-button-destructive-text-base-dark: #273333; --color-button-destructive-text-hover-dark: #162020; --color-button-placeholder-bg-hover-dark: #040404; --color-button-placeholder-bg-active-dark: #040404; --color-button-placeholder-text-base-dark: #679eff; --color-button-placeholder-text-hover-dark: #a1c2f8; }