feat: migrate foundation — tokens, SCSS primitives and core utilities - #2
Open
Lantum-Brendan wants to merge 4 commits into
Open
feat: migrate foundation — tokens, SCSS primitives and core utilities#2Lantum-Brendan wants to merge 4 commits into
Lantum-Brendan wants to merge 4 commits into
Conversation
Pulled the shared foundation over from webui — design tokens, surface/form/utility styles, plus the color, currency, dropdown and theme helpers — so ui-kit has its base layer. Foundation (Layer 0) now 10/10 curated: - tokens.css + _vars.scss (0.1-0.3, pre-existing) - _surfaces.scss, _form-styles.scss, _utilities.scss (0.4) - utils/colors.ts, utils/currency.ts (0.5) - composables/useDropdown.ts, useTheme.ts (0.5) Verified one-at-a-time: tsc clean, sass compile, happy-dom functional checks and parity vs webui.
There was a problem hiding this comment.
Pull request overview
This PR migrates a “foundation” layer into ui-kit, adding shared SCSS primitives plus reusable, zero-domain utilities/composables to serve as the base styling + helper layer for downstream UI usage.
Changes:
- Added currency parsing/formatting helpers and deterministic color utilities under
utils/. - Added
useThemeanduseDropdowncomposables undercomposables/for headless UI behavior. - Added foundational SCSS primitives for surfaces, forms, and utilities; updated package publishing include list.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| utils/currency.ts | Adds locale-aware parsing/formatting helpers for currency-like values. |
| utils/colors.ts | Adds deterministic color generation + palette helpers for theming/chart use. |
| composables/useTheme.ts | Adds headless theme state + persistence + DOM class toggling. |
| composables/useDropdown.ts | Adds click-outside / Escape-to-close dropdown state helper. |
| assets/scss/_utilities.scss | Adds shared utility classes (chips, icon-button, visibility helpers, etc.). |
| assets/scss/_surfaces.scss | Adds surface/tone-card primitives and dark-mode surface overrides. |
| assets/scss/_form-styles.scss | Adds shared structural form styling primitives. |
| package.json | Ensures utils/ and composables/ are included in published package files. |
Suppressed comments (2)
utils/currency.ts:199
- Same as above: formatting errors already fall back to a rounded string, but logging to
console.errorwill be noisy for consumers of this package.
} catch (error) {
console.error('Error formatting amount:', amount, error);
// Fallback to simple formatting
const rounded = Math.round(value * 100) / 100;
return showCurrency && displayCurrency ? `${rounded} ${displayCurrency}` : String(rounded);
composables/useTheme.ts:59
initThemereads fromlocalStoragewithout checking availability and without a try/catch. In some environments (SSR edge cases, private mode, storage disabled)localStorage.getItemcan throw and break initialization.
function initTheme() {
if (typeof window === 'undefined') return;
const saved = localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode | null;
const initialTheme = saved || 'light';
theme.value = initialTheme;
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+121
to
+124
| } catch (error) { | ||
| console.error('Error parsing amount:', amountStr, error); | ||
| return { value: 0, currency: '' }; | ||
| } |
Comment on lines
+55
to
+58
| // Extract currency (last word/token in the string, typically 3 uppercase letters) | ||
| const currencyMatch = amountStr.match(/\b([A-Z]{3})\b\s*$/); | ||
| const currency = currencyMatch ? currencyMatch[1] : ''; | ||
|
|
Comment on lines
+28
to
+31
| export function getCurrencySymbol(currencyCode: string): string { | ||
| if (!currencyCode) return ''; | ||
| return CURRENCY_SYMBOL_MAP[currencyCode.toUpperCase()] || currencyCode; | ||
| } |
Comment on lines
+33
to
+37
| /** | ||
| * Headless theme state machine — Tier 0 primitive (#10) | ||
| * Migrated from webui/composables/useTheme.ts | ||
| * Manages light/dark/system, persists to localStorage, toggles `document.documentElement.dark` (drives tokens.css). | ||
| */ |
| const theme = ref<ThemeMode>('light'); | ||
| const isDark = ref(false); | ||
|
|
||
| const THEME_STORAGE_KEY = 'trakli-theme'; |
Comment on lines
+36
to
+38
| hash = (hash << 5) - hash + char; | ||
| hash = hash & hash; // Convert to 32-bit integer | ||
| } |
Comment on lines
+79
to
+95
| export function generateColorPalette( | ||
| items: string[], | ||
| options: { | ||
| saturation?: number; | ||
| lightness?: number; | ||
| preferBasePalette?: boolean; | ||
| } = {} | ||
| ): Record<string, string> { | ||
| const { preferBasePalette = true } = options; | ||
| const colorMap: Record<string, string> = {}; | ||
|
|
||
| items.forEach((item, index) => { | ||
| colorMap[item] = getColorForItem(item, preferBasePalette ? index : undefined, options); | ||
| }); | ||
|
|
||
| return colorMap; | ||
| } |
Comment on lines
+44
to
+46
| if (typeof localStorage !== 'undefined') { | ||
| localStorage.setItem(THEME_STORAGE_KEY, newTheme); | ||
| } |
…oggleButton with stories Decouple ThemeToggleButton i18n -> props, keep useTheme. Verified per file: diff vs webui, sass compile, vitest happy-dom mount, storybook build 17 stories.
… and ViewToggle with stories Decouple EmptyState/ViewToggle i18n -> props, replace solar icon with lucide Package. Improve LoadingSkeleton visibility: bg-gray -> border-light gradient. Verified per file: diff vs webui, sass compile, vitest happy-dom mount, storybook build.
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
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.
Pulled the shared foundation over from webui — design tokens, surface/form/utility styles, plus the color, currency, dropdown and theme helpers — so ui-kit has its base layer.
Foundation now curated: