71 lines
2.2 KiB
CSS
71 lines
2.2 KiB
CSS
/**
|
|
* Formulation Design System Tokens
|
|
*/
|
|
:root {
|
|
/* Surface Colors */
|
|
--fmt-bg-page: #ffffff;
|
|
--fmt-bg-card: #ffffff;
|
|
--fmt-bg-card-alt: #fafbfd;
|
|
--fmt-bg-card-hover: #f8faff;
|
|
--fmt-bg-white: #ffffff;
|
|
--fmt-bg-active-pill: #dbe4ff;
|
|
|
|
/* Text & Ink Colors */
|
|
--fmt-text-primary: #050841;
|
|
--fmt-text-secondary: #202962;
|
|
--fmt-text-muted: #a5a9c1;
|
|
--fmt-text-subtle: #757677;
|
|
--fmt-text-gray: #8283a0;
|
|
--fmt-text-body: rgba(0, 0, 0, 0.87);
|
|
--fmt-text-danger: #f63d48;
|
|
|
|
/* Brand, Type Badge & Accent Colors */
|
|
--fmt-blue: #3d5df6;
|
|
--fmt-blue-hover: #304fdf;
|
|
--fmt-blue-active: #1236e1;
|
|
--fmt-blue-tint: #f1f5fe;
|
|
--fmt-blue-badge: #dbe4ff;
|
|
--fmt-type-recipe: #3c4679;
|
|
--fmt-type-ingredient: #3f908a;
|
|
--fmt-type-book: #f3a642;
|
|
--fmt-type-purchase: #3f908a;
|
|
--fmt-green: #3f908a;
|
|
--fmt-green-dark: #20ab85;
|
|
--fmt-orange: #f3a642;
|
|
--fmt-danger: #f63d48;
|
|
--fmt-danger-hover: #e02834;
|
|
--fmt-danger-bg: #fff1f2;
|
|
--fmt-danger-tint: #fff0e8;
|
|
--fmt-danger-dark: #9a3412;
|
|
|
|
/* Border Colors */
|
|
--fmt-border-subtle: #f3f3f3;
|
|
--fmt-border-default: #ececec;
|
|
--fmt-border-strong: #dfe3ec;
|
|
--fmt-border-divider: #eeeef3;
|
|
|
|
/* Elevation Shadows (Material UI standard elevations) */
|
|
--fmt-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
--fmt-shadow-elevation-2: 0 2px 1px -1px rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 1px 3px 0 rgba(0,0,0,0.12);
|
|
--fmt-shadow-elevation-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12);
|
|
--fmt-shadow-elevation-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12);
|
|
--fmt-shadow-elevation-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
|
|
|
|
/* Border Radii */
|
|
--fmt-radius-xs: 2px;
|
|
--fmt-radius-sm: 4px;
|
|
--fmt-radius-md: 6px;
|
|
--fmt-radius-lg: 8px;
|
|
--fmt-radius-xl: 10px;
|
|
--fmt-radius-pill: 100px;
|
|
--fmt-radius-chip: 999px;
|
|
--fmt-radius-circle: 50%;
|
|
|
|
/* Transitions */
|
|
--fmt-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--fmt-transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* Fonts */
|
|
--fmt-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|