Skip to content

ALFMOB-275 | 278 | 279 | 280 | 282 | 425: Integrate design token and migrate Button component#25

Merged
hoangnhatdrk merged 10 commits into
mainfrom
feature/ALFMOB-275-design-token-codegen
Jul 1, 2026
Merged

ALFMOB-275 | 278 | 279 | 280 | 282 | 425: Integrate design token and migrate Button component#25
hoangnhatdrk merged 10 commits into
mainfrom
feature/ALFMOB-275-design-token-codegen

Conversation

@hoangnhatdrk

@hoangnhatdrk hoangnhatdrk commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Wire ProvideNewTheme inside Theme() so all components inherit LocalTheme automatically (D4)
  • Refactor ButtonType: drop 4 hardcoded Color constructor params; add ButtonColorSpec data class + @Composable colorSpec() extension that reads from LocalTheme.current.primitive.colors; add new Destructive variant (D3, D5)
  • Update ButtonSize: adjust heights Small 36→32 dp, Medium 44→40 dp; add per-size horizontalPadding / verticalPadding fields (D6)
  • Update Button: replace all Theme.* references with token equivalents — body.medium typography, sizing.icon.medium (16→24 dp), spacing.spacing8 icon gap, per-size content padding; add explicit tint to icons so text/icon colors are independent; add Destructive preview; wrap previews in Theme {}
  • Fix generate_icons.py: remove column-alignment padding that caused NoMultipleSpaces detekt violations; regenerate AlfieIcons.kt
  • Suppress ComposableFunctionName on ProvideNewTheme (valid Compose provider naming convention)
  • Fix pre-existing detekt issues across 60+ files: remove unused com.mindera.alfie.designsystem.R imports and fix ImportOrdering violations introduced by the icons migration commit
  • Restore font files zeroed by commit 7429932 (restored from 14afe87)

Acceptance criteria

AC Met
Button uses generated token values for all visual properties ✅ Colors from primitive.colors.*, typography/sizing/spacing from token layer
All 5 type variants render correctly ✅ Primary, Secondary, Tertiary, Destructive (new), Underlined
All sizes render correctly ✅ Small/Medium adopt Figma spec; Large preserved
Loading / disabled / shimmer states work loadingType/shimmerColors retained; disabled colors from spec.disabled*
Existing call sites don't change ButtonType entries + Button() signature unchanged
Compose previews render correctly ✅ Wrapped in Theme {}, Destructive added
Detekt passes BUILD SUCCESSFUL

Test plan

  • Build :designsystem — no compile errors
  • Open ButtonPreview in Android Studio and verify all 5 variants × {Default, Disabled, Loading} × {Small, Medium, Large} against Figma node-id=558-9157
  • Confirm visual deltas (Primary disabled bg, Secondary/Tertiary transparent bg) match the handoff table in Docs/ALFMOB-279-button-design-tokens-handoff.md §4.1
  • Full project build — no call-site breakage

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings July 1, 2026 03:29
@hoangnhatdrk hoangnhatdrk changed the title ALFMOB-279: Refactor Button composable to use design tokens ALFMOB-275 | 278 | 279 | 280 | 282 | 425: Refactor Button composable to use design tokens Jul 1, 2026
@hoangnhatdrk hoangnhatdrk changed the title ALFMOB-275 | 278 | 279 | 280 | 282 | 425: Refactor Button composable to use design tokens ALFMOB-275 | 278 | 279 | 280 | 282 | 425: Integrate design token and migrate Button component Jul 1, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Refactors the design system’s button/theming foundations toward token-driven styling and a generated icon catalog (AlfieIcons), while documenting and committing the design-token source-of-truth + generation workflow.

Changes:

  • Add token infrastructure (NewTheme/LocalTheme, generated token Kotlin + token JSON/manifest) and wire ProvideNewTheme into Theme {}.
  • Migrate many call sites from R.drawable.* to AlfieIcons.*, and add/replace a large set of vector drawables backing the generated icons.
  • Update design system utilities/components (e.g., button sizing, various previews) and detekt configuration to accommodate generated sources.

