Skip to content

themes todo

Jump to bottom
ControleOnline DevOps edited this page Aug 24, 2026 · 4 revisions

### ### MODULOS / ARQUIVOS HARDCODED ### ###

ui-common

  • src/react/components/AddImportModal.js
  • src/react/components/AddImportModal.styles.js
  • src/react/components/BottomNavigationBar.js
  • src/react/components/BottomNavigationBar.styles.js
  • src/react/components/CategoryForm.js
  • src/react/components/CategoryForm.styles.js
  • src/react/components/ContextHelpButton.js
  • src/react/components/ContextHelpButton.styles.js
  • src/react/components/DefaultProvider.native.js
  • src/react/components/DefaultProvider.web.js
  • src/react/components/EntityLogContent.js
  • src/react/components/EntityLogContent.styles.js
  • src/react/components/LinkedOrderProductsTab.js
  • src/react/components/LinkedOrderProductsTab.styles.js
  • src/react/components/UnifiedPaymentBar.js
  • src/react/components/UnifiedPaymentBar.styles.js
  • src/react/components/WebsocketListener.native.js
  • src/react/components/inputs/IdInput.js
  • src/react/components/inputs/IdInput.styles.js
  • src/react/components/inputs/InvoiceDueDateFilterInput.js
  • src/react/components/inputs/InvoiceDueDateFilterInput.styles.js
  • src/react/components/inputs/InvoiceDueDateRangeFilterInput.js
  • src/react/components/inputs/InvoiceDueDateRangeFilterInput.styles.js
  • src/react/components/lists/SelectList.styles.js
  • src/react/components/radio/Spotify.styles.js
  • src/react/components/radio/YouTube.styles.js
  • src/react/pages/EntityLogPage.styles.js
  • src/react/pages/GenericLogPage.js
  • src/react/pages/GenericLogPage.styles.js
  • src/react/pages/Imports.js
  • src/react/pages/Imports.styles.js
  • src/react/pages/SettingsPage/index.js
  • src/react/pages/SettingsPage/index.styles.js
  • src/react/pages/SettingsPage/PaymentTypesByWalletTab.js

ui-crm

  • src/react/components/AnimatedModal.styles.js
  • src/react/components/CreateContractModal.js
  • src/react/components/CreateContractModal.styles.js
  • src/react/pages/comissions/index.js
  • src/react/pages/comissions/index.styles.js
  • src/react/pages/crm/conversation.js
  • src/react/pages/crm/conversation.styles.js
  • src/react/pages/crm/index.js
  • src/react/pages/crm/index.styles.js
  • src/react/pages/home/index.js
  • src/react/pages/home/index.styles.js
  • src/react/pages/proposals/CreateProposalsModal.js
  • src/react/pages/proposals/CreateProposalsModal.styles.js
  • src/react/pages/proposals/index.js
  • src/react/pages/proposals/index.styles.js
  • src/react/pages/proposals/ProposalDetails.js
  • src/react/pages/proposals/ProposalDetails.styles.js
  • src/react/pages/settings/GeneralSettings.js
  • src/react/pages/settings/GeneralSettings.styles.js
  • src/react/pages/settings/sections/CrmSection.js
  • src/react/pages/settings/sections/DeviceRuntimeFooterSection.js
  • src/react/pages/settings/sections/DisplayPreparationSection.js
  • src/react/pages/settings/sections/IntegrationsSection.js
  • src/react/pages/settings/sections/LoginSection.js
  • src/react/pages/settings/sections/LogSection.js
  • src/react/pages/settings/sections/MaintenanceSection.js
  • src/react/pages/settings/sections/MapsSection.js
  • src/react/pages/settings/sections/MenuCatalogSection.js
  • src/react/pages/settings/sections/OperationsSection.js
  • src/react/pages/settings/sections/OrderPaymentSection.js
  • src/react/pages/settings/sections/OrderPrintSection.js
  • src/react/pages/settings/sections/ShopSection.js

ui-customers

  • src/react/components/tabs/AddressesTab.js

  • src/react/components/tabs/ContactTab.js

  • src/react/components/tabs/ContactTab.styles.js

  • src/react/components/tabs/DocumentsTab.js

  • src/react/components/tabs/DocumentsTab.styles.js

  • src/react/components/tabs/EmployeesTab.js

  • src/react/components/tabs/EmployeesTab.styles.js

  • src/react/components/tabs/GeneralTab.js

  • src/react/components/tabs/GeneralTab.styles.js

  • src/react/components/tabs/ProductsTab.js

  • src/react/components/tabs/ProductsTab.styles.js

  • src/react/components/tabs/SalesmanTab.js

  • src/react/components/tabs/UsersTab.js

  • src/react/components/tabs/UsersTab.styles.js

  • src/react/pages/details.js

  • src/react/pages/details.page.styles.js

  • src/react/styles/details.js

  • src/react/components/tabs/SalesmanTab.js

  • src/react/components/tabs/EmployeesTab.js

  • src/react/styles/details.js

  • linha cards de vendedores e contatos com botao lapis

  • antes: vendedor usava chevron-right simples e contato/vendedor mantinham paddingRight 16, deixando a acao recuada em relacao ao +

  • depois: vendedor e contato usam Feather edit-2 no iconButtonGhost e listItemWithEndAction com paddingRight 0 para alinhar ao limite direito do +

  • src/react/components/tabs/SalesmanTab.js

  • src/react/components/tabs/EmployeesTab.js

  • linha avatar dos cards de vendedores e contatos

  • antes: UserAvatar recebia apenas name, entao mesmo pessoas/empresas com midia cadastrada em people_media caiam para iniciais

  • depois: contatos buscam people_media mediaType.type=avatar e vendedores buscam mediaType.type=logo, passando imageUrl para UserAvatar com fallback para iniciais

  • src/react/pages/details.js

  • linha avatar do header da client-details

  • antes: UserAvatar recebia apenas name, entao contato/empresa aberta no detalhe caia para iniciais mesmo com people_media

  • depois: header busca people_media mediaType.type=avatar para PF e logo para PJ, passando imageUrl para UserAvatar com fallback para iniciais

  • src/react/components/tabs/DocumentsTab.js

  • src/react/components/tabs/DocumentsTab.styles.js

  • linha botao Salvar do modal de documentos

  • antes: Salvar usava inlineStyle_353_14/inlineStyle_360_20 com '#007bff' e '#fff'

  • depois: Salvar usa customStyles.saveButton/saveButtonText e icone buttonIcon, seguindo o padrao do client-details

ui-dashboard

  • src/react/components/operationalInsights/OperationalInsightsAbcCard.js
  • src/react/components/operationalInsights/shared.js
  • src/react/components/weeklyComparison/WeekdayComparisonCard.js
  • src/react/pages/ReportPage.js
  • src/react/pages/ReportPage.styles.js

