Improve Theme #279
Merged
Improve Theme #279
Conversation
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
Create a Node.js HTTP server to serve the Galio Framework demo page, including HTML structure, CSS styling, and server logic. Also, add a Replit markdown file detailing the project setup and dependencies. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/6qc6N7p
Introduce theme provider with support for 'light', 'dark', and 'auto' modes, utilizing `useColorScheme` hook for system preference detection. Implements `deepMerge` for theme customization and adds `useThemeColors` hook. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/6qc6N7p
Refactors the Button component to consume colors from `useThemeColors` hook instead of directly from `useGalioTheme`, ensuring consistent theme application across the application. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/6qc6N7p
Refactors the Input component to use `useThemeColors` hook for dynamic color application, improving theme adaptability and removing hardcoded color values. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/6qc6N7p
Introduces `useThemeColors` hook and updates components like Button, Card, and Input to dynamically use theme colors based on the current mode (light or dark), replacing hardcoded color references. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/6qc6N7p
Update the Text component to accept theme colors and dynamically apply styles based on the current theme mode, including support for dark mode. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/0L4Y7e1
Introduce helper function for generating consistent naming. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/0L4Y7e1
Deleted the replit.md file containing project overview, setup instructions, and documentation for the Galio Framework. This change removes redundant or unnecessary documentation from the repository.
Create examples.md to document Galio Framework component usage, installation, theme provider setup, and component-specific examples with code snippets and prop descriptions, including the framework version (0.9.4). Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/URhPwNZ
Enhance Checkbox component by introducing a `checked` prop for controlled state management, alongside the existing `initialValue` for uncontrolled usage. Updates include TypeScript definitions, JavaScript logic, and examples. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/URhPwNZ
Refactored the Block component to use a custom hook (useBlockStyles) for building styles, improving maintainability and reusability. Updated type definitions to extend ViewStyle and clarified prop types. Extracted card and shadow style logic into separate functions for better organization. This change enhances testability and makes the style system more flexible.
Deleted all files related to atomic/atoms (Button, Input, Link), atomic/ions (icon, text), helpers (getIconType, normalize), and theme (colors, index, sizes). This likely indicates a refactor, migration, or removal of unused UI components and related utilities.
Adds a README overview and updates components like Button, Icon, Input, Link, and Text for better theming, interaction, and overall user experience. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/I9F8ebV
Refactors imports in Accordion, Card, Checkbox, NavBar, Radio, and Toast components to point to local Text and Icon modules instead of atomic/ions. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/I9F8ebV
Change export paths for several components from './atomic/atoms/' and './atomic/ions/' to their root directory. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/I9F8ebV
Update imports and file paths for atomic components from './atomic/ions/' to './' and from './atomic/atoms/' to './'. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/tTZc43s
Optimize image loading to reduce page load times and improve user experience. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/tTZc43s
Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/tTZc43s
Introduce semantic color tokens, new hooks (useTheme, useColors), and deprecate legacy hooks, enhancing theme management and TypeScript support. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/cMWSrZD
Add a new API endpoint for user authentication. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/cMWSrZD
Rename BRAND_COLORS to NEUTRAL_DEFAULTS and update semantic color tokens in theme files. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/cMWSrZD
…ties for brand colors Modify THEME_MIGRATION.md and replit.md to instruct users to define brand colors in their application's theme file instead of the framework, and add a demo theme file. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/cMWSrZD
Update theme color definitions to be user-configurable. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/NDXUp9O
The framework now accepts user-defined color variables, enabling custom themes in applications. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ec5f4b86-dbdd-44c0-b266-12e4daba5065 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/5ed0fdbf-0152-46d0-bff8-ef3c82e888e4/ec5f4b86-dbdd-44c0-b266-12e4daba5065/NDXUp9O
Replaces 'medium' and 'large' boolean props with a semantic 'size' prop supporting string values ('xs', 'sm', 'md', 'lg', 'xl') or a number, and adds a 'style' prop for custom styling. Updates theme color resolution logic, improves documentation, and updates type definitions accordingly.
Updated getSemanticShadowStyles to always include the 'elevation' property for Android, even if not explicitly defined in the theme. This ensures consistent shadow rendering on Android devices.
Added iconProps to Input for improved icon customization and deprecated iconColor/iconSize. Input now resolves colors and sizes from theme keys for icon, label, help text, background, and placeholder. Updated TypeScript types and documentation to reflect new API and usage. Maintains backward compatibility with legacy iconColor/iconSize props, with deprecation warnings.
marqbeniamin
approved these changes
Oct 21, 2025
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes the Galio Framework's theming system with semantic color tokens and automatic light/dark mode support, following 2025 React Native standards. The update includes comprehensive theme improvements, removal of compiled JavaScript files, enhanced documentation, and migration of all 16 components to use the new theming API.
Key Changes:
- Introduced semantic color system with automatic light/dark mode adaptation
- Added new theme hooks (
useTheme(),useColors()) with backward compatibility - Removed all compiled JavaScript files from version control
- Added comprehensive documentation for all components and migration guides
Reviewed Changes
Copilot reviewed 53 out of 173 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/theme/index.tsx | Implements new theme provider with mode support, semantic colors, and modern hooks |
| src/theme/colors.tsx | Defines semantic color tokens for light/dark modes and cross-platform shadow system |
| src/Text.tsx, Button.tsx, Input.tsx, etc. | Migrates 16 components to use new theme hooks and semantic colors |
| docs/*.md | Adds comprehensive documentation for components, theming, and migration |
| package.json | Updates version and adds react-native-safe-area-context dependency |
| theme/.js, helpers/.js, atomic/**/*.js | Removes compiled JavaScript files from source control |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Comment on lines
+25
to
+30
| - **xs**: Extra small shadow (subtle) | ||
| ## Shadow Levels and Platform-Specific Details | ||
|
|
||
| Shadows can be customized for different platforms: | ||
|
|
||
| - **xs**: Extra small shadow (subtle) |
There was a problem hiding this comment.
The shadow level 'xs' is listed twice in the documentation. The first occurrence at line 25 should be removed to eliminate the duplication, as the complete list appears in the 'Shadow Levels and Platform-Specific Details' section starting at line 30.
Comment on lines
+129
to
+130
| // eslint-disable-next-line no-console | ||
| console.warn('[Block] Passing shadow as boolean is deprecated. Use semantic values (xs, sm, md, lg, xl) instead.'); |
There was a problem hiding this comment.
The deprecation warning for boolean shadow values should only be shown once per application lifecycle to avoid console spam. Consider using a global flag similar to other deprecation warnings in the codebase (e.g., __GALIO_WARNED_DEPRECATED_HOOK__).
Suggested change
| // eslint-disable-next-line no-console | |
| console.warn('[Block] Passing shadow as boolean is deprecated. Use semantic values (xs, sm, md, lg, xl) instead.'); | |
| if (!globalThis.__BLOCK_WARNED_DEPRECATED_SHADOW__) { | |
| // eslint-disable-next-line no-console | |
| console.warn('[Block] Passing shadow as boolean is deprecated. Use semantic values (xs, sm, md, lg, xl) instead.'); | |
| globalThis.__BLOCK_WARNED_DEPRECATED_SHADOW__ = true; | |
| } |
Comment on lines
+160
to
+169
| useEffect(() => { | ||
| if (iconColor !== undefined && iconProps.color === undefined) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn('[Input] iconColor is deprecated. Use iconProps.color instead.'); | ||
| } | ||
| if (iconSize !== undefined && iconProps.size === undefined) { | ||
| // eslint-disable-next-line no-console | ||
| console.warn('[Input] iconSize is deprecated. Use iconProps.size instead.'); | ||
| } | ||
| }, [iconColor, iconSize, iconProps.color, iconProps.size]); |
There was a problem hiding this comment.
Deprecation warnings in useEffect will trigger on every render when the dependencies change. Move these warnings outside the component or use a ref/global flag to ensure they only display once per component lifecycle, preventing console spam.
Suggested change
| useEffect(() => { | |
| if (iconColor !== undefined && iconProps.color === undefined) { | |
| // eslint-disable-next-line no-console | |
| console.warn('[Input] iconColor is deprecated. Use iconProps.color instead.'); | |
| } | |
| if (iconSize !== undefined && iconProps.size === undefined) { | |
| // eslint-disable-next-line no-console | |
| console.warn('[Input] iconSize is deprecated. Use iconProps.size instead.'); | |
| } | |
| }, [iconColor, iconSize, iconProps.color, iconProps.size]); | |
| const iconColorWarnedRef = useRef(false); | |
| const iconSizeWarnedRef = useRef(false); | |
| useEffect(() => { | |
| if (!iconColorWarnedRef.current && iconColor !== undefined && iconProps.color === undefined) { | |
| // eslint-disable-next-line no-console | |
| console.warn('[Input] iconColor is deprecated. Use iconProps.color instead.'); | |
| iconColorWarnedRef.current = true; | |
| } | |
| if (!iconSizeWarnedRef.current && iconSize !== undefined && iconProps.size === undefined) { | |
| // eslint-disable-next-line no-console | |
| console.warn('[Input] iconSize is deprecated. Use iconProps.size instead.'); | |
| iconSizeWarnedRef.current = true; | |
| } | |
| }, []); |
Co-authored-by: Copilot <[email protected]>
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.
No description provided.