Skip to content

Commit

Permalink
Remove unused old theme (#2785)
Browse files Browse the repository at this point in the history 
* feat(theming cleanup): update decision group theme tokens to remove unused tokens

* feat(theming cleanup): update choice group theme tokens to remove unused tokens

* feat(theming cleanup): reference design tokens

* feat(theming cleanup): remove unwanted useTheme

* feat(theming cleanup): update button disabled background color

* feat(theming cleanup): remove old progressbar theme

* feat(theming cleanup): restore some reusable tokens

* feat(theming cleanup): resstore initial token order

* feat(theming cleanup): remove recolouring theme choices block

* feat(redesign cleanup): remove unused state, variants and componentgroups

* feat(redesign cleanup): use correct input padding values

* feat(theming cleanup): remove recolouring theme option

* feat(theming cleanup): remove leftover theming reference

* feat(theming cleanup): remove recolouring theme from vrt

* feat(theming cleanup): update themedValue bool

* feat(theming cleanup): use correct icon color for stamp

* feat(redesign cleanup): add changeset

---------

Co-authored-by: Ddouglasz <[email protected]>
Co-authored-by: Carlos Cortizas <[email protected]>
  • Loading branch information
@ddouglasz @CarlosCortizasCT
3 people authored Apr 24, 2024
1 parent cd9c9b0 commit 3a47d4a
Show file tree
Hide file tree
Showing 37 changed files with 663 additions and 1,603 deletions.
102 changes: 102 additions & 0 deletions .changeset/many-mirrors-pull.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
---
'@commercetools-uikit/localized-multiline-text-field': minor
'@commercetools-uikit/localized-multiline-text-input': minor
'@commercetools-uikit/async-creatable-select-field': minor
'@commercetools-uikit/async-creatable-select-input': minor
'@commercetools-uikit/localized-rich-text-input': minor
'@commercetools-uikit/selectable-search-input': minor
'@commercetools-uikit/spacings-inset-squish': minor
'@commercetools-uikit/secondary-icon-button': minor
'@commercetools-uikit/creatable-select-field': minor
'@commercetools-uikit/creatable-select-input': minor
'@commercetools-uikit/localized-money-input': minor
'@commercetools-uikit/localized-text-field': minor
'@commercetools-uikit/multiline-text-field': minor
'@commercetools-uikit/localized-text-input': minor
'@commercetools-uikit/multiline-text-input': minor
'@commercetools-uikit/search-select-field': minor
'@commercetools-uikit/search-select-input': minor
'@commercetools-uikit/accessible-button': minor
'@commercetools-uikit/async-select-field': minor
'@commercetools-uikit/async-select-input': minor
'@commercetools-uikit/secondary-button': minor
'@commercetools-uikit/search-text-input': minor
'@commercetools-uikit/spacings-inline': minor
'@commercetools-uikit/dropdown-menu': minor
'@commercetools-uikit/date-range-field': minor
'@commercetools-uikit/date-range-input': minor
'@commercetools-uikit/primary-action-dropdown': minor
'@commercetools-uikit/spacings-inset': minor
'@commercetools-uikit/spacings-stack': minor
'@commercetools-uikit/primary-button': minor
'@commercetools-uikit/date-time-field': minor
'@commercetools-uikit/date-time-input': minor
'@commercetools-uikit/rich-text-input': minor
'@commercetools-uikit/rich-text-utils': minor
'@commercetools-uikit/password-field': minor
'@commercetools-uikit/checkbox-input': minor
'@commercetools-uikit/password-input': minor
'@commercetools-uikit/flat-button': minor
'@commercetools-uikit/icon-button': minor
'@commercetools-uikit/link-button': minor
'@commercetools-uikit/number-field': minor
'@commercetools-uikit/select-field': minor
'@commercetools-uikit/number-input': minor
'@commercetools-uikit/select-input': minor
'@commercetools-uikit/select-utils': minor
'@commercetools-uikit/toggle-input': minor
'@commercetools-uikit/collapsible-motion': minor
'@commercetools-uikit/data-table-manager': minor
'@commercetools-uikit/money-field': minor
'@commercetools-uikit/radio-field': minor
'@commercetools-uikit/input-utils': minor
'@commercetools-uikit/money-input': minor
'@commercetools-uikit/radio-input': minor
'@commercetools-uikit/accessible-hidden': minor
'@commercetools-uikit/collapsible-panel': minor
'@commercetools-uikit/date-field': minor
'@commercetools-uikit/text-field': minor
'@commercetools-uikit/time-field': minor
'@commercetools-uikit/date-input': minor
'@commercetools-uikit/text-input': minor
'@commercetools-uikit/time-input': minor
'@commercetools-uikit/loading-spinner': minor
'@commercetools-uikit/field-warnings': minor
'@commercetools-uikit/notifications': minor
'@commercetools-uikit/view-switcher': minor
'@commercetools-uikit/field-errors': minor
'@commercetools-uikit/progress-bar': minor
'@commercetools-uikit/collapsible': minor
'@commercetools-uikit/constraints': minor
'@commercetools-uikit/field-label': minor
'@commercetools-uikit/data-table': minor
'@commercetools-uikit/pagination': minor
'@commercetools-uikit/calendar-time-utils': minor
'@commercetools-uikit/messages': minor
'@commercetools-uikit/tooltip': minor
'@commercetools-uikit/avatar': minor
'@commercetools-uikit/icons': minor
'@commercetools-uikit/label': minor
'@commercetools-uikit/stamp': minor
'@commercetools-uikit/card': minor
'@commercetools-uikit/grid': minor
'@commercetools-uikit/link': minor
'@commercetools-uikit/text': minor
'@commercetools-uikit/localized-utils': minor
'@commercetools-local/generator-package-json': minor
'@commercetools-uikit/calendar-utils': minor
'@commercetools-uikit/tag': minor
'visual-testing-app': minor
'@commercetools-local/generator-readme': minor
'@commercetools-uikit/spacings': minor
'@commercetools-uikit/buttons': minor
'@commercetools-uikit/hooks': minor
'@commercetools-uikit/utils': minor
'@commercetools-uikit/fields': minor
'@commercetools-uikit/inputs': minor
'@commercetools-frontend/ui-kit': minor
'@commercetools-uikit/design-system': minor
'@commercetools-uikit/i18n': minor
---

Remove unused old theme and token reference
226 changes: 68 additions & 158 deletions design-system/materials/custom-properties.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,54 +6,54 @@
*/

:root {
--color-primary: hsl(175, 55%, 45%);
--color-primary-10: hsl(175, 55%, 10%);
--color-primary-20: hsl(175, 55%, 20%);
--color-primary-25: hsl(175, 55%, 25%);
--color-primary-30: hsl(175, 55%, 30%);
--color-primary-40: hsl(175, 55%, 40%);
--color-primary-85: hsl(175, 70%, 85%);
--color-primary-90: hsl(175, 70%, 90%);
--color-primary-95: hsl(175, 90%, 95%);
--color-primary-98: hsl(175, 100%, 99%);
--color-primary: hsl(240, 64%, 58%);
--color-primary-10: hsl(240, 66%, 19%);
--color-primary-20: hsl(240, 45%, 33%);
--color-primary-25: hsl(240, 46%, 48%);
--color-primary-30: hsl(240, 46%, 53%);
--color-primary-40: hsl(240, 100%, 67%);
--color-primary-85: hsl(244, 100%, 84%);
--color-primary-90: hsl(243, 100%, 93%);
--color-primary-95: hsl(244, 100%, 97%);
--color-primary-98: hsl(244, 100%, 99%);
--color-accent: #213c45;
--color-accent-10: hsl(195, 35.2941176471%, 10%);
--color-accent-20: hsl(195, 35.2941176471%, 20%);
--color-accent-30: hsl(195, 35.2941176471%, 30%);
--color-accent-40: hsl(195, 35.2941176471%, 40%);
--color-accent-50: hsl(195, 35%, 50%);
--color-accent-60: hsl(195, 35.2941176471%, 60%);
--color-accent-85: hsl(195, 35%, 85%);
--color-accent-90: hsl(195, 35.2941176471%, 90%);
--color-accent-95: hsl(195, 35.2941176471%, 95%);
--color-accent-98: hsl(195, 35.2941176471%, 98%);
--color-brown-10: hsl(35, 90%, 10%);
--color-brown-20: hsl(35, 50%, 20%);
--color-brown-35: hsl(35, 25%, 35%);
--color-brown-50: hsl(35, 30%, 50%);
--color-brown-70: hsl(35, 40%, 70%);
--color-brown-85: hsl(35, 60%, 85%);
--color-brown-90: hsl(35, 90%, 90%);
--color-brown-95: hsl(35, 80%, 95%);
--color-brown-98: hsl(35, 90%, 98%);
--color-purple-10: hsl(248, 90%, 10%);
--color-accent-10: hsl(195, 100%, 10%);
--color-accent-20: hsl(195, 80%, 20%);
--color-accent-30: hsl(195, 70%, 30%);
--color-accent-40: hsl(195, 70%, 40%);
--color-accent-50: hsl(195, 70%, 50%);
--color-accent-60: hsl(195, 70%, 60%);
--color-accent-85: hsl(195, 85%, 85%);
--color-accent-90: hsl(195, 90%, 90%);
--color-accent-95: hsl(195, 95%, 95%);
--color-accent-98: hsl(195, 100%, 98%);
--color-brown-10: hsl(41, 100%, 10%);
--color-brown-20: hsl(41, 100%, 20%);
--color-brown-35: hsl(41, 96%, 35%);
--color-brown-50: hsl(41, 95%, 44%);
--color-brown-70: hsl(47, 95%, 70%);
--color-brown-85: hsl(47, 100%, 85%);
--color-brown-90: hsl(47, 100%, 90%);
--color-brown-95: hsl(47, 100%, 95%);
--color-brown-98: hsl(48, 100%, 97%);
--color-purple-10: hsl(248, 88%, 10%);
--color-purple-20: hsl(248, 50%, 20%);
--color-purple-35: hsl(248, 25%, 35%);
--color-purple-50: hsl(248, 30%, 50%);
--color-purple-70: hsl(248, 40%, 70%);
--color-purple-85: hsl(248, 60%, 85%);
--color-purple-90: hsl(248, 50%, 90%);
--color-purple-95: hsl(248, 80%, 95%);
--color-purple-98: hsl(248, 90%, 98%);
--color-turquoise-10: hsl(180, 90%, 10%);
--color-turquoise-20: hsl(180, 50%, 20%);
--color-turquoise-35: hsl(180, 25%, 35%);
--color-turquoise-50: hsl(180, 30%, 45%);
--color-turquoise-70: hsl(180, 40%, 70%);
--color-turquoise-85: hsl(180, 60%, 85%);
--color-turquoise-90: hsl(180, 40%, 90%);
--color-turquoise-95: hsl(180, 80%, 95%);
--color-turquoise-98: hsl(180, 90%, 98%);
--color-purple-50: hsl(248, 64%, 58%);
--color-purple-70: hsl(248, 80%, 70%);
--color-purple-85: hsl(249, 100%, 85%);
--color-purple-90: hsl(248, 100%, 90%);
--color-purple-95: hsl(248, 100%, 95%);
--color-purple-98: hsl(246, 100%, 98%);
--color-turquoise-10: hsl(180, 88%, 10%);
--color-turquoise-20: hsl(180, 90%, 20%);
--color-turquoise-35: hsl(178, 88%, 35%);
--color-turquoise-50: hsl(178, 67%, 50%);
--color-turquoise-70: hsl(180, 75%, 70%);
--color-turquoise-85: hsl(180, 90%, 85%);
--color-turquoise-90: hsl(180, 88%, 90%);
--color-turquoise-95: hsl(180, 88%, 95%);
--color-turquoise-98: hsl(180, 100%, 98%);
--color-neutral: hsl(232, 18%, 80%);
--color-neutral-05: hsl(0deg 0% 80% / 5%);
--color-neutral-10: hsl(0deg 0% 80% / 10%);
Expand All @@ -69,17 +69,17 @@
--color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
--color-info-90: #ceebfd;
--color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
--color-warning: #f16d0e;
--color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
--color-warning-40: hsl(25.110132158590307, 89.0196078431%, 40%);
--color-warning-60: hsl(25.110132158590307, 90%, 60%);
--color-warning-85: hsl(25.110132158590307, 89.0196078431%, 85%);
--color-warning-95: hsl(25.110132158590307, 89.0196078431%, 95%);
--color-error: #e60050;
--color-error-25: hsl(339.1304347826087, 100%, 25%);
--color-error-40: hsl(339.1304347826087, 100%, 40%);
--color-error-85: hsl(339.1304347826087, 100%, 85%);
--color-error-95: hsl(339.1304347826087, 100%, 95%);
--color-warning: hsl(35, 90%, 45%);
--color-warning-25: hsl(33, 83%, 25%);
--color-warning-40: hsl(33, 80%, 34%);
--color-warning-60: hsl(35, 90%, 55%);
--color-warning-85: hsl(33, 90%, 80%);
--color-warning-95: hsl(45, 100%, 92%);
--color-error: hsl(3, 65%, 58%);
--color-error-25: hsl(4, 69%, 37%);
--color-error-40: hsl(3, 60%, 46%);
--color-error-85: hsl(1, 55%, 74%);
--color-error-95: hsl(349, 66%, 92%);
--color-solid: #1a1a1a;
--color-solid-02: hsl(0deg 0% 10% / 2%);
--color-solid-05: hsl(0deg 0% 10% / 5%);
Expand Down Expand Up @@ -193,27 +193,10 @@
--break-point-biggerdesktop: 1280px;
--break-point-giantdesktop: 1680px;
--break-point-jumbodesktop: 1920px;
--background-color-for-button-when-active: hsl(232, 18%, 95%);
--background-color-for-button-when-hovered: hsl(232, 18%, 98%);
--background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
--background-color-for-icon-button-when-disabled: hsl(
195,
35.2941176471%,
95%
);
--background-color-for-input: #fff;
--background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
--background-color-for-input-when-disabled: hsl(232, 18%, 95%);
--background-color-for-input-when-hovered: hsl(232, 18%, 98%);
--background-color-for-input-when-focused: #fff;
--background-color-for-input-when-readonly: hsl(232, 18%, 95%);
--background-color-for-input-when-active: hsl(
203.05555555555554,
93.9130434783%,
95%
);
--background-color-for-input-as-quiet: transparent;
--background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
--background-color-for-input-when-hovered: hsl(244, 100%, 99%);
--background-color-for-localized-input-label: #fff;
--background-color-for-localized-input-label-when-readonly: hsl(
232,
Expand All @@ -225,102 +208,29 @@
18%,
95%
);
--background-color-for-button-as-primary: #15a390;
--background-color-for-button-as-primary-when-hovered: hsl(175, 55%, 45%);
--background-color-for-button-as-primary-as-default-when-hovered: #17ab97;
--background-color-for-button-as-primary-as-default-when-active: #15a390;
--background-color-for-button-as-primary-as-urgent: #f16d0e;
--background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
--background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
--background-color-for-toggle-thumb-when-active: hsl(175, 55%, 25%);
--background-color-for-toggle-track-when-active: hsl(175, 55%, 40%);
--background-color-for-toggle-thumb-when-disabled: hsl(
195,
35.2941176471%,
60%
);
--background-color-for-toggle-track-when-disabled: hsl(
195,
35.2941176471%,
90%
);
--background-color-for-toggle-thumb-when-active-when-disabled: hsl(
232,
18%,
60%
);
--background-color-for-toggle-track-when-active-when-disabled: hsl(
232,
18%,
90%
);
--background-color-for-toggle-thumb-when-hovered: rgba(0, 0, 0, 0.1);
--background-color-for-loading-spinner-track: #213c45;
--background-color-for-loading-spinner-dot: #213c45;
--background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
--background-color-for-view-switcher-button-when-active: hsl(232, 18%, 95%);
--background-color-for-checkbox-input-when-hovered: hsl(232, 18%, 90%);
--background-color-for-radio-option-when-hovered: hsl(232, 18%, 90%);
--background-color-for-tag: hsl(232, 18%, 95%);
--background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
--background-color-for-dropdown-when-hovered: hsl(232, 18%, 95%);
--background-color-for-dropdown-when-active: hsl(232, 18%, 90%);
--background-color-for-dropdown-option-when-active: hsl(
203.05555555555554,
93.9130434783%,
95%
);
--background-color-for-button-when-active: hsl(243, 100%, 93%);
--background-color-for-button-when-hovered: hsl(244, 100%, 97%);
--background-color-for-button-when-disabled: hsl(232, 18%, 95%);
--border-color-for-input: hsl(232, 18%, 80%);
--border-color-for-input-when-focused: hsl(175, 55%, 45%);
--border-color-for-input-when-disabled: hsl(232, 18%, 80%);
--border-color-for-input-when-readonly: #fff;
--border-color-for-input-when-error: #e60050;
--border-color-for-input-when-warning: #f16d0e;
--border-color-for-input-when-error: hsl(3, 65%, 58%);
--border-color-for-input-when-warning: hsl(35, 90%, 45%);
--border-color-for-input-when-hovered: hsl(232, 18%, 80%);
--border-color-for-input-as-quiet: transparent;
--border-color-for-button-as-secondary: hsl(232, 18%, 80%);
--border-color-for-dropdown: hsl(232, 18%, 80%);
--border-color-for-content-notification-when-success: hsl(175, 70%, 85%);
--border-color-for-checkbox-input: hsl(175, 55%, 45%);
--border-color-for-checkbox-input-when-active: hsl(175, 55%, 45%);
--border-color-for-tag: hsl(232, 18%, 85%);
--border-radius-for-button-as-big: 4px;
--border-radius-for-button-as-medium: 4px;
--border-color-for-input-when-focused: hsl(240, 100%, 67%);
--border-color-for-button-as-secondary: hsl(244, 100%, 84%);
--border-radius-for-input: 4px;
--border-width-for-input: 1px;
--border-width-for-input-when-warning: 1px;
--border-width-for-input-when-error: 1px;
--border-width-for-input-when-focused: 1px;
--font-color-for-input: #1a1a1a;
--font-color-for-input-when-disabled: hsl(232, 18%, 60%);
--font-color-for-input-when-error: #e60050;
--font-color-for-input-when-error: hsl(3, 60%, 46%);
--font-color-for-input-when-readonly: hsl(232, 18%, 40%);
--font-color-for-input-when-warning: #f16d0e;
--font-color-for-button-as-secondary: #1a1a1a;
--font-color-for-button-as-flat-when-hovered: hsl(175, 55%, 45%);
--font-color-for-button-as-flat-as-critical: #e60050;
--font-color-for-button-as-flat-as-critical-when-hovered: hsl(
339.1304347826087,
100%,
25%
);
--font-color-for-view-switcher-button: hsl(232, 18%, 40%);
--font-color-for-stamp-as-positive: hsl(175, 55%, 25%);
--font-color-for-content-notification-when-success: hsl(175, 55%, 45%);
--font-color-for-avatar-as-turquoise: hsl(180, 30%, 45%);
--font-color-for-leading-icon-as-turquoise: hsl(180, 30%, 45%);
--font-color-for-text-as-positive: hsl(175, 55%, 25%);
--font-color-for-input-when-warning: hsl(35, 90%, 45%);
--font-color-for-button-as-secondary: hsl(240, 64%, 58%);
--height-for-button-as-big: 40px;
--height-for-button-as-medium: 32px;
--height-for-button-as-small: 16px;
--height-for-button-as-medium: 32px;
--height-for-input: 40px;
--height-for-input-as-small: 32px;
--placeholder-font-color-for-input: hsl(232, 18%, 60%);
--font-size-for-button: 0.875rem;
--font-size-for-input: 1rem;
--padding-for-input: 0 var(--spacing-30);
--padding-for-input-as-quiet: 0 var(--spacing-20);
--padding-for-button: 0 var(--spacing-30);
--shadow-for-input: none;
--shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
--shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
Expand Down
Loading

0 comments on commit 3a47d4a

Please sign in to comment.