/* =================================================================== PRISM - DESIGN TOKENS =================================================================== The single source of the theme's design decisions: color, type, space, shape, motion and layering. Both stylesheets (the client area and the order form) are written on top of these names, so this file is loaded before either of them, on every page. Do not put your brand color here. It goes in colors.css, which is loaded last and is never overwritten by a theme update. =================================================================== */ /* ---- tokens/01-color.css -------------------------------------------- */ /* =================================================================== PRISM THEME - COLOR TOKENS =================================================================== Everything on this page derives from ONE key: --brand-primary. To rebrand the theme, do NOT edit this file. Edit colors.css, which ships next to the theme and survives theme updates. =================================================================== */ :root { /* ================================================================= THE KEY ----------------------------------------------------------------- One hex value. Every gradient, shadow, ring, tint and overlay in the theme is derived from it, including the ones that need an opacity: color-mix against transparent gives the brand color at any alpha without needing the channels spelled out. --brand-secondary is derived too, at the same hue and saturation and half the lightness. Override it in colors.css when a brand needs two unrelated colors in its gradient. ================================================================= */ --brand-primary: #164ac8; --brand-secondary: color-mix(in srgb, var(--brand-primary) 51%, black); --brand-gradient: linear-gradient(to right, var(--brand-secondary), var(--brand-primary)); --brand-gradient-diagonal: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%); /* ================================================================= BRAND TINTS ----------------------------------------------------------------- Brand-tinted backgrounds: selected rows, hovered list items, soft section fills. These derive too, so a green brand gets green tints instead of leftover blue ones. ================================================================= */ --brand-tint-1: color-mix(in srgb, var(--brand-primary) 3%, white); --brand-tint-2: color-mix(in srgb, var(--brand-primary) 6%, white); --brand-tint-3: color-mix(in srgb, var(--brand-primary) 8%, white); --brand-tint-4: color-mix(in srgb, var(--brand-primary) 10%, white); --brand-tint-5: color-mix(in srgb, var(--brand-primary) 18%, white); /* ================================================================= NEUTRALS ----------------------------------------------------------------- Deliberately fixed, not derived. Slate is cool enough to sit under any brand hue. A buyer who wants warm greys overrides these in colors.css. ================================================================= */ --text-strong: #111111; /* page body text */ --text: #1e293b; /* list text, form labels */ --text-medium: #475569; /* table content, cart items */ --text-muted: #64748b; /* subtitles, descriptions, billing cycle */ --text-faint: #94a3b8; /* hints, microcopy, secondary price labels */ --text-gray: #636a74; /* legacy grey of the main theme */ --text-on-brand: #ffffff; /* text on gradient and solid brand fills */ --border: #e2e8f0; /* default card, panel and input border */ --border-subtle: #eef1f8; /* separators inside lists */ --surface: #ffffff; /* card and panel background */ --surface-page: #f8f9fa; /* page background */ /* ================================================================= STATUS ----------------------------------------------------------------- Fixed on purpose. Green means paid and red means overdue in every brand; tying these to the brand hue would break the meaning. ================================================================= */ --success: #16a34a; --success-bg: #f0fdf4; --success-border: #bbf7d0; --success-text: #166534; --danger: #ef4444; --danger-bg: #fef2f2; --danger-strong: #dc2626; --warning: #f59e0b; --warning-bg: #fffbeb; --warning-text: #d97706; } /* ---- tokens/02-typography.css --------------------------------------- */ /* =================================================================== PRISM THEME - TYPOGRAPHY TOKENS =================================================================== The size scale was measured against the theme, not invented. The CSS currently uses 49 distinct font sizes; every one of them maps onto a step below within 0.02rem, so replacing a raw value with a token is a swap, not a redesign. The theme sets no font-size on body, so the UI inherits the Bootstrap base. No step here changes that. =================================================================== */ :root { /* ================================================================= FAMILIES ================================================================= */ --font-heading: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ================================================================= SIZE SCALE ----------------------------------------------------------------- The comment on each step lists the raw values it replaces and how many times each appears today. ================================================================= */ --font-size-3xs: 0.65rem; /* 0.55 - 0.67 (17 uses) */ --font-size-2xs: 0.70rem; /* 0.68, 0.70, 0.71 (37 uses) */ --font-size-xs: 0.75rem; /* 0.72 - 0.76 (76 uses) */ --font-size-sm: 0.80rem; /* 0.78, 0.80 (79 uses) */ --font-size-md: 0.85rem; /* 0.82 - 0.87 (109 uses) */ --font-size-lg: 0.90rem; /* 0.875 - 0.94 (78 uses) */ --font-size-xl: 1.00rem; /* 0.95, 1.00, 1.02 (37 uses) */ --font-size-2xl: 1.10rem; /* 1.05, 1.10 (19 uses) */ --font-size-3xl: 1.25rem; /* 1.15 - 1.30 (11 uses) */ --font-size-4xl: 1.40rem; /* 1.35 - 1.45 (9 uses) */ --font-size-5xl: 1.60rem; /* 1.55, 1.60 (5 uses) */ --font-size-6xl: 1.85rem; /* 1.80, 1.85 (3 uses) */ --font-size-7xl: 2.50rem; /* 2.00 - 2.60 (5 uses) */ /* ================================================================= WEIGHTS ----------------------------------------------------------------- Warning: Figtree is self-hosted at 400, 500 and 700 only. Headings asking for 600, 800 or 900 get a browser-synthesised face. Public Sans loads 300 to 700, so body text at 600 is real. ================================================================= */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ================================================================= LINE HEIGHTS ================================================================= */ --line-height-tight: 1.2; /* headings, stat numbers */ --line-height-snug: 1.35; /* card titles, table cells */ --line-height-normal: 1.5; /* body copy */ --line-height-relaxed: 1.7; /* long descriptions, help text */ } /* ---- tokens/03-space.css -------------------------------------------- */ /* =================================================================== PRISM THEME - SPACING TOKENS =================================================================== Named after the value, so --space-8 is 8px and nothing has to be memorised. The scale steps by 2px up to 24px and by 4px or 8px above it, because that is what the theme already does: the padding, margin and gap values in use cluster on even numbers, and the odd ones (5px, 9px, 11px, 13px, 15px) are one pixel away from a neighbour. =================================================================== */ :root { --space-0: 0; --space-2: 2px; /* 32 uses */ --space-4: 4px; /* 52 uses, absorbs 3px and 5px */ --space-6: 6px; /* 63 uses */ --space-8: 8px; /* 104 uses, absorbs 7px and 9px */ --space-10: 10px; /* 105 uses, absorbs 11px */ --space-12: 12px; /* 95 uses, absorbs 13px */ --space-14: 14px; /* 107 uses, absorbs 15px */ --space-16: 16px; /* 91 uses */ --space-18: 18px; /* 50 uses */ --space-20: 20px; /* 92 uses */ --space-22: 22px; /* 33 uses */ --space-24: 24px; /* 28 uses, absorbs 26px */ --space-28: 28px; /* 18 uses */ --space-32: 32px; --space-36: 36px; --space-40: 40px; --space-48: 48px; --space-56: 56px; } /* ---- tokens/04-shape.css -------------------------------------------- */ /* =================================================================== PRISM THEME - SHAPE TOKENS =================================================================== Radius, border width and elevation. The radius scale is named after the value, same as spacing. Note that 10px is the single most used radius in the theme today and had no token at all, while the old --prism-radius-sm (7px) covered only 9 declarations. This scale follows the code, not the old token list. Shadows derive from the brand through color-mix with transparent, which yields the brand color at a given opacity. Rebranding moves every shadow with it, so a green theme does not keep casting navy. =================================================================== */ :root { /* ================================================================= BORDER RADIUS ================================================================= */ --radius-4: 4px; /* absorbs 2px and 5px */ --radius-6: 6px; /* absorbs 7px */ --radius-8: 8px; /* absorbs 9px */ --radius-10: 10px; /* most used radius in the theme */ --radius-12: 12px; --radius-14: 14px; /* absorbs 15px */ --radius-16: 16px; --radius-20: 20px; /* absorbs 18px */ --radius-pill: 100px; --radius-circle: 50%; /* ================================================================= BORDER WIDTH ================================================================= */ --border-width: 1px; --border-width-thick: 2px; --border-width-accent: 4px; /* the gradient bar on top of cards */ /* ================================================================= ELEVATION ----------------------------------------------------------------- Five steps plus two special cases. Every one is tinted with the brand rather than with black, which is what gives the theme its soft look. ================================================================= */ --shadow-xs: 0 1px 4px color-mix(in srgb, var(--brand-secondary) 4%, transparent); --shadow-sm: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 6%, transparent); --shadow-md: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 5%, transparent); --shadow-lg: 0 4px 20px color-mix(in srgb, var(--brand-secondary) 9%, transparent); --shadow-xl: 0 14px 36px color-mix(in srgb, var(--brand-secondary) 14%, transparent); /* Focus ring on inputs and selects */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent); /* The glow under a primary button, saturated on purpose */ --shadow-brand: 0 4px 14px color-mix(in srgb, var(--brand-primary) 30%, transparent); } /* ---- tokens/05-motion.css ------------------------------------------- */ /* =================================================================== PRISM THEME - MOTION TOKENS =================================================================== The theme has 73 transition declarations written 20 different ways. Measured, they collapse to three durations: 0.15s (55 uses), 0.2s (35) and 0.3s (3), with 0.12s, 0.18s and 0.22s rounding onto them. Long decorative animations (2s and above, the drifting shapes behind the hero) are not transitions and stay out of this scale. =================================================================== */ :root { --duration-fast: 0.15s; /* color and background swaps on hover */ --duration-base: 0.2s; /* transforms, shadows, anything that moves */ --duration-slow: 0.3s; /* panels and disclosures opening */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* enters, expands */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* everything else */ /* Ready-made pairs, so a rule reads transition: color var(--transition-fast) */ --transition-fast: var(--duration-fast) var(--ease-in-out); --transition-base: var(--duration-base) var(--ease-in-out); --transition-slow: var(--duration-slow) var(--ease-out); } /* Respect the operating system setting. Anyone who asked for less motion gets the state change without the travel. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } } /* ---- tokens/06-layer.css -------------------------------------------- */ /* =================================================================== PRISM THEME - LAYER TOKENS =================================================================== The theme currently climbs 99999 -> 999999 -> 9999999 across three rules in the dashboard, each one raised because the previous number was not enough. That is not a stack, it is an argument, and the numbers below end it. The scale deliberately matches the Bootstrap ladder the theme lives inside (dropdown 1000, sticky 1020, fixed 1030, modal 1050), so a theme layer and a Bootstrap layer can be compared by reading them. =================================================================== */ :root { --layer-base: 1; /* pulled off the flow, still in the page */ --layer-raised: 10; /* a card lifted on hover or focus */ --layer-nested: 20; /* something inside a raised card */ --layer-dropdown: 1000; /* Bootstrap dropdown menus */ --layer-sticky: 1020; /* sticky order summary */ --layer-fixed: 1030; /* fixed navbar and topbar */ --layer-overlay: 1040; /* backdrops */ --layer-modal: 1050; --layer-popover: 1060; --layer-tooltip: 1070; } /* ---- tokens/99-legacy-aliases.css ----------------------------------- */ /* =================================================================== PRISM THEME - LEGACY ALIASES =================================================================== The theme CSS still calls tokens by their old Portuguese names in 260 places. This file keeps those names alive, pointing at the new ones, so nothing breaks while the stylesheets are migrated. Rule for this file: an alias must resolve to the exact value it has today. Where the new token would shift the color even slightly, the literal is kept and a comment names the token that replaces it once the swap can be checked on screen. Delete this file at the end of the migration. Nothing else should ever be added to it. =================================================================== */ :root { /* ---- Brand: exact, both resolve through colors.css --------------- */ --cor-primaria: var(--brand-primary); --cor-secundaria: var(--brand-secondary); --prism-primary: var(--brand-primary); --prism-secondary: var(--brand-secondary); --gradiente: var(--brand-gradient); --gradiente-diagonal: var(--brand-gradient-diagonal); /* ---- Text and surfaces: exact ----------------------------------- */ --cor-texto-escuro: var(--text-strong); --cor-texto-claro: var(--text-on-brand); --cor-texto-cinza: var(--text-gray); --cor-fundo-claro: var(--surface-page); --prism-text: var(--text); --prism-text-medium: var(--text-medium); --prism-text-muted: var(--text-muted); --prism-text-faint: var(--text-faint); --prism-border: var(--border); --prism-border-subtle: var(--border-subtle); --prism-surface: var(--surface); /* ---- Brand tints: literals held on purpose ---------------------- These three sit within about 4 points of RGB of the derived tint scale, which is invisible in place but is still a change. They move in the migration, one screen at a time. */ --prism-light: #edf0f6; /* becomes var(--brand-tint-3) */ --prism-hover-bg: #f0f2f8; /* becomes var(--brand-tint-2) */ --prism-primary-light: #eef2fc; /* becomes var(--brand-tint-3) */ /* ---- Status: exact ---------------------------------------------- */ --prism-success: var(--success); --prism-success-bg: var(--success-bg); --prism-success-border: var(--success-border); --prism-success-dark: var(--success-text); --prism-error: var(--danger); --prism-error-bg: var(--danger-bg); /* ---- Elevation and radius: exact --------------------------------- */ --prism-shadow-sm: var(--shadow-sm); --prism-shadow-md: var(--shadow-lg); --prism-shadow-lg: var(--shadow-xl); --prism-radius-md: var(--radius-12); --prism-radius-lg: var(--radius-14); --prism-radius-xl: var(--radius-16); --prism-radius-pill: var(--radius-pill); } /* =================================================================== DROPPED =================================================================== Four old tokens had zero uses across both stylesheets and all templates, and are gone rather than carried forward: --gradiente-suave, --gradiente-medio, --gradiente-intenso The last two also carried a typo: #0d2565 where every other gradient used #0d2665. --prism-radius-sm (7px) The theme's real radii cluster on 6, 8, 10 and 12px. Two more had zero uses but keep their names, because the new typography file uses the same ones: --font-heading and --font-body. The CSS repeats the family names inline today and gets wired up to them during the migration. =================================================================== */