/* Ginger Admin colors * * This is the whole palette, named exactly as the Figma library names it. Every * color in the UI comes from here -- if a design seems to need a new shade, add * it to Figma first, then to this file. Never write a hex literal in a * component. Change a value here and it changes everywhere it is used. * * Three groups: * * FIGMA PALETTE the 24 colors the designer maintains. These are the only * authored hex values in the codebase. * DERIVED states Figma does not draw explicitly -- accent hovers, * tints, alpha overlays -- computed from a Figma color with * color-mix() so they track their base. Never hardcode. * NOT IN FIGMA four colors the UI uses that the library has no entry for. * Each is flagged; the designer decides whether to adopt or * replace them. * * Figma's own convention for disabled states is an alpha percentage of the base * color (Green Disabled = Green @30%), so the derived states follow suit. * * Contrast rule, because the old CSS broke it repeatedly: Extra Light Grey and * lighter are surfaces, borders and fills -- never text. Light Grey is the floor * for placeholder and disabled text only. Real text starts at Medium Grey. Text * on a colored tint uses that hue's -text step, never the base color. * * Loaded after bootstrap.min.css and before _base.css in base.blade.php, * app.blade.php and _base.twig. Bootstrap's own --bs-* variables are * deliberately NOT remapped here; _base.css overrides the components we use. */ :root { /* ================================================================ * * FIGMA PALETTE * * ================================================================ */ /* Neutrals */ --grey-background: #f9fafc; --grey-ghost-hover: #f6f8fa; --extra-light-grey: #eff1f5; --extra-light-grey-hover: #e9ecf1; --light-grey: #c7ced7; --grey: #acb2c0; --medium-grey: #5d6b7a; --dark-grey: #242e3b; --white: #ffffff; /* Greens */ --green-ghost-hover: #effcf4; --light-green: #e9fbf0; --light-green-hover: #d7f8e4; --green: #00d158; --green-hover: #00c954; --dark-green: #18b744; --ginger-original: #0ade63; /* Accents */ --blue: #3f8cff; --orange: #fb8800; --red: #ff4848; /* Disabled states, straight from Figma */ --extra-light-grey-disabled: color-mix(in srgb, var(--extra-light-grey) 50%, transparent); --medium-grey-disabled: color-mix(in srgb, var(--medium-grey) 30%, transparent); --light-green-disabled: color-mix(in srgb, var(--light-green) 50%, transparent); --green-disabled: color-mix(in srgb, var(--green) 30%, transparent); --dark-green-disabled: color-mix(in srgb, var(--dark-green) 30%, transparent); /* ================================================================ * * DERIVED * * Computed from the palette above. Edit the base color, not these. * * ================================================================ */ /* Accent states Figma does not draw. -hover darkens toward Dark Grey, * -tint lightens toward White, -text is the readable step on a tint. */ --red-hover: color-mix(in srgb, var(--red) 88%, var(--dark-grey)); --red-text: color-mix(in srgb, var(--red) 55%, var(--dark-grey)); --red-tint: color-mix(in srgb, var(--red) 8%, var(--white)); --red-tint-border: color-mix(in srgb, var(--red) 25%, var(--white)); --orange-text: color-mix(in srgb, var(--orange) 45%, var(--dark-grey)); --orange-tint: color-mix(in srgb, var(--orange) 10%, var(--white)); --orange-tint-border:color-mix(in srgb, var(--orange) 25%, var(--white)); --green-text: color-mix(in srgb, var(--dark-green) 55%, var(--dark-grey)); --blue-text: color-mix(in srgb, var(--blue) 60%, var(--dark-grey)); --blue-tint: color-mix(in srgb, var(--blue) 10%, var(--white)); /* Alpha overlays. Used for focus rings, scrims and shadows -- places that * must let the layer underneath show through. */ --white-a70: color-mix(in srgb, var(--white) 70%, transparent); --white-a90: color-mix(in srgb, var(--white) 90%, transparent); --white-a98: color-mix(in srgb, var(--white) 98%, transparent); /* Pure black exists only as an overlay -- never as a fill or a text color. * Dark Grey is the darkest thing a user actually sees. */ --black-a05: color-mix(in srgb, #000 5%, transparent); --black-a10: color-mix(in srgb, #000 10%, transparent); --black-a15: color-mix(in srgb, #000 15%, transparent); --black-a30: color-mix(in srgb, #000 30%, transparent); --black-a50: color-mix(in srgb, #000 50%, transparent); --black-a75: color-mix(in srgb, #000 75%, transparent); --extra-light-grey-a80: color-mix(in srgb, var(--extra-light-grey) 80%, transparent); --medium-grey-a15: color-mix(in srgb, var(--medium-grey) 15%, transparent); --medium-grey-a20: color-mix(in srgb, var(--medium-grey) 20%, transparent); --dark-grey-a45: color-mix(in srgb, var(--dark-grey) 45%, transparent); --ginger-original-a05: color-mix(in srgb, var(--ginger-original) 5%, transparent); --ginger-original-a10: color-mix(in srgb, var(--ginger-original) 10%, transparent); --ginger-original-a20: color-mix(in srgb, var(--ginger-original) 20%, transparent); --green-a15: color-mix(in srgb, var(--green) 15%, transparent); --red-a05: color-mix(in srgb, var(--red) 5%, transparent); --red-a10: color-mix(in srgb, var(--red) 10%, transparent); --red-a15: color-mix(in srgb, var(--red) 15%, transparent); --red-a60: color-mix(in srgb, var(--red) 60%, transparent); --orange-a10: color-mix(in srgb, var(--orange) 10%, transparent); --orange-a20: color-mix(in srgb, var(--orange) 20%, transparent); --blue-a05: color-mix(in srgb, var(--blue) 5%, transparent); --blue-a10: color-mix(in srgb, var(--blue) 10%, transparent); /* ================================================================ * * NOT IN FIGMA -- designer to adopt or replace * * ================================================================ */ /* The yellow underline under every link, and the icon-hover highlight that * matches it. Closest Figma color is Orange, which is a different look. */ --link-underline: #feee6e; /* Price-plan and chip badges. Two category colors that exist only so * adjacent badges stay tellable apart; Figma has no category scale. */ --badge-blended-bg: #fdebf1; --badge-blended-text: #7a0c3d; --badge-rolling-bg: #eaf3de; --badge-rolling-text: #27500a; /* Also not in Figma: #003671, hardcoded as msapplication-TileColor in the * three layouts. A meta tag cannot take a var(), so it stays a literal. */ /* ================================================================ * * SEMANTICS -- prefer these in new code * * ================================================================ */ /* Brand */ --brand: var(--green); --brand-hover: var(--green-hover); --brand-bright: var(--ginger-original); --brand-tint: var(--green-ghost-hover); --primary-color: var(--ginger-original); /* legacy name, still referenced */ /* Text */ --color-text: var(--dark-grey); --color-text-strong: var(--dark-grey); --color-text-label: var(--medium-grey); --color-text-muted: var(--medium-grey); --color-text-subtle: var(--light-grey); --color-text-invert: var(--white); /* Surfaces */ --surface: var(--white); --surface-muted: var(--grey-ghost-hover); --surface-subtle: var(--extra-light-grey); --page-bg: var(--grey-background); --overlay: var(--black-a50); /* Borders */ --border: var(--extra-light-grey-hover); --border-subtle: var(--extra-light-grey); --border-strong: var(--light-grey); /* Focus */ --focus-ring: var(--ginger-original-a20); --focus-border: var(--ginger-original); /* Status */ --success: var(--green); --success-bg: var(--green-ghost-hover); --success-border: var(--light-green-hover); --danger: var(--red); --danger-hover: var(--red-hover); --danger-bg: var(--red-tint); --danger-border: var(--red-tint-border); --warning: var(--orange); --warning-bg: var(--orange-tint); --warning-border: var(--orange-tint-border); --info: var(--blue); --info-bg: var(--blue-tint); --info-border: var(--blue-a10); /* Elevation */ --default-box-shadow: var(--shadow-sm); /* legacy name, still referenced */ --shadow-sm: 0 2px 8px 0 var(--medium-grey-a20); --shadow-md: 0 5px 20px 0 var(--black-a05); --shadow-lg: 0 8px 20px 0 var(--black-a15); --shadow-xl: 0 10px 50px 0 var(--black-a15); }