You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Adds the scoped design token layer that the meeting details V2 tree will style against, plus the deviation table that records where V2 departs from lfxColors and how it converges back.
The V2 prototype diverges from the app's look on purpose. This confines that divergence to one file so no V2 component ever writes a raw hex, rgba() literal, or arbitrary Tailwind colour value.
How it's scoped
Tokens hang off a single .meeting-details-v2 container class. Nothing is added to global styles, :root is untouched, and the whole layer reverts by deleting the file and its @use. Tokens are named by role (--md-status-good), never by hue, so the palette can be swapped without renaming a token or touching a consumer.
Custom properties inherit through the DOM regardless of view encapsulation, so descendant components — including the lfx-* wrappers — resolve them without importing anything.
Accessibility
The prototype's own values did not survive measurement, so several tokens are deliberately darker than the prototype. Each is recorded with its measured ratio:
Three status hues measured ~3.6:1 as chip text on their own tinted backgrounds; the accent measured 4.43:1 as link text. All four are darkened to clear WCAG AA.
The focus ring was 3px of a 9% accent tint, which composites to roughly 1.13:1 against a card — effectively invisible, where SC 1.4.11 wants 3:1. It now rings the solid accent, and resolving var(--md-accent) means it follows the dark accent for free.
The prototype's faintest ink measured 2.54:1. A white surface has no room for a fourth AA-compliant text tier, so it is not a text token: renamed --md-glyph-faint and moved out of the text group, so a component reaching for it as copy reads wrong at the call site.
Dark mode
The prototype's dark block is reproduced under :host-context(.dark-mode), matching the darkModeSelector: '.dark-mode' PrimeNG is already configured with. The app ships no control that sets that class, so the block is inert today — it exists so the prototype's dark contract is recorded rather than re-derived later.
The :host-context form is required, not stylistic: emulated encapsulation scopes every compound in a selector, so a plain .dark-mode .meeting-details-v2 would compile to .dark-mode[_ngcontent-x] … and never match, since the document root carries no such attribute.
Note on sequencing
The token file has no @use consumer yet — the V2 page component lands in #2873 (PR #2910), and the scaffold in #2874. It is verified to compile standalone. If #2874 slips, this is an unreferenced stylesheet.
docs/architecture/frontend/styling-system.md gains a "Scoped design token layers" section.
.claude/rules/styling.md gains the carve-out to the "never hard-code hex" rule, so the rule file and the architecture doc agree.
The equivalent bullet in CLAUDE.md ("Hard-code brand hex values") still reads unqualified. That file is preflight-protected, so it is left for a code owner to amend.
Testing
check-headers, format:check, lint, check-types and yarn build all pass. The stylesheet was additionally compiled standalone with sass to verify it is valid on its own, since nothing imports it yet. No unit tests: the change adds no executable code.
This PR edits one line of AGENTS.md, which needs code-owner review: the "Hard-code brand hex values" rule now names the scoped design token layer (*.tokens.scss) exception that .claude/rules/styling.md and styling-system.md already describe, so the convention has a single definition.
The V2 prototype diverges from the app's look on purpose. Confine that
divergence to one scoped token layer so no V2 component ever writes a raw
hex, rgba or arbitrary Tailwind colour value.
Tokens hang off a single `.meeting-details-v2` container class — nothing
is added to global styles, `:root` is untouched, and the whole layer
reverts by deleting the file. They are named by role, not hue, and each
one records its nearest `lfxColors` equivalent or is marked a deliberate
divergence.
Also opens `specs/010-meeting-details-redesign/` with the full deviation
table and the convergence path. E0-01 (#1766) fills in the rest.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Review of the token layer turned up four defects, all in the values rather
than the structure.
The dark block used `.dark-mode .meeting-details-v2`. Angular's emulated
encapsulation scopes every compound in a selector, so that compiles to
`.dark-mode[_ngcontent-x] …` and the document root never carries that
attribute — it would have matched nothing permanently while looking like it
was merely waiting for a toggle. Switched to `:host-context(.dark-mode)`.
Three status hues measured about 3.6:1 as chip text on their own tinted
backgrounds, and the accent measured 4.43:1 as link text. All four are
darkened to clear WCAG AA. The focus ring was 3px of a 9% accent tint, which
composites to roughly 1.13:1 against a card; it now rings the solid accent
and follows the dark accent for free.
`--md-text-faint` measured 2.54:1 and cannot be text: a white surface has no
room for a fourth AA-compliant tier. Renamed `--md-glyph-faint` and moved out
of the text group so a component reaching for it as copy reads wrong.
The deviation table now records a measured ratio per ink, status and focus
token, and corrects the `--md-status-warn` rationale — `amber.700` passes
contrast comfortably; the divergence is hue. `.claude/rules/styling.md` gains
the token-layer carve-out so the rule file and the architecture doc agree.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Essentials
Run ID: 07bb65a5-e72f-4132-be8d-c5b1a8835c63
You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.
Use the checkbox below for a quick retry:
🔍 Trigger review
Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
Low Risk
Adds documentation and an unreferenced SCSS token file with no runtime or global style changes until a V2 page imports it.
Overview
Introduces a scoped design token layer for meeting details V2: a new meeting-details-page.tokens.scss defines role-named --md-* custom properties under .meeting-details-v2 (light values plus an inert :host-context(.dark-mode) block), with prototype divergences darkened where needed for WCAG AA (status chips, accent, focus ring) and the faintest ink demoted to non-text --md-glyph-faint.
Documents the pattern and the V2 palette in specs/011-meeting-details-redesign/ (design-token-deviations.md with lfxColors mapping and convergence path) and updates styling guidance (styling-system.md, .claude/rules/styling.md, AGENTS.md) so literal hex is allowed only inside *.tokens.scss. The stylesheet is not @used by a page component yet; V2 UI wiring is expected in follow-up work.
Reviewed by Cursor Bugbot for commit 0fbdacd. Bugbot is set up for automated code reviews on this repo. Configure here.
Addresses the review on the V2 token layer:
- Overlays: custom properties only inherit inside the scoped subtree,
but lfx-select and lfx-multi-select default appendTo to body and
PrimeNG tooltips attach there too, so their panels resolve every
--md-* token as unset. The token file and styling-system.md now say
that a scoped consumer passes appendTo an element inside the scope,
and must never redefine the tokens on body or :root.
- Dark values now record the nearest lfxColors step and a measured
ratio each, per the rule this PR introduces. lfxColors has no dark
theme, so all are divergences by construction. Every text, accent
and status value clears AA on the dark card and on its own tint;
the deviations doc now has the table that backs that claim.
- --md-status-good converges on emerald.700 (5.36:1 on white, 4.67:1
on its tint), not emerald.600, which is only 3.65:1 and would bring
back the chip-text failure the darkening fixed.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Update guidance to document the scoped-token exception
.claude/rules/styling.md:30
This new exception conflicts with the still-unqualified CLAUDE.md:319 prohibition on hard-coded brand hex values. CLAUDE.md:311 also requires convention changes to update CLAUDE.md, .claude/rules/, and the affected architecture docs in the same PR, so future contributors currently receive opposing guidance. Please amend that bullet in this PR (with code-owner review as required) to recognize the scoped-token exception.
V2-02 (#2874, PR #2923) settles the V2 page's directory as
meeting-details-page/ and deletes the meeting-details-v2/ placeholder
directory this file lived in. Moving it here now means the two PRs no
longer depend on merge order: whichever lands first, the token file is
already where the V2 page will @use it.
The file is renamed to match its directory. The .meeting-details-v2
scope class is unchanged; it names the V2 tree, not a component.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Document the scoped brand hex exception in CLAUDE.md
.claude/rules/styling.md:29
This new exception leaves the repository guidance contradictory: CLAUDE.md:319 still forbids hard-coded brand hex values, while this token layer intentionally defines the divergent brand accent as a literal. CLAUDE.md:311 explicitly requires convention changes to update CLAUDE.md, .claude/rules/, and the architecture docs in the same PR; protected-file status requires code-owner review rather than deferring the update. Add the same scoped-token exception to CLAUDE.md before merging.
Address review comments from the reviewers on PR #2911:
- design-token-deviations.md, meeting-details-page.tokens.scss:
--md-status-live now converges on red.700 (#C10007), not red.600.
red.600 stays the nearest palette reference, but it is only 4.01:1 on
its own 10% tint, below the 4.5:1 chip-text requirement; red.700 is
5.35:1 there and 6.42:1 on white (per
copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Resolve contradictory guidance on hard-coded brand hex values
.claude/rules/styling.md:30
This new exception leaves the repository's guidance contradictory: CLAUDE.md:319 still categorically prohibits hard-coded brand hex values, while CLAUDE.md:311 requires convention changes to update CLAUDE.md, .claude/rules/, and the architecture docs in the same PR. A protected file can receive the required code-owner review in this PR; please qualify the CLAUDE.md bullet so future contributors do not get opposite instructions from the two normative sources.
Correct contrast ratio for the accent tint surface
The recorded 6.59:1 is the contrast of #1558c0 against white, not against the 9% accent tint where this token is intended to be used. Against --md-accent-bg the ratio is approximately 5.83:1 (still AA). Please record the actual on-tint ratio here and in the matching SCSS annotation, or label both card and tint ratios explicitly so the accessibility evidence matches the stated surface.
design-token-deviations.md, meeting-details-page.tokens.scss: --md-status-live converges on red.700 (5.35:1 on its 10% tint), not red.600 (4.01:1) (per copilot-pull-request-reviewer[bot]).
Address review comments from the reviewers on PR #2911:
- design-token-deviations.md, meeting-details-page.tokens.scss: the
--md-status-warn divergence is about hue and contrast, not hue
alone. amber.700 is 5.03:1 on white but only 4.26:1 on its own 12%
tint, the surface the chips use. The doc now says so and names
amber.800 (5.88:1 on its tint) as the nearest step that would pass
if the token ever converges (per copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
Qualify CLAUDE.md rule to resolve contradictory branding guidance
.claude/rules/styling.md:33
This exception leaves the repository's top-level guidance contradictory: CLAUDE.md:285 still unconditionally forbids hard-coded brand hex values, while CLAUDE.md:277 requires convention changes to update CLAUDE.md, .claude/rules/, and the architecture docs in the same PR. A protected file requires code-owner review rather than deferring the update; please qualify the CLAUDE.md rule in this PR so future contributors do not receive two incompatible instructions.
Address review comments from the reviewers on PR #2911 (all per
copilot-pull-request-reviewer[bot]):
- specs/: the spec directory moves from 010 to 011. main took 010 for
specs/010-shared-ghcr-cleanup (#3202) after this branch was cut, so
"spec 010" had become ambiguous. All references in this PR follow.
- AGENTS.md: the "hard-code brand hex values" rule now names the
scoped design token layer exception that .claude/rules/styling.md
and styling-system.md already describe, so the convention has one
definition. AGENTS.md is protected: this line needs code-owner
review.
Resolves 2 review threads.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
AGENTS.md: the hex-value rule now names the scoped token-layer exception. This is a protected file and needs code-owner review; see the PR description.
Threads resolved
2 of 2. Checks: format, markdownlint and the Sass compile pass.
Address review comments from the reviewers on PR #2911:
- specs/011-meeting-details-redesign/README.md: the heading still read
"010 — Meeting details redesign" after the directory moved to 011;
it now reads 011, so the spec number is unambiguous next to
specs/010-shared-ghcr-cleanup (per copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
The 6.78:1 figure is not the contrast against the actual --md-accent-bg. That background is a 13% tint of --md-accent (#4f9bff) over --md-surface-card, and #7db4ff against the resulting surface measures about 6.5:1. The same incorrect value appears in design-token-deviations.md:167; update both records so the token layer's accessibility documentation reflects the surface consumers will use.
Base changed to feat/meeting-details-v2. The meeting details V2 epic (#1765) now lands in that integration branch instead of main. Merging this PR ships nothing to production: main only changes when the whole project is finished and one final PR, feat/meeting-details-v2 → main, merges. Please review and merge this PR into the integration branch as usual.
* docs(meetings): add the v2 rollout and retirement plan
Adds specs/011-meeting-details-redesign/rollout.md for V2-03. It
separates the two controls: the integration branch decides whether the
code is in production at all (nothing reaches main until release PR
#3249), and MEETING_V2_ENABLED_FLAG decides who sees V2 once it is.
Defines eight stages (build, release, internal testers, extended
testers, signed-in percentage, anonymous, soak, retire), each with who
decides and exit criteria. States that the code default never changes
and targeting is the switch. Gives the anonymous plan: a code change
that needs #2920's server-side evaluation, then an anonymous
LaunchDarkly context ramped by percentage. Adds what is measured, a
rollback table, and flag retirement: this page drops its read of the
shared flag, and the flag itself retires only with the composer.
The V1-deletion checklist is filed as #3266. The README's contents
table now lists the files that actually exist.
Refs #2875
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
* docs(meetings): reconcile v2 spec cross-references after the merge
The foundation PRs (#2909, #2910, #2911, #2913, #2914, #2935) now sit
together on feat/meeting-details-v2, so the "pending sibling, not on
main yet" notes they carried are stale. They become plain
cross-references in spec.md, state-matrix.md, data-model.md,
requirements.md, testid-contract.md, v2-scaffold.md and the
meeting-view-model resolver comments.
Also records the newly filed Phase 1 issues (#3250-#3265) in spec.md's
work order and requirements.md's traceability table, and the V1
retirement issue #3266.
Refs #1766
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
* docs(meetings): fix rollout plan gating and rollback guidance
Make #2920 the stage 4 entry gate rather than a release blocker,
scope R05 and FR-001 to the stages before the anonymous stage, give
the V1 rollback a targeted-revert path, and stop reusing the D-2 label.
Refs #2875
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
* docs(meetings): address review feedback on the rollout plan
Make FR-001 platform-neutral with the signed-in and post-hydration
rules scoped to their stages, limit stage 2 to signed-in states, define
the baseline once a V1 cohort is gone, and re-wrap a spec paragraph.
Refs #2875
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
---------
Signed-off-by: Nuno Eufrasio <nmeufrasio@gmail.com>
* feat(meetings): add scoped design tokens for meeting details v2
The V2 prototype diverges from the app's look on purpose. Confine that
divergence to one scoped token layer so no V2 component ever writes a raw
hex, rgba or arbitrary Tailwind colour value.
Tokens hang off a single `.meeting-details-v2` container class — nothing
is added to global styles, `:root` is untouched, and the whole layer
reverts by deleting the file. They are named by role, not hue, and each
one records its nearest `lfxColors` equivalent or is marked a deliberate
divergence.
Also opens `specs/010-meeting-details-redesign/` with the full deviation
table and the convergence path. E0-01 (#1766) fills in the rest.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(meetings): make v2 design tokens accessible and dark mode reachable
Review of the token layer turned up four defects, all in the values rather
than the structure.
The dark block used `.dark-mode .meeting-details-v2`. Angular's emulated
encapsulation scopes every compound in a selector, so that compiles to
`.dark-mode[_ngcontent-x] …` and the document root never carries that
attribute — it would have matched nothing permanently while looking like it
was merely waiting for a toggle. Switched to `:host-context(.dark-mode)`.
Three status hues measured about 3.6:1 as chip text on their own tinted
backgrounds, and the accent measured 4.43:1 as link text. All four are
darkened to clear WCAG AA. The focus ring was 3px of a 9% accent tint, which
composites to roughly 1.13:1 against a card; it now rings the solid accent
and follows the dark accent for free.
`--md-text-faint` measured 2.54:1 and cannot be text: a white surface has no
room for a fourth AA-compliant tier. Renamed `--md-glyph-faint` and moved out
of the text group so a component reaching for it as copy reads wrong.
The deviation table now records a measured ratio per ink, status and focus
token, and corrects the `--md-status-warn` rationale — `amber.700` passes
contrast comfortably; the divergence is hue. `.claude/rules/styling.md` gains
the token-layer carve-out so the rule file and the architecture doc agree.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(meetings): record dark token mappings and keep overlays in scope
Addresses the review on the V2 token layer:
- Overlays: custom properties only inherit inside the scoped subtree,
but lfx-select and lfx-multi-select default appendTo to body and
PrimeNG tooltips attach there too, so their panels resolve every
--md-* token as unset. The token file and styling-system.md now say
that a scoped consumer passes appendTo an element inside the scope,
and must never redefine the tokens on body or :root.
- Dark values now record the nearest lfxColors step and a measured
ratio each, per the rule this PR introduces. lfxColors has no dark
theme, so all are divergences by construction. Every text, accent
and status value clears AA on the dark card and on its own tint;
the deviations doc now has the table that backs that claim.
- --md-status-good converges on emerald.700 (5.36:1 on white, 4.67:1
on its tint), not emerald.600, which is only 3.65:1 and would bring
back the chip-text failure the darkening fixed.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* refactor(meetings): move the v2 token layer to meeting-details-page
V2-02 (#2874, PR #2923) settles the V2 page's directory as
meeting-details-page/ and deletes the meeting-details-v2/ placeholder
directory this file lived in. Moving it here now means the two PRs no
longer depend on merge order: whichever lands first, the token file is
already where the V2 page will @use it.
The file is renamed to match its directory. The .meeting-details-v2
scope class is unchanged; it names the V2 tree, not a component.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(review): address PR #2911 review feedback
Address review comments from the reviewers on PR #2911:
- design-token-deviations.md, meeting-details-page.tokens.scss:
--md-status-live now converges on red.700 (#C10007), not red.600.
red.600 stays the nearest palette reference, but it is only 4.01:1 on
its own 10% tint, below the 4.5:1 chip-text requirement; red.700 is
5.35:1 there and 6.42:1 on white (per
copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(review): address PR #2911 review feedback
Address review comments from the reviewers on PR #2911:
- design-token-deviations.md, meeting-details-page.tokens.scss: the
--md-status-warn divergence is about hue and contrast, not hue
alone. amber.700 is 5.03:1 on white but only 4.26:1 on its own 12%
tint, the surface the chips use. The doc now says so and names
amber.800 (5.88:1 on its tint) as the nearest step that would pass
if the token ever converges (per copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(review): address PR #2911 review feedback
Address review comments from the reviewers on PR #2911 (all per
copilot-pull-request-reviewer[bot]):
- specs/: the spec directory moves from 010 to 011. main took 010 for
specs/010-shared-ghcr-cleanup (#3202) after this branch was cut, so
"spec 010" had become ambiguous. All references in this PR follow.
- AGENTS.md: the "hard-code brand hex values" rule now names the
scoped design token layer exception that .claude/rules/styling.md
and styling-system.md already describe, so the convention has one
definition. AGENTS.md is protected: this line needs code-owner
review.
Resolves 2 review threads.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* fix(review): address PR #2911 review feedback
Address review comments from the reviewers on PR #2911:
- specs/011-meeting-details-redesign/README.md: the heading still read
"010 — Meeting details redesign" after the directory moved to 011;
it now reads 011, so the spec number is unambiguous next to
specs/010-shared-ghcr-cleanup (per copilot-pull-request-reviewer[bot]).
Resolves 1 review thread.
Refs #1769
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
---------
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* docs(meetings): add the v2 rollout and retirement plan
Adds specs/011-meeting-details-redesign/rollout.md for V2-03. It
separates the two controls: the integration branch decides whether the
code is in production at all (nothing reaches main until release PR
#3249), and MEETING_V2_ENABLED_FLAG decides who sees V2 once it is.
Defines eight stages (build, release, internal testers, extended
testers, signed-in percentage, anonymous, soak, retire), each with who
decides and exit criteria. States that the code default never changes
and targeting is the switch. Gives the anonymous plan: a code change
that needs #2920's server-side evaluation, then an anonymous
LaunchDarkly context ramped by percentage. Adds what is measured, a
rollback table, and flag retirement: this page drops its read of the
shared flag, and the flag itself retires only with the composer.
The V1-deletion checklist is filed as #3266. The README's contents
table now lists the files that actually exist.
Refs #2875
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* docs(meetings): reconcile v2 spec cross-references after the merge
The foundation PRs (#2909, #2910, #2911, #2913, #2914, #2935) now sit
together on feat/meeting-details-v2, so the "pending sibling, not on
main yet" notes they carried are stale. They become plain
cross-references in spec.md, state-matrix.md, data-model.md,
requirements.md, testid-contract.md, v2-scaffold.md and the
meeting-view-model resolver comments.
Also records the newly filed Phase 1 issues (#3250-#3265) in spec.md's
work order and requirements.md's traceability table, and the V1
retirement issue #3266.
Refs #1766
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* docs(meetings): fix rollout plan gating and rollback guidance
Make #2920 the stage 4 entry gate rather than a release blocker,
scope R05 and FR-001 to the stages before the anonymous stage, give
the V1 rollback a targeted-revert path, and stop reusing the D-2 label.
Refs #2875
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
* docs(meetings): address review feedback on the rollout plan
Make FR-001 platform-neutral with the signed-in and post-hydration
rules scoped to their stages, limit stage 2 to signed-in states, define
the baseline once a V1 cohort is gone, and re-wrap a spec paragraph.
Refs #2875
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
---------
Signed-off-by: Nuno Eufrásio <nmeufrasio@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
meetingsAn epic, feature, story, task, or bug related to meetings.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds the scoped design token layer that the meeting details V2 tree will style against, plus the deviation table that records where V2 departs from
lfxColorsand how it converges back.The V2 prototype diverges from the app's look on purpose. This confines that divergence to one file so no V2 component ever writes a raw hex,
rgba()literal, or arbitrary Tailwind colour value.How it's scoped
Tokens hang off a single
.meeting-details-v2container class. Nothing is added to global styles,:rootis untouched, and the whole layer reverts by deleting the file and its@use. Tokens are named by role (--md-status-good), never by hue, so the palette can be swapped without renaming a token or touching a consumer.Custom properties inherit through the DOM regardless of view encapsulation, so descendant components — including the
lfx-*wrappers — resolve them without importing anything.Accessibility
The prototype's own values did not survive measurement, so several tokens are deliberately darker than the prototype. Each is recorded with its measured ratio:
var(--md-accent)means it follows the dark accent for free.--md-glyph-faintand moved out of the text group, so a component reaching for it as copy reads wrong at the call site.Dark mode
The prototype's dark block is reproduced under
:host-context(.dark-mode), matching thedarkModeSelector: '.dark-mode'PrimeNG is already configured with. The app ships no control that sets that class, so the block is inert today — it exists so the prototype's dark contract is recorded rather than re-derived later.The
:host-contextform is required, not stylistic: emulated encapsulation scopes every compound in a selector, so a plain.dark-mode .meeting-details-v2would compile to.dark-mode[_ngcontent-x] …and never match, since the document root carries no such attribute.Note on sequencing
The token file has no
@useconsumer yet — the V2 page component lands in #2873 (PR #2910), and the scaffold in #2874. It is verified to compile standalone. If #2874 slips, this is an unreferenced stylesheet.Docs
specs/011-meeting-details-redesign/opened minimally by this issue, with the full deviation table and convergence path. E0-01 (docs(meetings): add meeting details redesign spec #1766) fills in the rest.docs/architecture/frontend/styling-system.mdgains a "Scoped design token layers" section..claude/rules/styling.mdgains the carve-out to the "never hard-code hex" rule, so the rule file and the architecture doc agree.Testing
check-headers,format:check,lint,check-typesandyarn buildall pass. The stylesheet was additionally compiled standalone withsassto verify it is valid on its own, since nothing imports it yet. No unit tests: the change adds no executable code.Refs #1769
🤖 Generated with Claude Code
Protected file: AGENTS.md
This PR edits one line of
AGENTS.md, which needs code-owner review: the "Hard-code brand hex values" rule now names the scoped design token layer (*.tokens.scss) exception that.claude/rules/styling.mdandstyling-system.mdalready describe, so the convention has a single definition.