Skip to content

Commit

Permalink
💅 recolouring (#3414)
Browse files Browse the repository at this point in the history 
* refactor: new colors

* chore: pnpm lock separately

* chore: changeset

Revert "chore: changeset"

This reverts commit f028b06.

chore: changeset

* refactor: code review improvements

* style: new avatar color
  • Loading branch information
@kark
kark authored Feb 29, 2024
1 parent 325224e commit dc2b492
Show file tree
Hide file tree
Showing 25 changed files with 1,075 additions and 991 deletions.
17 changes: 17 additions & 0 deletions .changeset/stale-mugs-clean.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
'@commercetools-applications/merchant-center-custom-view-template-starter-typescript': minor
'@commercetools-applications/merchant-center-template-starter-typescript': minor
'@commercetools-frontend/application-components': minor
'@commercetools-applications/merchant-center-custom-view-template-starter': minor
'@commercetools-applications/merchant-center-template-starter': minor
'@commercetools-website/components-playground': minor
'@commercetools-frontend/react-notifications': minor
'@commercetools-frontend/application-shell': minor
'@commercetools-website/custom-views': minor
'@commercetools-frontend/constants': minor
'@commercetools-local/visual-testing-app': minor
'@commercetools-frontend/i18n': minor
'@commercetools-local/playground': minor
---

Update all App-kit components to support the upcoming new colour scheme
34 changes: 17 additions & 17 deletions application-templates/starter-typescript/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,23 @@
"@commercetools-test-data/channel": "6.11.0",
"@commercetools-test-data/commons": "6.11.0",
"@commercetools-test-data/core": "6.11.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/data-table": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/grid": "^18.1.0",
"@commercetools-uikit/hooks": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/link": "^18.1.0",
"@commercetools-uikit/loading-spinner": "^18.1.0",
"@commercetools-uikit/localized-text-field": "^18.1.0",
"@commercetools-uikit/localized-text-input": "^18.1.0",
"@commercetools-uikit/notifications": "^18.1.0",
"@commercetools-uikit/pagination": "^18.1.0",
"@commercetools-uikit/select-field": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/text-field": "^18.1.0",
"@commercetools-uikit/text-input": "^18.1.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/data-table": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/grid": "^18.2.0",
"@commercetools-uikit/hooks": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/link": "^18.2.0",
"@commercetools-uikit/loading-spinner": "^18.2.0",
"@commercetools-uikit/localized-text-field": "^18.2.0",
"@commercetools-uikit/localized-text-input": "^18.2.0",
"@commercetools-uikit/notifications": "^18.2.0",
"@commercetools-uikit/pagination": "^18.2.0",
"@commercetools-uikit/select-field": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@commercetools-uikit/text-field": "^18.2.0",
"@commercetools-uikit/text-input": "^18.2.0",
"@commercetools/sync-actions": "^5.14.0",
"@emotion/react": "^11.11.1",
"@formatjs/cli": "6.1.1",
Expand Down
34 changes: 17 additions & 17 deletions application-templates/starter/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,23 @@
"@commercetools-test-data/channel": "6.11.0",
"@commercetools-test-data/commons": "6.11.0",
"@commercetools-test-data/core": "6.11.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/data-table": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/grid": "^18.1.0",
"@commercetools-uikit/hooks": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/link": "^18.1.0",
"@commercetools-uikit/loading-spinner": "^18.1.0",
"@commercetools-uikit/localized-text-field": "^18.1.0",
"@commercetools-uikit/localized-text-input": "^18.1.0",
"@commercetools-uikit/notifications": "^18.1.0",
"@commercetools-uikit/pagination": "^18.1.0",
"@commercetools-uikit/select-field": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/text-field": "^18.1.0",
"@commercetools-uikit/text-input": "^18.1.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/data-table": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/grid": "^18.2.0",
"@commercetools-uikit/hooks": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/link": "^18.2.0",
"@commercetools-uikit/loading-spinner": "^18.2.0",
"@commercetools-uikit/localized-text-field": "^18.2.0",
"@commercetools-uikit/localized-text-input": "^18.2.0",
"@commercetools-uikit/notifications": "^18.2.0",
"@commercetools-uikit/pagination": "^18.2.0",
"@commercetools-uikit/select-field": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@commercetools-uikit/text-field": "^18.2.0",
"@commercetools-uikit/text-input": "^18.2.0",
"@commercetools/sync-actions": "^5.14.0",
"@emotion/react": "^11.11.1",
"@formatjs/cli": "6.1.1",
Expand Down
34 changes: 17 additions & 17 deletions custom-views-templates/starter-typescript/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,23 @@
"@commercetools-test-data/channel": "6.11.0",
"@commercetools-test-data/commons": "6.11.0",
"@commercetools-test-data/core": "6.11.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/data-table": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/grid": "^18.1.0",
"@commercetools-uikit/hooks": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/link": "^18.1.0",
"@commercetools-uikit/loading-spinner": "^18.1.0",
"@commercetools-uikit/localized-text-field": "^18.1.0",
"@commercetools-uikit/localized-text-input": "^18.1.0",
"@commercetools-uikit/notifications": "^18.1.0",
"@commercetools-uikit/pagination": "^18.1.0",
"@commercetools-uikit/select-field": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/text-field": "^18.1.0",
"@commercetools-uikit/text-input": "^18.1.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/data-table": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/grid": "^18.2.0",
"@commercetools-uikit/hooks": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/link": "^18.2.0",
"@commercetools-uikit/loading-spinner": "^18.2.0",
"@commercetools-uikit/localized-text-field": "^18.2.0",
"@commercetools-uikit/localized-text-input": "^18.2.0",
"@commercetools-uikit/notifications": "^18.2.0",
"@commercetools-uikit/pagination": "^18.2.0",
"@commercetools-uikit/select-field": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@commercetools-uikit/text-field": "^18.2.0",
"@commercetools-uikit/text-input": "^18.2.0",
"@commercetools/sync-actions": "^5.14.0",
"@emotion/react": "^11.11.1",
"@formatjs/cli": "6.1.1",
Expand Down
34 changes: 17 additions & 17 deletions custom-views-templates/starter/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,23 @@
"@commercetools-test-data/channel": "6.11.0",
"@commercetools-test-data/commons": "6.11.0",
"@commercetools-test-data/core": "6.11.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/data-table": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/grid": "^18.1.0",
"@commercetools-uikit/hooks": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/link": "^18.1.0",
"@commercetools-uikit/loading-spinner": "^18.1.0",
"@commercetools-uikit/localized-text-field": "^18.1.0",
"@commercetools-uikit/localized-text-input": "^18.1.0",
"@commercetools-uikit/notifications": "^18.1.0",
"@commercetools-uikit/pagination": "^18.1.0",
"@commercetools-uikit/select-field": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/text-field": "^18.1.0",
"@commercetools-uikit/text-input": "^18.1.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/data-table": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/grid": "^18.2.0",
"@commercetools-uikit/hooks": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/link": "^18.2.0",
"@commercetools-uikit/loading-spinner": "^18.2.0",
"@commercetools-uikit/localized-text-field": "^18.2.0",
"@commercetools-uikit/localized-text-input": "^18.2.0",
"@commercetools-uikit/notifications": "^18.2.0",
"@commercetools-uikit/pagination": "^18.2.0",
"@commercetools-uikit/select-field": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@commercetools-uikit/text-field": "^18.2.0",
"@commercetools-uikit/text-input": "^18.2.0",
"@commercetools/sync-actions": "^5.14.0",
"@emotion/react": "^11.11.1",
"@formatjs/cli": "6.1.1",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
"@commercetools-frontend/jest-stylelint-runner": "workspace:*",
"@commercetools-frontend/mc-scripts": "workspace:*",
"@commercetools-test-data/core": "6.11.0",
"@commercetools-uikit/design-system": "^18.1.0",
"@commercetools-uikit/design-system": "^18.2.0",
"@commercetools/github-labels": "1.1.0",
"@commitlint/cli": "17.6.3",
"@commitlint/config-conventional": "17.6.3",
Expand Down
34 changes: 17 additions & 17 deletions packages/application-components/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,23 +37,23 @@
"@commercetools-frontend/i18n": "22.18.0",
"@commercetools-frontend/l10n": "22.18.0",
"@commercetools-frontend/sentry": "22.18.0",
"@commercetools-uikit/accessible-button": "^18.1.0",
"@commercetools-uikit/card": "^18.1.0",
"@commercetools-uikit/stamp": "^18.1.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/design-system": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/hooks": "^18.1.0",
"@commercetools-uikit/icon-button": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/label": "^18.1.0",
"@commercetools-uikit/messages": "^18.1.0",
"@commercetools-uikit/primary-button": "^18.1.0",
"@commercetools-uikit/secondary-button": "^18.1.0",
"@commercetools-uikit/secondary-icon-button": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/utils": "^18.1.0",
"@commercetools-uikit/accessible-button": "^18.2.0",
"@commercetools-uikit/card": "^18.2.0",
"@commercetools-uikit/stamp": "^18.2.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/design-system": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/hooks": "^18.2.0",
"@commercetools-uikit/icon-button": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/label": "^18.2.0",
"@commercetools-uikit/messages": "^18.2.0",
"@commercetools-uikit/primary-button": "^18.2.0",
"@commercetools-uikit/secondary-button": "^18.2.0",
"@commercetools-uikit/secondary-icon-button": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@commercetools-uikit/utils": "^18.2.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@flopflip/react-broadcast": "13.2.1",
Expand Down
9 changes: 5 additions & 4 deletions packages/application-components/src/components/tab-header/tab.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
type Theme,
} from '@emotion/react';
import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
import { designTokens as appKitDesignTokens } from '../../theming';