ui-default

  • src/react/components/filters/CompactFilterSelector.js

  • src/react/components/filters/DateShortcutFilter.js

  • src/react/components/filters/DefaultColumnFilter.js

  • src/react/components/filters/DefaultColumnFilter.styles.js

  • src/react/components/filters/DefaultExternalFilters.js

  • src/react/components/filters/DefaultExternalFilters.styles.js

  • src/react/components/filters/DefaultSearch.js

  • src/react/components/filters/DefaultSearch.styles.js

  • src/react/components/form/DefaultForm.js

  • src/react/components/form/DefaultForm.styles.js

  • src/react/components/help/DefaultTooltip.js

  • src/react/components/help/DefaultTooltip.styles.js

  • src/react/components/errors/DefaultErrors.js

  • src/react/components/inputs/DefaultInput.js

  • src/react/components/inputs/DefaultInput.styles.js

  • src/react/components/inputs/DefaultSelect.js

  • src/react/components/inputs/DefaultSelect.styles.js

  • src/react/components/map/DefaultGoogleMap.styles.js

  • src/react/components/map/DefaultGoogleMap.web.js

  • src/react/components/map/DefaultMap.native.js

  • src/react/components/map/DefaultMap.shared.js

  • src/react/components/map/DefaultMap.styles.js

  • src/react/components/map/DefaultMap.web.js

  • src/react/components/map/DefaultNativeMap.native.js

  • src/react/components/map/DefaultNativeMap.shared.js

  • src/react/components/map/DefaultNativeMap.styles.js

  • src/react/components/errors/DefaultErrors.js

  • linha 36-107, 185-334

  • antes: modal de erro resolvia cor por pickThemeColor com fallback '#DC2626', '#FFFFFF', 'rgba(...)', '#B91C1C' e '#334155', e o botao retry usava transparência local

  • depois: modal usa apenas themeStore.getters.colors com inputErrorBorder, inputErrorText, modalBackground, modalBorder, modalOverlay, modalText, modalCloseIcon, buttonBackground, buttonBorder e buttonText

  • src/react/components/form/DefaultForm.js

  • linha 57-84, 162-209

  • antes: form usava accentColor='#2563EB' como default do botao primario e styles estaticos sem palette do tema

  • depois: form monta palette a partir de themeStore.getters.colors e usa buttonBackground, buttonBackgroundSecondary, buttonBorderSecondary, buttonDisabledBackground, buttonDisabledText, buttonText, buttonTextSecondary, dividerBorder e textSecondary

  • src/react/components/form/DefaultForm.styles.js

  • linha 3-75

  • antes: emptyText, actions, secondaryButton e primaryButtonText usavam '#64748B', '#E2E8F0', '#CBD5E1', '#FFFFFF', '#334155' e opacity fixa 0.62

  • depois: createStyles(palette) usa textSecondary, dividerBorder, buttonBorderSecondary, buttonBackgroundSecondary, buttonTextSecondary, buttonDisabledBackground, buttonDisabledText e buttonText

  • src/react/components/help/DefaultTooltip.js

  • src/react/components/help/DefaultTooltip.styles.js

  • linha DefaultTooltip 8-43, 64-95; DefaultTooltip.styles 3-59

  • antes: tooltip usava accentColor com fallback '#0EA5E9', background derivado por transparencia local, overlay 'rgba(15, 23, 42, 0.55)', card '#FFFFFF' e mensagem '#334155'

  • depois: tooltip monta palette via themeStore.getters.colors e usa iconInfo, iconBackground, iconDisabled, buttonBackground, buttonBorder, buttonDisabledBackground, buttonIcon, modalBackground, modalBorder, modalHeaderText, modalOverlay e modalText; fechamento da janela usa Feather x

  • src/react/components/table/DefaultTable.styles.js

  • linha 531-537

  • antes: footerCountPill mantinha backgroundColor '#EFF6FF' como fallback local no contador do rodape

  • depois: footerCountPill preserva apenas layout; a cor final do contador vem somente de themeColors.badgeBackground em DefaultTable.js

ui-financial

  • src/react/pages/FinancialEntriesPage.js
  • src/react/pages/FinancialEntriesPage.styles.js
  • src/react/pages/InvoiceCategoriesPage.js
  • src/react/pages/InvoiceCategoriesPage.styles.js
  • src/react/pages/InvoiceDetailsPage.js
  • src/react/pages/InvoiceDetailsPage.styles.js
  • src/react/pages/WalletsPage.js
  • src/react/pages/WalletsPage.styles.js
  • src/react/pages/reports/IncomeStatement (ui-manager).js
  • src/react/pages/reports/IncomeStatement (ui-manager).styles.js
  • src/react/pages/reports/IncomeStatement.js
  • src/react/pages/reports/IncomeStatement.styles.js

ui-layout

  • src/react/App.js
  • src/react/App.styles.js
  • src/react/components/AppMenuGrid.styles.js
  • src/react/layouts/DefaultLayout.styles.js
  • src/react/styles/global.js

ui-logistic

  • src/react/pages/companies/index.js
  • src/react/pages/delivery-rates/DeliveryRateTableCompaniesPage.js
  • src/react/pages/delivery-rates/DeliveryRateTableEditor.js
  • src/react/pages/delivery-rates/DeliveryRateTableFormPage.js
  • src/react/pages/delivery-rates/DeliveryRateTablesPage.js
  • src/react/pages/delivery-rates/DeliveryRateVersionPage.js
  • src/react/pages/delivery-rates/DeliveryRateHistoryPage.js
  • src/react/pages/delivery-rates/DeliveryVehicleSetupPage.js
  • src/react/pages/delivery-rates/styles.js
  • src/react/pages/deliveryList.styles.js
  • src/react/pages/home/index.js
  • src/react/pages/home/index.styles.js
  • src/react/pages/orders/DeliveryAcceptanceCard.js
  • src/react/pages/orders/DeliveryRouteProgressCard.js
  • src/react/pages/orders/OrderLogisticsPage.js
  • src/react/pages/orders/index.js
  • src/react/pages/orders/index.styles.js
  • src/react/pages/orders/orderLogisticsPage.styles.js
  • src/react/pages/presence/DeliveryCourierPresencePage.js
  • src/react/pages/presence/DeliveryCourierScheduleFormPage.js
  • src/react/pages/presence/DeliveryCourierSchedulesPage.js
  • src/react/pages/receivables/index.js

