/* * Credere Design System — TOKENS (vendored, pinned v3.8.1) * GERADO por script/vendor-credere-ds.sh — não editar à mão. * Concatenação na ordem de cascata definida em tokens/index.css do DS. * (Concatenado, não @import, porque @import relativo é frágil sob Propshaft.) */ /* ===== tokens/primitives/shared-sizes.css ===== */ /* * Credere Design System — Primitives: Shared Sizes * ------------------------------------------------------------------ * Shared across all products. These are the only tokens that carry * raw values by design — they are the source of truth for the system. * * Do not use directly in components — reference via semantic or theme tokens. * See foundations.md §0.5 and §1. */ :root { /* ---------- Size Scale ---------- */ --credere-size-none: 0; --credere-size-0\.25: 0.0625rem; --credere-size-0\.5: 0.125rem; --credere-size-1: 0.25rem; --credere-size-1\.5: 0.375rem; --credere-size-2: 0.5rem; --credere-size-2\.5: 0.625rem; --credere-size-3: 0.75rem; --credere-size-3\.5: 0.875rem; --credere-size-4: 1rem; --credere-size-5: 1.25rem; --credere-size-6: 1.5rem; --credere-size-7: 1.75rem; --credere-size-8: 2rem; --credere-size-10: 2.5rem; --credere-size-12: 3rem; --credere-size-14: 3.5rem; --credere-size-16: 4rem; --credere-size-18: 4.5rem; --credere-size-20: 5rem; --credere-size-24: 6rem; --credere-size-28: 7rem; --credere-size-30: 7.5rem; --credere-size-48: 12rem; /* outside normal scale — truncation cap (name in User Menu) */ --credere-size-56: 14rem; /* outside normal scale — Dropdown popover width */ --credere-size-80: 20rem; /* outside normal scale — max width of User Menu header */ /* ---------- Screen Breakpoints ---------- * Mobile-first scale. `content` (90rem / 1440px) is the maximum content * cap for large screens (see --credere-container-max in semantic.css). * All other values are layout breakpoints. */ --credere-size-screen-xs: 20rem; /* 320px */ --credere-size-screen-sm: 40rem; /* 640px — mobile to tablet portrait */ --credere-size-screen-md: 48rem; /* 768px — tablet portrait (iPad) */ --credere-size-screen-lg: 64rem; /* 1024px — tablet landscape / small laptop */ --credere-size-screen-xl: 80rem; /* 1280px — standard laptop */ --credere-size-screen-2xl: 96rem; /* 1536px — large desktop */ --credere-size-screen-content: 90rem; /* 1440px — content container max */ --credere-size-screen-narrow: 36rem; /* 576px — narrow container cap (standalone forms, modals) */ --credere-size-screen-sidebar: 16rem; /* 256px — default AppShell sidebar width */ /* ---------- Border Radius ---------- */ --credere-size-radius-none: 0; --credere-size-radius-sm: 0.25rem; --credere-size-radius-md: 0.5rem; --credere-size-radius-lg: 0.75rem; --credere-size-radius-xl: 1rem; /* * 9999px, not 50%: on non-square rectangles, 50% produces a true ellipse * (continuous curve). A large length saturates at half the shortest axis, * giving a pill (stadium) on rectangles and a perfect circle on squares. * One value covers both cases. */ --credere-size-radius-pill: 9999px; /* ---------- Shadows ---------- */ --credere-size-shadow-xs: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05); --credere-size-shadow-sm: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.1), 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.06); --credere-size-shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06); --credere-size-shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05); --credere-size-shadow-xl: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -0.3125rem rgba(0, 0, 0, 0.04); --credere-size-shadow-2xl: 0 1.5625rem 3.125rem -0.75rem rgba(0, 0, 0, 0.25); /* ---------- Z-index ---------- * Discrete scale. Each role occupies its own step to prevent stacking * ties between different overlay types. Layer 5 components (modal, * toast, tooltip) should extend this table as needed without reusing * existing values. */ --credere-size-z-base: 0; --credere-size-z-dropdown: 1000; --credere-size-z-sticky: 1100; --credere-size-z-overlay: 1200; --credere-size-z-modal: 1300; --credere-size-z-popover: 1400; --credere-size-z-toast: 1500; --credere-size-z-tooltip: 1600; /* ---------- Icon Sizes ---------- */ --credere-size-icon-inline: 1rem; --credere-size-icon-sm: 1.25rem; --credere-size-icon-default: 1.5rem; --credere-size-icon-md: 2rem; --credere-size-icon-lg: 3rem; /* ---------- Typography ---------- */ --credere-font-family: "Figtree", system-ui, sans-serif; --credere-font-weight-light: 300; --credere-font-weight-regular: 400; --credere-font-weight-medium: 500; --credere-font-weight-semibold: 600; --credere-font-weight-bold: 700; --credere-font-size-display-xl: 3rem; --credere-font-size-display-lg: 2.5rem; --credere-font-size-display-md: 2rem; --credere-font-size-display-sm: 1.75rem; --credere-font-size-heading-xl: 1.5rem; --credere-font-size-heading-lg: 1.25rem; --credere-font-size-heading-md: 1.125rem; --credere-font-size-heading-sm: 1rem; --credere-font-size-body-lg: 1rem; --credere-font-size-body-md: 0.875rem; --credere-font-size-body-sm: 0.75rem; --credere-font-size-label-lg: 0.875rem; --credere-font-size-label-md: 0.75rem; --credere-font-size-label-sm: 0.625rem; /* ---------- Letter spacing (tracking) ---------- em-relative, so they scale with the type size they are applied to. overline +0.04em — uppercase overlines / eyebrows / small caps labels tight -0.01em — large headings, where default tracking reads loose */ --credere-letter-spacing-overline: 0.04em; --credere-letter-spacing-tight: -0.01em; /* ---------- Motion: Durations ---------- */ --credere-duration-0: 0ms; --credere-duration-100: 100ms; --credere-duration-150: 150ms; --credere-duration-200: 200ms; --credere-duration-250: 250ms; --credere-duration-300: 300ms; --credere-duration-400: 400ms; --credere-duration-500: 500ms; /* ---------- Motion: Easings ---------- */ --credere-easing-linear: linear; --credere-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --credere-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); --credere-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --credere-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); /* ---------- Opacity ---------- */ --credere-opacity-0: 0; --credere-opacity-10: 0.1; --credere-opacity-25: 0.25; --credere-opacity-50: 0.5; --credere-opacity-75: 0.75; --credere-opacity-90: 0.9; --credere-opacity-100: 1; /* ---------- Scale (transform) ---------- */ --credere-scale-90: 0.9; --credere-scale-95: 0.95; --credere-scale-98: 0.98; --credere-scale-100: 1; --credere-scale-102: 1.02; --credere-scale-105: 1.05; /* ---------- Line height (unitless, aligned to the typescale) ---------- Used directly in components like opacity/scale. See §3/§10. tight 1.2 — compact single-line UI (badge, button, tag, kpi, tab) snug 1.3 — headings, labels normal 1.4 — body relaxed 1.5 — long body / descriptions */ --credere-line-height-tight: 1.2; --credere-line-height-snug: 1.3; --credere-line-height-normal: 1.4; --credere-line-height-relaxed: 1.5; } /* ===== tokens/primitives/cred-leads-colors.css ===== */ /* * Credere Design System — Primitives: Colors (Cred Leads) * ------------------------------------------------------------------ * Raw color palette for the Cred Leads product. Neutrals (white, * black, gray) and feedback colors are shared across products until * product-specific differentiation is needed. * * These tokens are set on :root as a fallback and are overridden by * theme tokens under [data-theme="cred-leads"][data-mode="..."]. * * Do not use directly in components — reference via semantic or theme tokens. * See foundations.md §0.5 and §2. */ :root { /* ---------- Pure Neutrals (shared across products) ---------- */ --credere-color-white: #FFFFFF; --credere-color-black: #000000; /* ---------- Brand (Green — Cred Leads) ---------- */ --credere-color-brand-50: #EDFDF5; --credere-color-brand-100: #D0F9E6; --credere-color-brand-200: #A3F2CE; --credere-color-brand-300: #6AE6B0; --credere-color-brand-400: #34D48E; --credere-color-brand-500: #33CC80; --credere-color-brand-600: #1FA863; --credere-color-brand-700: #198550; --credere-color-brand-800: #176840; --credere-color-brand-900: #145535; /* ---------- Gray (shared across products) ---------- */ --credere-color-gray-50: #FAFAFA; --credere-color-gray-100: #F4F4F6; --credere-color-gray-200: #E4E4E6; --credere-color-gray-300: #C9C9C9; --credere-color-gray-400: #ABABAB; --credere-color-gray-500: #8A8A8A; --credere-color-gray-600: #6B6B6B; --credere-color-gray-700: #555555; --credere-color-gray-800: #333333; --credere-color-gray-900: #101010; /* ---------- Red (Feedback — Error) ---------- */ --credere-color-red-50: #FEF7F7; --credere-color-red-100: #FEF2F2; --credere-color-red-200: #FECACA; --credere-color-red-300: #FCA5A5; --credere-color-red-400: #F87171; --credere-color-red-500: #EF4444; --credere-color-red-600: #DC2626; --credere-color-red-700: #B91C1C; --credere-color-red-800: #991B1B; --credere-color-red-900: #661717; /* ---------- Orange (Feedback — Warning/Attention) ---------- */ --credere-color-orange-50: #FFFCF7; --credere-color-orange-100: #FFEDD5; --credere-color-orange-200: #FED7AA; --credere-color-orange-300: #FDBA74; --credere-color-orange-400: #FB923C; --credere-color-orange-500: #F97316; --credere-color-orange-600: #EA580C; --credere-color-orange-700: #C24C0C; --credere-color-orange-800: #9A4212; --credere-color-orange-900: #662D0F; /* ---------- Yellow (Feedback — Caution) ---------- */ --credere-color-yellow-50: #FEFDF6; --credere-color-yellow-100: #FEF9C3; --credere-color-yellow-200: #FEF08A; --credere-color-yellow-300: #FDE047; --credere-color-yellow-400: #FACC15; --credere-color-yellow-500: #EAB308; --credere-color-yellow-600: #CA8A04; --credere-color-yellow-700: #A16907; --credere-color-yellow-800: #85590E; --credere-color-yellow-900: #4D350C; /* ---------- Green (Feedback — Success) ---------- */ --credere-color-green-50: #EDFDF5; --credere-color-green-100: #D0F9E6; --credere-color-green-200: #A3F2CE; --credere-color-green-300: #6AE6B0; --credere-color-green-400: #34D48E; --credere-color-green-500: #33CC80; --credere-color-green-600: #1FA863; --credere-color-green-700: #198550; --credere-color-green-800: #176840; --credere-color-green-900: #145535; /* ---------- Blue (Feedback — Info / Secondary) ---------- */ --credere-color-blue-50: #F7FBFF; --credere-color-blue-100: #EFF6FF; --credere-color-blue-200: #DBEAFE; --credere-color-blue-300: #BFDBFE; --credere-color-blue-400: #60A5FA; --credere-color-blue-500: #3B82F6; --credere-color-blue-600: #2563EB; --credere-color-blue-700: #1D4ED8; --credere-color-blue-800: #1E40AF; --credere-color-blue-900: #162B66; /* ---------- Purple (Complementary) ---------- */ --credere-color-purple-50: #FAF5FF; --credere-color-purple-100: #F3E8FF; --credere-color-purple-200: #E9D5FF; --credere-color-purple-300: #D8B4FE; --credere-color-purple-400: #C084FC; --credere-color-purple-500: #A855F7; --credere-color-purple-600: #9333EA; --credere-color-purple-700: #7E22CE; --credere-color-purple-800: #6B21A8; --credere-color-purple-900: #32104D; /* ---------- Pink (Complementary 2) ---------- */ --credere-color-pink-50: #FDF2F8; --credere-color-pink-100: #FCE7F3; --credere-color-pink-200: #FBCFE8; --credere-color-pink-300: #F9A8D4; --credere-color-pink-400: #F472B6; --credere-color-pink-500: #EC4899; --credere-color-pink-600: #DB2777; --credere-color-pink-700: #B3185B; --credere-color-pink-800: #9D174D; --credere-color-pink-900: #4D0E27; } /* ===== tokens/semantic.css ===== */ /* * Credere Design System — Semantic Tokens * ------------------------------------------------------------------ * Neutral layer that references primitives via var(). Each product * inherits this layer; theme tokens fill in the theme-specific roles. * * Components reference these tokens, never primitives directly. * See foundations.md §0.5 and §4. */ :root { /* ---------- Colors — Base ---------- */ --credere-color-primary: var(--credere-color-brand-500); --credere-color-primary-light: var(--credere-color-brand-100); --credere-color-primary-dark: var(--credere-color-brand-900); --credere-color-secondary: var(--credere-color-blue-500); --credere-color-secondary-light: var(--credere-color-blue-100); --credere-color-secondary-dark: var(--credere-color-blue-900); /* ---------- Colors — Feedback ---------- Os -dark são usados como TEXTO sobre o -light correspondente (badge, alert, toast — texto 12px no badge sm) e precisam de >= 4,5:1 (AA). Os shades 700 de green/yellow/orange REPROVAVAM sobre o próprio tint (4,07 / 4,31 / 4,23) — medido no stress-test test-pages/. O shade 800 passa com folga no tint E sobre branco (green 5,95·6,79 / yellow 5,70·6,12 / orange 5,80·6,64). red/blue-700 já passavam (5,91 / 6,16). */ --credere-color-success: var(--credere-color-green-500); --credere-color-success-light: var(--credere-color-green-100); --credere-color-success-dark: var(--credere-color-green-800); --credere-color-warning: var(--credere-color-yellow-500); --credere-color-warning-light: var(--credere-color-yellow-100); --credere-color-warning-dark: var(--credere-color-yellow-800); --credere-color-alert: var(--credere-color-orange-500); --credere-color-alert-light: var(--credere-color-orange-100); --credere-color-alert-dark: var(--credere-color-orange-800); --credere-color-error: var(--credere-color-red-500); --credere-color-error-light: var(--credere-color-red-100); --credere-color-error-dark: var(--credere-color-red-700); --credere-color-info: var(--credere-color-blue-500); --credere-color-info-light: var(--credere-color-blue-100); --credere-color-info-dark: var(--credere-color-blue-700); /* As superfícies do DS são os tokens theme-aware --credere-bg-* (definidos * nos themes, adaptam light/dark). A camada semantic não declara mais * `color-surface-*`: os neutros (surface/-secondary/-tertiary) eram valor * fixo de light e não usados; `surface-inverse` saiu quando o Tooltip * passou a usar bg-primary/fg-primary (acompanha o tema). */ /* ---------- Colors — Text ---------- */ --credere-color-text-primary: var(--credere-color-gray-900); --credere-color-text-secondary: var(--credere-color-gray-700); --credere-color-text-tertiary: var(--credere-color-gray-600); --credere-color-text-quaternary: var(--credere-color-gray-500); --credere-color-text-disabled: var(--credere-color-gray-400); --credere-color-text-inverse: var(--credere-color-white); /* ---------- Colors — Border ---------- */ --credere-color-border: var(--credere-color-gray-200); --credere-color-border-secondary: var(--credere-color-gray-300); --credere-color-border-strong: var(--credere-color-gray-600); --credere-color-border-disabled: var(--credere-color-gray-100); /* ---------- Spacing ---------- */ --credere-space-padding-xs: var(--credere-size-1); --credere-space-padding-sm: var(--credere-size-2); --credere-space-padding-md: var(--credere-size-4); --credere-space-padding-lg: var(--credere-size-6); --credere-space-padding-xl: var(--credere-size-8); --credere-space-padding-2xl: var(--credere-size-12); --credere-space-gap-2xs: var(--credere-size-1); --credere-space-gap-xs: var(--credere-size-2); --credere-space-gap-sm: var(--credere-size-3); --credere-space-gap-md: var(--credere-size-4); --credere-space-gap-lg: var(--credere-size-6); --credere-space-gap-xl: var(--credere-size-8); --credere-space-margin-xs: var(--credere-size-2); --credere-space-margin-sm: var(--credere-size-3); --credere-space-margin-md: var(--credere-size-4); --credere-space-margin-lg: var(--credere-size-6); --credere-space-margin-xl: var(--credere-size-8); /* ---------- Spacing — Page (§10 Layout) ---------- * Applied by AppShell and page consumers. `page-padding-x` is the * mobile-first lateral padding; `page-padding-x-lg` replaces it * from breakpoint-lg upward. */ --credere-space-page-padding-x: var(--credere-space-padding-lg); /* 1.5rem */ --credere-space-page-padding-x-lg: var(--credere-space-padding-xl); /* 2rem >= breakpoint-lg */ --credere-space-page-top: var(--credere-space-padding-xl); /* 2rem space above Page Header */ --credere-space-section-gap: var(--credere-space-padding-2xl); /* 3rem between Section Headers */ --credere-space-block-gap: var(--credere-space-padding-lg); /* 1.5rem between blocks within a section */ --credere-space-field-gap: var(--credere-space-padding-md); /* 1rem column-gap between Form Fields */ --credere-space-form-row-gap: var(--credere-space-padding-xl); /* 2rem row-gap between form rows */ /* ---------- Layout (§10) ---------- * Mobile-first breakpoints, content container max, and grid gutter. * Usage in media queries: * @media (min-width: 64rem) { ... } // = breakpoint-lg * There are no "column count" tokens — side-by-side layouts use * flex/grid-auto-fit with --credere-grid-gutter as the gap. */ --credere-breakpoint-sm: var(--credere-size-screen-sm); /* 40rem / 640px */ --credere-breakpoint-md: var(--credere-size-screen-md); /* 48rem / 768px */ --credere-breakpoint-lg: var(--credere-size-screen-lg); /* 64rem / 1024px */ --credere-breakpoint-xl: var(--credere-size-screen-xl); /* 80rem / 1280px */ --credere-breakpoint-2xl: var(--credere-size-screen-2xl); /* 96rem / 1536px */ --credere-container-max: var(--credere-size-screen-content); /* 90rem / 1440px — cap for tables, grids, and general content */ --credere-container-narrow: var(--credere-size-screen-narrow); /* 36rem / 576px — narrow cap: standalone forms (login, confirmation modals) */ --credere-grid-gutter: var(--credere-space-gap-lg); /* 1.5rem */ /* ---------- Border Width ---------- */ --credere-border-width-thin: var(--credere-size-0\.25); /* 0.0625rem — default borders */ --credere-border-width-thick: var(--credere-size-0\.5); /* 0.125rem — focus ring */ /* ---------- Icon sizes ---------- * `--credere-icon-inline` (1rem) — icons inline with text in compact fields (input sm). * In buttons with a label, use 1em in CSS so the icon inherits the label's font-size. * The remaining sizes are for icons with more visual presence (icon-only buttons, * icons in md input fields, standalone actions). */ --credere-icon-inline: var(--credere-size-icon-inline); /* 1rem */ --credere-icon-sm: var(--credere-size-icon-sm); /* 1.25rem — sm icon-only / input md */ --credere-icon-md: var(--credere-size-icon-default); /* 1.5rem — md icon-only (default) */ --credere-icon-lg: var(--credere-size-icon-md); /* 2rem — lg icon-only */ /* ---------- Min touch target sizes (square interaction area) ---------- * Minimum sizes for square interactive elements (icon-only buttons, * checkbox touch hitbox, etc.). Aligned with WCAG 2.2 SC 2.5.8 (24x24 AA), * Material Design (40 default), and Apple HIG (44 AAA). */ --credere-target-sm: var(--credere-size-8); /* 2rem — 32px (compact actions, table) */ --credere-target-md: var(--credere-size-10); /* 2.5rem — 40px (default) */ --credere-target-lg: var(--credere-size-12); /* 3rem — 48px (primary action) */ /* ---------- Border Radius ---------- */ --credere-radius-interactive: var(--credere-size-radius-sm); --credere-radius-component: var(--credere-size-radius-md); --credere-radius-container: var(--credere-size-radius-lg); --credere-radius-round: var(--credere-size-radius-pill); /* ---------- Shadows ---------- */ --credere-shadow-interaction: var(--credere-size-shadow-sm); --credere-shadow-elevation: var(--credere-size-shadow-md); --credere-shadow-modal: var(--credere-size-shadow-xl); --credere-shadow-overlay: var(--credere-size-shadow-2xl); /* ---------- Z-index ---------- */ --credere-z-base: var(--credere-size-z-base); --credere-z-dropdown: var(--credere-size-z-dropdown); --credere-z-sticky: var(--credere-size-z-sticky); --credere-z-overlay: var(--credere-size-z-overlay); --credere-z-modal: var(--credere-size-z-modal); --credere-z-popover: var(--credere-size-z-popover); --credere-z-toast: var(--credere-size-z-toast); --credere-z-tooltip: var(--credere-size-z-tooltip); /* ---------- Typography ---------- */ --credere-typography-display-xl: var(--credere-font-size-display-xl); --credere-typography-display-lg: var(--credere-font-size-display-lg); --credere-typography-display-md: var(--credere-font-size-display-md); --credere-typography-display-sm: var(--credere-font-size-display-sm); --credere-typography-heading-xl: var(--credere-font-size-heading-xl); --credere-typography-heading-lg: var(--credere-font-size-heading-lg); --credere-typography-heading-md: var(--credere-font-size-heading-md); --credere-typography-heading-sm: var(--credere-font-size-heading-sm); --credere-typography-body-lg: var(--credere-font-size-body-lg); --credere-typography-body-md: var(--credere-font-size-body-md); --credere-typography-body-sm: var(--credere-font-size-body-sm); --credere-typography-label-lg: var(--credere-font-size-label-lg); --credere-typography-label-md: var(--credere-font-size-label-md); --credere-typography-label-sm: var(--credere-font-size-label-sm); /* ---------- Typography — Weights by role ---------- */ --credere-typography-weight-body: var(--credere-font-weight-regular); --credere-typography-weight-label: var(--credere-font-weight-semibold); --credere-typography-weight-heading: var(--credere-font-weight-semibold); --credere-typography-weight-display: var(--credere-font-weight-semibold); /* ---------- Typography — Tracking by role ---------- */ --credere-typography-tracking-overline: var(--credere-letter-spacing-overline); --credere-typography-tracking-tight: var(--credere-letter-spacing-tight); /* ---------- Motion ---------- */ --credere-motion-duration-fast: var(--credere-duration-150); --credere-motion-duration-base: var(--credere-duration-250); --credere-motion-duration-slow: var(--credere-duration-400); --credere-motion-easing-standard: var(--credere-easing-standard); --credere-motion-easing-enter: var(--credere-easing-decelerate); --credere-motion-easing-exit: var(--credere-easing-accelerate); } /* * Reduced motion — global rule. Components do not need to handle this * individually; by using --credere-motion-duration-* they inherit the override. */ @media (prefers-reduced-motion: reduce) { :root { --credere-motion-duration-fast: var(--credere-duration-0); --credere-motion-duration-base: var(--credere-duration-0); --credere-motion-duration-slow: var(--credere-duration-0); } } /* ===== tokens/themes/cred-leads-light.css ===== */ /* * Credere Design System — Theme: Cred Leads (Light) * ------------------------------------------------------------------ * Applied via [data-theme="cred-leads"][data-mode="light"] on . * Overrides brand primitives and fills theme roles * (background, foreground, border, state). * * Do not use directly in components — reference via semantic/theme tokens * in Lit components. See foundations.md §0.5 and §5.1. */ [data-theme="cred-leads"][data-mode="light"] { /* ---------- Brand primitives (product palette) ---------- */ --credere-color-brand-50: #EDFDF5; --credere-color-brand-100: #D0F9E6; --credere-color-brand-200: #A3F2CE; --credere-color-brand-300: #6AE6B0; --credere-color-brand-400: #34D48E; --credere-color-brand-500: #33CC80; --credere-color-brand-600: #1FA863; --credere-color-brand-700: #198550; --credere-color-brand-800: #176840; --credere-color-brand-900: #145535; /* ---------- Background ---------- */ --credere-bg-primary: var(--credere-color-white); --credere-bg-secondary: var(--credere-color-gray-50); --credere-bg-tertiary: var(--credere-color-gray-100); /* Inverse surface — contrasta com a página (tooltip, overlays). No light a página é clara, então o inverse é ESCURO. Pareia com --credere-fg-inverse. */ --credere-bg-inverse: var(--credere-color-gray-900); /* Surface roles — dono único do papel de superfície entre modos. bg-primary/secondary TROCAM de papel entre light e dark (no light a página é o cinza claro e o card é branco; no dark a página é o gray-900 e o card é o gray-800). Quem consome o PAPEL (app-shell main, kpi/integration/ processing-card, panel) usa estes tokens — nunca re-decide o papel com :host-context([data-mode]) por componente. */ --credere-bg-page: var(--credere-bg-secondary); /* fundo da página (gray-50) */ --credere-bg-elevated: var(--credere-bg-primary); /* card/panel sobre a página (white) */ /* * Project principle (CLAUDE.md §7): the brand shade is FIXED across themes * (brand-500 = brand-500 in both light and dark). What adapts is the TEXT * color on top of the brand, chosen to pass WCAG AA. * * brand-500 + dark text (gray-900) = 9.14:1 (AAA). * Hover/active use LIGHTER variants (brand-400/300) because darkening * (brand-700+) would break contrast against the dark text. */ --credere-bg-interactive: var(--credere-color-brand-500); --credere-bg-interactive-hover: var(--credere-color-brand-400); --credere-bg-interactive-active: var(--credere-color-brand-300); --credere-bg-interactive-disabled: var(--credere-color-gray-400); /* Destructive — red-600 + TEXTO BRANCO = 4.83:1 (AA). O par preto/red-500 passava no número (5.06:1) mas ficava pesado sobre o vermelho saturado; branco/red-600 é mais limpo e é o padrão de mercado. Hover/active ESCURECEM (red-700 6.47:1, red-800 8.31:1) — direção invertida vs. interactive, porque com texto branco clarear derrubaria o contraste. NÃO reaproveita --credere-color-error (segue red-500 pra border-error/status). */ --credere-bg-destructive: var(--credere-color-red-600); --credere-bg-destructive-hover: var(--credere-color-red-700); --credere-bg-destructive-active: var(--credere-color-red-800); /* Brand wash — for subtle tints/hovers (e.g. secondary button hover, brand alert bg). Theme-aware: brand-100 in light gives a soft wash; brand-800 in dark keeps the same visual weight on a dark background, preserving contrast with the adaptive text color. */ --credere-bg-brand-tint: var(--credere-color-brand-100); --credere-bg-brand-tint-hover: var(--credere-color-brand-200); /* Feedback tints (tinted role surfaces) — same theme-aware pattern as brand-tint: {color}-100 in light gives a soft wash; {color}-800 in dark keeps the visual weight on a dark background. Used by toned surfaces such as the KPI Card toned. Text on the tint uses fg-primary (adaptive, WCAG-guaranteed on the tint in both themes). fg-secondary is safe only on the LIGHT tints ({color}-100); on the dark tints ({color}-800) it fails AA (e.g. gray-300/green-800 = 4.10:1), so toned surfaces use fg-primary — see KPI Card. (CLAUDE.md §7) */ --credere-bg-success-tint: var(--credere-color-green-100); --credere-bg-warning-tint: var(--credere-color-yellow-100); --credere-bg-error-tint: var(--credere-color-red-100); --credere-bg-info-tint: var(--credere-color-blue-100); /* One step stronger on the same hue ({color}-200) — border and icon chip on toned surfaces, standing out from the base tint without shifting the hue. */ --credere-bg-success-tint-hover: var(--credere-color-green-200); --credere-bg-warning-tint-hover: var(--credere-color-yellow-200); --credere-bg-error-tint-hover: var(--credere-color-red-200); --credere-bg-info-tint-hover: var(--credere-color-blue-200); /* Active nav item — semantic pair with WCAG >= 4.5:1 validated in both themes. Light: bg brand-100 (#D0F9E6) + fg brand-900 (#145535) = 7.72:1 (AAA). Dark: see counterpart in cred-leads-dark.css. */ --credere-bg-nav-active: var(--credere-color-brand-100); --credere-fg-nav-active: var(--credere-color-brand-900); /* Table row states. Text over fills uses --credere-fg-primary (dark in light mode) and passes WCAG comfortably — fills are light tints. The pre-approved accent is a side stripe (3:1 UI): green-700 over green-50 = 4.43:1. brand == green in Credere, so 'selected' (brand) and 'pre-approved' (green) share a hue; the side stripe differentiates them. */ --credere-table-header-bg: var(--credere-color-gray-50); --credere-table-row-bg-hover: var(--credere-color-gray-100); --credere-table-row-bg-selected: var(--credere-color-brand-100); --credere-table-row-bg-pre-approved: var(--credere-color-green-50); --credere-table-row-accent-pre-approved: var(--credere-color-green-700); /* Row-level status accent stripe (prop `accent`). Stripe only, no fill; 3:1 (UI) against the row background. Same adaptive shades as progress-fill (§7 item 6): dark shade in light mode, light shade in dark mode. Warning uses yellow (700/300). */ --credere-table-row-accent-success: var(--credere-color-green-700); --credere-table-row-accent-info: var(--credere-color-blue-600); --credere-table-row-accent-warning: var(--credere-color-yellow-700); --credere-table-row-accent-error: var(--credere-color-red-600); /* Overlay backdrop (drawer, modal). Adapts between themes — in dark mode, black loses contrast against the dark background, so opacity is higher. */ --credere-color-backdrop: rgba(0, 0, 0, 0.5); /* * Progress fill — feedback fill that ADAPTS between themes (justified * exception to the "fixed feedback shade" principle in CLAUDE.md §7). * * Why: the progress bar fill is a UI element (requires 3:1 WCAG against * the track), and the track uses --credere-bg-tertiary which already adapts * between themes (gray-100 light / gray-700 dark). A single feedback shade * cannot pass 3:1 against both tracks — hence the adaptation. * * Unlike the "text over feedback fill" pair in §7, there is no text over * the fill: the percentage is shown OUTSIDE the bar, over bg-primary. * * Semantics: info = "in progress" (blue is neutral/informational); * success = "completed"; error = "failed/interrupted". This matters because * in Credere brand-500 == green-500 (same hex #33CC80) — using brand as * default would make "in progress" visually identical to "success". * * Light: track = gray-100 (#F4F4F6) -> dark saturated fills. * blue-600 vs gray-100 = 4.71:1 checked * green-700 vs gray-100 = 4.24:1 checked * red-600 vs gray-100 = 4.39:1 checked */ --credere-progress-fill-info: var(--credere-color-blue-600); --credere-progress-fill-success: var(--credere-color-green-700); --credere-progress-fill-error: var(--credere-color-red-600); /* ---------- Foreground ---------- */ --credere-fg-primary: var(--credere-color-text-primary); --credere-fg-secondary: var(--credere-color-text-secondary); --credere-fg-tertiary: var(--credere-color-text-tertiary); --credere-fg-disabled: var(--credere-color-text-disabled); /* Texto sobre bg-inverse — claro no light (inverse é escuro). 19:1 (AAA). */ --credere-fg-inverse: var(--credere-color-white); /* Text over bg-interactive — dark in both themes: brand-500 is light and fixed, so dark text stays (9.14:1 AAA). */ --credere-fg-on-interactive: var(--credere-color-text-primary); /* Text over bg-destructive — WHITE in both themes: red-600 is dark, so white text (4.83:1 AA) reads clean where dark text over the red looked heavy. */ --credere-fg-on-destructive: var(--credere-color-white); /* Text on DISABLED surfaces — a gray close to the disabled bg gray, but still readable. Gray-700 over gray-400 = 3.28:1 (muted but legible). See CLAUDE.md §7. */ --credere-fg-on-disabled: var(--credere-color-gray-700); /* Error text (input error helper text, etc.) — red-700 on white = 10.96:1 (AAA). */ --credere-fg-error: var(--credere-color-error-dark); /* ---------- Border ---------- */ --credere-border: var(--credere-color-border); --credere-border-interactive: var(--credere-color-primary); --credere-border-error: var(--credere-color-error); --credere-border-disabled: var(--credere-color-border-disabled); /* ---------- State ---------- */ /* * Focus ring color — theme-adaptive (CLAUDE.md §7). The brand shade is fixed, * but the focus INDICATOR adapts per theme to guarantee >= 3:1 (WCAG 2.4.11). * brand-500 (= --credere-color-primary) fails in light: 2.08:1 vs white, and * 1.00:1 over a brand-filled button (invisible). So light uses a high-contrast * dark brand shade that keeps brand identity: * brand-900 (#145535) vs white = 8.82:1 (AAA, page/neutral surface — also the * offset gap color on filled buttons, so this is the contrast that counts there) * brand-900 (#145535) vs brand-500 (#33CC80 button fill) = 4.24:1 (> 3:1 ✓) * Dark mode keeps brand-500 (9.14:1 vs gray-900) — see dark theme counterpart. * Same adaptive-indicator exception already granted to progress-fill and * table accents. */ --credere-state-focus-outline: var(--credere-color-brand-900); --credere-state-focus-outline-error: var(--credere-border-error); --credere-state-focus-width: var(--credere-size-0\.5); --credere-state-focus-offset: var(--credere-size-0\.5); /* box-shadow rings — reserved for cases outline cannot express (two-layer filled-button ring). The leading 0 0 0 are structural (offset-x/y, blur); design values come from tokens. See §0.5. */ --credere-state-focus-ring: 0 0 0 var(--credere-state-focus-width) var(--credere-state-focus-outline); --credere-state-focus-ring-error: 0 0 0 var(--credere-state-focus-width) var(--credere-state-focus-outline-error); /* Neutral hover — gray-200, not gray-50. gray-50 on white was nearly invisible (1.05:1 luminance). gray-200 gives a clear lift. */ --credere-state-hover-neutral: var(--credere-color-gray-200); /* Hover/active wash over content whose color (text/border) already has a hue (e.g. red destructive dropdown-item). Tints with the element's own text color (currentColor) at reduced opacity — works over any background without requiring N per-color variants. */ --credere-state-hover-on-tint: color-mix(in srgb, currentColor calc(var(--credere-opacity-10) * 100%), transparent); --credere-state-active-on-tint: color-mix(in srgb, currentColor calc(var(--credere-opacity-25) * 100%), transparent); --credere-state-active-scale: var(--credere-scale-98); --credere-state-disabled-opacity: var(--credere-opacity-50); } /* ===== tokens/themes/cred-leads-dark.css ===== */ /* * Credere Design System — Theme: Cred Leads (Dark) * ------------------------------------------------------------------ * Applied via [data-theme="cred-leads"][data-mode="dark"] on . * Brand primitives remain identical to light (colors are part of the brand); * what changes are the semantic roles below. * * Do not use directly in components — reference via semantic/theme tokens * in Lit components. See foundations.md §0.5 and §5.2. */ [data-theme="cred-leads"][data-mode="dark"] { /* ---------- Brand primitives (same as light — brand colors are fixed) ---------- */ --credere-color-brand-50: #EDFDF5; --credere-color-brand-100: #D0F9E6; --credere-color-brand-200: #A3F2CE; --credere-color-brand-300: #6AE6B0; --credere-color-brand-400: #34D48E; --credere-color-brand-500: #33CC80; --credere-color-brand-600: #1FA863; --credere-color-brand-700: #198550; --credere-color-brand-800: #176840; --credere-color-brand-900: #145535; /* ---------- Background ---------- */ --credere-bg-primary: var(--credere-color-gray-900); --credere-bg-secondary: var(--credere-color-gray-800); --credere-bg-tertiary: var(--credere-color-gray-700); /* Inverse surface — contrasta com a página. No dark a página é escura, então o inverse é CLARO. Pareia com --credere-fg-inverse. */ --credere-bg-inverse: var(--credere-color-gray-100); /* Surface roles — dono único do papel de superfície entre modos (espelha o light, com os papéis trocados): a página é o nível MAIS escuro (gray-900) e a superfície elevada fica um passo acima (gray-800). Sem estes tokens, app-shell pintava o main com bg-secondary (gray-800) e os cards também elevavam pra gray-800 — card e fundo da MESMA cor (issue #56). */ --credere-bg-page: var(--credere-bg-primary); /* fundo da página (gray-900) */ --credere-bg-elevated: var(--credere-bg-secondary); /* card/panel sobre a página (gray-800) */ /* * Brand shade IDENTICAL to light — what changes between themes is PAGE text * (fg-primary, bg-primary), not the brand. Principle in CLAUDE.md §7. * brand-500 + dark text = 9.14:1 (AAA) — in both modes. */ --credere-bg-interactive: var(--credere-color-brand-500); --credere-bg-interactive-hover: var(--credere-color-brand-400); --credere-bg-interactive-active: var(--credere-color-brand-300); --credere-bg-interactive-disabled: var(--credere-color-gray-600); /* Destructive — same as light: red-600 fill + white text (4.83:1 AA), hover/active darken (red-700/red-800). Symmetric across modes — the text×button contrast is mode-independent, and lightening would fail (white/red-500 = 3.76:1). */ --credere-bg-destructive: var(--credere-color-red-600); --credere-bg-destructive-hover: var(--credere-color-red-700); --credere-bg-destructive-active: var(--credere-color-red-800); /* Brand wash in dark — brand-800 is the dark equivalent of brand-100 in light. brand-800 + white text = 6.79:1 (AA). */ --credere-bg-brand-tint: var(--credere-color-brand-800); --credere-bg-brand-tint-hover: var(--credere-color-brand-700); /* Feedback tints in dark — {color}-800 is the dark equivalent of {color}-100 in light (same pattern as brand-tint). fg-primary (white) over the tint passes WCAG (white/green-800 = 6.79:1); fg-secondary (gray-300) does NOT on dark tints (gray-300/green-800 = 4.10:1 < 4.5), so toned surfaces use fg-primary — see KPI Card. Used by the KPI Card toned. */ --credere-bg-success-tint: var(--credere-color-green-800); --credere-bg-warning-tint: var(--credere-color-yellow-800); --credere-bg-error-tint: var(--credere-color-red-800); --credere-bg-info-tint: var(--credere-color-blue-800); /* One step lighter on the same hue ({color}-700) — border and icon chip on dark toned surfaces, standing out from the base tint ({color}-800). */ --credere-bg-success-tint-hover: var(--credere-color-green-700); --credere-bg-warning-tint-hover: var(--credere-color-yellow-700); --credere-bg-error-tint-hover: var(--credere-color-red-700); --credere-bg-info-tint-hover: var(--credere-color-blue-700); /* Active nav item — semantic pair. Dark: bg brand-800 (#176840) + fg brand-100 (#D0F9E6) = 5.95:1 (AAA). Mirrors the visual weight of brand-100/brand-900 from light, inverted for contrast on the dark sidebar. */ --credere-bg-nav-active: var(--credere-color-brand-800); --credere-fg-nav-active: var(--credere-color-brand-100); /* Table row states (dark). Fills are dark tints; --credere-fg-primary (white) passes WCAG. Pre-approved accent is brand-400 (== green-400) over green-900 = 4.60:1 (> 3:1 UI). selected (brand-900) and pre-approved (green-900) share the same hex (brand == green); the side stripe differentiates them. */ --credere-table-header-bg: var(--credere-color-gray-800); --credere-table-row-bg-hover: var(--credere-color-gray-800); --credere-table-row-bg-selected: var(--credere-color-brand-900); --credere-table-row-bg-pre-approved: var(--credere-color-green-900); --credere-table-row-accent-pre-approved: var(--credere-color-brand-400); /* Row status accent stripe (prop `accent`) — light shade of the role in dark (same pattern as progress-fill), 3:1 (UI) against the dark row background. */ --credere-table-row-accent-success: var(--credere-color-brand-400); --credere-table-row-accent-info: var(--credere-color-blue-300); --credere-table-row-accent-warning: var(--credere-color-yellow-300); --credere-table-row-accent-error: var(--credere-color-red-300); /* Overlay backdrop — higher opacity in dark because black loses contrast against a dark background. */ --credere-color-backdrop: rgba(0, 0, 0, 0.7); /* * Progress fill — feedback fill adapts between themes. Full rationale * in cred-leads-light.css. * * Dark: track = gray-700 (#555555) -> light pastel fills. * blue-300 vs gray-700 = 5.25:1 checked * brand-400 vs gray-700 = 3.89:1 checked (brand-400 == green-400 == #34D48E) * red-300 vs gray-700 = 3.93:1 checked */ --credere-progress-fill-info: var(--credere-color-blue-300); --credere-progress-fill-success: var(--credere-color-brand-400); --credere-progress-fill-error: var(--credere-color-red-300); /* ---------- Foreground ---------- */ --credere-fg-primary: var(--credere-color-white); --credere-fg-secondary: var(--credere-color-gray-300); --credere-fg-tertiary: var(--credere-color-gray-400); --credere-fg-disabled: var(--credere-color-gray-500); /* Texto sobre bg-inverse — escuro no dark (inverse é claro). ~17:1 (AAA). */ --credere-fg-inverse: var(--credere-color-gray-900); /* Text over brand/destructive — SAME as light. Brand stays dark text (brand-500 fixed & light); destructive is white text over red-600. */ --credere-fg-on-interactive: var(--credere-color-text-primary); --credere-fg-on-destructive: var(--credere-color-white); /* Text on DISABLED surfaces — gray-300 over gray-600 = 3.22:1 (muted but legible in dark mode). */ --credere-fg-on-disabled: var(--credere-color-gray-300); /* Error text — red-400 over gray-900 = 7.11:1 (AAA). red-700 (= error-dark in light) over gray-900 fails (1.80:1), so dark uses a lighter red shade. */ --credere-fg-error: var(--credere-color-red-400); /* ---------- Border ---------- */ --credere-border: var(--credere-color-gray-700); --credere-border-interactive: var(--credere-color-primary); --credere-border-error: var(--credere-color-error); --credere-border-disabled: var(--credere-color-gray-600); /* ---------- State ---------- */ /* * Focus ring color — theme-adaptive (CLAUDE.md §7). In dark mode brand-500 * (= --credere-color-primary) already passes: 9.14:1 vs gray-900 (bg-primary), * and 3.0:1+ as the outer layer over a brand-filled button. Kept as-is here; * only the light theme needed a darker brand shade. See light theme counterpart. */ --credere-state-focus-outline: var(--credere-color-primary); --credere-state-focus-outline-error: var(--credere-border-error); --credere-state-focus-width: var(--credere-size-0\.5); --credere-state-focus-offset: var(--credere-size-0\.5); /* box-shadow rings — reserved for cases outline cannot express (two-layer filled-button ring). Leading 0 0 0 are structural. See §0.5. */ --credere-state-focus-ring: 0 0 0 var(--credere-state-focus-width) var(--credere-state-focus-outline); --credere-state-focus-ring-error: 0 0 0 var(--credere-state-focus-width) var(--credere-state-focus-outline-error); /* Neutral hover — gray-700 over gray-900 is clearly perceptible. */ --credere-state-hover-neutral: var(--credere-color-gray-700); /* Hover/active wash over an already-colored surface (Alert, Toast, Tag, Badge). Values are identical to the light theme — currentColor naturally adapts the hue, so the tint strength is universal across themes. */ --credere-state-hover-on-tint: color-mix(in srgb, currentColor calc(var(--credere-opacity-10) * 100%), transparent); --credere-state-active-on-tint: color-mix(in srgb, currentColor calc(var(--credere-opacity-25) * 100%), transparent); --credere-state-active-scale: var(--credere-scale-98); --credere-state-disabled-opacity: var(--credere-opacity-50); }