@layer settings { /* Design tokens for redesigned widget styles. When you change a color/font token here, also update React/src/indexV2.css. */ :root { /* Base / utility. Only the two the widget actually paints with: white, and the transparent the calendar's day cells reset to. Black and its two tints had no callers, and currentColor was never a color to pick — it is how an icon inherits its parent's, which psw-icon already handles. */ --color-transparent: transparent; --color-white: #ffffff; --color-info-100: #e7f3fd; /* Figma: color/Blue/100 (palette node 4772:86650) */ --color-info-200: #c7e1fa; /* Figma: color/Blue/200 */ --color-info-400: #1b89ee; /* Figma: color/Blue/400 (palette node 4772:86650) — the info / link blue, distinct from the theme-primary default (--color-cobalt-500) */ --color-info-500: #0f6fc8; /* Figma: color/Blue/500 (palette node 4772:86650) — darkest info shade */ --color-success-100: #e9fce8; /* Figma: color/Green/100 (palette node 4772:86650) */ --color-success-200: #d3f9d2; /* Figma: color/Green/200 */ --color-success-400: #1eb918; /* Figma: color/Green/400 (palette node 4772:86650) */ --color-success-500: #178c12; /* Figma: color/Green/500 (darker, content-readable) */ --color-warning-100: #fff3db; --color-warning-200: #ffe8ba; --color-warning-400: #ffc043; --color-warning-600: #9c7529; --color-danger-100: #ffedeb; --color-danger-200: #ffdbd6; --color-danger-400: #e11900; --color-gray-100: #f6f6f6; --color-gray-200: #f0f0f0; --color-gray-300: #e2e2e2; --color-gray-400: #afafaf; --color-gray-500: #757575; --color-gray-600: #545454; --color-gray-700: #0f0f0f; /* Decorative supporting tints — back avatar/PDF accents (see app/printers, avatar-stack). NOTE: this is NOT the brand palette a Pro picks from; that is the 32-color catalog in app/themes.py (raw hex, shown on the Color-palette gallery page). Only families actually consumed as --color-* tokens are kept here. */ --color-tomato-400: #d50000; --color-tomato-100: #fde8dd; --color-pumpkin-400: #ef6c00; --color-pumpkin-100: #ffe9d6; --color-mango-400: #f09300; --color-mango-100: #ffefd6; --color-banana-400: #f6bf26; --color-banana-100: #fdf3d8; --color-lime-500: #a5ad28; --color-lime-400: #c0ca33; --color-lime-100: #f6f7e0; --color-peacock-400: #039be5; --color-peacock-100: #e0f5ff; --color-cobalt-400: #4285f4; --color-cobalt-500: #186af2; /* Figma: Primary/Cobalt 500 (palette node 4772:86650) — default --theme-primary */ --color-cobalt-100: #e2ecfe; --color-basil-500: #048848; /* Figma: Primary/Basil 500 — the green tag / "Paid" pill green */ --color-basil-100: #eaf9f1; /* Figma: Basil 100 (bg tint "Narvik") */ --color-blueberry-400: #3f51b5; --color-blueberry-100: #e1e4f4; --color-violet-400: #7751b8; /* Figma: color/supporting/violet-400 */ --color-violet-100: #e7e1f3; /* Figma: color/supporting/violet-100 */ --color-grape-400: #8e24aa; --color-grape-100: #f5e5fa; --color-radicchio-400: #ad1457; --color-radicchio-100: #fce3e4; --color-cherry-blossom-400: #d81b60; --color-cherry-blossom-100: #fcdfed; --color-cocoa-400: #795548; --color-cocoa-100: #f0e8e5; --color-graphite-400: #616161; --color-graphite-100: #ebebeb; --color-birch-400: #a79b8e; --color-birch-100: #edebe8; --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Figma: Typography/Font size/* (primitives) */ --font-size-12: 12px; --font-size-14: 14px; --font-size-16: 16px; --font-size-18: 18px; --font-size-20: 20px; --font-size-24: 24px; --font-size-28: 28px; --font-size-32: 32px; --font-size-36: 36px; --font-size-40: 40px; --font-size-44: 44px; --font-size-52: 52px; --font-size-96: 96px; /* Semantic paragraph-size aliases (body / descriptive text). Pair with --font-weight-regular for true paragraph styling — labels above use --font-weight-semibold, which is what differentiates them visually. */ --text-paragraph-sm: var(--font-size-14); --text-paragraph-md: var(--font-size-16); /* Figma: Typography/Font-weight/* */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* Figma: Typography/Line-height/* */ --line-height-16: 16px; --line-height-20: 20px; --line-height-24: 24px; --line-height-28: 28px; --line-height-32: 32px; --line-height-36: 36px; --line-height-40: 40px; --line-height-44: 44px; --line-height-52: 52px; --line-height-64: 64px; --line-height-112: 112px; /* ============================================================ Semantic type ramps — matches React/src/indexV2.css 1:1. Each ramp pairs a font-size with its companion line-height (`--text-{family}-{size}--line-height`). Components should reach for these instead of the raw --font-size-N primitives. 17 total: Display (3) + Heading (6) + Label (4) + Paragraph (4). ============================================================ */ /* Display — hero / marketing. Weight 700. Figma: Display/* */ --text-display-lg: 96px; --text-display-lg--line-height: 112px; --text-display-md: 52px; --text-display-md--line-height: 64px; --text-display-sm: 44px; --text-display-sm--line-height: 52px; /* Heading — page / section titles. Weight 700. Figma: Heading/* */ --text-heading-2xl: 40px; --text-heading-2xl--line-height: 52px; --text-heading-xl: 36px; --text-heading-xl--line-height: 44px; --text-heading-lg: 32px; --text-heading-lg--line-height: 40px; --text-heading-md: 28px; --text-heading-md--line-height: 36px; --text-heading-sm: 24px; --text-heading-sm--line-height: 32px; --text-heading-xs: 20px; --text-heading-xs--line-height: 28px; /* Label — form fields, buttons, tags. Weight 700 (600 for buttons). Figma: Label/* (No label-xl: 20/28 is Heading/xs — reach for --text-heading-xs there.) */ --text-label-lg: 18px; --text-label-lg--line-height: 24px; --text-label-md: 16px; --text-label-md--line-height: 20px; --text-label-sm: 14px; --text-label-sm--line-height: 16px; --text-label-xs: 12px; --text-label-xs--line-height: 16px; /* Paragraph — body / descriptive text. Weight 400. Figma: Paragraph/* */ --text-paragraph-lg: 18px; --text-paragraph-lg--line-height: 28px; --text-paragraph-md: 16px; --text-paragraph-md--line-height: 24px; --text-paragraph-sm: 14px; --text-paragraph-sm--line-height: 20px; --text-paragraph-xs: 12px; --text-paragraph-xs--line-height: 20px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-max: 9999px; /* Figma: Radius/radius-max */ /* Semantic aliases that map Figma's role-based tokens onto our primitives. Components should prefer these over the raw color-* / gray-* values. */ --color-content-inverse: var(--color-white); /* Figma: Content/content-inverse */ --color-content-disabled: var(--color-gray-400); /* Figma: Content/content-disabled — non-destructive disabled elements only; destructive disabled elements keep content-inverse */ --color-content-high: var(--color-gray-700); /* Figma: Content/content-high — high-emphasis body text */ --color-content-medium: var(--color-gray-600); /* Figma: Content/content-medium — secondary / helper text */ --color-bg-disabled: var(--color-gray-200); /* Figma: Background/bg-disabled */ --color-bg-subtle: var(--color-gray-100); /* Figma: Background/bg-subtle */ --color-bg-muted: var(--color-gray-700); /* Figma: Background/bg-muted (Light mode) */ --color-bg-surface: var(--color-gray-600); /* Figma: Background/bg-surface */ --color-bg-negative: var(--color-danger-400); /* Figma: Status/bg-negative */ --color-bg-negative-low: var(--color-danger-200); /* Figma: Status/bg-negative-low */ --color-content-negative: var(--color-danger-400); /* Figma: Status/content-negative */ --color-content-negative-low: var(--color-danger-200); /* Figma: Status/content-negative-low */ --color-bg-positive-subtle: var(--color-success-100); /* Figma: Status/bg-positive-subtle */ --color-bg-negative-subtle: var(--color-danger-100); /* Figma: Status/bg-negative-subtle */ --color-content-positive: var(--color-success-500); /* Figma: Status/content-positive — darker green for legible text */ --color-border-subtle: var(--color-white); /* Figma: Border/border-subtle */ --color-border-default: var(--color-gray-300); /* Figma: Border/border-medium (color) */ --color-border-disabled: var(--color-gray-200); /* Figma: Border/border-disabled */ /* Theme defaults — the unthemed brand color used when a Pro sets no brand color. The `*-default` tokens are the SINGLE SOURCE OF TRUTH: they seed --theme-primary/-bg/-secondary here AND are every component's themed fallback, e.g. `var(--theme-primary, var(--theme-primary-default))`. Change the default color in one place below and :root + all fallbacks track together (they can never drift apart). A Pro's primary_color overrides --theme-primary on the page root (see the widget page templates); the gallery picker overrides all three. */ --theme-primary-default: var(--color-cobalt-500); /* Figma Primary/Cobalt 500 */ --theme-primary-bg-default: var(--color-cobalt-100); /* Cobalt 100 — primary subtle bg */ --theme-secondary-default: var(--color-cobalt-100); /* Cobalt 100 — secondary */ --theme-primary: var(--theme-primary-default); --theme-primary-bg: var(--theme-primary-bg-default); --theme-secondary: var(--theme-secondary-default); /* Figma: Border/border-* (widths) */ --border-width-sm: 1px; --border-width-md: 2px; /* Breakpoints — viewport widths at which layouts shift. NOTE: CSS custom properties can't be used inside @media query conditions (vars are property values only). When you write a media query, mirror the literal value here, e.g. `@media (max-width: 768px) { … }`. Keep the literal and this token in sync. */ --breakpoint-mobile: 768px; } }