ui-manager

  • src/react/components/NetworkPrinterPreviewModal.js
  • src/react/components/NetworkPrinterPreviewModal.styles.js
  • src/react/pages/ConfiguratorPage.styles.js
  • src/react/pages/DeviceDetailPage.js
  • src/react/pages/DeviceDetailPage.styles.js
  • src/react/pages/Devices/deviceTypes/shared.js
  • src/react/pages/EntranceDeliveryRates/
  • src/react/pages/Food99IntegrationPage/index.js
  • src/react/pages/Food99IntegrationPage/styles.js
  • src/react/pages/Food99IntegrationPage/utils.js
  • src/react/pages/IFoodIntegrationPage/index.js
  • src/react/pages/IFoodIntegrationPage/styles.js
  • src/react/pages/IncomeStatment.js
  • src/react/pages/IncomeStatment.styles.js
  • src/react/pages/Integrations.js
  • src/react/pages/Integrations.styles.js
  • src/react/pages/IntegrationConfigPage.js
  • src/react/pages/IntegrationConfigPage.styles.js
  • src/react/pages/LabelsPage.js
  • src/react/pages/LabelsPage.styles.js
  • src/react/pages/ManagerCategoriesPage.js
  • src/react/pages/ManagerCategoriesPage.styles.js
  • src/react/pages/ManagerOrderNotificationsPage.js
  • src/react/pages/MenuAccessConfigPage.js
  • src/react/pages/MenuAccessConfigPage.styles.js
  • src/react/pages/MenuCostsPage/index.styles.js
  • src/react/pages/MenuCostsPurchasesPage/index.js
  • src/react/pages/MenuCostsPurchasesPage/styles.js
  • src/react/pages/ModelTemplatesPage.js
  • src/react/pages/ModelTemplatesPage.styles.js
  • src/react/pages/PdvPage.js
  • src/react/pages/PdvPage.styles.js
  • src/react/pages/PrinterDeviceDetailPage.js
  • src/react/pages/PrinterDeviceDetailPage.styles.js
  • src/react/pages/PrinterDeviceFormPage.js
  • src/react/pages/PrinterDeviceFormPage.styles.js
  • src/react/pages/presence/DeliveryPresenceInboxPage.js
  • src/react/pages/ThemeManagerPage.js
  • src/react/pages/ThemeManagerPage.styles.js
  • src/react/pages/ThemePreviewPage.js
  • src/react/pages/ThemePreviewPage.styles.js
  • src/react/pages/TranslationsReviewPage.js
  • src/react/pages/TranslationsReviewPage.styles.js
  • src/react/pages/WhatsAppConnectionPage.js
  • src/react/pages/WhatsAppConnectionPage.styles.js
  • src/react/utils/integrationPage.js

ui-orders

  • src/react/components/BottomCart.js
  • src/react/components/BottomCart.styles.js
  • src/react/components/cart/BottomCart.js
  • src/react/components/cart/BottomCart.styles.js
  • src/react/components/cart/Calculate.js
  • src/react/components/cart/Calculate.styles.js
  • src/react/components/cart/ProductQuantity.js
  • src/react/components/cart/ProductTotem.js
  • src/react/components/LinkedOrderCameraScanner.js
  • src/react/components/LinkedOrderCameraScanner.styles.js
  • src/react/components/LinkedOrderEntrySheet.js
  • src/react/components/LinkedOrderEntrySheet.styles.js
  • src/react/components/LinkedOrderNfcScanner.js
  • src/react/components/LinkedOrderNfcScanner.native.js
  • src/react/components/OrderHeader.js
  • src/react/components/OrderHeader.styles.js
  • src/react/components/OrderProducts.js
  • src/react/components/OrderProducts.styles.js
  • src/react/components/OrderProducts.utils.js
  • src/react/components/PayableToolbar.js
  • src/react/components/PayableToolbar.styles.js
  • src/react/components/PaymentCheckoutPanel.js
  • src/react/components/PaymentCheckoutPanel.styles.js
  • src/react/components/PrintButton.js
  • src/react/pages/CashRegister/CloseCashRegister.js
  • src/react/pages/CashRegister/CloseCashRegister.styles.js
  • src/react/pages/CashRegister/index.js
  • src/react/pages/CashRegister/index.styles.js
  • src/react/pages/CashRegister/Withdrawal.js
  • src/react/pages/CashRegister/Withdrawal.styles.js
  • src/react/pages/checkout/BarcodeCheckReader.js
  • src/react/pages/checkout/BarcodeCheckReader.styles.js
  • src/react/pages/checkout/BarcodeInput.js
  • src/react/pages/checkout/BarcodeInput.styles.js
  • src/react/pages/checkout/Checkout.js
  • src/react/pages/checkout/Checkout.styles.js
  • src/react/pages/checkout/LinkedOrderSettlementPage.js
  • src/react/pages/checkout/LinkedOrderSettlementPage.styles.js
  • src/react/pages/home/index.styles.js
  • src/react/pages/inventory/index.styles.js
  • src/react/pages/orders/OrderDetailsPage.js
  • src/react/pages/orders/OrderHistoryPage.js
  • src/react/pages/orders/OrderHistoryPage.styles.js
  • src/react/pages/orders/purchasing/MenuCostsPurchasesPage.js
  • src/react/pages/orders/purchasing/MenuCostsPurchasesPage.styles.js
  • src/react/pages/orders/purchasing/Suggestion.styles.js
  • src/react/pages/orders/sales/OrderItemsTab.js
  • src/react/pages/orders/sales/components/OrderAttachmentManager.js
  • src/react/pages/orders/sales/components/OrderAttachmentManager.styles.js
  • src/react/pages/orders/sales/components/OrderMarketplaceActionBar.js
  • src/react/pages/orders/sales/components/OrderMarketplaceSummary.js
  • src/react/pages/orders/sales/components/OrderTopBarActions.js
  • src/react/pages/orders/sales/orderDetails.js
  • src/react/pages/orders/sales/orderDetails.styles.js
  • src/react/services/Cielo/Checkout.styles.js
  • src/react/services/InfinitePay/Checkout.styles.js
  • src/react/router/routes.js
  • src/react/css/orders.js

ui-people

  • src/react/components/AddCompanyModal.js
  • src/react/components/AddCompanyModal.styles.js
  • src/react/components/address/PeopleAddressesPanel.js
  • src/react/pages/People.js
  • src/react/pages/People.styles.js
  • src/react/css/people.js
  • src/store/people/customActions.js

ui-ppc

  • src/react/components/AppearanceToggle.styles.js
  • src/react/components/DisplayCard.js
  • src/react/components/DisplayCard.styles.js
  • src/react/components/QueueBlock.styles.js
  • src/react/pages/queues/QueueAddProducts.js
  • src/react/pages/displays/DisplayDetails.test.js
  • src/react/pages/displays/OrderProductsPreviewModal.test.js
  • src/react/pages/displays/displayPage.js
  • src/react/pages/displays/orders/DisplayDeliveryMap.js
  • src/react/pages/displays/orders/DisplayDeliveryMap.native.js
  • src/react/pages/displays/orders/DisplayDeliveryMap.shared.js
  • src/react/pages/displays/orders/DisplayDeliveryMap.styles.js
  • src/react/pages/displays/orders/DisplayOrderConference.js
  • src/react/pages/displays/orders/DisplayOrderConference.styles.js
  • src/react/pages/displays/orders/orderConference.js
  • src/react/pages/displays/orders/operationalInsights.utils.js
  • src/react/pages/displays/orders/index.styles.js
  • src/react/pages/displays/products/Status/Working.js
  • src/react/pages/displays/products/Status/status.styles.js
  • src/react/pages/displays/products/index.styles.js
  • src/react/theme/displayTheme.js
  • src/react/theme/ppcTheme.js