const getBottomBorderStyles = (background: string): SerializedStyles => css`
:after {
Expand Down Expand Up @@ -42,8 +43,8 @@ export const getLinkStyles = (
isActive &&
css`
${getBottomBorderStyles(uiKitDesignTokens.colorPrimary)}
& h4 {
color: ${uiKitDesignTokens.colorPrimary} !important;
& h3 {
color: ${appKitDesignTokens.fontColorForTabLabelWhenActive} !important;
}
`,
isDisabled &&
Expand All @@ -63,8 +64,8 @@ export const getLinkStyles = (
:hover,
:focus,
:active {
& h4 {
color: ${uiKitDesignTokens.colorPrimary} !important;
& h3 {
color: ${appKitDesignTokens.fontColorForTabLabelWhenActive} !important;
}
}
`,
Expand Down
44 changes: 44 additions & 0 deletions packages/application-components/src/theming.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,50 @@ export const themesOverrides = {
paddingForDetailPageHeader: `${uiKitDesignTokens.spacing50} ${uiKitDesignTokens.spacing55} ${uiKitDesignTokens.spacing40}`,
paddingForMainPageHeader: `${uiKitDesignTokens.spacing50} ${uiKitDesignTokens.spacing55} 0`,
paddingForTabularPageHeader: `${uiKitDesignTokens.spacing40} ${uiKitDesignTokens.spacing55} 0`,
// recolouring rollout
backgroundColorForNavbar: uiKitDesignTokens.colorPrimary,
backgroundColorForNavbarExpander: `linear-gradient(180deg, ${uiKitDesignTokens.colorPrimary} 0%, ${uiKitDesignTokens.colorPrimary25} 100%)`,
backgroundColorForNavbarExpanderWhenHovered:
uiKitDesignTokens.colorPrimary40,
backgroundColorForNavbarHeader: uiKitDesignTokens.colorAccent10,
backgroundColorForNavbarMenuItemWhenActive: uiKitDesignTokens.colorAccent30,
backgroundColorForNavbarSubmenuItemWhenActive:
uiKitDesignTokens.colorAccent30,
backgroundColorForNavbarMenuItemWhenHovered:
uiKitDesignTokens.colorPrimary40,
backgroundColorForNavbarSkeleton: '#009987',
backgroundColorForNavbarSkeletonFooter:
'linear-gradient(180deg, #009987 0%, #004d44 100%)',
borderColorForNotificationWhenSuccess: uiKitDesignTokens.colorPrimary85,
fontColorForNotificationWhenSuccess: uiKitDesignTokens.colorPrimary,
fontColorForNotificationWhenWarning: uiKitDesignTokens.colorWarning,
fontColorForTabLabelWhenActive: uiKitDesignTokens.colorSolid,
visibilityForNavbarFaded: 'visible',
},
recolouring: {
marginForCustomViewsSelectorAsTabular: `0 ${uiKitDesignTokens.spacing55}`,
marginForPageContent: `${uiKitDesignTokens.spacing50} ${uiKitDesignTokens.spacing55}`,
paddingForDetailPageHeader: `${uiKitDesignTokens.spacing50} ${uiKitDesignTokens.spacing55} ${uiKitDesignTokens.spacing40}`,
paddingForMainPageHeader: `${uiKitDesignTokens.spacing50} ${uiKitDesignTokens.spacing55} 0`,
paddingForTabularPageHeader: `${uiKitDesignTokens.spacing40} ${uiKitDesignTokens.spacing55} 0`,
backgroundColorForNavbar: uiKitDesignTokens.colorPrimary10,
backgroundColorForNavbarExpander: uiKitDesignTokens.colorPrimary10,
backgroundColorForNavbarExpanderWhenHovered:
uiKitDesignTokens.colorPrimary10,
backgroundColorForNavbarHeader: uiKitDesignTokens.colorPrimary10,
backgroundColorForNavbarMenuItemWhenActive:
uiKitDesignTokens.colorPrimary25,
backgroundColorForNavbarSubmenuItemWhenActive:
uiKitDesignTokens.colorPrimary40,
backgroundColorForNavbarMenuItemWhenHovered:
uiKitDesignTokens.colorPrimary20,
backgroundColorForNavbarSkeleton: uiKitDesignTokens.colorPrimary10,
backgroundColorForNavbarSkeletonFooter: uiKitDesignTokens.colorPrimary10,
borderColorForNotificationWhenSuccess: uiKitDesignTokens.colorSuccess85,
fontColorForNotificationWhenSuccess: uiKitDesignTokens.colorSuccess,
fontColorForNotificationWhenWarning: uiKitDesignTokens.colorWarning60,
fontColorForTabLabelWhenActive: uiKitDesignTokens.colorPrimary,
visibilityForNavbarFaded: 'hidden',
},
};

