/* * tokens.css — Content Editor theme tokens (Phase 1 §1.4) * * Maps the surface-agnostic --wg-* design tokens used by the Lit block * components onto the app's Carbon Design System --cds-* variables. Because * CSS custom properties pierce Shadow DOM, defining --wg-* on the renderer * container (.wg-content) cascades into every shadow root. * * Theming is automatic across light (g10) and dark (g100): the --cds-* * variables this file references are re-bound by Carbon's `cds-theme--g10` / * `cds-theme--g100` classes on /, so the --wg-* tokens follow the * active theme with no per-mode overrides here. Never hardcode colors — every * value resolves through a --cds-* variable (with a WeGreen-brand fallback). * * Phase 5 §5.3 — per-surface overrides are applied via the * `.wg-surface-` class on the .wg-content container. The block * components themselves are unchanged; only token values shift per surface. */ .wg-content { --wg-color-primary: var(--cds-text-primary, #124c5f); --wg-color-text: var(--cds-text-primary, #124c5f); --wg-link-color: var(--wg-color-text, var(--cds-text-primary, #124c5f)); --wg-link-hover-color: var(--cds-link-primary-hover, var(--wg-color-text, #0d3a4a)); --wg-color-muted: var(--cds-text-secondary, #124c5f); --wg-color-border: var(--cds-border-subtle, #e0e0e0); --wg-color-bg: var(--cds-background, #ffffff); --wg-color-layer: var(--cds-layer, #f4f4f4); /* Typography */ --wg-font-body: 'Arimo', system-ui, sans-serif; --wg-font-mono: monospace; --wg-font-size-base: .9rem; --wg-line-height: 1.3; /* Headings */ --wg-heading-color: var(--cds-text-primary, #124c5f); /* Code block */ --wg-code-bg: var(--cds-layer, #f4f4f4); --wg-code-text: var(--cds-text-primary, #124c5f); /* Table */ --wg-table-border: var(--cds-border-subtle, #e0e0e0); --wg-table-header-bg: var(--cds-layer, #f4f4f4); /* Divider */ --wg-divider-color: var(--cds-border-subtle, #e0e0e0); /* Idea block — trade card (matches feed / activity-card teal surfaces) */ --wg-idea-bg: color-mix(in srgb, var(--cds-text-primary, #124c5f) 3%, transparent); --wg-idea-header-bg: color-mix(in srgb, var(--cds-support-success, #24a148) 12%, transparent); --wg-idea-metrics-bg: color-mix(in srgb, var(--cds-text-primary, #124c5f) 5%, transparent); --wg-idea-border: var(--gc-border, var(--wg-color-border)); --wg-idea-label: var(--cds-text-secondary, var(--wg-color-muted)); --wg-idea-positive: var(--cds-support-success, #24a148); --wg-idea-negative: var(--cds-support-error, #da1e28); --wg-idea-positive-bg: color-mix(in srgb, var(--wg-idea-positive) 12%, transparent); --wg-idea-negative-bg: color-mix(in srgb, var(--wg-idea-negative) 12%, transparent); --wg-idea-neutral-bg: color-mix(in srgb, var(--wg-idea-label) 12%, transparent); --wg-idea-chip-bg: color-mix(in srgb, var(--wg-color-primary) 8%, transparent); --wg-idea-chip-border: color-mix(in srgb, var(--wg-color-primary) 22%, transparent); --wg-idea-dot-empty: var(--wg-idea-label); --wg-idea-dot-filled: var(--wg-color-text); /* Image caption */ --wg-caption-color: var(--cds-text-helper, #6f6f6f); /* Paragraph callout / quote variants */ --wg-callout-bg: var(--cds-layer, #edf5f7); --wg-callout-border: var(--cds-border-interactive, #124c5f); --wg-quote-border: var(--cds-border-strong, #8d8d8d); color: var(--wg-color-text); font-family: var(--wg-font-body); font-size: var(--wg-font-size-base); line-height: var(--wg-line-height); } /* Feed / activity cards — same idea tokens pierce into shadow roots. */ .gc-activity-card { --wg-color-primary: var(--cds-text-primary, #124c5f); --wg-color-text: var(--cds-text-primary, #124c5f); --wg-color-muted: var(--cds-text-secondary, #124c5f); --wg-color-border: var(--cds-border-subtle, #e0e0e0); --wg-idea-bg: color-mix(in srgb, var(--cds-text-primary, #124c5f) 3%, transparent); --wg-idea-header-bg: color-mix(in srgb, var(--cds-support-success, #24a148) 12%, transparent); --wg-idea-metrics-bg: color-mix(in srgb, var(--cds-text-primary, #124c5f) 5%, transparent); --wg-idea-border: var(--gc-border, var(--wg-color-border)); --wg-idea-label: var(--cds-text-secondary, #124c5f); --wg-idea-positive: var(--cds-support-success, #24a148); --wg-idea-negative: var(--cds-support-error, #da1e28); --wg-idea-positive-bg: color-mix(in srgb, var(--wg-idea-positive) 12%, transparent); --wg-idea-negative-bg: color-mix(in srgb, var(--wg-idea-negative) 12%, transparent); --wg-idea-neutral-bg: color-mix(in srgb, var(--wg-idea-label) 12%, transparent); --wg-idea-dot-empty: var(--wg-idea-label); --wg-idea-dot-filled: var(--wg-color-text); } .gc-activity-card wg-idea-block { display: block; margin: 0; } /* Inline hyperlinks in rich text — primary text color (editor preview + reader). */ .wg-content a, .wg-content a:visited { color: var(--wg-link-color, var(--wg-color-text, var(--cds-text-primary, #124c5f))); font-weight: 800; text-decoration: none; } .wg-content a:hover { color: var(--wg-link-hover-color, var(--cds-link-primary-hover, var(--wg-color-text, #0d3a4a))); text-decoration: underline; text-underline-offset: 0.15em; } /* Authoring shell shares the same inline-link tokens as the reader. */ .gc-editor-shell { --wg-link-color: var(--cds-text-primary, #124c5f); --wg-link-hover-color: var(--cds-link-primary-hover, #0d3a4a); --wg-divider-color: var(--cds-border-subtle, #124c5f26); --wg-editor-divider-color: var(--wg-divider-color); } /* * Divider lines: * - .wg-content .line2 covers published/non-Lit content that still emits .line2. * - .gc-editor-shell .line2 covers editor block previews rendered by groups.js. */ .wg-content .line2 { background-color: var(--wg-divider-color); } .gc-editor-shell .line2 { background-color: var(--wg-editor-divider-color); } .gc-editor-shell .gc-editor-block-body > .line2 { margin: 1rem 0; } /* Dark theme — links, dividers, and idea surfaces (teal-tinted, not gray lift). */ body.cds-theme--g100 .wg-content, body.cds-theme--g100 .gc-activity-card { --wg-link-color: var(--cds-link-primary, #78d3f0); --wg-link-hover-color: var(--cds-link-primary-hover, #5cc5e8); --wg-divider-color: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 22%, transparent); --wg-idea-bg: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 3%, transparent); --wg-idea-header-bg: color-mix(in srgb, var(--cds-support-success, #42be65) 12%, transparent); --wg-idea-metrics-bg: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 5%, transparent); --wg-idea-border: var(--gc-border, color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 14%, transparent)); --wg-idea-label: var(--cds-text-secondary, #124c5f); --wg-idea-positive: var(--cds-support-success, #42be65); --wg-idea-negative: var(--cds-support-error, #fa4d56); --wg-idea-positive-bg: color-mix(in srgb, var(--wg-idea-positive) 12%, transparent); --wg-idea-negative-bg: color-mix(in srgb, var(--wg-idea-negative) 12%, transparent); --wg-idea-neutral-bg: color-mix(in srgb, var(--wg-idea-label) 12%, transparent); --wg-idea-chip-bg: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 8%, transparent); --wg-idea-chip-border: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 22%, transparent); --wg-idea-dot-empty: var(--cds-text-secondary, #124c5f); --wg-idea-dot-filled: var(--cds-text-primary, #f4f4f4); } body.cds-theme--g100 .gc-editor-shell { --wg-link-color: var(--cds-link-primary, #78d3f0); --wg-link-hover-color: var(--cds-link-primary-hover, #5cc5e8); --wg-divider-color: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 22%, transparent); --wg-editor-divider-color: color-mix(in srgb, var(--cds-text-primary, #f4f4f4) 34%, transparent); } .wg-content .wg-ticker-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; margin: 0.75rem 0; } .wg-content .wg-ticker-row > wg-ticker-block { flex: 1 1 250px; max-width: 360px; } .wg-content .wg-ticker-row .wg-ticker-tile { height: 100%; } /* ── Phase 5 §5.3 — per-surface token overrides ─────────────────────────── * * Each surface class is set on the .wg-content container by the template. * Blocks inherit the overridden tokens through Shadow DOM piercing. * All values remain --cds-* references so light/dark still work correctly. * ─────────────────────────────────────────────────────────────────────── */ /* groups — default brand teal (no changes needed; inherits base above) */ .wg-content.wg-surface-groups {} /* newsletter — clean editorial layout, slightly wider measure, generous spacing */ .wg-content.wg-surface-newsletter { --wg-font-size-base: .9rem; --wg-line-height: 1.3; --wg-color-border: var(--cds-border-subtle, #d1d1d1); --wg-callout-bg: var(--cds-layer, #f4f4f4); --wg-callout-border: var(--cds-border-subtle, #d1d1d1); /* Newsletter posts use neutral callouts — teal accent only for brand header */ --wg-heading-color: var(--cds-text-primary, #161616); } /* email — same base as newsletter; interactivity disabled server-side */ .wg-content.wg-surface-email { --wg-font-size-base: .9rem; --wg-line-height: 1.3; --wg-color-border: var(--cds-border-subtle, #d1d1d1); --wg-callout-bg: var(--cds-layer, #f4f4f4); --wg-callout-border: var(--cds-border-subtle, #d1d1d1); --wg-heading-color: var(--cds-text-primary, #161616); } /* market_update — denser, compact line height, stronger border accents */ .wg-content.wg-surface-market_update { --wg-font-size-base: .9rem; --wg-line-height: 1.3; --wg-color-border: var(--cds-border-strong, #8d8d8d); --wg-table-border: var(--cds-border-strong, #8d8d8d); --wg-table-header-bg: var(--cds-layer-accent, #e0e0e0); --wg-callout-border: var(--cds-border-interactive, #124c5f); --wg-heading-color: var(--cds-text-primary, #124c5f); } /* blog — editorial, comfortable reading measure */ .wg-content.wg-surface-blog { --wg-font-size-base: .9rem; --wg-line-height: 1.3; --wg-color-muted: var(--cds-text-helper, #6f6f6f); --wg-caption-color: var(--cds-text-helper, #6f6f6f); --wg-divider-color: var(--cds-border-subtle, #e0e0e0); --wg-heading-color: var(--cds-text-primary, #161616); --wg-quote-border: var(--cds-border-interactive, #124c5f); }