ui-products

  • src/react/components/AttachmentManager.js
  • src/react/components/AttachmentManager.styles.js
  • src/react/components/InventoryForm.js
  • src/react/components/InventoryForm.styles.js
  • src/react/components/MarketplaceSyncIndicators.js
  • src/react/components/MarketplaceSyncIndicators.styles.js
  • src/react/components/ProductFeedStock.js
  • src/react/components/ProductFeedStock.styles.js
  • src/react/components/ProductForm.js
  • src/react/components/ProductForm.styles.js
  • src/react/components/ProductGroupProducts.js
  • src/react/components/ProductGroupProducts.styles.js
  • src/react/components/ProductGroups.js
  • src/react/components/ProductGroups.styles.js
  • src/react/components/ProductPricingModal.js
  • src/react/components/ProductPricingModal.styles.js
  • src/react/components/ProductReferenceLink.js
  • src/react/components/ProductSalesTab.js
  • src/react/components/ProductSalesTab.styles.js
  • src/react/components/ProductStockForm.js
  • src/react/components/ProductStockForm.styles.js
  • src/react/components/ProductSupplierRelationModal.js
  • src/react/components/ProductSupplierRelationModal.styles.js
  • src/react/components/ProductSuppliersTab.js
  • src/react/components/ProductSuppliersTab.styles.js
  • src/react/components/products/Carousel.js
  • src/react/components/products/ProductItem.js
  • src/react/components/products/ProductItem.styles.js
  • src/react/pages/Categories.js
  • src/react/pages/Categories.styles.js
  • src/react/pages/CustomizeScreen.styles.js
  • src/react/pages/Inventories.js
  • src/react/pages/Inventories.styles.js
  • src/react/pages/InventoryDetail.js
  • src/react/pages/InventoryDetail.styles.js
  • src/react/pages/InventoryMovements.js
  • src/react/pages/InventoryMovements.styles.js
  • src/react/pages/ProductDetails.js
  • src/react/pages/ProductDetails.styles.js
  • src/react/pages/Products.js
  • src/react/pages/Products.styles.js
  • src/react/pages/PurchaseForm.js
  • src/react/pages/PurchaseForm.styles.js
  • src/react/pages/PurchaseSuggestions.js
  • src/react/pages/PurchaseSuggestions.styles.js
  • src/react/router/routes.js
  • src/react/css/products.js

ui-report

  • src/react/components/operationalInsights/OperationalInsightsAbcCard.js
  • src/react/components/operationalInsights/shared.js
  • src/react/components/weeklyComparison/WeekdayComparisonCard.js
  • src/react/pages/ReportPage.js
  • src/react/pages/ReportPage.styles.js

ui-shop

  • src/react/components/storefront/ShopBottomCart.styles.js
  • src/react/components/storefront/ShopCartAside.styles.js
  • src/react/components/storefront/ShopCategorySidebar.js
  • src/react/components/storefront/ShopFeatureState.js
  • src/react/components/storefront/ShopGoogleMap.styles.js
  • src/react/components/storefront/ShopHomeEntryControls.js
  • src/react/components/storefront/ShopMobileCatalog.styles.js
  • src/react/components/storefront/ShopMobileCategorySelector.styles.js
  • src/react/components/storefront/ShopMobileStoreHeader.styles.js
  • src/react/components/storefront/ShopNativeMap.styles.js
  • src/react/components/storefront/ShopPaymentBar.styles.js
  • src/react/components/storefront/ShopProductCard.styles.js
  • src/react/components/storefront/ShopQuantityControl.js
  • src/react/components/storefront/ShopShell.js
  • src/react/components/storefront/ShopShell.styles.js
  • src/react/components/ShopToolbar.styles.js
  • src/react/pages/CartPage.styles.js
  • src/react/pages/CardsPage.js
  • src/react/pages/CardsPage.styles.js
  • src/react/pages/CheckoutPage.js
  • src/react/pages/CheckoutPage.styles.js
  • src/react/pages/home/index.js
  • src/react/pages/home/index.styles.js
  • src/react/pages/OrdersPage.styles.js
  • src/react/pages/ProductPage.js
  • src/react/pages/ProfilePage.styles.js
  • src/react/pages/ShopCatalogPage.js
  • src/react/pages/ShopDownloadPage.js
  • src/react/pages/ShopFranchiseLocatorPage.js
  • src/react/pages/ShopLoyaltyPage.js
  • src/react/utils/shop.js

ui-support

  • src/react/pages/home/index.styles.js

### ### MODULOS / ARQUIVOS CORRIGIDOS ### ###

ui-financial

  • src/react/pages/InvoiceCategoriesPage.js

  • linha 213-215

  • antes: botao "Nova categoria" usava palette.primary e icone/texto com '#fff' hardcoded

  • depois: botao usa themeStore.getters.colors com buttonBackground, buttonIcon e buttonText

  • src/react/pages/InvoiceCategoriesPage.styles.js

  • linha 17

  • antes: addBtnText fixava color '#fff' no style estatico

  • depois: addBtnText preserva apenas tipografia; a cor vem de themeStore.getters.colors.buttonText no JSX

  • src/react/pages/WalletsPage.js

  • linha 308-317

  • antes: botao "Nova carteira" usava withOpacity(palette.primary), icone/texto em palette.primary e formato secundario

  • depois: botao usa o mesmo formato do "Nova categoria" com themeStore.getters.colors.buttonBackground, buttonIcon e buttonText

  • src/react/pages/WalletsPage.styles.js

  • linha 22-30

  • antes: addBtn fixava formato secundario com borderWidth/backgroundColor '#FFFFFF' e addBtnText fixava color '#64748B'

  • depois: addBtn/addBtnText preservam o formato do "Nova categoria"; as cores vem do tema no JSX

  • src/react/pages/WalletsPage.js

  • linha 344-378

  • antes: botoes link/editar/trash usavam icones '#64748B'/'#c10015' e borda danger '#FCA5A5' hardcoded

  • depois: botoes link/editar/trash usam o mesmo padrao de cores do "Nova categoria" com buttonBackground e buttonIcon

  • src/react/pages/WalletsPage.styles.js

  • linha 52-55

  • antes: iconBtn fixava borderColor '#E2E8F0' e backgroundColor '#F8FAFC'

  • depois: iconBtn preserva apenas layout; as cores vem de themeStore.getters.colors no JSX

