feat(themes): eliminate all custom CSS color variables — use only rokkit palette tokens

[jerrythomas]

Problem

Several themes define their own custom CSS color variables and use them internally, rather than using the standard rokkit palette tokens (surface-z*, primary-z*, secondary-z*, danger-z*, etc.).

Known offenders:

• grada-ui: --gd-primary, --gd-secondary, --gd-gradient, --gd-grey-a, --gd-grey-b, --gd-grey-c, --gd-success, --gd-error-border, --gd-error-text, --gd-dark, --gd-surface-a, --gd-surface-b, --gd-surface-c
• material: --material-* (removed) — verify none remain
• Potentially others (ant-design, carbon, etc.)

input.css, button.css, switch.css, and card.css in grada-ui are already migrated. Remaining files with ~80+ usages:

• toolbar.css, floating-navigation.css, list.css, select.css, tabs.css, toggle.css, table.css, search-filter.css, range.css, timeline.css, toc.css, message.css, status-list.css, tree.css, menu.css, dropdown.css, floating-action.css

Rule

No theme may define or use its own --custom-* CSS color variables. All colors must come from:

• @apply surface-z*, primary-z*, secondary-z*, danger-z*, success-z* tokens
• Explicit rgba(var(--color-primary-500), 1) etc. for gradients

Gradient exception

The Rokkit color system does not have a built-in primary → secondary gradient utility. For themes like grada-ui that rely on this gradient, use explicit CSS:

background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
background-color: transparent;

Acceptance Criteria

• Zero occurrences of var(--gd-*), var(--material-*), or any other theme-specific custom color variable in packages/themes/src/**/*.css
• All replaced with @apply palette utilities or explicit rgba(var(--color-*), ...) syntax
• Build passes, lint passes
• Themes comparison page renders all 10 themes correctly

[jerrythomas]

Fixed in 1599287f24d6d053c9ef466ea9efc246c7f2acb2 — all var(--gd-*) usages across 15 grada-ui CSS files replaced with standard palette tokens.