Expand Down
30 changes: 15 additions & 15 deletions packages/application-shell/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,21 +45,21 @@
"@commercetools-frontend/sdk": "22.18.0",
"@commercetools-frontend/sentry": "22.18.0",
"@commercetools-frontend/url-utils": "22.18.0",
"@commercetools-uikit/accessible-hidden": "^18.1.0",
"@commercetools-uikit/avatar": "^18.1.0",
"@commercetools-uikit/card": "^18.1.0",
"@commercetools-uikit/constraints": "^18.1.0",
"@commercetools-uikit/design-system": "^18.1.0",
"@commercetools-uikit/flat-button": "^18.1.0",
"@commercetools-uikit/icons": "^18.1.0",
"@commercetools-uikit/icon-button": "^18.1.0",
"@commercetools-uikit/loading-spinner": "^18.1.0",
"@commercetools-uikit/notifications": "^18.1.0",
"@commercetools-uikit/primary-button": "^18.1.0",
"@commercetools-uikit/secondary-button": "^18.1.0",
"@commercetools-uikit/select-input": "^18.1.0",
"@commercetools-uikit/spacings": "^18.1.0",
"@commercetools-uikit/text": "^18.1.0",
"@commercetools-uikit/accessible-hidden": "^18.2.0",
"@commercetools-uikit/avatar": "^18.2.0",
"@commercetools-uikit/card": "^18.2.0",
"@commercetools-uikit/constraints": "^18.2.0",
"@commercetools-uikit/design-system": "^18.2.0",
"@commercetools-uikit/flat-button": "^18.2.0",
"@commercetools-uikit/icons": "^18.2.0",
"@commercetools-uikit/icon-button": "^18.2.0",
"@commercetools-uikit/loading-spinner": "^18.2.0",
"@commercetools-uikit/notifications": "^18.2.0",
"@commercetools-uikit/primary-button": "^18.2.0",
"@commercetools-uikit/secondary-button": "^18.2.0",
"@commercetools-uikit/select-input": "^18.2.0",
"@commercetools-uikit/spacings": "^18.2.0",
"@commercetools-uikit/text": "^18.2.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@flopflip/combine-adapters": "13.2.1",
Expand Down
3 changes: 2 additions & 1 deletion packages/application-shell/src/components/navbar/main-navbar.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { designTokens as appKitDesignTokens } from '@commercetools-frontend/application-components';
import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
import { NAVBAR } from '../../constants';
import { MenuListItem, LeftNavigation } from './menu-items.styles';
Expand Down Expand Up @@ -116,7 +117,7 @@ const leftNavigationOpenStyles = css`
`;

const NavigationHeader = styled.div`
background-color: ${uiKitDesignTokens.colorAccent10};
background-color: ${appKitDesignTokens.backgroundColorForNavbarHeader};
color: ${uiKitDesignTokens.colorSurface};
display: flex;
justify-content: center;
Expand Down
Loading

1 comment on commit dc2b492

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

Deploy preview for application-kit-custom-views ready!

✅ Preview
https://application-kit-custom-views-g262nznkl-commercetools.vercel.app

Built with commit dc2b492.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.