app-community

  • src/styles/branding.js

  • linha 142-155

  • antes: resolveThemePalette derivava footerBackground, footerBorder, footerIcon, footerLink e footerText a partir do tema oficial do DOMAIN

  • depois: resolveThemePalette nao deriva tokens de footer; sem fallback para footer

  • themes/themes-new.md

  • linha 33-37, 71-76, 206-210, 294-299

  • antes: tokens footer* vazios no json consolidado e navigationIcon/navigationShadow/navigationDisabled* sem proposta operacional

  • depois: footer* preenchidos para proposta de tema e navigationIcon/navigationShadow/navigationDisabled* registrados para a navegacao inferior

  • themes/themes-map.md

  • linha 88-102, 151-163

  • antes: nao existiam tokens especificos para o fundo do wrapper de icone dentro e fora de card

  • depois: mapa canonico passa a ter cardIconBackground e iconBackground

  • themes/themes-new.md

  • linha 75-83, 121-129

  • antes: proposta consolidada ainda nao trazia cardIconBackground e iconBackground

  • depois: proposta passa a registrar cardIconBackground e iconBackground para ajuste no tema

ui-layout

  • src/react/components/AppMenuGrid.js

  • linha 15-136

  • antes: grid de menus calculava tom dos icones com variacao local e transparência derivada por withAlpha

  • depois: grid de menus usa iconBackground fora de card, cardIconBackground dentro de card e iconColor na cor do icone

  • src/react/components/AppMenuGrid.styles.js

  • linha 3-116

  • antes: sectionIcon e cardIcon dependiam de withAlpha(actionText, ...) e background translúcido local

  • depois: sectionTone usa iconBackground e segmentTone usa cardIconBackground, sem transparencia local

ui-manager

  • src/react/pages/ThemeManagerPage.js

  • linha 220-303

  • antes: editor de tema nao listava cardIconBackground e iconBackground

  • depois: editor passa a listar cardIconBackground no bloco card e iconBackground no bloco icon

  • src/react/pages/ThemePreviewPage.js

  • linha 74-94

  • antes: preview default nao tinha cardIconBackground e iconBackground

  • depois: preview default registra cardIconBackground e iconBackground para demonstracao e edicao

  • src/react/pages/home/index.js

  • linha 50-68, 193-255

  • antes: home misturava withOpacity local e usava actionBackground nos icones dos cards

  • depois: home usa textMuted/textSecondary do tema, cardIconBackground nos wrappers internos e iconColor nos icones

  • src/react/pages/home/index.styles.js

  • linha 4-14, 70-107

  • antes: banner e cards da home usavam withOpacity no boxShadow, no actionSub e no fundo do icone estatistico

  • depois: home usa cardShadow/buttonShadow do tema para sombra web e cardIconBackground nos wrappers de icone dentro dos cards

  • src/react/pages/PdvPage.js

  • linha 12-87

  • antes: botao de liquidacao no header com borderColor '#BFDBFE', backgroundColor '#EFF6FF' e icon/text '#0369A1' hardcoded

  • depois: botao de liquidacao usando themeStore.getters.colors com buttonBackgroundSecondary, buttonBorderSecondary, buttonIconSecondary e buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 1808-1845

  • antes: abas PDV usavam withOpacity(brandColors.primary), brandColors.primary e '#64748B' para ativo/inativo

  • depois: aba ativa usa buttonBackground/buttonBorder/buttonIcon/buttonText; abas inativas usam buttonBackgroundSecondary/buttonBorderSecondary/buttonIconSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.styles.js

  • linha 72-87

  • antes: tabButton fixava borderColor 'transparent', backgroundColor '#F8FAFC' e tabButtonText fixava color '#64748B'

  • depois: tabButton/tabButtonText preservam apenas layout e tipografia; as cores vem de themeStore.getters.colors no JSX

  • src/react/pages/DeviceDetailPage.js

  • linha 1918-1931

  • antes: botoes Comanda/Garçom/Totem/Single Item Sale/Caixa herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes Comanda/Garçom/Totem/Single Item Sale/Caixa passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 196-240, 1722-1750, 1990-2021

  • antes: botoes None/Tab/Table/Stamp herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes None/Tab/Table/Stamp passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 2116-2130

  • antes: botoes Pedido/Fichas herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes Pedido/Fichas passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 2141-2160

  • antes: botoes Abertura e fechamento de caixa/Fechamento diario herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes Abertura e fechamento de caixa/Fechamento diario passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 2244-2258

  • antes: botoes Nenhum/Infinite Pay/Cielo herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes Nenhum/Infinite Pay/Cielo passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha 2330-2355

  • antes: botoes Somente deste device/Todos da empresa herdavam optionButton com cores hardcoded para estado ativo e inativo

  • depois: botoes Somente deste device/Todos da empresa passam optionColors; selecionado usa buttonBackground/buttonBorder/buttonText e demais usam buttonBackgroundSecondary/buttonBorderSecondary/buttonTextSecondary

  • src/react/pages/DeviceDetailPage.js

  • linha switches do device-detail

  • antes: switches da tela eram TouchableOpacity com icones toggle-left/toggle-right e cores hex/brandColors para ligado/desligado

  • depois: switches usam o componente Switch nativo com switchOnTrack, switchOffTrack, switchOnThumb, switchOffThumb, switchDisabledTrack e switchDisabledThumb

  • src/react/pages/DeviceDetailPage.styles.js

  • linha toggleRow/toggleRowLabel/toggleRowValue

  • antes: estilos dos switches fixavam borderColor/backgroundColor/textos e estado ativo com sucesso hardcoded

  • depois: estilos preservam apenas layout; cores de linha e textos entram por listItemBackground, listItemBorder, listItemText e listItemSubtitleText no JSX

  • src/react/pages/DeviceDetailPage.js

  • linha 2618-2633

  • antes: botao Limpar cache de produtos usava background '#0EA5E9', icone trash-2 tamanho 14 e cor '#fff'

  • depois: botao usa o padrao de cor/icone dos botoes de acao da carteira com buttonBackground, buttonIcon, buttonText e icone Feather trash-2 tamanho 16

  • src/react/pages/DeviceDetailPage.styles.js

  • linha configButton/configButtonText

  • antes: configButton/configButtonText fixavam backgroundColor '#0EA5E9' e texto '#fff'

  • depois: estilos preservam apenas layout; cores entram por themeStore.getters.colors no JSX

  • src/react/pages/DeviceDetailPage.styles.js

  • linha editAliasBtn

  • antes: botao de edicao do alias usava 26x26, borderRadius 13 e backgroundColor '#E2E8F0'

  • depois: botao de edicao do alias usa o mesmo formato dos botoes de acao da carteira: 34x34, borderRadius 8, borderWidth 1; cores e icone edit-2 vem do JSX com buttonBackground/buttonIcon

  • src/react/pages/DeviceDetailPage.js

  • linha renderHelpButton

  • antes: botoes de ajuda "?" usavam accentColor brandColors.primary e formato padrao pequeno do DefaultTooltip

  • depois: botoes de ajuda "?" usam o mesmo formato dos botoes de acao da carteira: 34x34, borderRadius 8, buttonBackground e buttonIcon

  • src/react/pages/ConfiguratorPage.js

  • linha 12-169

  • antes: tela montava o tema no componente, mas mantinha hero/cards dependentes de style estatico com fallback local e icones usando mapa semantico diferente do combinado

  • depois: tela usa resolveConfiguratorColors + createStyles(configuratorColors), com cardIconBackground nos wrappers internos e iconColor nos icones

  • src/react/pages/ConfiguratorPage.styles.js

  • linha 1-119

  • antes: hero, cards e textos usavam colors.js e opacidades locais como fonte final de cor

  • depois: createStyles(palette) recebe a paleta resolvida da tela e aplica actionBackground, actionText, cardBackground, cardBorder, cardIconBackground, cardText e mutedText sem hardcode local