Reviewed changes

Copilot reviewed 169 out of 216 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
README.md Documents design-token source, update, and regeneration steps
feature/wishlist/src/main/java/com/mindera/alfie/feature/wishlist/WishlistScreen.kt Switch wishlist empty-state icon to AlfieIcons
feature/startup/src/main/java/com/mindera/alfie/feature/startup/StartUp.kt Replace Material background usage with design system color
feature/shop/src/main/java/com/mindera/alfie/feature/shop/ui/ShopErrorScreen.kt Switch warning icon to AlfieIcons
feature/shop/src/main/java/com/mindera/alfie/feature/shop/category/CategoryListItem.kt Switch chevron icon to AlfieIcons
feature/search/src/main/java/com/mindera/alfie/feature/search/SearchOverlay.kt Switch search/close icons to AlfieIcons
feature/plp/src/main/java/com/mindera/alfie/feature/plp/ProductListScreen.kt Switch layout-mode icons to AlfieIcons
feature/plp/src/main/java/com/mindera/alfie/feature/plp/filter/RefineSheet.kt Switch chevron icons to AlfieIcons
feature/pdp/src/main/java/com/mindera/alfie/feature/pdp/ProductDetailsScreen.kt Switch warning/chevron icons to AlfieIcons
feature/pdp/src/main/java/com/mindera/alfie/feature/pdp/component/ProductDetailsSizeModalPicker.kt Switch check icon to AlfieIcons
feature/pdp/src/main/java/com/mindera/alfie/feature/pdp/component/ProductDetailsSize.kt Switch chevron icon to AlfieIcons
feature/home/src/main/java/com/mindera/alfie/feature/home/HomeScreen.kt Switch home icon to AlfieIcons
feature/bag/src/main/java/com/mindera/alfie/feature/bag/BagScreen.kt Switch bag icon to AlfieIcons
feature/account/src/main/java/com/mindera/alfie/feature/account/factory/AccountMenuItems.kt Switch account menu icons to AlfieIcons
feature/account/src/main/java/com/mindera/alfie/feature/account/component/NavigationButton.kt Switch chevron icon to AlfieIcons
designsystem/src/main/res/drawable/ic_star.xml Update star vector geometry
designsystem/src/main/res/drawable/ic_star__fill_.xml Add filled star vector
designsystem/src/main/res/drawable/ic_refund.xml Add refund vector
designsystem/src/main/res/drawable/ic_refine.xml Update refine vector geometry/colors
designsystem/src/main/res/drawable/ic_pencil.xml Update pencil vector geometry
designsystem/src/main/res/drawable/ic_package.xml Add package vector
designsystem/src/main/res/drawable/ic_more.xml Add “more” vector
designsystem/src/main/res/drawable/ic_modal_action_close.xml Remove legacy close icon asset
designsystem/src/main/res/drawable/ic_minus.xml Add minus vector
designsystem/src/main/res/drawable/ic_menu.xml Add menu vector
designsystem/src/main/res/drawable/ic_menu_alt.xml Update menu-alt vector geometry
designsystem/src/main/res/drawable/ic_loading.xml Add loading vector
designsystem/src/main/res/drawable/ic_legacy_zoom_out.xml Add legacy zoom-out vector
designsystem/src/main/res/drawable/ic_legacy_zoom_in.xml Add legacy zoom-in vector
designsystem/src/main/res/drawable/ic_legacy_upload.xml Add legacy upload vector
designsystem/src/main/res/drawable/ic_legacy_unlock.xml Add legacy unlock vector
designsystem/src/main/res/drawable/ic_legacy_size_chart.xml Add legacy size-chart vector
designsystem/src/main/res/drawable/ic_legacy_shrink.xml Add legacy shrink vector
designsystem/src/main/res/drawable/ic_legacy_sale.xml Add legacy sale vector
designsystem/src/main/res/drawable/ic_legacy_reload.xml Add legacy reload vector
designsystem/src/main/res/drawable/ic_legacy_refresh.xml Add legacy refresh vector
designsystem/src/main/res/drawable/ic_legacy_receipt.xml Add legacy receipt vector
designsystem/src/main/res/drawable/ic_legacy_page.xml Add legacy page vector
designsystem/src/main/res/drawable/ic_legacy_microphone.xml Add legacy microphone vector
designsystem/src/main/res/drawable/ic_legacy_mail.xml Add legacy mail vector
designsystem/src/main/res/drawable/ic_legacy_log_in.xml Add legacy log-in vector
designsystem/src/main/res/drawable/ic_legacy_lock.xml Add legacy lock vector
designsystem/src/main/res/drawable/ic_legacy_location.xml Add legacy location vector
designsystem/src/main/res/drawable/ic_legacy_info.xml Add legacy info vector
designsystem/src/main/res/drawable/ic_legacy_inbox.xml Add legacy inbox vector
designsystem/src/main/res/drawable/ic_legacy_image.xml Add legacy image vector
designsystem/src/main/res/drawable/ic_legacy_history.xml Add legacy history vector
designsystem/src/main/res/drawable/ic_legacy_file.xml Add legacy file vector
designsystem/src/main/res/drawable/ic_legacy_face_id.xml Add legacy face-id vector
designsystem/src/main/res/drawable/ic_legacy_eye.xml Add legacy eye vector
designsystem/src/main/res/drawable/ic_legacy_eye_closed.xml Add legacy eye-closed vector
designsystem/src/main/res/drawable/ic_legacy_external_link.xml Add legacy external-link vector
designsystem/src/main/res/drawable/ic_legacy_expand.xml Add legacy expand vector
designsystem/src/main/res/drawable/ic_legacy_copy.xml Add legacy copy vector
designsystem/src/main/res/drawable/ic_legacy_clock.xml Add legacy clock vector
designsystem/src/main/res/drawable/ic_legacy_camera.xml Add legacy camera vector
designsystem/src/main/res/drawable/ic_legacy_call_center.xml Add legacy call-center vector
designsystem/src/main/res/drawable/ic_legacy_calendar.xml Add legacy calendar vector
designsystem/src/main/res/drawable/ic_legacy_bookmark.xml Add legacy bookmark vector
designsystem/src/main/res/drawable/ic_legacy_authentication.xml Add legacy authentication vector
designsystem/src/main/res/drawable/ic_legacy_arrow_up.xml Add legacy arrow-up vector
designsystem/src/main/res/drawable/ic_legacy_arrow_down.xml Add legacy arrow-down vector
designsystem/src/main/res/drawable/ic_informational_warning.xml Remove legacy informational warning asset
designsystem/src/main/res/drawable/ic_informational_help.xml Remove legacy informational help asset
designsystem/src/main/res/drawable/ic_informational_credit_card.xml Remove legacy informational credit-card asset
designsystem/src/main/res/drawable/ic_informational_column.xml Remove legacy informational column asset
designsystem/src/main/res/drawable/ic_informational_checkmark.xml Remove legacy informational checkmark asset
designsystem/src/main/res/drawable/ic_home.xml Add home vector
designsystem/src/main/res/drawable/ic_home__fill_.xml Add filled home vector
designsystem/src/main/res/drawable/ic_grid_2__fill_.xml Add filled grid-2 vector
designsystem/src/main/res/drawable/ic_grid_1.xml Add grid-1 vector
designsystem/src/main/res/drawable/ic_grid_1__fill_.xml Add filled grid-1 vector
designsystem/src/main/res/drawable/ic_forward.xml Add forward arrow vector
designsystem/src/main/res/drawable/ic_exit.xml Add exit vector
designsystem/src/main/res/drawable/ic_download.xml Add download vector
designsystem/src/main/res/drawable/ic_delete.xml Add delete vector
designsystem/src/main/res/drawable/ic_credit_card.xml Add credit-card vector
designsystem/src/main/res/drawable/ic_close.xml Add close vector
designsystem/src/main/res/drawable/ic_clear.xml Update clear vector geometry/colors
designsystem/src/main/res/drawable/ic_chevron_up.xml Add chevron-up vector
designsystem/src/main/res/drawable/ic_chevron_right.xml Add chevron-right vector
designsystem/src/main/res/drawable/ic_chevron_left.xml Add chevron-left vector
designsystem/src/main/res/drawable/ic_chevron_down.xml Add chevron-down vector
designsystem/src/main/res/drawable/ic_check.xml Add check vector
designsystem/src/main/res/drawable/ic_bag__fill_.xml Add filled bag vector
designsystem/src/main/res/drawable/ic_back.xml Add back arrow vector
designsystem/src/main/res/drawable/ic_alert__fill_.xml Add filled alert vector
designsystem/src/main/res/drawable/ic_add.xml Add add/plus vector
designsystem/src/main/res/drawable/ic_action_user.xml Remove legacy action user asset
designsystem/src/main/res/drawable/ic_action_trash.xml Remove legacy action trash asset
designsystem/src/main/res/drawable/ic_action_share_outline.xml Remove legacy share-outline asset
designsystem/src/main/res/drawable/ic_action_share_fill.xml Remove legacy share-fill asset
designsystem/src/main/res/drawable/ic_action_search_light.xml Remove legacy search-light asset
designsystem/src/main/res/drawable/ic_action_search_dark.xml Remove legacy search-dark asset
designsystem/src/main/res/drawable/ic_action_plus.xml Remove legacy plus asset
designsystem/src/main/res/drawable/ic_action_minus.xml Remove legacy minus asset
designsystem/src/main/res/drawable/ic_action_log_out.xml Remove legacy log-out asset
designsystem/src/main/res/drawable/ic_action_house.xml Remove legacy house asset
designsystem/src/main/res/drawable/ic_action_heart_outline.xml Remove legacy heart-outline asset
designsystem/src/main/res/drawable/ic_action_heart_fill.xml Remove legacy heart-fill asset
designsystem/src/main/res/drawable/ic_action_hamburger_menu.xml Remove legacy hamburger-menu asset
designsystem/src/main/res/drawable/ic_action_gift.xml Remove legacy gift asset
designsystem/src/main/res/drawable/ic_action_filters.xml Remove legacy filters asset
designsystem/src/main/res/drawable/ic_action_ellipsis.xml Remove legacy ellipsis asset
designsystem/src/main/res/drawable/ic_action_edit.xml Remove legacy edit asset
designsystem/src/main/res/drawable/ic_action_download.xml Remove legacy download asset
designsystem/src/main/res/drawable/ic_action_close_light.xml Remove legacy close-light asset
designsystem/src/main/res/drawable/ic_action_close_dark.xml Remove legacy close-dark asset
designsystem/src/main/res/drawable/ic_action_bell.xml Remove legacy bell asset
designsystem/src/main/res/drawable/ic_action_arrow_left.xml Remove legacy arrow-left asset
designsystem/src/main/res/drawable/ic_account.xml Add account vector
designsystem/src/main/res/drawable/ic_account__fill_.xml Add filled account vector
designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/Sizing.kt Add generated sizing token accessors
designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/NewTheme.kt Add NewTheme + LocalTheme + ProvideNewTheme
designsystem/src/main/java/com/mindera/alfie/designsystem/theme/typography/AlfieTypography.kt Remove Material typography bridge
designsystem/src/main/java/com/mindera/alfie/designsystem/theme/Theme.kt Wire ProvideNewTheme and adjust MaterialTheme setup
designsystem/src/main/java/com/mindera/alfie/designsystem/theme/shape/AlfieShapes.kt Remove Material shapes bridge
designsystem/src/main/java/com/mindera/alfie/designsystem/theme/color/AlfieColorScheme.kt Remove Material color-scheme bridge
designsystem/src/main/java/com/mindera/alfie/designsystem/component/topbar/action/WishlistTopBarAction.kt Switch wishlist topbar icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/topbar/action/ShareTopBarAction.kt Switch share topbar icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/topbar/action/SearchTopBarAction.kt Switch search topbar icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/topbar/action/DebugTopBarAction.kt Switch debug topbar icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/topbar/action/AccountTopBarAction.kt Switch account topbar icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/tag/Tag.kt Switch tag icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/tab/TabPager.kt Switch tab icon usage to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/sortby/SortBySelector.kt Switch sort-by preview icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/snackbar/Snackbar.kt Switch snackbar icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/shimmer/ShimmerModifier.kt Switch shimmer preview icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/searchbar/SearchTextType.kt Switch searchbar icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/productcard/size/VerticalProductCard.kt Switch wishlist icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/productcard/size/HorizontalProductCard.kt Switch close icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/modal/BottomSheet.kt Switch close icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/image/Image.kt Switch failure placeholder to AlfieIcons legacy image
designsystem/src/main/java/com/mindera/alfie/designsystem/component/gallery/GalleryIndicator.kt Switch chevrons/background usage away from MaterialTheme defaults
designsystem/src/main/java/com/mindera/alfie/designsystem/component/gallery/EndlessGallery.kt Switch wishlist icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/fullscreen/Fullscreen.kt Switch close icon/background usage away from MaterialTheme defaults
designsystem/src/main/java/com/mindera/alfie/designsystem/component/dialog/error/ErrorScreen.kt Switch warning icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/chip/Chip.kt Switch dismiss icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/checkbox/LabeledCheckbox.kt Switch check icon to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/button/ButtonSize.kt Add per-size padding + updated heights
designsystem/src/main/java/com/mindera/alfie/designsystem/component/bottomcard/BottomCard.kt Replace background usage away from MaterialTheme defaults
designsystem/src/main/java/com/mindera/alfie/designsystem/component/bottombar/BottomBar.kt Switch preview icons to AlfieIcons
designsystem/src/main/java/com/mindera/alfie/designsystem/component/accordion/Accordion.kt Switch chevron icon to AlfieIcons
designsystem/src/main/assets/design_tokens/sizing.alfie-theme.tokens.json Add sizing token collection JSON
designsystem/src/main/assets/design_tokens/manifest.json Add token manifest describing collections/modes
designsystem/src/main/assets/design_tokens/.cycle-allowlist.json Add token-cycle allowlist metadata
designsystem/src/main/assets/design_tokens/.broken-ref-allowlist.json Add broken-reference allowlist metadata
designsystem/build.gradle.kts Exclude generated token Kotlin from detekt
designsystem/.gitignore Ignore generated font/icon asset directories
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/screen/model/DebugScreenOpUI.kt Switch default icon to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/screen/DebugScreenOp.kt Switch chevron icon to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/TagScreen.kt Switch tag icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/SortByScreen.kt Switch sort-by icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/SnackbarScreen.kt Switch snackbar icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/ShimmerScreen.kt Switch shimmer screen icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/SegmentedControlScreen.kt Switch segmented control icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/ScrollableTabScreen.kt Switch tab icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/InputScreen.kt Switch support/chevron icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/FixedTabScreen.kt Switch fixed-tab icons to AlfieIcons
debug/operational/src/main/java/com/mindera/alfie/debug/operational/view/catalog/screen/ButtonScreen.kt Add Destructive button demo + switch icons to AlfieIcons

Comment thread designsystem/src/main/java/com/mindera/alfie/designsystem/tokens/NewTheme.kt Outdated
@hoangnhatdrk hoangnhatdrk self-assigned this Jul 1, 2026

@amccall-mindera amccall-mindera left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving the design-token integration + Button migration (ALFMOB-275/278/279/280/282/425). Verified the Button refactor sources all visual properties from the token layer via ButtonType.colorSpec() and the per-size padding on ButtonSize; the new Destructive variant and existing call-site signatures check out. Two items were raised and cleared: the Dark search-variant icon change is moot (no dark theme support), and dropping the MaterialTheme typography/shapes mapping in Theme() is intentional per the NewTheme facade migration (confirmed with the author). Prior Copilot threads reviewed.

@hoangnhatdrk hoangnhatdrk added this pull request to the merge queue Jul 1, 2026
Merged via the queue into main with commit 39f59e7 Jul 1, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants