feat: theme changes#171
Open
JeraldJF wants to merge 12 commits into
Open
Conversation
Replace hardcoded green background on .sb-btn-dark-green with white background + primary-400 border/text, mirroring the same change applied to the collection editor in commit 11f2030. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… theme files Mirror the same Spark token substitution applied to the collection editor, replacing --white, --primary-4/6/800, --gray-0/100/200/300/400/800 with direct --spark-* token references in all SCSS files touched by commit 3724a93 and the restructure. QuML editor component and portal-theme-overrides now use the canonical Spark token names throughout. Token mapping applied: --white → --spark-surface --primary-400 → --spark-brick --primary-600 → --spark-brick-dark --primary-800 → --spark-brick-dark --gray-0 → --spark-card-alt --gray-100 → --spark-border-card --gray-200 → --spark-gray-b2 --gray-300 → --spark-gray-82 --gray-400 → --spark-gray-75 --gray-800 → --spark-charcoal Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rs with aliases - Extended _spark-tokens.scss with --color-* friendly aliases (--color-brand, --color-surface, --color-border, --color-upload-bg, etc.) that wrap raw spark and primary/secondary tokens — avoids exposing internal token names to component authors - Replaced every remaining var(--primary-*), var(--secondary-*), var(--gray-*), var(--white) in all 9 committed SCSS files with the appropriate --color-* alias - $btns Sass loop in _buttons.scss intentionally unchanged (drives color generation) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- --color-brand-tint: primary-0 → primary-100 (#fde8e0) — warmer, visible hover/active bg - --color-brand-subtle: primary-100 → primary-0 (#fff5f2) — faintest tint for upload zones - --color-selected-bg: secondary-300 (mint green) → primary-100 (#fde8e0) — selected rows now use brand warm tint - --color-border: border-card (#F1F1F1) → spark-border (#D0D5DD) — crisper default borders Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- _spark-tokens.scss → _spark-aliases.scss (brand values + --color-* aliases) - _portal-theme-overrides.scss → _spark-overrides.scss (Semantic UI overrides) - Update @import references in styles.scss and comment in _variables.scss Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Spark Theme Migration along with vuln fixes — PR Summary
Non-CSS changes and why they were needed
angular.json— global stylesheet registrationWhy: The Spark theme is delivered through SCSS files that Angular must know about at build time. Without registering them in
angular.json, the browser never loads the token definitions and everyvar(--spark-*)call renders as an empty value — components appear unstyled.What changed: Added the following files to the
stylesarray:Without this, the overrides in
_spark-overrides.scssand_spark-aliases.scsssimply would not be applied.CSS / SCSS changes — summary
All SCSS changes belong to one continuous goal: replacing the old generic palette (
--white,--gray-100,--primary-400, etc.) with the Spark token system and ensuring every component uses the canonical values<img width="774" height="453" alt="Screenshot 2026-04-23 at
6 24 58 PM" src="https://github.com/user-attachments/assets/e69b6932-df09-45f2-9e77-c8b6266636aa" />