ui-crm

  • src/react/pages/settings/GeneralSettings.js

  • linha 11-15, 138-155, 254-294

  • antes: general-settings resolvia palette com resolveThemePalette + defaultThemeColors + currentCompany.theme.colors e dependia de styles estaticos

  • depois: general-settings usa buildGeneralSettingsPalette(themeStore.getters.colors) + useGeneralSettingsStyles(), sem currentCompany.theme e sem fallback local

  • src/react/pages/settings/GeneralSettingsSection.js

  • linha 10-24, 26-45

  • antes: card da secao usava styles estaticos e tooltip com accentColor vindo de colors.js

  • depois: secao usa useGeneralSettingsStyles() e tooltip com accentColor vindo de themeStore.getters.colors.info

  • src/react/pages/settings/GeneralSettingsSection.js

  • linha 40-41

  • antes: botoes de ajuda (?) do general-settings usavam accentColor vindo de themeStore.getters.colors.info

  • depois: botoes de ajuda (?) do general-settings usam accentColor vindo de themeStore.getters.colors.iconInfo

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha 10-562

  • antes: pageTitle, tabBar, cards, inputs, listas, modal e chips do general-settings dependiam de #HEX e transparent locais

  • depois: buildGeneralSettingsPalette/createGeneralSettingsStyles/useGeneralSettingsStyles leem apenas tokens canonicos como navigation*, card*, input*, listItem*, modal*, badge* e text*

  • src/react/pages/settings/GeneralSettings.styles.js, src/react/pages/settings/GeneralSettings.js, src/react/pages/settings/GeneralSettingsSection.js, src/react/pages/settings/sections/ShopSection.js

  • linha hooks e leituras de palette

  • antes: general-settings lia apenas themeStore.getters.colors, entao alguns icones da shop caiam no preto padrao quando a cor existia apenas em currentCompany.theme.colors no banco

  • depois: general-settings passa a mesclar themeStore.getters.colors com currentCompany.theme.colors antes de montar a palette, refletindo iconActive e iconDisabled da empresa ativa

  • src/react/pages/settings/sections/*.js

  • linha icones de secao, chips, seletores, loading e placeholders

  • antes: abas fora da shop ainda misturavam localStyles estatico, HEX hardcoded, wrappers de icone por cor local, chips verdes/vermelhos fixos, seletores azuis/roxos fixos e placeholder/loading fora do tema

  • depois: demais abas do general-settings usam useGeneralSettingsStyles/useGeneralSettingsPalette com cardIconBackground/cardIconColor, badgeSelectedText/badgeDisabledText, iconActive/iconDisabled, loadingSpinner e inputPlaceholderText

  • DOCS/themes/themes-patterns.md

  • linha 1-93

  • antes: nao existia documento global consolidando o map por papel visual

  • depois: themes-patterns.md registra o padrao global de contador, card de secao, tooltip, icone de cabecalho, seletor, exclusao, loading, placeholder e chip de status

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha 159-167

  • antes: sectionIconWrap dos cards internos do general-settings usava cardIconBackground sem borda

  • depois: sectionIconWrap dos cards internos do general-settings usa cardIconBackground com cardIconBorder

  • src/react/pages/settings/GeneralSettings.styles.js, src/react/pages/settings/sections/LogSection.js, src/react/pages/settings/sections/MaintenanceSection.js

  • linha palette e switches

  • antes: switches de logs e rotinas usavam a cor nativa do React Native, sem map do tema

  • depois: switches de logs e rotinas usam switchOnTrack, switchOffTrack, switchOnThumb, switchOffThumb, switchDisabledTrack e switchDisabledThumb

  • DOCS/themes/themes-map.md, DOCS/themes/themes-new.md, ui-manager/src/react/pages/ThemeManagerPage.js, ui-manager/src/react/pages/ThemePreviewPage.js, ui-crm/src/react/pages/settings/GeneralSettings.styles.js

  • linha tokens de switch

  • antes: switchBorder e switchFocusBorder ainda existiam no mapa e nos previews, embora nao fossem usados pelo switch nativo real

  • depois: switchBorder e switchFocusBorder sao removidos do mapa, do preview/manager de tema e da palette compartilhada do general-settings

  • ui-manager/src/react/pages/ThemeManagerPage.js

  • linha 2270-2334

  • antes: preview de switch no theme manager era desenhado manualmente com View, thumb e track simulados

  • depois: preview de switch no theme manager usa o componente Switch real do React Native com switchOnTrack, switchOffTrack, switchOnThumb, switchOffThumb, switchDisabledTrack e switchDisabledThumb

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha 23-27, 579-583

  • antes: palette compartilhada do general-settings expunha cardIconBackground/cardIconBorder, mas nao cardIconColor

  • depois: palette compartilhada passa a expor cardIconColor para os icones dos grupos de preferencias

  • src/react/pages/settings/sections/ShopSection.js

  • linha 194-515, 519-1958

  • antes: toggles, modais de selecao, placeholders, loaders, icones e secoes da aba shop usavam #166534, #991B1B, #0F766E, #94A3B8, #B45309, #FFFFFF e similares

  • depois: aba shop usa palette do tema ativo com badgeSelectedText/badgeDisabledText, inputPlaceholderText, loadingSpinner, iconActive/iconDisabled/iconSuccess/iconWarning, buttonIcon, primary, success, warning e cardIconBackground

  • src/react/pages/settings/sections/ShopSection.js

  • linha 1158-1163, 1178-1183, 1542-1547, 1578-1583, 1645-1650

  • antes: icones dos grupos da aba shop misturavam cardIconBackground com success/info/primary/warning

  • depois: icones dos grupos da aba shop usam exatamente cardIconBackground e cardIconColor

  • src/react/pages/settings/sections/ShopSection.js

  • linha 1345-1349, 1394-1398, 1445-1447, 1757-1761, 1812-1816, 1886-1890, 1904-1908

  • antes: icones internos dos cards/listas da aba shop usavam iconSuccess e iconWarning fora do padrao visual da pagina

  • depois: icones internos dos cards/listas da aba shop usam cardIconColor; apenas controles de estado continuam com iconActive/iconDisabled

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha 10-61, 579-610

  • antes: buildGeneralSettingsPalette e o fallback local do general-settings nao expunham iconDanger, entao os icones de remocao da aba shop nao refletiam a cor configurada no banco

  • depois: buildGeneralSettingsPalette e o fallback local do general-settings passam a expor iconDanger

  • src/react/pages/settings/GeneralSettings.js

  • linha header de abas

  • antes: header do general-settings usava colorToken por aba, navigationActiveBackground/navigationText e borderBottomColor por contexto

  • depois: header do general-settings usa buttonBackground/buttonBorder/buttonIcon/buttonText na aba selecionada e buttonBackgroundSecondary/buttonBorderSecondary/buttonIconSecondary/buttonTextSecondary nas demais

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha tabBarContent/tabItem/tabLabel e palette

  • antes: estilos das abas fixavam underline de selecao e palette nao expunha buttonBorder/buttonIconSecondary

  • depois: abas preservam layout de botao com borda/raio/gap, palette expoe buttonBorder/buttonIconSecondary e as cores entram pelo JSX

  • src/react/pages/settings/sections/CrmSection.js

  • linha 241-244

  • antes: icone delete do crm usava themePalette.error

  • depois: icone delete do crm usa themePalette.iconDanger

  • src/react/pages/settings/sections/CrmSection.js

  • linha 245-260

  • antes: botao Add Profile dependia apenas de globalStyles.button/local primaryButton e nao aplicava explicitamente buttonBackground/buttonIcon no padrao

  • depois: botao Add Profile usa themePalette.buttonBackground, themePalette.buttonIcon e themePalette.buttonText

  • src/react/pages/settings/sections/CrmSection.js

  • linha 236-247

  • antes: botao delete dos perfis CRM usava removeProfileButton simples e icone themePalette.iconDanger

  • depois: botao delete dos perfis CRM segue o padrao dos botoes de acao da carteira com buttonBackground/buttonIcon e icone Feather trash-2

  • src/react/pages/settings/GeneralSettings.styles.js

  • linha removeProfileButton

  • antes: removeProfileButton tinha apenas marginLeft e padding local

  • depois: removeProfileButton preserva layout de botao iconico 34x34 com borda/raio/alinhamento; cores entram por themePalette no JSX

  • src/react/pages/settings/sections/ShopSection.js

  • linha 1568-1576

  • antes: checkbox do catalogo do shop usava themePalette.primary quando marcado

  • depois: checkbox do catalogo do shop usa iconActive quando marcado e iconDisabled quando desmarcado

app-community

  • src/styles/branding.js

  • linha 142-164

  • antes: resolveThemePalette nao promovia iconBackground e cardIconBackground vindos do tema ativo, mantendo fallback local mesmo apos ajuste no banco

  • depois: resolveThemePalette passa a ler iconBackground/icon-background e cardIconBackground/card-icon-background do tema ativo

  • src/styles/colors.js

  • linha 6-19

  • antes: defaults locais nao expunham iconBackground e cardIconBackground e ainda liam variaveis CSS com nome diferente do tema ativo

  • depois: defaults locais passam a expor iconBackground e cardIconBackground usando o mesmo nome de variavel CSS aplicado pelo runtime

ui-common

  • src/react/components/ConfirmModal.js

  • full

  • antes: StyleSheet estatico com cores hardcoded no styles; sem themeStore

  • depois: useStore('theme') + palette canônica modal* e button* via createStyles(palette)

  • src/react/components/ConfirmModal.styles.js

  • full

  • antes: overlay rgba(0,0,0,0.5), card #fff, confirm #007AFF, text #fff

  • depois: createStyles(palette) com modalOverlay/modalBackground/modalBorder/modalHeaderText/modalText e button*

  • src/react/components/SystemErrorToast.js

  • full

  • antes: Icon color="#DC2626" e estilos literais

  • depois: useStore('theme') + toastDanger* tokens; Icon color={palette.toastDangerIcon}

  • src/react/components/SystemErrorToast.styles.js

  • full

  • antes: backgroundColor '#FEE2E2', borderColor '#FCA5A5', color '#111827'

  • depois: createStyles(palette) com toastDangerBackground/toastDangerBorder/toastDangerText

  • src/react/components/BottomNavigationBar.js

  • linha 21-29, 49-85, 117-156

  • antes: navegacao inferior usando footer* e herdando estado ativo por footerLink com fallback vindo da palette

  • depois: navegacao inferior usando navigationBackground/navigationBorder/navigationIcon/navigationText e navigationActive* sem fallback; RuntimeInfoFooter recebe apenas os tokens crus do tema

  • src/react/components/BottomNavigationBar.styles.js

  • linha 3-83

  • antes: estilo calculava realce com withAlpha, sombra herdada e estados ativos presos ao proxy anterior

  • depois: estilo aplica navigationBackground/navigationBorder/navigationShadow e navigationActiveBackground/navigationActiveBorder sem fallback

  • src/react/components/RuntimeInfoFooter.js

  • linha 112-166

  • antes: background / border / textSecondary / primary e bolinha do socket dependente de indicatorColor hardcoded

  • depois: footerBackground / footerBorder / footerText / footerLink e bolinha do socket resolvida por success / warning / error do tema

  • src/react/utils/socketRuntimePipeline.js

  • linha 107-127

  • antes: indicatorColor hardcoded em verde / laranja / vermelho

  • depois: indicatorTone semantico success / warning / error

  • src/react/components/WebsocketListener.native.js

  • linha 77-93

  • antes: indicatorColor hardcoded em verde / laranja / vermelho

  • depois: indicatorTone semantico success / warning / error

  • src/react/components/DefaultProvider.web.js

  • linha 887-892

  • antes: RuntimeInfoFooter recebia palette resolvida

  • depois: RuntimeInfoFooter recebe somente colors crus do tema

  • src/react/components/DefaultProvider.native.js

  • linha 820-825

  • antes: RuntimeInfoFooter recebia palette resolvida

  • depois: RuntimeInfoFooter recebe somente colors crus do tema

ui-orders

  • src/react/components/OrderHeader.js

  • linha 4-24, 64-108, 154-360

  • antes: WAITING_RULES, leading icons, customer action, chip de data e badge de status usavam hex hardcoded ou status.color fora do tema

  • depois: OrderHeader monta palette a partir de themeStore.getters.colors e resolve tons com textSuccess / textWarning / textDanger / textMuted / iconInfo / iconWarning / iconDanger

  • src/react/components/OrderHeader.styles.js

  • linha 1-257

  • antes: leadingWrap, textos, chips, preco e variacoes purchase/transfer/loss usavam cores locais

  • depois: createStyles(palette, isKds) usa cardText, chipBackground, chipBorder, chipText, chipSelectedBackground, chipSelectedBorder, chipSelectedText, textSuccess, textWarning e textDanger

  • src/react/pages/orders/OrderHistoryPage.js

  • linha 91-99, 173-177, 637-666

  • antes: card do historico dependia de style estatico e fundo da tela seguia palette derivada fora do fluxo do tema

  • depois: tela monta orderHistoryPalette com tokens do themeStore e aplica o card renderer dentro desse contexto

  • src/react/pages/orders/OrderHistoryPage.styles.js

  • linha 1-69

  • antes: wrapper do card, divisor e textos secundarios usavam #fff / #0F172A / #475569 / #F1F5F9

  • depois: createStyles(palette) usa cardBackground, cardBorder, cardShadow, dividerBorder, textPrimary e textSecondary

  • src/react/pages/CashRegister/index.js

  • linha 21-269

  • antes: valores do caixa usavam vermelho hardcoded para retirada, botoes com icone/texto em '#fff' e destaque local fora do tema

  • depois: tela usa themeStore.getters.colors com textDanger, buttonBackground, buttonIcon, buttonText, cardText e footerText

  • src/react/pages/CashRegister/index.styles.js

  • linha 1-10

  • antes: labels dos botoes com color '#fff' hardcoded

  • depois: arquivo preserva somente espacamento; a cor do label vem do tema na tela

  • src/react/css/orders.js

  • linha 11-15, 37-39, 92-99, 332-352

  • antes: fundo da pagina, card do caixa, texto base e footer usavam page/background/card/footer hardcoded ou base local

  • depois: cash-register-index usa pageBackground, cardBackground, cardBorder, cardText, footerBackground, footerBorder e footerText

ui-products

  • src/react/components/products/ProductItem.js

  • linha 14-72, 128-223, 235-514

  • antes: chips de tipo usavam roxo/azul/laranja/verde/ciano/rosa/amarelo hardcoded, preco em verde hardcoded e ProductTotem do card herdava seletor com vermelho/verde locais

  • depois: chips de tipo, preco e acao do card usam tokens canonicos como chipSelectedBackground, chipSelectedText, buttonBackgroundSecondary, buttonTextSecondary, chipBackground, textWarning, textSuccess e textMuted

  • src/react/pages/Products.js

  • linha 1110-1133, 1191-1215

  • antes: atalhos e cabecalhos por tipo reutilizavam bg/color hardcoded do PRODUCT_TYPE_CONFIG e ainda aplicavam borda com opacidade local

  • depois: atalhos e cabecalhos por tipo resolvem as cores pelo mesmo mapa semantico de tokens do ProductItem, sem hex nem opacidade local

  • src/react/components/cart/ProductTotem.js

  • linha 31-74, 202-221

  • antes: seletor Selecionar usava circulo vermelho, check verde e texto cinza hardcoded

  • depois: seletor usa iconDisabled, iconSuccess e textMuted vindos da palette do tema

ui-people

  • src/react/pages/People.js

  • linha 36-154, 238-261

  • antes: renderClientCard lia card/avatar/textos por styles estaticos e chevron com '#CBD5E1'

  • depois: tela monta palette a partir de themeStore.getters.colors e aplica cardBackground, cardBorder, cardShadow, cardIcon, iconInverse, listItemText, listItemSubtitleText e listItemIcon no renderClientCard

  • src/react/pages/People.styles.js

  • linha 76-114, 144

  • antes: card/avatar/textos do renderer usavam '#fff', '#F1F5F9', '#1E293B', '#94A3B8' e '#fff' no style estatico

  • depois: styles do renderer preservam layout e deixam as cores entrarem pela palette do tema ativo

  • src/react/components/address/PeopleAddressesPanel.js

  • linha 22-43, 104-139, 146-181, 220-267

  • antes: botao Novo e painel de enderecos usavam '#1D4ED8', '#fff', '#E2E8F0', '#0F172A', '#64748B', '#B91C1C', 'rgba(15,23,42,0.45)' e '#F8FAFC'

  • depois: botao de criar endereco usa Feather plus igual telefone/email, cards ganham lixeira trash-2 para apagar endereco, e o painel usa buttonBackground, buttonIcon, cardBackground, cardBorder, cardText, loadingSpinner, modalBackground, modalOverlay, textDanger, textPrimary e textSecondary vindos de themeStore.getters.colors

ui-config

  • src/react/pages/MenuAccessConfigPage.js

  • linha 119-152, 584-598, 684-716, 810-827

  • antes: botoes Ativo/Inativo e Salvar menu usavam cores hardcoded como '#F1F5F9', '#16A34A', '#64748B', '#FFFFFF' e '#0F766E'

  • depois: botoes Ativo/Inativo, Salvar novo menu e Salvar menu usam themeStore.getters.colors com buttonBackground, buttonBackgroundSecondary, buttonBorder, buttonBorderSecondary, buttonIcon, buttonIconSecondary, buttonText e buttonTextSecondary

  • src/react/pages/MenuAccessConfigPage.styles.js

  • linha 244-256, 316-328

  • antes: enabledButton/enabledText/saveButton/saveButtonText definiam cores hardcoded

  • depois: estilos preservam apenas layout, borda e tipografia; cores entram via palette do tema no JSX

  • src/react/pages/MenuAccessConfigPage.js

  • linha 422-435, 632-660

  • antes: Adicionar rota, Adicionar e Salvar categoria usavam '#2563EB', '#FFFFFF', '#EFF6FF' e '#BFDBFE'

  • depois: Adicionar rota, Adicionar e Salvar categoria usam buttonBackground/buttonBorder/buttonIcon/buttonText

  • src/react/pages/MenuAccessConfigPage.styles.js

  • linha 285-310

  • antes: primaryButton/primaryButtonText/secondaryButton/secondaryButtonText definiam cores hardcoded

  • depois: primaryButton/primaryButtonText/categoryButton/categoryButtonText preservam apenas layout, borda e tipografia; cores entram via palette do tema no JSX

  • src/react/pages/MenuAccessConfigPage.js

  • linha 322-357, 632-650, 881-892

  • antes: perfis de acesso eram renderizados com check/square e estado ativo/inativo usando cores locais hardcoded como '#2563EB' e '#94A3B8'

  • depois: perfis de acesso usam buttonBackground, buttonBackgroundSecondary, buttonBorder, buttonBorderSecondary, buttonIcon, buttonIconSecondary, buttonText e buttonTextSecondary vindos de themeStore.getters.colors

  • src/react/pages/MenuAccessConfigPage.styles.js

  • linha 280-290

  • antes: linkButton/linkText definiam backgroundColor '#F8FAFC', borderColor '#E2E8F0', text '#64748B' e estados ativos '#EFF6FF/#93C5FD/#1D4ED8'

  • depois: linkButton/linkText preservam apenas layout e tipografia; cores entram via palette do tema no JSX

### ### MODULOS / ARQUIVOS PENDENTES ### ###

ui-accounting

ui-carrier

ui-login

### ### MODULOS / ARQUIVOS PAI/FILHO ### ###

ui-accounting

ui-carrier

ui-login

ui-shop

Clone this wiki locally