Add interactive state, z-index, and dark mode design tokens - #9
Merged
Conversation
Adds a full OpenSpec change proposal for expanding the Mori design token set with three new capability areas: - Interactive state tokens (focus ring, disabled opacity, surface overlay) - Z-index scale (6 named semantic layers) - Dark mode theme layer ([data-theme="dark"] colour overrides) Also includes a delta spec for the existing design-tokens capability updating the group count from 6 to 9 and token total to 90. https://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt
Adds three new token groups to globals.css (interactive states, z-index scale, dark mode) and updates all components to consume them. Token additions (71 :root tokens total, up from 60): - Interactive states: --focus-ring-color/width/offset, --opacity-disabled, --color-surface-overlay - Z-index scale: --z-base/dropdown/sticky/overlay/modal/toast (0–500) - Dark mode: [data-theme="dark"] block with WCAG AA-compliant dark palette Component updates: - Button/Input: use focus-ring tokens and --opacity-disabled (was 0.50) - Dialog: backdrop uses --color-surface-overlay; panel uses --z-modal; backdrop uses --z-overlay - DataTable: z-10/20/30 replaced with --z-dropdown/sticky/overlay tokens Spec promotion: - openspec/specs/token-interactive-states/spec.md (new) - openspec/specs/token-z-index/spec.md (new) - openspec/specs/token-dark-mode/spec.md (new) - openspec/specs/design-tokens/spec.md updated (6 groups → 9) Tests: 240/240 passing; globals.test.ts updated and extended with dark-mode parity assertion. https://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt
Fixes the Format CI check which was failing on 63 files. The files touched by the design-token-expansion implementation had minor formatting drifts; the rest are pre-existing issues in PROJECT.md, showcase/, and .claude/.github skill/prompt files brought into compliance in the same pass. https://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt
…cess Array index access returns T | undefined in strict mode. Added ! assertions on items[0], cells[0], rows[0], and events[n] where the test logic guarantees the elements exist. https://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt
ESLint @typescript-eslint/no-non-null-assertion forbids ! assertions. Replaced with: - Named event constants (eventFax, eventExtract) instead of events[n] - Destructuring + if-throw guards instead of array[0]! access https://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Expands the Mori design token system from 60 to 71 tokens across three new groups: interactive states (focus rings, disabled opacity, surface overlay), z-index layering, and dark mode colour overrides. All changes are additive to
globals.csswith no breaking changes to existing tokens.Key Changes
--focus-ring-color,--focus-ring-width,--focus-ring-offset,--opacity-disabled, and--color-surface-overlayto:rootfor consistent focus indicators, disabled states, and modal backdrops across all components--z-base,--z-dropdown,--z-sticky,--z-overlay,--z-modal,--z-toast) with values 0, 100, 200, 300, 400, 500 to eliminate magic numbers in component layering[data-theme="dark"]selector block that overrides all 19 colour tokens plus focus-ring and surface-overlay tokens, using a warm near-black palette with adjusted brand green and semantic colours that meet WCAG AA contrast ratiosz-[var(--z-modal)],disabled:opacity-[var(--opacity-disabled)], etc.):roothas a matching dark-mode overridetoken-interactive-states,token-z-index,token-dark-mode) and updateddesign-tokensspec to reflect the expanded token groups and countImplementation Details
data-theme="dark"attribute on<html>, not@media (prefers-color-scheme), allowing products to control theme switching independently--color-brand(森緑 green) in both light and dark modes to reinforce brand identityhttps://claude.ai/code/session_012ywkmKYwcVd9EJ14mpuaFt