[WIP] Migrate Jetsnack to use Styles, including brand refresh of the sample#1681
Open
[WIP] Migrate Jetsnack to use Styles, including brand refresh of the sample#1681
Conversation
… to use Styles API.
…e `CompositionLocal`. - Deleted `CompositionLocals.kt` which used reflection to access internal Material 3 locals. - Introduced `JetsnackTheme` class to encapsulate `JetsnackColors`, `Typography`, `Shapes`, and `AppStyles`. - Replaced individual `LocalJetsnackColors`, `LocalAppStyles`, and Material 3 `LocalTypography`/`LocalShapes` lookups with `JetsnackTheme.colors`, `JetsnackTheme.typography`, etc. - Added a `StyleScope.currentJetsnackTheme` helper to provide easy access to the theme within `Style` blocks. - Moved `JetsnackColors` and color palette definitions to `Color.kt`. - Updated `debugColors` to include newer Material 3 color roles.
- Rename `JetsnackButton`, `JetsnackSurface`, and `JetsnackText` to `Button`, `Surface`, and `Text`. - Rename `jetsnackTextStyle` to `textStyleWithFontFamilyFix`. - Replace `currentJetsnackTheme` with direct `colors`, `typography`, and `shapes` accessors within `StyleScope`. - Update `AppStyles` to use the new theme accessors and refined padding properties. - Add a ripple indication to the base `Button` component.
- Rename `AppStyles` data class to `Styles` and update all references in `JetsnackTheme`. - Update `JetsnackCard`, `JetsnackDivider`, `JetsnackButton`, and other components to use the renamed `styles` property. - Move border and size styling from `Modifier` to `Style` in `SnackHighlight` cards. - Remove unused `HorizontalDivider` import and clean up styling logic in `Text.kt`.
Update typography to Instrument Sans and enhance Button styling
This change migrates the app's primary typeface from local Montserrat files to Instrument Sans via the Google Fonts API and introduces a more complex, state-driven styling system for buttons.
### Summary of changes
* **Typography**: Replaced local `Montserrat` font family with `Instrument Sans` using the `androidx.compose.ui:ui-text-google-fonts` library. Updated the `Typography` configuration to use the new font family across display, headline, and title styles.
* **Button Component**:
* Added a `LoadingState` (Loading, Loaded, Error) to the `Button` component.
* Updated `buttonStyle` to include sophisticated visuals including elliptical gradients, drop shadows, and inner shadows.
* Defined specific animated transitions for `pressed`, `loading`, and `disabled` states within the style definition.
* Removed the default ripple indication in favor of custom state visuals.
* **Styling Utilities**: Introduced an `ellipticalGradient` helper function to emulate CSS-like radial gradients using `ShaderBrush` and `RadialGradientShader`.
* **Theme & Resources**:
* Updated `Shapes.small` to use a fixed 28.dp corner radius.
* Added required font provider certificates in `font_certs.xml`.
* Removed legacy Montserrat `.ttf` assets.
* **Dependencies**: Added `androidx.compose.ui:ui-text-google-fonts` to the version catalog and app dependencies.
This change introduces adaptive styling for buttons using the `mediaQuery` API, allowing the UI to adjust padding and shapes dynamically based on the hardware configuration (e.g., physical vs. virtual keyboard).
### Summary of Changes
* **Adaptive Styling**: Implemented `mediaQuery` logic in `Styles.kt` to toggle button padding and shapes. Buttons now use smaller padding and medium shapes when a physical keyboard is detected.
* **Feature Activation**: Enabled `ComposeUiFlags.isMediaQueryIntegrationEnabled` in `MainActivity` and preview utilities to support the experimental Media Query API.
* **Preview Enhancements**:
* Added `UiMediaScopeWrapper` in `PreviewWrapper.kt` to facilitate testing different `UiMediaScope` states (keyboard kind, pointer precision) in Compose Previews.
* Introduced `KeyboardKindProvider` and `PointerPrecisionProvider` for parameterized previews.
* **Button Updates**: Updated `Button.kt` previews to utilize `UiMediaScopeWrapper`, specifically adding dedicated desktop previews to simulate physical keyboard and fine pointer precision environments.
This change updates the core design system of Jetsnack, including a revised color palette, updated typography, and improved component styling using the `styleable` modifier.
### Summary of Changes
1. **Theme and Styling**:
* **Color Palette**: Introduced a new semantic color palette (e.g., `WarpCore`, `Nebula`, `VastOfNight`) and simplified gradient definitions to `gradient1`, `gradient2`, and `gradient3`.
* **Typography**: Migrated all text styles to use `Instrument Sans`, removing the `Karla` font family. Adjusted headline and title sizes for better hierarchy.
* **Styles**: Refactored `buttonStyle` and `filterChipStyle` to utilize theme-based colors and added detailed state animations for pressed, loading, and disabled states.
2. **Component Refinement**:
* **Filters**: Updated `FilterBar` and chips with new shapes, borders, and typography. Replaced manual `Box` wrappers with `styleable` configurations.
* **Cart**: Refined `CartItem` layout using `IntrinsicSize.Min` and updated `SnackImage` styling with `RoundedCornerShape`.
* **Search**: Updated `SearchCategory` cards with a new aspect ratio, shadow effects, and ripple indications.
* **Navigation**: Updated bottom navigation colors and implemented a gradient border for the selection indicator using `styleable`.
3. **Infrastructure and Cleanup**:
* **Dependencies**: Updated `androidx-compose-bom` to `2026.03.00`, `android-material3` to `1.14.0-alpha10`, and `androidx-corektx` to `1.18.0`.
* **Previews**: Added `SharedElementPreviewWrapper` to support shared transition testing in previews and simplified `@Preview` annotations across components.
* **Utilities**: Removed unused gradient extension functions in `Gradient.kt`.
4. **Layout Adjustments**:
* Updated `Feed` to use `systemBars` insets for top spacing.
* Standardized `DestinationBar` height and updated delivery address typography.
…ions when performing shared element animations.
Contributor
|
Warning Gemini encountered an error creating the summary. You can try again by commenting |
This change updates the design system's button styles to better handle various interaction states and refactors several components to improve layout consistency and edge-to-edge support.
### Summary of changes
1. **Style Updates**:
* Added explicit `hovered` and `focused` state definitions with animations in `Styles.kt`.
* Introduced `minHeight` constraints for buttons, with specific values for physical keyboard vs. touch-optimized layouts.
* Refined `dropShadow` and `innerShadow` properties for buttons.
* Updated the default button shape from `RectangleShape` to `RoundedCornerShape(4.dp)` in preview and cart contexts.
2. **Component Refactoring**:
* **Snacks**: Simplified `HighlightedSnacks` and `HighlightSnackItem` by removing unused parameters including `index`, `gradient`, and `scrollProvider`.
* **SnackDetail**: Centered the "See More" button and updated the bottom bar to use `widthIn` constraints instead of proportional weights.
* **Cart**: Updated the summary layout to use `systemBars` insets and constrained the checkout button width.
3. **Edge-to-Edge Support**:
* Migrated from `statusBars` to `systemBars` insets in `Cart.kt` and `SnackDetail.kt` to ensure proper padding across different system configurations.
4. **Enhanced Previews**:
* Added comprehensive `@Preview` functions in `Button.kt` to visualize interactive state combinations, including Pressed, Hovered, Focused, and their overlapping states.
This change replaces the custom `VerticalGrid` implementation with the standard Compose `LazyVerticalGrid` to improve list performance and responsiveness in the search screen.
### Summary of changes
* **Refactored Search UI**: Migrated the search category list from a `LazyColumn` containing custom layouts to a single `LazyVerticalGrid`.
* Used `GridCells.Adaptive(200.dp)` for a more responsive grid layout.
* Implemented `GridItemSpan` to allow category headers to span the full width of the grid.
* **Component Cleanup**: Deleted the custom `VerticalGrid` implementation in `Grid.kt` as it is no longer needed.
* **UI Adjustments**:
* Increased the search bar height from `56.dp` to `72.dp`.
* Removed the unused `ExperimentalMaterial3ExpressiveApi` opt-in from `Styles.kt`.
* Adjusted padding and spacing within the search category items for better alignment.
This update uses the `mediaQuery` API to apply a 200dp horizontal padding to the bottom navigation bar when the window width is greater than 600dp.
…ch different snack differently, added hover and focused effects.
Removed custom layout for categories to properly use the image shape.
This update improves the swipe-to-dismiss behavior in the Cart and refactors base components to better support layout alignment and interaction testing.
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.
No description provided.