diff --git a/.changeset/smooth-rivers-turn.md b/.changeset/smooth-rivers-turn.md new file mode 100644 index 0000000000..f519fdd36e --- /dev/null +++ b/.changeset/smooth-rivers-turn.md @@ -0,0 +1,32 @@ +--- +'@commercetools-uikit/async-creatable-select-input': patch +'@commercetools-uikit/localized-rich-text-input': patch +'@commercetools-uikit/selectable-search-input': patch +'@commercetools-uikit/creatable-select-input': patch +'@commercetools-uikit/localized-text-input': patch +'@commercetools-uikit/async-select-input': patch +'@commercetools-uikit/primary-action-dropdown': patch +'@commercetools-uikit/rich-text-utils': patch +'@commercetools-uikit/checkbox-input': patch +'@commercetools-uikit/icon-button': patch +'@commercetools-uikit/select-input': patch +'@commercetools-uikit/select-utils': patch +'@commercetools-uikit/toggle-input': patch +'@commercetools-uikit/data-table-manager': patch +'@commercetools-uikit/money-input': patch +'@commercetools-uikit/radio-input': patch +'@commercetools-uikit/collapsible-panel': patch +'@commercetools-uikit/time-input': patch +'@commercetools-uikit/notifications': patch +'@commercetools-uikit/field-label': patch +'@commercetools-uikit/data-table': patch +'@commercetools-uikit/pagination': patch +'@commercetools-uikit/label': patch +'@commercetools-uikit/stamp': patch +'@commercetools-uikit/link': patch +'@commercetools-uikit/calendar-utils': patch +'@commercetools-uikit/tag': patch +'@commercetools-uikit/design-system': patch +--- + +Remove supporting code for look and feel migration. diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css index 2921eb8805..91728b4796 100644 --- a/design-system/materials/custom-properties.css +++ b/design-system/materials/custom-properties.css @@ -54,7 +54,7 @@ --border-radius-20: 20px; --border-width-1: 1px; --border-width-2: 2px; - --font-family: 'Open Sans', sans-serif; + --font-family: 'Inter', system-ui; --font-size-10: 0.75rem; --font-size-20: 0.875rem; --font-size-30: 1rem; @@ -140,269 +140,297 @@ --break-point-biggerdesktop: 1280px; --break-point-giantdesktop: 1680px; --break-point-jumbodesktop: 1920px; - --align-items-for-select-input-tag: unset; - --background-color-for-button-when-active: #fff; - --background-color-for-button-when-hovered: #fff; - --background-color-for-button-as-primary-when-active: #00b39e; - --background-color-for-button-as-primary-when-hovered: hsl( - 172.9608938547486, - 100%, - 25% - ); - --background-color-for-button-as-icon-as-primary-when-active: #00b39e; + --align-items-for-select-input-tag: center; + --background-color-for-button-when-active: hsl(0deg 0% 10% / 10%); + --background-color-for-button-when-hovered: hsl(0deg 0% 10% / 5%); + --background-color-for-button-as-primary-when-active: #15a390; + --background-color-for-button-as-primary-when-hovered: #17ab97; + --background-color-for-button-as-icon-as-primary-when-active: #15a390; --background-color-for-button-as-icon-as-primary-when-hovered: #00b39e; - --background-color-for-button-as-icon-as-info-when-active: #078cdf; + --background-color-for-button-as-icon-as-info-when-active: #057fcc; --background-color-for-button-as-icon-as-info-when-hovered: #078cdf; - --background-color-for-button-as-urgent-when-active: #f16d0e; - --background-color-for-button-as-urgent-when-hovered: hsl( - 25.110132158590307, - 89.0196078431%, - 25% - ); - --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 98%); + --background-color-for-button-as-urgent-when-active: #dc630a; + --background-color-for-button-as-urgent-when-hovered: #e7680d; + --background-color-for-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(195, 35.2941176471%, 98%); - --background-color-for-input-when-hovered: #fff; + --background-color-for-input-when-disabled: hsl(0, 0%, 95%); + --background-color-for-input-when-hovered: hsl(0, 0%, 98%); --background-color-for-input-when-focused: #fff; - --background-color-for-input-when-readonly: #fff; - --background-color-for-input-when-active: hsl(195, 35.2941176471%, 95%); - --background-color-for-table-cell-when-hovered: hsl(0, 0%, 90%); - --background-color-for-table-header: #213c45; + --background-color-for-input-when-readonly: hsl(0, 0%, 95%); + --background-color-for-input-when-active: hsl( + 203.05555555555554, + 93.9130434783%, + 95% + ); + --background-color-for-table-cell-when-hovered: hsl(0, 0%, 98%); + --background-color-for-table-header: hsl(0, 0%, 95%); --background-color-for-tag: hsl(0, 0%, 95%); --background-color-for-tag-warning: hsl( 25.110132158590307, 89.0196078431%, 95% ); - --background-color-for-tag-when-hovered: hsl(0, 0%, 95%); - --background-color-for-collapsible-panel-header-icon-when-disabled: hsl( + --background-color-for-tag-when-hovered: hsl(0, 0%, 90%); + --background-color-for-collapsible-panel-header-icon-when-disabled: #fff; + --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 98%); + --background-color-for-avatar: #213c45; + --background-color-for-avatar-when-highlighted: hsl(195, 35.2941176471%, 30%); + --background-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 95%); + --background-color-for-localized-input-label: #fff; + --background-color-for-localized-input-label-when-readonly: hsl(0, 0%, 95%); + --background-color-for-localized-input-label-when-disabled: hsl(0, 0%, 95%); + --background-color-for-localized-rich-text-body-button-when-active: hsl( 195, 35.2941176471%, - 98% + 20% ); - --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%); - --background-color-for-avatar: hsl(0, 0%, 60%); - --background-color-for-avatar-when-highlighted: #ccc; - --background-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 85%); - --background-color-for-localized-input-label: hsl(195, 35.2941176471%, 98%); - --background-color-for-localized-input-label-when-readonly: hsl( - 195, - 35.2941176471%, + --background-color-for-localized-rich-text-body-button: hsl(0, 0%, 95%); + --background-color-for-rich-text-dropdown-when-hovered: hsl(0, 0%, 95%); + --background-color-for-rich-text-more-styles-dropdown-when-hovered: hsl( + 203.05555555555554, + 93.9130434783%, 95% ); - --background-color-for-localized-input-label-when-disabled: hsl( - 195, - 35.2941176471%, - 98% + --background-color-for-rich-text-button: hsl(195, 35.2941176471%, 20%); + --background-color-for-tooltip: hsl(195, 35.2941176471%, 10%); + --background-color-for-view-switcher: #fff; + --background-color-for-view-switcher-when-disabled: #fff; + --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%); + --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 95%); + --background-color-for-content-notification-when-error: hsl( + 339.1304347826087, + 100%, + 95% ); - --background-color-for-localized-rich-text-body-button-when-active: hsl( - 195, - 35.2941176471%, - 30% + --background-color-for-content-notification-when-info: hsl( + 203.05555555555554, + 93.9130434783%, + 95% ); - --background-color-for-localized-rich-text-body-button: hsl(0, 0%, 90%); - --background-color-for-rich-text-dropdown-when-hovered: hsl(0, 0%, 90%); - --background-color-for-rich-text-more-styles-dropdown-when-hovered: hsl( - 0, - 0%, - 90% + --background-color-for-content-notification-when-warning: hsl( + 25.110132158590307, + 89.0196078431%, + 95% ); - --background-color-for-rich-text-button: hsl(195, 35.2941176471%, 30%); - --background-color-for-tooltip: #213c45; - --background-color-for-view-switcher: #fff; - --background-color-for-view-switcher-when-disabled: hsl( - 195, - 35.2941176471%, - 98% + --background-color-for-content-notification-when-success: hsl( + 172.9608938547486, + 100%, + 95% ); - --background-color-for-view-switcher-when-selected: hsl(0, 0%, 95%); - --background-color-for-view-switcher-when-hovered: hsl(0, 0%, 90%); - --background-color-for-content-notification-when-error: #fff; - --background-color-for-content-notification-when-info: #fff; - --background-color-for-content-notification-when-warning: #fff; - --background-color-for-content-notification-when-success: #fff; - --background-color-for-content-notification-icon-when-error: #e60050; - --background-color-for-content-notification-icon-when-info: #078cdf; - --background-color-for-content-notification-icon-when-warning: #f16d0e; - --background-color-for-content-notification-icon-when-success: #00b39e; - --background-color-for-checkbox-input-icon: #fff; - --background-color-for-checkbox-input-icon-when-disabled: #fff; - --background-color-for-checkbox-input-icon-when-readonly: #fff; - --background-color-for-checkbox-input-icon-when-error: #fff; - --background-color-for-checkbox-input-icon-when-hovered: #fff; - --background-color-for-primary-action-dropdown-when-active: hsl(0, 0%, 95%); - --background-color-for-primary-action-dropdown-when-disabled: hsl( - 195, - 35.2941176471%, - 98% + --background-color-for-content-notification-icon-when-error: hsl( + 339.1304347826087, + 100%, + 95% ); - --background-color-for-toggle-input-track: hsl(0, 0%, 60%); - --background-color-for-toggle-input-track-when-disabled: #ccc; - --background-color-for-toggle-input-thumb-when-disabled: hsl( - 195, - 35.2941176471%, + --background-color-for-content-notification-icon-when-info: hsl( + 203.05555555555554, + 93.9130434783%, 95% ); - --background-color-for-toggle-input-track-when-checked: #00b39e; - --background-color-for-toggle-input-thumb-when-checked: #fff; - --background-color-for-toggle-input-track-when-checked-and-disabled: hsl( + --background-color-for-content-notification-icon-when-warning: hsl( + 25.110132158590307, + 89.0196078431%, + 95% + ); + --background-color-for-content-notification-icon-when-success: hsl( + 172.9608938547486, + 100%, + 95% + ); + --background-color-for-checkbox-input-icon: #00b39e; + --background-color-for-checkbox-input-icon-when-disabled: #ccc; + --background-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%); + --background-color-for-checkbox-input-icon-when-error: #e60050; + --background-color-for-checkbox-input-icon-when-hovered: hsl(0, 0%, 90%); + --background-color-for-primary-action-dropdown-when-active: hsl(0, 0%, 90%); + --background-color-for-primary-action-dropdown-when-disabled: hsl(0, 0%, 95%); + --background-color-for-toggle-input-track: #ccc; + --background-color-for-toggle-input-track-when-disabled: hsl(0, 0%, 90%); + --background-color-for-toggle-input-thumb-when-disabled: hsl(0, 0%, 60%); + --background-color-for-toggle-input-track-when-checked: hsl( + 172.9608938547486, + 100%, + 40% + ); + --background-color-for-toggle-input-thumb-when-checked: hsl( 172.9608938547486, 100%, 25% ); - --background-color-for-toggle-input-thumb-when-checked-and-disabled: #ccc; - --border-for-button-as-secondary: none; - --border-for-button-as-secondary-when-hovered: none; - --border-for-button-as-secondary-when-active: none; - --border-for-card-when-raised: none; - --border-for-collapsible-panel-header-icon-when-disabled: 1px solid - var(--color-neutral); - --border-for-view-switcher: none; - --border-for-select-input-tag: none; - --border-for-radio-input-option: 1px; - --border-for-calendar-menu-when-focused: 1px solid var(--color-primary); - --border-color-for-input: hsl(0, 0%, 60%); + --background-color-for-toggle-input-track-when-checked-and-disabled: hsl( + 195, + 35.2941176471%, + 90% + ); + --background-color-for-toggle-input-thumb-when-checked-and-disabled: hsl( + 195, + 35.2941176471%, + 60% + ); + --border-for-button-as-secondary: 1px solid var(--color-neutral); + --border-for-button-as-secondary-when-hovered: 1px solid var(--color-neutral); + --border-for-button-as-secondary-when-active: 1px solid var(--color-neutral); + --border-for-card-when-raised: 1px solid var(--color-neutral-90); + --border-for-collapsible-panel-header-icon-when-disabled: none; + --border-for-view-switcher: 1px solid var(--color-neutral); + --border-for-select-input-tag: 1px solid var(--color-neutral-85); + --border-for-radio-input-option: 2px; + --border-for-calendar-menu-when-focused: none; + --border-color-for-input: #ccc; --border-color-for-input-when-focused: #00b39e; --border-color-for-input-when-disabled: #ccc; - --border-color-for-input-when-readonly: #ccc; + --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-hovered: #00b39e; - --border-color-for-tag: hsl(0, 0%, 60%); + --border-color-for-input-when-hovered: #ccc; + --border-color-for-tag: #ccc; --border-color-for-tag-warning: #f16d0e; - --border-color-for-tag-when-focused: #00b39e; - --border-color-for-tag-when-hovered: #f16d0e; - --border-color-for-button-as-icon: #fff; - --border-color-for-button-as-icon-as-info: #078cdf; - --border-color-for-button-as-icon-as-primary: #00b39e; - --border-color-for-button-as-icon-when-disabled: #ccc; - --border-color-for-table-header: #ccc; - --border-color-for-table-header-as-bottom: #213c45; - --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%); - --border-color-for-collapsible-panel-header: hsl(0, 0%, 60%); - --border-color-for-stamp-when-error: #e60050; - --border-color-for-stamp-when-warning: #f16d0e; - --border-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 40%); - --border-color-for-stamp-as-information: #078cdf; - --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 25%); - --border-color-for-stamp-as-secondary: hsl(0, 0%, 60%); + --border-color-for-tag-when-focused: #ccc; + --border-color-for-tag-when-hovered: #ccc; + --border-color-for-button-as-icon: #ccc; + --border-color-for-button-as-icon-as-info: #ccc; + --border-color-for-button-as-icon-as-primary: #ccc; + --border-color-for-button-as-icon-when-disabled: #fff; + --border-color-for-table-header: #fff; + --border-color-for-table-header-as-bottom: hsl(0, 0%, 90%); + --border-color-for-table-manager-droppable-list: #ccc; + --border-color-for-collapsible-panel-header: hsl(0, 0%, 90%); + --border-color-for-stamp-when-error: hsl(339.1304347826087, 100%, 85%); + --border-color-for-stamp-when-warning: hsl( + 25.110132158590307, + 89.0196078431%, + 85% + ); + --border-color-for-stamp-as-positive: hsl(172.9608938547486, 100%, 85%); + --border-color-for-stamp-as-information: hsl( + 203.05555555555554, + 93.9130434783%, + 85% + ); + --border-color-for-stamp-as-primary: hsl(172.9608938547486, 100%, 85%); + --border-color-for-stamp-as-secondary: hsl(0, 0%, 85%); --border-color-for-localized-input-label: #ccc; - --border-color-for-localized-input-label-when-readonly: #ccc; - --border-color-for-content-notification-when-error: #e60050; - --border-color-for-content-notification-when-info: #078cdf; - --border-color-for-content-notification-when-warning: #f16d0e; - --border-color-for-content-notification-when-success: #00b39e; - --border-color-for-group-heading-select-input-options: #ccc; - --border-color-for-select-input-menu: #00b39e; - --border-color-for-select-input-when-readonly: #ccc; - --border-color-for-select-input-menu-when-warning: #f16d0e; - --border-color-for-select-input-menu-when-error: #e60050; - --border-color-for-checkbox-input-icon: hsl(0, 0%, 60%); + --border-color-for-localized-input-label-when-readonly: #fff; + --border-color-for-content-notification-when-error: hsl( + 339.1304347826087, + 100%, + 85% + ); + --border-color-for-content-notification-when-info: hsl( + 203.05555555555554, + 93.9130434783%, + 85% + ); + --border-color-for-content-notification-when-warning: hsl( + 25.110132158590307, + 89.0196078431%, + 85% + ); + --border-color-for-content-notification-when-success: hsl( + 172.9608938547486, + 100%, + 85% + ); + --border-color-for-group-heading-select-input-options: hsl(0, 0%, 90%); + --border-color-for-select-input-menu: #fff; + --border-color-for-select-input-when-readonly: hsl(0, 0%, 95%); + --border-color-for-select-input-menu-when-warning: #fff; + --border-color-for-select-input-menu-when-error: #fff; + --border-color-for-checkbox-input-icon: #00b39e; --border-color-for-checkbox-input-icon-when-disabled: #ccc; - --border-color-for-checkbox-input-icon-when-readonly: #ccc; + --border-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%); --border-color-for-checkbox-input-icon-when-error: #e60050; - --border-color-for-radio-input: #ccc; - --border-color-for-radio-input-when-disabled: hsl(0, 0%, 60%); - --border-color-for-radio-input-when-readonly: #ccc; - --border-color-for-radio-input-when-checked: #ccc; - --border-color-for-radio-input-when-focused: #00b39e; - --border-color-for-primary-action-dropdown-menu: #ccc; - --border-radius-for-button-as-big: 6px; + --border-color-for-radio-input: hsl(0, 0%, 60%); + --border-color-for-radio-input-when-disabled: #ccc; + --border-color-for-radio-input-when-readonly: hsl(0, 0%, 60%); + --border-color-for-radio-input-when-checked: #00b39e; + --border-color-for-radio-input-when-focused: hsl(0, 0%, 60%); + --border-color-for-primary-action-dropdown-menu: #fff; + --border-radius-for-button-as-big: 4px; --border-radius-for-button-as-medium: 4px; - --border-radius-for-button-as-icon-as-big: 6px; + --border-radius-for-button-as-icon-as-big: 4px; --border-radius-for-button-as-icon-as-medium: 4px; --border-radius-for-button-as-icon-as-small: 2px; - --border-radius-for-input: 6px; + --border-radius-for-input: 4px; --border-radius-for-tag: 2px; - --border-radius-for-card: 6px; - --border-radius-for-table-manager-droppable-list: 6px; - --border-radius-for-stamp: 2px; - --border-radius-for-view-switcher: 6px; - --border-radius-for-content-notification: 0 var(--border-radius-6) - var(--border-radius-6) 0; - --border-radius-for-content-notification-icon: var(--border-radius-6) 0 0 - var(--border-radius-6); - --border-radius-for-primary-action-dropdown: var(--border-radius-6) 0 0 - var(--border-radius-6); - --border-radius-for-primary-action-dropdown-icon: 0 var(--border-radius-6) - var(--border-radius-6) 0; - --border-radius-for-primary-action-dropdown-menu: 6px; + --border-radius-for-card: 4px; + --border-radius-for-table-manager-droppable-list: 4px; + --border-radius-for-stamp: 20px; + --border-radius-for-view-switcher: 4px; + --border-radius-for-content-notification: 0 var(--border-radius-4) + var(--border-radius-4) 0; + --border-radius-for-content-notification-icon: var(--border-radius-4) 0 0 + var(--border-radius-4); + --border-radius-for-primary-action-dropdown: var(--border-radius-4) 0 0 + var(--border-radius-4); + --border-radius-for-primary-action-dropdown-icon: 0 var(--border-radius-4) + var(--border-radius-4) 0; + --border-radius-for-primary-action-dropdown-menu: 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; - --border-width-for-tag: 1px; - --border-width-for-select-input: 1px; - --border-width-for-content-notification-icon: 0px; - --border-left-width-for-content-notification: 1px; - --border-width-for-checkbox-input-icon: 1px; - --border-for-primary-action-dropdown-icon: 0px 0px 0px 1px; - --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 2px; - --box-shadow-for-view-switcher: 0 1px 1px 0 rgba(0, 0, 0, 0.24), - 0 -1px 1px 0 rgba(0, 0, 0, 0.12); - --box-shadow-for-view-switcher-when-selected: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25); - --box-shadow-for-select-input-when-focused: inset 0 0 0 2px; - --box-shadow-for-calendar-menu-when-focused: none; + --border-width-for-tag: 1px 1px 1px 0; + --border-width-for-select-input: 2px; + --border-width-for-content-notification-icon: 1px; + --border-left-width-for-content-notification: 0px; + --border-width-for-checkbox-input-icon: 2px; + --border-for-primary-action-dropdown-icon: 1px 1px 1px 0px; + --box-shadow-for-datetime-input-when-hovered: inset 0 0 0 1px; + --box-shadow-for-view-switcher: none; + --box-shadow-for-view-switcher-when-selected: none; + --box-shadow-for-select-input-when-focused: inset 0 0 0 1px; + --box-shadow-for-calendar-menu-when-focused: 0 2px 5px 0px rgba(0, 0, 0, 0.15); --font-color-for-text: #1a1a1a; - --font-color-for-text-when-disabled: #ccc; + --font-color-for-text-when-disabled: hsl(0, 0%, 60%); --font-color-for-input: #1a1a1a; --font-color-for-input-when-disabled: hsl(0, 0%, 60%); --font-color-for-input-when-error: #e60050; - --font-color-for-input-when-readonly: hsl(0, 0%, 60%); + --font-color-for-input-when-readonly: hsl(0, 0%, 40%); --font-color-for-input-when-warning: #f16d0e; --font-color-for-tag: #1a1a1a; - --font-color-for-tag-remove-icon: #1a1a1a; - --font-color-for-tag-drag-icon: #1a1a1a; - --font-color-for-tag-remove-icon-when-hovered: #f16d0e; + --font-color-for-tag-remove-icon: hsl(0, 0%, 40%); + --font-color-for-tag-drag-icon: hsl(0, 0%, 40%); + --font-color-for-tag-remove-icon-when-hovered: #e60050; --font-color-for-tag-when-disabled: hsl(0, 0%, 60%); --font-color-for-text-when-inverted: #fff; --font-color-for-link-as-inverted: #fff; - --font-color-for-link-as-primary: #00b39e; + --font-color-for-link-as-primary: hsl(172.9608938547486, 100%, 25%); --font-color-for-link-as-secondary: #1a1a1a; - --font-color-for-link-as-primary-when-active: hsl( - 172.9608938547486, - 100%, - 25% - ); + --font-color-for-link-as-primary-when-active: #00b39e; --font-color-for-link-as-secondary-when-active: #00b39e; - --font-color-for-table-header: #fff; + --font-color-for-table-header: #1a1a1a; --font-color-for-localized-input-label: hsl(0, 0%, 60%); - --font-color-for-view-switcher: #1a1a1a; + --font-color-for-view-switcher: hsl(0, 0%, 40%); --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%); --font-color-for-view-switcher-when-selected: #1a1a1a; - --font-color-for-clear-input-icon: #1a1a1a; - --font-color-for-clear-input-icon-when-hovered: #f16d0e; + --font-color-for-clear-input-icon: hsl(0, 0%, 40%); + --font-color-for-clear-input-icon-when-hovered: #e60050; --font-color-for-content-notification: #1a1a1a; - --font-color-for-content-notification-icon-when-error: #fff; - --font-color-for-content-notification-icon-when-warning: #fff; - --font-color-for-content-notification-icon-when-success: #fff; - --font-color-for-content-notification-icon-when-info: #fff; - --font-color-for-search-input-icon: #1a1a1a; + --font-color-for-content-notification-icon-when-error: #e60050; + --font-color-for-content-notification-icon-when-warning: #f16d0e; + --font-color-for-content-notification-icon-when-success: #00b39e; + --font-color-for-content-notification-icon-when-info: #078cdf; + --font-color-for-search-input-icon: hsl(0, 0%, 60%); --font-color-for-search-input-icon-when-hovered: #00b39e; - --font-color-for-select-input-icon: #1a1a1a; - --font-color-for-select-input-when-error: #1a1a1a; - --font-color-for-select-input-when-warning: #1a1a1a; - --font-color-for-select-input-icon-when-error: #1a1a1a; - --font-color-for-select-input-icon-when-warning: #1a1a1a; - --font-color-for-money-input-currency-dropdown-indicator: #1a1a1a; + --font-color-for-select-input-icon: hsl(0, 0%, 60%); + --font-color-for-select-input-when-error: #e60050; + --font-color-for-select-input-when-warning: #f16d0e; + --font-color-for-select-input-icon-when-error: #e60050; + --font-color-for-select-input-icon-when-warning: #f16d0e; + --font-color-for-money-input-currency-dropdown-indicator: hsl(0, 0%, 40%); --font-color-for-search-input-icon-when-readonly: hsl(0, 0%, 60%); --font-color-for-checkbox-input-label: #1a1a1a; --font-color-for-checkbox-input-label-when-error: #e60050; - --font-color-for-checkbox-input-label-when-disabled: hsl(0, 0%, 40%); + --font-color-for-checkbox-input-label-when-disabled: hsl(0, 0%, 60%); --font-color-for-checkbox-input-label-when-readonly: hsl(0, 0%, 40%); --font-color-for-radio-input-when-disabled: hsl(0, 0%, 60%); --font-color-for-radio-input-when-error: #e60050; --font-color-for-radio-input-when-readonly: hsl(0, 0%, 60%); --font-color-for-radio-input-when-warning: #f16d0e; - --font-color-for-flat-button-as-primary: #00b39e; - --font-color-for-flat-button-as-primary-when-hovered: hsl( - 172.9608938547486, - 100%, - 25% - ); + --font-color-for-flat-button-as-primary: hsl(172.9608938547486, 100%, 25%); + --font-color-for-flat-button-as-primary-when-hovered: #00b39e; --font-color-for-flat-button-as-critical: #e60050; --font-color-for-flat-button-as-critical-when-hovered: hsl( 339.1304347826087, @@ -412,170 +440,159 @@ --font-color-for-flat-button-as-secondary: #1a1a1a; --font-color-for-flat-button-as-inverted: #fff; --font-color-for-flat-button-icon-when-disabled: hsl(0, 0%, 60%); - --font-color-for-secondary-icon-button-as-primary: #00b39e; - --font-color-for-secondary-icon-button-as-primary-when-hovered: hsl( + --font-color-for-secondary-icon-button-as-primary: hsl( 172.9608938547486, 100%, 25% ); - --height-for-button-as-big: 32px; - --height-for-button-as-medium: 24px; - --height-for-button-as-icon-as-big: 32px; - --height-for-button-as-icon-as-medium: 24px; + --font-color-for-secondary-icon-button-as-primary-when-hovered: #00b39e; + --height-for-button-as-big: 40px; + --height-for-button-as-medium: 32px; + --height-for-button-as-icon-as-big: 40px; + --height-for-button-as-icon-as-medium: 32px; --height-for-button-as-icon-as-small: 16px; - --height-for-input: 32px; - --height-for-view-switcher: 32px; - --height-for-view-switcher-when-condensed: 24px; - --height-for-select-input-tag: 26px; - --height-for-radio-input-option: 16px; - --height-for-radio-input-option-when-checked: 8px; - --height-for-primary-action-dropdown: 32px; - --width-for-avatar-as-medium: 48px; - --min-width-for-money-input-currency-dropdown: 72px; + --height-for-input: 40px; + --height-for-view-switcher: 40px; + --height-for-view-switcher-when-condensed: 32px; + --height-for-select-input-tag: 32px; + --height-for-radio-input-option: 18px; + --height-for-radio-input-option-when-checked: 10px; + --height-for-primary-action-dropdown: 40px; + --width-for-avatar-as-medium: 40px; + --min-width-for-money-input-currency-dropdown: 80px; --placeholder-font-color-for-input: hsl(0, 0%, 60%); - --font-size-for-button: 1rem; + --font-size-for-button: 0.875rem; --font-size-for-input: 1rem; - --font-size-for-text-as-h1: 2.4615rem; - --font-size-for-text-as-h2: 1.8462rem; - --font-size-for-text-as-h3: 1.5385rem; - --font-size-for-text-as-h4: 1.2308rem; - --font-size-for-text-as-h5: 1.0769rem; + --font-size-for-text-as-h1: 1.5rem; + --font-size-for-text-as-h2: 1.25rem; + --font-size-for-text-as-h3: 1.125rem; + --font-size-for-text-as-h4: 1rem; + --font-size-for-text-as-h5: 1rem; --font-size-for-text-as-body: 1rem; - --font-size-for-text-as-detail: 0.9231rem; - --font-size-for-body: 13px; + --font-size-for-text-as-detail: 0.875rem; + --font-size-for-body: 16px; --font-size-for-link: 1rem; - --font-size-for-stamp: 1rem; - --font-size-for-view-switcher: 1rem; - --font-size-for-table: 1rem; - --font-size-for-avatar-as-small: 1rem; - --font-size-for-avatar-as-medium: 1.5rem; - --font-size-for-avatar-as-big: 3rem; + --font-size-for-stamp: 0.875rem; + --font-size-for-view-switcher: 0.875rem; + --font-size-for-table: 0.875rem; + --font-size-for-avatar-as-small: 0.875rem; + --font-size-for-avatar-as-medium: 1rem; + --font-size-for-avatar-as-big: 2.5rem; --font-size-for-localized-input-label: 1rem; --font-size-for-content-notification: 1rem; - --font-size-for-select-input-tag: 0.9231rem; - --icon-color-for-datetime-input-icon: #1a1a1a; - --icon-color-for-datetime-input-icon-when-hovered: #f16d0e; - --line-height-for-text-as-h1: inherit; - --line-height-for-text-as-h2: inherit; - --line-height-for-text-as-h3: inherit; - --line-height-for-text-as-h4: inherit; - --line-height-for-text-as-h5: inherit; - --line-height-for-text-as-body: inherit; - --line-height-for-text-as-detail: inherit; - --line-height-for-select-input-options: inherit; - --line-height-for-table-header: inherit; - --font-weight-for-text-as-h1: 300; - --font-weight-for-text-as-h2: 300; - --font-weight-for-text-as-h3: 300; - --font-weight-for-text-as-h4: 400; - --font-weight-for-text-as-h5: 400; + --font-size-for-select-input-tag: 1rem; + --icon-color-for-datetime-input-icon: hsl(0, 0%, 40%); + --icon-color-for-datetime-input-icon-when-hovered: #e60050; + --line-height-for-text-as-h1: 2.125rem; + --line-height-for-text-as-h2: 1.75rem; + --line-height-for-text-as-h3: 1.5rem; + --line-height-for-text-as-h4: 1.375rem; + --line-height-for-text-as-h5: 1.375rem; + --line-height-for-text-as-body: 1.625rem; + --line-height-for-text-as-detail: 1.375rem; + --line-height-for-select-input-options: 1.625rem; + --line-height-for-table-header: 26px; + --font-weight-for-text-as-h1: 600; + --font-weight-for-text-as-h2: 500; + --font-weight-for-text-as-h3: 500; + --font-weight-for-text-as-h4: 500; + --font-weight-for-text-as-h5: 500; --font-weight-for-text-as-body: 400; --font-weight-for-text-as-detail: 400; - --font-weight-for-button: 400; - --font-weight-for-table-header: 400; - --font-weight-for-text-as-bold: 700; - --margin-for-table-header: 8px; - --margin-for-table-as-condensed: 8px; - --margin-for-view-switcher-icon: 0 var(--spacing-10) 0 0; - --margin-for-group-heading-select-input-options: 4px; - --margin-for-select-input-icon: 4px; - --margin-left-for-select-input-icon: inherit; - --margin-right-for-money-input-precision-badge: 4px; - --margin-right-for-search-input-icon: 8px; - --margin-right-for-clear-input-icon: 4px; - --margin-left-for-radio-input-label: 8px; - --margin-right-for-primary-action-dropdown: 4px; - --margin-top-for-primary-action-dropdown: none; - --margin-for-localized-rich-text-body-button: none; - --margin-for-rich-text-divider: 0 var(--spacing-10); - --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-10); - --margin-for-tag-list: 0 var(--spacing-10) var(--spacing-10) 0; - --padding-for-stamp: var(--spacing-10) var(--spacing-20); - --padding-for-stamp-as-condensed: 1px var(--spacing-10); - --padding-for-tag: 5px var(--spacing-20); - --padding-for-table-header: 16px; - --padding-for-table-header-as-condensed: 8px; - --padding-for-table-cell: 16px; - --padding-for-table-cell-as-condensed: 8px; - --padding-for-table-manager-droppable-list: 8px; - --padding-for-table-manager-settings-panel: 16px; - --padding-for-table-manager-draggable-tag: 4px; - --padding-for-collapsible-panel-header: var(--spacing-20) var(--spacing-30); - --padding-for-collapsible-panel-header-as-condensed: 8px; - --padding-for-collapsible-panel-section-wrapper: 16px; - --padding-for-collapsible-panel-section-wrapper-as-condensed: 8px; - --padding-for-collapsible-panel-section-description: 0 0 var(--spacing-50); + --font-weight-for-button: 500; + --font-weight-for-table-header: 600; + --font-weight-for-text-as-bold: 600; + --margin-for-table-header: 16px; + --margin-for-table-cell-as-condensed: 8px; + --margin-for-view-switcher-icon: 0 var(--spacing-20) 0 0; + --margin-for-group-heading-select-input-options: 8px; + --margin-for-select-input-icon: 8px; + --margin-left-for-select-input-icon: 8px; + --margin-right-for-money-input-precision-badge: 12px; + --margin-right-for-search-input-icon: 12px; + --margin-right-for-clear-input-icon: 8px; + --margin-left-for-radio-input-label: 4px; + --margin-right-for-primary-action-dropdown: 8px; + --margin-top-for-primary-action-dropdown: 8px; + --margin-for-localized-rich-text-body-button: 0 2px var(--spacing-20) 2px; + --margin-for-rich-text-divider: var(--spacing-10) 2px; + --margin-for-rich-text-dropdown-item-label: 0 0 0 var(--spacing-20); + --margin-for-tag-list: 0 var(--spacing-20) var(--spacing-20) 0; + --padding-for-stamp: 4px 12px; + --padding-for-stamp-as-condensed: 0 var(--spacing-20); + --padding-for-tag: 2px 12px; + --padding-for-table-header: 24px; + --padding-for-table-header-as-condensed: 24px; + --padding-for-table-cell: var(--spacing-30) var(--spacing-40); + --padding-for-table-cell-as-condensed: var(--spacing-20) var(--spacing-40); + --padding-for-table-manager-droppable-list: 16px; + --padding-for-table-manager-settings-panel: var(--spacing-40) + var(--spacing-50); + --padding-for-table-manager-draggable-tag: var(--spacing-10) 0; + --padding-for-collapsible-panel-header: var(--spacing-30) 0; + --padding-for-collapsible-panel-header-as-condensed: var(--spacing-20) 0; + --padding-for-collapsible-panel-section-wrapper: var(--spacing-50) 0 0 + calc(var(--spacing-30) + var(--spacing-10)); + --padding-for-collapsible-panel-section-wrapper-as-condensed: var( + --spacing-40 + ) + 0 0 calc(var(--spacing-30) + var(--spacing-10)); + --padding-for-collapsible-panel-section-description: 0 0 var(--spacing-40); --padding-for-collapsible-panel-section-description-as-condensed: 0 0 + var(--spacing-40); + --padding-for-input: 16px; + --padding-for-multiline-input: 8px; + --padding-for-localized-rich-text-input-label: var(--spacing-20) 12px; + --padding-for-localized-rich-text-dropdown-button: 5px var(--spacing-20); + --padding-for-localized-rich-text-dropdown-item: var(--spacing-20) var(--spacing-30); - --padding-for-input: 8px; - --padding-for-multiline-input: var(--spacing-10) var(--spacing-20); - --padding-for-localized-rich-text-input-label: 0 var(--spacing-20); - --padding-for-localized-rich-text-dropdown-button: 3px var(--spacing-20); - --padding-for-localized-rich-text-dropdown-item: var(--spacing-10) - var(--spacing-20); - --padding-for-localized-rich-text-body-button: var(--spacing-10); - --padding-for-localized-input-label: 0 var(--spacing-20); - --padding-for-rich-text-input: none; - --padding-for-rich-text-toolbar: var(--spacing-10) 7px; - --padding-left-for-rich-text-toolbar: 3px; - --padding-for-rich-text-editor-container: 6px var(--spacing-20) - var(--spacing-10); + --padding-for-localized-rich-text-body-button: var(--spacing-20); + --padding-for-localized-input-label: 0 12px; + --padding-for-rich-text-input: var(--spacing-20) var(--spacing-30); + --padding-for-rich-text-toolbar: none; + --padding-left-for-rich-text-toolbar: none; + --padding-for-rich-text-editor-container: var(--spacing-20) 0 0; --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20); - --padding-for-tag-remove-icon: 0 var(--spacing-10); - --padding-for-tooltip: var(--spacing-10) var(--spacing-20); + --padding-for-tag-remove-icon: 0 12px; + --padding-for-tooltip: var(--spacing-20) 12px; --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30); - --padding-for-view-switcher-when-condensed: 0 var(--spacing-20) 0 - var(--spacing-20); - --padding-for-content-notification: var(--spacing-20); - --padding-for-content-notification-icon: var(--spacing-20) var(--spacing-30); - --padding-left-for-select-input-options: 8px; - --padding-right-for-select-input-options: 8px; - --padding-top-for-select-input-options: 4px; - --padding-bottom-for-select-input-options: 4px; - --padding-for-group-heading-select-input-options: 8px; - --padding-for-select-input-menu: inherit; - --padding-for-money-input-currency-dropdown: 0 var(--spacing-20); - --padding-for-selectable-search-input-dropdown: 0 var(--spacing-20); - --padding-for-primary-action-dropdown: 0 var(--spacing-20); - --padding-for-primary-action-dropdown-icon: 0 var(--spacing-10); - --padding-for-button-as-medium: 0 var(--spacing-20); + --padding-for-view-switcher-when-condensed: 0 12px 0 12px; + --padding-for-content-notification: var(--spacing-20) var(--spacing-30) + var(--spacing-20) var(--spacing-20); + --padding-for-content-notification-icon: var(--spacing-20) 0 var(--spacing-20) + var(--spacing-30); + --padding-left-for-select-input-options: 16px; + --padding-right-for-select-input-options: 16px; + --padding-top-for-select-input-options: 8px; + --padding-bottom-for-select-input-options: 8px; + --padding-for-group-heading-select-input-options: 16px; + --padding-for-select-input-menu: var(--spacing-10) 0; + --padding-for-money-input-currency-dropdown: 0 12px; + --padding-for-selectable-search-input-dropdown: 0 12px; + --padding-for-primary-action-dropdown: 0 var(--spacing-30); + --padding-for-primary-action-dropdown-icon: 0 var(--spacing-20); + --padding-for-button-as-medium: 0 var(--spacing-30); --padding-for-button-as-big: 0 var(--spacing-30); - --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), - 0 1px 1px 0 rgba(0, 0, 0, 0.24); - --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), - 0 2px 4px 0 rgba(0, 0, 0, 0.24); - --shadow-for-button-when-hovered: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), - 0 2px 4px 0 rgba(0, 0, 0, 0.24); - --shadow-for-button-when-active: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25); - --shadow-for-button-when-disabled: 0 0 0 1px var(--color-neutral) inset; --shadow-box-tag-when-hovered: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - --shadow-for-card-when-raised: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); + --shadow-for-button: none; + --shadow-for-button-when-focused: none; + --shadow-for-button-when-hovered: none; + --shadow-for-button-when-active: none; + --shadow-for-button-when-disabled: none; + --shadow-for-card-when-raised: 0 1px 5px 0 rgba(0, 0, 0, 0.05); --shadow-for-input: none; - --shadow-for-input-when-focused: inset 0 0 0 2px var(--color-primary); - --shadow-for-input-when-error: none; - --shadow-for-input-when-warning: none; - --shadow-for-tooltip: 0 2px 2px rgba(0, 0, 0, 0.24), - 0 1px 4.75px rgba(0, 0, 0, 0.12); - --shadow-for-select-input-menu: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), - 0 1px 1px 0 rgba(0, 0, 0, 0.24); - --shadow-for-primary-action-dropdown: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), - 0 1px 1px 0 rgba(0, 0, 0, 0.24); - --shadow-for-primary-action-dropdown-when-hovered: 0 1px 9.5px 0 - rgba(0, 0, 0, 0.12), - 0 2px 4px 0 rgba(0, 0, 0, 0.24); - --shadow-for-primary-action-dropdown-when-active: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), - inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25); - --shadow-for-primary-action-dropdown-menu: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); - --shadow-for-toggle-input-thumb: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), - 0 1px 1px 0 rgba(0, 0, 0, 0.24); - --shadow-for-tag-when-hovered: 0 1px 3px rgba(0, 0, 0, 0.12), - 0 1px 2px rgba(0, 0, 0, 0.24); + --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); + --shadow-for-input-when-warning: inset 0 0 0 1px var(--color-warning); + --shadow-for-tooltip: 0px 1px 2px 0px rgba(0, 0, 0, 0.25); + --shadow-for-select-input-menu: 0 2px 5px 0px rgba(0, 0, 0, 0.15); + --shadow-for-primary-action-dropdown: none; + --shadow-for-primary-action-dropdown-when-hovered: none; + --shadow-for-primary-action-dropdown-when-active: none; + --shadow-for-primary-action-dropdown-menu: 0 2px 5px 0px rgba(0, 0, 0, 0.15); + --shadow-for-toggle-input-thumb: 0px 1px 5px rgba(0, 0, 0, 0.2); + --shadow-for-tag-when-hovered: none; --font-size-m: 1rem; --big-button-height: 32px; --small-button-height: 24px; diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json index d2718d53fe..e332e349ee 100644 --- a/design-system/materials/custom-properties.json +++ b/design-system/materials/custom-properties.json @@ -47,7 +47,7 @@ "--border-radius-20": "20px", "--border-width-1": "1px", "--border-width-2": "2px", - "--font-family": "'Open Sans', sans-serif", + "--font-family": "'Inter', system-ui", "--font-size-10": "0.75rem", "--font-size-20": "0.875rem", "--font-size-30": "1rem", @@ -128,349 +128,349 @@ "--break-point-biggerdesktop": "1280px", "--break-point-giantdesktop": "1680px", "--break-point-jumbodesktop": "1920px", - "--align-items-for-select-input-tag": "unset", - "--background-color-for-button-when-active": "#fff", - "--background-color-for-button-when-hovered": "#fff", - "--background-color-for-button-as-primary-when-active": "#00b39e", - "--background-color-for-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)", - "--background-color-for-button-as-icon-as-primary-when-active": "#00b39e", + "--align-items-for-select-input-tag": "center", + "--background-color-for-button-when-active": "hsl(0deg 0% 10% / 10%)", + "--background-color-for-button-when-hovered": "hsl(0deg 0% 10% / 5%)", + "--background-color-for-button-as-primary-when-active": "#15A390", + "--background-color-for-button-as-primary-when-hovered": "#17AB97", + "--background-color-for-button-as-icon-as-primary-when-active": "#15A390", "--background-color-for-button-as-icon-as-primary-when-hovered": "#00b39e", - "--background-color-for-button-as-icon-as-info-when-active": "#078cdf", + "--background-color-for-button-as-icon-as-info-when-active": "#057FCC", "--background-color-for-button-as-icon-as-info-when-hovered": "#078cdf", - "--background-color-for-button-as-urgent-when-active": "#f16d0e", - "--background-color-for-button-as-urgent-when-hovered": "hsl(25.110132158590307, 89.0196078431%, 25%)", - "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 98%)", + "--background-color-for-button-as-urgent-when-active": "#DC630A", + "--background-color-for-button-as-urgent-when-hovered": "#E7680D", + "--background-color-for-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(195, 35.2941176471%, 98%)", - "--background-color-for-input-when-hovered": "#fff", + "--background-color-for-input-when-disabled": "hsl(0, 0%, 95%)", + "--background-color-for-input-when-hovered": "hsl(0, 0%, 98%)", "--background-color-for-input-when-focused": "#fff", - "--background-color-for-input-when-readonly": "#fff", - "--background-color-for-input-when-active": "hsl(195, 35.2941176471%, 95%)", - "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 90%)", - "--background-color-for-table-header": "#213c45", + "--background-color-for-input-when-readonly": "hsl(0, 0%, 95%)", + "--background-color-for-input-when-active": "hsl(203.05555555555554, 93.9130434783%, 95%)", + "--background-color-for-table-cell-when-hovered": "hsl(0, 0%, 98%)", + "--background-color-for-table-header": "hsl(0, 0%, 95%)", "--background-color-for-tag": "hsl(0, 0%, 95%)", "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)", - "--background-color-for-tag-when-hovered": "hsl(0, 0%, 95%)", - "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)", - "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)", - "--background-color-for-avatar": "hsl(0, 0%, 60%)", - "--background-color-for-avatar-when-highlighted": "#ccc", - "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)", - "--background-color-for-localized-input-label": "hsl(195, 35.2941176471%, 98%)", - "--background-color-for-localized-input-label-when-readonly": "hsl(195, 35.2941176471%, 95%)", - "--background-color-for-localized-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)", - "--background-color-for-localized-rich-text-body-button-when-active": "hsl(195, 35.2941176471%, 30%)", - "--background-color-for-localized-rich-text-body-button": "hsl(0, 0%, 90%)", - "--background-color-for-rich-text-dropdown-when-hovered": "hsl(0, 0%, 90%)", - "--background-color-for-rich-text-more-styles-dropdown-when-hovered": "hsl(0, 0%, 90%)", - "--background-color-for-rich-text-button": "hsl(195, 35.2941176471%, 30%)", - "--background-color-for-tooltip": "#213c45", + "--background-color-for-tag-when-hovered": "hsl(0, 0%, 90%)", + "--background-color-for-collapsible-panel-header-icon-when-disabled": "#fff", + "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 98%)", + "--background-color-for-avatar": "#213c45", + "--background-color-for-avatar-when-highlighted": "hsl(195, 35.2941176471%, 30%)", + "--background-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 95%)", + "--background-color-for-localized-input-label": "#fff", + "--background-color-for-localized-input-label-when-readonly": "hsl(0, 0%, 95%)", + "--background-color-for-localized-input-label-when-disabled": "hsl(0, 0%, 95%)", + "--background-color-for-localized-rich-text-body-button-when-active": "hsl(195, 35.2941176471%, 20%)", + "--background-color-for-localized-rich-text-body-button": "hsl(0, 0%, 95%)", + "--background-color-for-rich-text-dropdown-when-hovered": "hsl(0, 0%, 95%)", + "--background-color-for-rich-text-more-styles-dropdown-when-hovered": "hsl(203.05555555555554, 93.9130434783%, 95%)", + "--background-color-for-rich-text-button": "hsl(195, 35.2941176471%, 20%)", + "--background-color-for-tooltip": "hsl(195, 35.2941176471%, 10%)", "--background-color-for-view-switcher": "#fff", - "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)", + "--background-color-for-view-switcher-when-disabled": "#fff", "--background-color-for-view-switcher-when-selected": "hsl(0, 0%, 95%)", - "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 90%)", - "--background-color-for-content-notification-when-error": "#fff", - "--background-color-for-content-notification-when-info": "#fff", - "--background-color-for-content-notification-when-warning": "#fff", - "--background-color-for-content-notification-when-success": "#fff", - "--background-color-for-content-notification-icon-when-error": "#e60050", - "--background-color-for-content-notification-icon-when-info": "#078cdf", - "--background-color-for-content-notification-icon-when-warning": "#f16d0e", - "--background-color-for-content-notification-icon-when-success": "#00b39e", - "--background-color-for-checkbox-input-icon": "#fff", - "--background-color-for-checkbox-input-icon-when-disabled": "#fff", - "--background-color-for-checkbox-input-icon-when-readonly": "#fff", - "--background-color-for-checkbox-input-icon-when-error": "#fff", - "--background-color-for-checkbox-input-icon-when-hovered": "#fff", - "--background-color-for-primary-action-dropdown-when-active": "hsl(0, 0%, 95%)", - "--background-color-for-primary-action-dropdown-when-disabled": "hsl(195, 35.2941176471%, 98%)", - "--background-color-for-toggle-input-track": "hsl(0, 0%, 60%)", - "--background-color-for-toggle-input-track-when-disabled": "#ccc", - "--background-color-for-toggle-input-thumb-when-disabled": "hsl(195, 35.2941176471%, 95%)", - "--background-color-for-toggle-input-track-when-checked": "#00b39e", - "--background-color-for-toggle-input-thumb-when-checked": "#fff", - "--background-color-for-toggle-input-track-when-checked-and-disabled": "hsl(172.9608938547486, 100%, 25%)", - "--background-color-for-toggle-input-thumb-when-checked-and-disabled": "#ccc", - "--border-for-button-as-secondary": "none", - "--border-for-button-as-secondary-when-hovered": "none", - "--border-for-button-as-secondary-when-active": "none", - "--border-for-card-when-raised": "none", - "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)", - "--border-for-view-switcher": "none", - "--border-for-select-input-tag": "none", - "--border-for-radio-input-option": "1px", - "--border-for-calendar-menu-when-focused": "1px solid var(--color-primary)", - "--border-color-for-input": "hsl(0, 0%, 60%)", + "--background-color-for-view-switcher-when-hovered": "hsl(0, 0%, 95%)", + "--background-color-for-content-notification-when-error": "hsl(339.1304347826087, 100%, 95%)", + "--background-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)", + "--background-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)", + "--background-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 95%)", + "--background-color-for-content-notification-icon-when-error": "hsl(339.1304347826087, 100%, 95%)", + "--background-color-for-content-notification-icon-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)", + "--background-color-for-content-notification-icon-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)", + "--background-color-for-content-notification-icon-when-success": "hsl(172.9608938547486, 100%, 95%)", + "--background-color-for-checkbox-input-icon": "#00b39e", + "--background-color-for-checkbox-input-icon-when-disabled": "#ccc", + "--background-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)", + "--background-color-for-checkbox-input-icon-when-error": "#e60050", + "--background-color-for-checkbox-input-icon-when-hovered": "hsl(0, 0%, 90%)", + "--background-color-for-primary-action-dropdown-when-active": "hsl(0, 0%, 90%)", + "--background-color-for-primary-action-dropdown-when-disabled": "hsl(0, 0%, 95%)", + "--background-color-for-toggle-input-track": "#ccc", + "--background-color-for-toggle-input-track-when-disabled": "hsl(0, 0%, 90%)", + "--background-color-for-toggle-input-thumb-when-disabled": "hsl(0, 0%, 60%)", + "--background-color-for-toggle-input-track-when-checked": "hsl(172.9608938547486, 100%, 40%)", + "--background-color-for-toggle-input-thumb-when-checked": "hsl(172.9608938547486, 100%, 25%)", + "--background-color-for-toggle-input-track-when-checked-and-disabled": "hsl(195, 35.2941176471%, 90%)", + "--background-color-for-toggle-input-thumb-when-checked-and-disabled": "hsl(195, 35.2941176471%, 60%)", + "--border-for-button-as-secondary": "1px solid var(--color-neutral)", + "--border-for-button-as-secondary-when-hovered": "1px solid var(--color-neutral)", + "--border-for-button-as-secondary-when-active": "1px solid var(--color-neutral)", + "--border-for-card-when-raised": "1px solid var(--color-neutral-90)", + "--border-for-collapsible-panel-header-icon-when-disabled": "none", + "--border-for-view-switcher": "1px solid var(--color-neutral)", + "--border-for-select-input-tag": "1px solid var(--color-neutral-85)", + "--border-for-radio-input-option": "2px", + "--border-for-calendar-menu-when-focused": "none", + "--border-color-for-input": "#ccc", "--border-color-for-input-when-focused": "#00b39e", "--border-color-for-input-when-disabled": "#ccc", - "--border-color-for-input-when-readonly": "#ccc", + "--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-hovered": "#00b39e", - "--border-color-for-tag": "hsl(0, 0%, 60%)", + "--border-color-for-input-when-hovered": "#ccc", + "--border-color-for-tag": "#ccc", "--border-color-for-tag-warning": "#f16d0e", - "--border-color-for-tag-when-focused": "#00b39e", - "--border-color-for-tag-when-hovered": "#f16d0e", - "--border-color-for-button-as-icon": "#fff", - "--border-color-for-button-as-icon-as-info": "#078cdf", - "--border-color-for-button-as-icon-as-primary": "#00b39e", - "--border-color-for-button-as-icon-when-disabled": "#ccc", - "--border-color-for-table-header": "#ccc", - "--border-color-for-table-header-as-bottom": "#213c45", - "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)", - "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 60%)", - "--border-color-for-stamp-when-error": "#e60050", - "--border-color-for-stamp-when-warning": "#f16d0e", - "--border-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 40%)", - "--border-color-for-stamp-as-information": "#078cdf", - "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 25%)", - "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 60%)", + "--border-color-for-tag-when-focused": "#ccc", + "--border-color-for-tag-when-hovered": "#ccc", + "--border-color-for-button-as-icon": "#ccc", + "--border-color-for-button-as-icon-as-info": "#ccc", + "--border-color-for-button-as-icon-as-primary": "#ccc", + "--border-color-for-button-as-icon-when-disabled": "#fff", + "--border-color-for-table-header": "#fff", + "--border-color-for-table-header-as-bottom": "hsl(0, 0%, 90%)", + "--border-color-for-table-manager-droppable-list": "#ccc", + "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 90%)", + "--border-color-for-stamp-when-error": "hsl(339.1304347826087, 100%, 85%)", + "--border-color-for-stamp-when-warning": "hsl(25.110132158590307, 89.0196078431%, 85%)", + "--border-color-for-stamp-as-positive": "hsl(172.9608938547486, 100%, 85%)", + "--border-color-for-stamp-as-information": "hsl(203.05555555555554, 93.9130434783%, 85%)", + "--border-color-for-stamp-as-primary": "hsl(172.9608938547486, 100%, 85%)", + "--border-color-for-stamp-as-secondary": "hsl(0, 0%, 85%)", "--border-color-for-localized-input-label": "#ccc", - "--border-color-for-localized-input-label-when-readonly": "#ccc", - "--border-color-for-content-notification-when-error": "#e60050", - "--border-color-for-content-notification-when-info": "#078cdf", - "--border-color-for-content-notification-when-warning": "#f16d0e", - "--border-color-for-content-notification-when-success": "#00b39e", - "--border-color-for-group-heading-select-input-options": "#ccc", - "--border-color-for-select-input-menu": "#00b39e", - "--border-color-for-select-input-when-readonly": "#ccc", - "--border-color-for-select-input-menu-when-warning": "#f16d0e", - "--border-color-for-select-input-menu-when-error": "#e60050", - "--border-color-for-checkbox-input-icon": "hsl(0, 0%, 60%)", + "--border-color-for-localized-input-label-when-readonly": "#fff", + "--border-color-for-content-notification-when-error": "hsl(339.1304347826087, 100%, 85%)", + "--border-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 85%)", + "--border-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 85%)", + "--border-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 85%)", + "--border-color-for-group-heading-select-input-options": "hsl(0, 0%, 90%)", + "--border-color-for-select-input-menu": "#fff", + "--border-color-for-select-input-when-readonly": "hsl(0, 0%, 95%)", + "--border-color-for-select-input-menu-when-warning": "#fff", + "--border-color-for-select-input-menu-when-error": "#fff", + "--border-color-for-checkbox-input-icon": "#00b39e", "--border-color-for-checkbox-input-icon-when-disabled": "#ccc", - "--border-color-for-checkbox-input-icon-when-readonly": "#ccc", + "--border-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)", "--border-color-for-checkbox-input-icon-when-error": "#e60050", - "--border-color-for-radio-input": "#ccc", - "--border-color-for-radio-input-when-disabled": "hsl(0, 0%, 60%)", - "--border-color-for-radio-input-when-readonly": "#ccc", - "--border-color-for-radio-input-when-checked": "#ccc", - "--border-color-for-radio-input-when-focused": "#00b39e", - "--border-color-for-primary-action-dropdown-menu": "#ccc", - "--border-radius-for-button-as-big": "6px", + "--border-color-for-radio-input": "hsl(0, 0%, 60%)", + "--border-color-for-radio-input-when-disabled": "#ccc", + "--border-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)", + "--border-color-for-radio-input-when-checked": "#00b39e", + "--border-color-for-radio-input-when-focused": "hsl(0, 0%, 60%)", + "--border-color-for-primary-action-dropdown-menu": "#fff", + "--border-radius-for-button-as-big": "4px", "--border-radius-for-button-as-medium": "4px", - "--border-radius-for-button-as-icon-as-big": "6px", + "--border-radius-for-button-as-icon-as-big": "4px", "--border-radius-for-button-as-icon-as-medium": "4px", "--border-radius-for-button-as-icon-as-small": "2px", - "--border-radius-for-input": "6px", + "--border-radius-for-input": "4px", "--border-radius-for-tag": "2px", - "--border-radius-for-card": "6px", - "--border-radius-for-table-manager-droppable-list": "6px", - "--border-radius-for-stamp": "2px", - "--border-radius-for-view-switcher": "6px", - "--border-radius-for-content-notification": "0 var(--border-radius-6) var(--border-radius-6) 0", - "--border-radius-for-content-notification-icon": "var(--border-radius-6) 0 0 var(--border-radius-6)", - "--border-radius-for-primary-action-dropdown": "var(--border-radius-6) 0 0 var(--border-radius-6)", - "--border-radius-for-primary-action-dropdown-icon": "0 var(--border-radius-6) var(--border-radius-6) 0", - "--border-radius-for-primary-action-dropdown-menu": "6px", + "--border-radius-for-card": "4px", + "--border-radius-for-table-manager-droppable-list": "4px", + "--border-radius-for-stamp": "20px", + "--border-radius-for-view-switcher": "4px", + "--border-radius-for-content-notification": "0 var(--border-radius-4) var(--border-radius-4) 0", + "--border-radius-for-content-notification-icon": "var(--border-radius-4) 0 0 var(--border-radius-4)", + "--border-radius-for-primary-action-dropdown": "var(--border-radius-4) 0 0 var(--border-radius-4)", + "--border-radius-for-primary-action-dropdown-icon": "0 var(--border-radius-4) var(--border-radius-4) 0", + "--border-radius-for-primary-action-dropdown-menu": "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", - "--border-width-for-tag": "1px", - "--border-width-for-select-input": "1px", - "--border-width-for-content-notification-icon": "0px", - "--border-left-width-for-content-notification": "1px", - "--border-width-for-checkbox-input-icon": "1px", - "--border-for-primary-action-dropdown-icon": "0px 0px 0px 1px", - "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 2px", - "--box-shadow-for-view-switcher": "0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)", - "--box-shadow-for-view-switcher-when-selected": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)", - "--box-shadow-for-select-input-when-focused": "inset 0 0 0 2px", - "--box-shadow-for-calendar-menu-when-focused": "none", + "--border-width-for-tag": "1px 1px 1px 0", + "--border-width-for-select-input": "2px", + "--border-width-for-content-notification-icon": "1px", + "--border-left-width-for-content-notification": "0px", + "--border-width-for-checkbox-input-icon": "2px", + "--border-for-primary-action-dropdown-icon": "1px 1px 1px 0px", + "--box-shadow-for-datetime-input-when-hovered": "inset 0 0 0 1px", + "--box-shadow-for-view-switcher": "none", + "--box-shadow-for-view-switcher-when-selected": "none", + "--box-shadow-for-select-input-when-focused": "inset 0 0 0 1px", + "--box-shadow-for-calendar-menu-when-focused": "0 2px 5px 0px rgba(0, 0, 0, 0.15)", "--font-color-for-text": "#1a1a1a", - "--font-color-for-text-when-disabled": "#ccc", + "--font-color-for-text-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-input": "#1a1a1a", "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-input-when-error": "#e60050", - "--font-color-for-input-when-readonly": "hsl(0, 0%, 60%)", + "--font-color-for-input-when-readonly": "hsl(0, 0%, 40%)", "--font-color-for-input-when-warning": "#f16d0e", "--font-color-for-tag": "#1a1a1a", - "--font-color-for-tag-remove-icon": "#1a1a1a", - "--font-color-for-tag-drag-icon": "#1a1a1a", - "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e", + "--font-color-for-tag-remove-icon": "hsl(0, 0%, 40%)", + "--font-color-for-tag-drag-icon": "hsl(0, 0%, 40%)", + "--font-color-for-tag-remove-icon-when-hovered": "#e60050", "--font-color-for-tag-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-text-when-inverted": "#fff", "--font-color-for-link-as-inverted": "#fff", - "--font-color-for-link-as-primary": "#00b39e", + "--font-color-for-link-as-primary": "hsl(172.9608938547486, 100%, 25%)", "--font-color-for-link-as-secondary": "#1a1a1a", - "--font-color-for-link-as-primary-when-active": "hsl(172.9608938547486, 100%, 25%)", + "--font-color-for-link-as-primary-when-active": "#00b39e", "--font-color-for-link-as-secondary-when-active": "#00b39e", - "--font-color-for-table-header": "#fff", + "--font-color-for-table-header": "#1a1a1a", "--font-color-for-localized-input-label": "hsl(0, 0%, 60%)", - "--font-color-for-view-switcher": "#1a1a1a", + "--font-color-for-view-switcher": "hsl(0, 0%, 40%)", "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-view-switcher-when-selected": "#1a1a1a", - "--font-color-for-clear-input-icon": "#1a1a1a", - "--font-color-for-clear-input-icon-when-hovered": "#f16d0e", + "--font-color-for-clear-input-icon": "hsl(0, 0%, 40%)", + "--font-color-for-clear-input-icon-when-hovered": "#e60050", "--font-color-for-content-notification": "#1a1a1a", - "--font-color-for-content-notification-icon-when-error": "#fff", - "--font-color-for-content-notification-icon-when-warning": "#fff", - "--font-color-for-content-notification-icon-when-success": "#fff", - "--font-color-for-content-notification-icon-when-info": "#fff", - "--font-color-for-search-input-icon": "#1a1a1a", + "--font-color-for-content-notification-icon-when-error": "#e60050", + "--font-color-for-content-notification-icon-when-warning": "#f16d0e", + "--font-color-for-content-notification-icon-when-success": "#00b39e", + "--font-color-for-content-notification-icon-when-info": "#078cdf", + "--font-color-for-search-input-icon": "hsl(0, 0%, 60%)", "--font-color-for-search-input-icon-when-hovered": "#00b39e", - "--font-color-for-select-input-icon": "#1a1a1a", - "--font-color-for-select-input-when-error": "#1a1a1a", - "--font-color-for-select-input-when-warning": "#1a1a1a", - "--font-color-for-select-input-icon-when-error": "#1a1a1a", - "--font-color-for-select-input-icon-when-warning": "#1a1a1a", - "--font-color-for-money-input-currency-dropdown-indicator": "#1a1a1a", + "--font-color-for-select-input-icon": "hsl(0, 0%, 60%)", + "--font-color-for-select-input-when-error": "#e60050", + "--font-color-for-select-input-when-warning": "#f16d0e", + "--font-color-for-select-input-icon-when-error": "#e60050", + "--font-color-for-select-input-icon-when-warning": "#f16d0e", + "--font-color-for-money-input-currency-dropdown-indicator": "hsl(0, 0%, 40%)", "--font-color-for-search-input-icon-when-readonly": "hsl(0, 0%, 60%)", "--font-color-for-checkbox-input-label": "#1a1a1a", "--font-color-for-checkbox-input-label-when-error": "#e60050", - "--font-color-for-checkbox-input-label-when-disabled": "hsl(0, 0%, 40%)", + "--font-color-for-checkbox-input-label-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-checkbox-input-label-when-readonly": "hsl(0, 0%, 40%)", "--font-color-for-radio-input-when-disabled": "hsl(0, 0%, 60%)", "--font-color-for-radio-input-when-error": "#e60050", "--font-color-for-radio-input-when-readonly": "hsl(0, 0%, 60%)", "--font-color-for-radio-input-when-warning": "#f16d0e", - "--font-color-for-flat-button-as-primary": "#00b39e", - "--font-color-for-flat-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)", + "--font-color-for-flat-button-as-primary": "hsl(172.9608938547486, 100%, 25%)", + "--font-color-for-flat-button-as-primary-when-hovered": "#00b39e", "--font-color-for-flat-button-as-critical": "#e60050", "--font-color-for-flat-button-as-critical-when-hovered": "hsl(339.1304347826087, 100%, 25%)", "--font-color-for-flat-button-as-secondary": "#1a1a1a", "--font-color-for-flat-button-as-inverted": "#fff", "--font-color-for-flat-button-icon-when-disabled": "hsl(0, 0%, 60%)", - "--font-color-for-secondary-icon-button-as-primary": "#00b39e", - "--font-color-for-secondary-icon-button-as-primary-when-hovered": "hsl(172.9608938547486, 100%, 25%)", - "--height-for-button-as-big": "32px", - "--height-for-button-as-medium": "24px", - "--height-for-button-as-icon-as-big": "32px", - "--height-for-button-as-icon-as-medium": "24px", + "--font-color-for-secondary-icon-button-as-primary": "hsl(172.9608938547486, 100%, 25%)", + "--font-color-for-secondary-icon-button-as-primary-when-hovered": "#00b39e", + "--height-for-button-as-big": "40px", + "--height-for-button-as-medium": "32px", + "--height-for-button-as-icon-as-big": "40px", + "--height-for-button-as-icon-as-medium": "32px", "--height-for-button-as-icon-as-small": "16px", - "--height-for-input": "32px", - "--height-for-view-switcher": "32px", - "--height-for-view-switcher-when-condensed": "24px", - "--height-for-select-input-tag": "26px", - "--height-for-radio-input-option": "16px", - "--height-for-radio-input-option-when-checked": "8px", - "--height-for-primary-action-dropdown": "32px", - "--width-for-avatar-as-medium": "48px", - "--min-width-for-money-input-currency-dropdown": "72px", + "--height-for-input": "40px", + "--height-for-view-switcher": "40px", + "--height-for-view-switcher-when-condensed": "32px", + "--height-for-select-input-tag": "32px", + "--height-for-radio-input-option": "18px", + "--height-for-radio-input-option-when-checked": "10px", + "--height-for-primary-action-dropdown": "40px", + "--width-for-avatar-as-medium": "40px", + "--min-width-for-money-input-currency-dropdown": "80px", "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)", - "--font-size-for-button": "1rem", + "--font-size-for-button": "0.875rem", "--font-size-for-input": "1rem", - "--font-size-for-text-as-h1": "2.4615rem", - "--font-size-for-text-as-h2": "1.8462rem", - "--font-size-for-text-as-h3": "1.5385rem", - "--font-size-for-text-as-h4": "1.2308rem", - "--font-size-for-text-as-h5": "1.0769rem", + "--font-size-for-text-as-h1": "1.5rem", + "--font-size-for-text-as-h2": "1.25rem", + "--font-size-for-text-as-h3": "1.125rem", + "--font-size-for-text-as-h4": "1rem", + "--font-size-for-text-as-h5": "1rem", "--font-size-for-text-as-body": "1rem", - "--font-size-for-text-as-detail": "0.9231rem", - "--font-size-for-body": "13px", + "--font-size-for-text-as-detail": "0.875rem", + "--font-size-for-body": "16px", "--font-size-for-link": "1rem", - "--font-size-for-stamp": "1rem", - "--font-size-for-view-switcher": "1rem", - "--font-size-for-table": "1rem", - "--font-size-for-avatar-as-small": "1rem", - "--font-size-for-avatar-as-medium": "1.5rem", - "--font-size-for-avatar-as-big": "3rem", + "--font-size-for-stamp": "0.875rem", + "--font-size-for-view-switcher": "0.875rem", + "--font-size-for-table": "0.875rem", + "--font-size-for-avatar-as-small": "0.875rem", + "--font-size-for-avatar-as-medium": "1rem", + "--font-size-for-avatar-as-big": "2.5rem", "--font-size-for-localized-input-label": "1rem", "--font-size-for-content-notification": "1rem", - "--font-size-for-select-input-tag": "0.9231rem", - "--icon-color-for-datetime-input-icon": "#1a1a1a", - "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e", - "--line-height-for-text-as-h1": "inherit", - "--line-height-for-text-as-h2": "inherit", - "--line-height-for-text-as-h3": "inherit", - "--line-height-for-text-as-h4": "inherit", - "--line-height-for-text-as-h5": "inherit", - "--line-height-for-text-as-body": "inherit", - "--line-height-for-text-as-detail": "inherit", - "--line-height-for-select-input-options": "inherit", - "--line-height-for-table-header": "inherit", - "--font-weight-for-text-as-h1": "300", - "--font-weight-for-text-as-h2": "300", - "--font-weight-for-text-as-h3": "300", - "--font-weight-for-text-as-h4": "400", - "--font-weight-for-text-as-h5": "400", + "--font-size-for-select-input-tag": "1rem", + "--icon-color-for-datetime-input-icon": "hsl(0, 0%, 40%)", + "--icon-color-for-datetime-input-icon-when-hovered": "#e60050", + "--line-height-for-text-as-h1": "2.125rem", + "--line-height-for-text-as-h2": "1.75rem", + "--line-height-for-text-as-h3": "1.5rem", + "--line-height-for-text-as-h4": "1.375rem", + "--line-height-for-text-as-h5": "1.375rem", + "--line-height-for-text-as-body": "1.625rem", + "--line-height-for-text-as-detail": "1.375rem", + "--line-height-for-select-input-options": "1.625rem", + "--line-height-for-table-header": "26px", + "--font-weight-for-text-as-h1": "600", + "--font-weight-for-text-as-h2": "500", + "--font-weight-for-text-as-h3": "500", + "--font-weight-for-text-as-h4": "500", + "--font-weight-for-text-as-h5": "500", "--font-weight-for-text-as-body": "400", "--font-weight-for-text-as-detail": "400", - "--font-weight-for-button": "400", - "--font-weight-for-table-header": "400", - "--font-weight-for-text-as-bold": "700", - "--margin-for-table-header": "8px", - "--margin-for-table-as-condensed": "8px", - "--margin-for-view-switcher-icon": "0 var(--spacing-10) 0 0", - "--margin-for-group-heading-select-input-options": "4px", - "--margin-for-select-input-icon": "4px", - "--margin-left-for-select-input-icon": "inherit", - "--margin-right-for-money-input-precision-badge": "4px", - "--margin-right-for-search-input-icon": "8px", - "--margin-right-for-clear-input-icon": "4px", - "--margin-left-for-radio-input-label": "8px", - "--margin-right-for-primary-action-dropdown": "4px", - "--margin-top-for-primary-action-dropdown": "none", - "--margin-for-localized-rich-text-body-button": "none", - "--margin-for-rich-text-divider": "0 var(--spacing-10)", - "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-10)", - "--margin-for-tag-list": "0 var(--spacing-10) var(--spacing-10) 0", - "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)", - "--padding-for-stamp-as-condensed": "1px var(--spacing-10)", - "--padding-for-tag": "5px var(--spacing-20)", - "--padding-for-table-header": "16px", - "--padding-for-table-header-as-condensed": "8px", - "--padding-for-table-cell": "16px", - "--padding-for-table-cell-as-condensed": "8px", - "--padding-for-table-manager-droppable-list": "8px", - "--padding-for-table-manager-settings-panel": "16px", - "--padding-for-table-manager-draggable-tag": "4px", - "--padding-for-collapsible-panel-header": "var(--spacing-20) var(--spacing-30)", - "--padding-for-collapsible-panel-header-as-condensed": "8px", - "--padding-for-collapsible-panel-section-wrapper": "16px", - "--padding-for-collapsible-panel-section-wrapper-as-condensed": "8px", - "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)", - "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)", - "--padding-for-input": "8px", - "--padding-for-multiline-input": "var(--spacing-10) var(--spacing-20)", - "--padding-for-localized-rich-text-input-label": "0 var(--spacing-20)", - "--padding-for-localized-rich-text-dropdown-button": "3px var(--spacing-20)", - "--padding-for-localized-rich-text-dropdown-item": "var(--spacing-10) var(--spacing-20)", - "--padding-for-localized-rich-text-body-button": "var(--spacing-10)", - "--padding-for-localized-input-label": "0 var(--spacing-20)", - "--padding-for-rich-text-input": "none", - "--padding-for-rich-text-toolbar": "var(--spacing-10) 7px", - "--padding-left-for-rich-text-toolbar": "3px", - "--padding-for-rich-text-editor-container": "6px var(--spacing-20) var(--spacing-10)", + "--font-weight-for-button": "500", + "--font-weight-for-table-header": "600", + "--font-weight-for-text-as-bold": "600", + "--margin-for-table-header": "16px", + "--margin-for-table-cell-as-condensed": "8px", + "--margin-for-view-switcher-icon": "0 var(--spacing-20) 0 0", + "--margin-for-group-heading-select-input-options": "8px", + "--margin-for-select-input-icon": "8px", + "--margin-left-for-select-input-icon": "8px", + "--margin-right-for-money-input-precision-badge": "12px", + "--margin-right-for-search-input-icon": "12px", + "--margin-right-for-clear-input-icon": "8px", + "--margin-left-for-radio-input-label": "4px", + "--margin-right-for-primary-action-dropdown": "8px", + "--margin-top-for-primary-action-dropdown": "8px", + "--margin-for-localized-rich-text-body-button": "0 2px var(--spacing-20) 2px", + "--margin-for-rich-text-divider": "var(--spacing-10) 2px", + "--margin-for-rich-text-dropdown-item-label": "0 0 0 var(--spacing-20)", + "--margin-for-tag-list": "0 var(--spacing-20) var(--spacing-20) 0", + "--padding-for-stamp": "4px 12px", + "--padding-for-stamp-as-condensed": "0 var(--spacing-20)", + "--padding-for-tag": "2px 12px", + "--padding-for-table-header": "24px", + "--padding-for-table-header-as-condensed": "24px", + "--padding-for-table-cell": "var(--spacing-30) var(--spacing-40)", + "--padding-for-table-cell-as-condensed": "var(--spacing-20) var(--spacing-40)", + "--padding-for-table-manager-droppable-list": "16px", + "--padding-for-table-manager-settings-panel": "var(--spacing-40) var(--spacing-50)", + "--padding-for-table-manager-draggable-tag": "var(--spacing-10) 0", + "--padding-for-collapsible-panel-header": "var(--spacing-30) 0", + "--padding-for-collapsible-panel-header-as-condensed": "var(--spacing-20) 0", + "--padding-for-collapsible-panel-section-wrapper": "var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10))", + "--padding-for-collapsible-panel-section-wrapper-as-condensed": "var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10))", + "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-40)", + "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-40)", + "--padding-for-input": "16px", + "--padding-for-multiline-input": "8px", + "--padding-for-localized-rich-text-input-label": "var(--spacing-20) 12px", + "--padding-for-localized-rich-text-dropdown-button": "5px var(--spacing-20)", + "--padding-for-localized-rich-text-dropdown-item": "var(--spacing-20) var(--spacing-30)", + "--padding-for-localized-rich-text-body-button": "var(--spacing-20)", + "--padding-for-localized-input-label": "0 12px", + "--padding-for-rich-text-input": "var(--spacing-20) var(--spacing-30)", + "--padding-for-rich-text-toolbar": "none", + "--padding-left-for-rich-text-toolbar": "none", + "--padding-for-rich-text-editor-container": "var(--spacing-20) 0 0", "--padding-for-localized-multiline-text-input-label": "0 var(--spacing-20)", - "--padding-for-tag-remove-icon": "0 var(--spacing-10)", - "--padding-for-tooltip": "var(--spacing-10) var(--spacing-20)", + "--padding-for-tag-remove-icon": "0 12px", + "--padding-for-tooltip": "var(--spacing-20) 12px", "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)", - "--padding-for-view-switcher-when-condensed": "0 var(--spacing-20) 0 var(--spacing-20)", - "--padding-for-content-notification": "var(--spacing-20)", - "--padding-for-content-notification-icon": "var(--spacing-20) var(--spacing-30)", - "--padding-left-for-select-input-options": "8px", - "--padding-right-for-select-input-options": "8px", - "--padding-top-for-select-input-options": "4px", - "--padding-bottom-for-select-input-options": "4px", - "--padding-for-group-heading-select-input-options": "8px", - "--padding-for-select-input-menu": "inherit", - "--padding-for-money-input-currency-dropdown": "0 var(--spacing-20)", - "--padding-for-selectable-search-input-dropdown": "0 var(--spacing-20)", - "--padding-for-primary-action-dropdown": "0 var(--spacing-20)", - "--padding-for-primary-action-dropdown-icon": "0 var(--spacing-10)", - "--padding-for-button-as-medium": "0 var(--spacing-20)", + "--padding-for-view-switcher-when-condensed": "0 12px 0 12px", + "--padding-for-content-notification": "var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)", + "--padding-for-content-notification-icon": "var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)", + "--padding-left-for-select-input-options": "16px", + "--padding-right-for-select-input-options": "16px", + "--padding-top-for-select-input-options": "8px", + "--padding-bottom-for-select-input-options": "8px", + "--padding-for-group-heading-select-input-options": "16px", + "--padding-for-select-input-menu": "var(--spacing-10) 0", + "--padding-for-money-input-currency-dropdown": "0 12px", + "--padding-for-selectable-search-input-dropdown": "0 12px", + "--padding-for-primary-action-dropdown": "0 var(--spacing-30)", + "--padding-for-primary-action-dropdown-icon": "0 var(--spacing-20)", + "--padding-for-button-as-medium": "0 var(--spacing-30)", "--padding-for-button-as-big": "0 var(--spacing-30)", - "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-button-when-focused": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-button-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-button-when-active": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)", - "--shadow-for-button-when-disabled": "0 0 0 1px var(--color-neutral) inset", "--shadow-box-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)", - "--shadow-for-card-when-raised": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)", + "--shadow-for-button": "none", + "--shadow-for-button-when-focused": "none", + "--shadow-for-button-when-hovered": "none", + "--shadow-for-button-when-active": "none", + "--shadow-for-button-when-disabled": "none", + "--shadow-for-card-when-raised": "0 1px 5px 0 rgba(0, 0, 0, 0.05)", "--shadow-for-input": "none", - "--shadow-for-input-when-focused": "inset 0 0 0 2px var(--color-primary)", - "--shadow-for-input-when-error": "none", - "--shadow-for-input-when-warning": "none", - "--shadow-for-tooltip": "0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)", - "--shadow-for-select-input-menu": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-primary-action-dropdown": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-primary-action-dropdown-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-primary-action-dropdown-when-active": "inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)", - "--shadow-for-primary-action-dropdown-menu": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)", - "--shadow-for-toggle-input-thumb": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)", - "--shadow-for-tag-when-hovered": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)", + "--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)", + "--shadow-for-input-when-warning": "inset 0 0 0 1px var(--color-warning)", + "--shadow-for-tooltip": "0px 1px 2px 0px rgba(0, 0, 0, 0.25)", + "--shadow-for-select-input-menu": "0 2px 5px 0px rgba(0, 0, 0, 0.15)", + "--shadow-for-primary-action-dropdown": "none", + "--shadow-for-primary-action-dropdown-when-hovered": "none", + "--shadow-for-primary-action-dropdown-when-active": "none", + "--shadow-for-primary-action-dropdown-menu": "0 2px 5px 0px rgba(0, 0, 0, 0.15)", + "--shadow-for-toggle-input-thumb": "0px 1px 5px rgba(0, 0, 0, 0.2)", + "--shadow-for-tag-when-hovered": "none", "--font-size-m": "1rem", "--big-button-height": "32px", "--small-button-height": "24px", diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml index 1c3e82be0d..bb7829888d 100644 --- a/design-system/materials/internals/definition.yaml +++ b/design-system/materials/internals/definition.yaml @@ -99,7 +99,7 @@ choiceGroupsByTheme: label: Font families prefix: font-family choices: - font-family: "'Open Sans', sans-serif" + font-family: "'Inter', system-ui" fontSizes: label: Font sizes prefix: font-size @@ -189,6 +189,7 @@ choiceGroupsByTheme: prefix: spacing choices: # Legacy deprecated tokens + # TODO: Remove these tokens after no consumers are using them spacing-xs: 4px spacing-s: 8px spacing-m: 16px @@ -219,13 +220,6 @@ choiceGroupsByTheme: break-point-giantdesktop: 1680px break-point-jumbodesktop: 1920px - test: - fontFamilies: - label: Font families - prefix: font-family - choices: - font-family: "'Inter', system-ui" - states: active: 'Trigged while the user is currently interacting with the element' hovered: @@ -460,318 +454,295 @@ decisionGroupsByTheme: prefix: align-items decisions: align-items-for-select-input-tag: - choice: 'unset' + choice: 'center' backgroundColors: label: Background Colors prefix: background-color decisions: background-color-for-button-when-active: - choice: color-surface + choice: color-solid-10 background-color-for-button-when-hovered: - choice: color-surface + choice: color-solid-05 background-color-for-button-as-primary-when-active: - choice: color-primary + choice: '#15A390' # color-primary with 10% black opacity background-color-for-button-as-primary-when-hovered: - choice: color-primary-25 + choice: '#17AB97' # color-primary with 5% black opacity background-color-for-button-as-icon-as-primary-when-active: - choice: color-primary + choice: '#15A390' background-color-for-button-as-icon-as-primary-when-hovered: choice: color-primary background-color-for-button-as-icon-as-info-when-active: - choice: color-info + choice: '#057FCC' # color-info with 10% black opacity background-color-for-button-as-icon-as-info-when-hovered: choice: color-info background-color-for-button-as-urgent-when-active: - choice: color-warning + choice: '#DC630A' # color-warning with 10% black opacity background-color-for-button-as-urgent-when-hovered: - choice: color-warning-25 + choice: '#E7680D' # color-warning with 5% black opacity background-color-for-button-when-disabled: - choice: color-accent-98 + choice: color-accent-95 background-color-for-input: - description: '' choice: color-surface background-color-for-input-when-selected: - description: '' choice: color-accent-95 background-color-for-input-when-disabled: - description: '' - choice: color-accent-98 + choice: color-neutral-95 background-color-for-input-when-hovered: - description: '' - choice: color-surface + choice: color-neutral-98 background-color-for-input-when-focused: - description: '' choice: color-surface background-color-for-input-when-readonly: - choice: color-surface + choice: color-neutral-95 background-color-for-input-when-active: - choice: color-accent-95 + choice: color-info-95 background-color-for-table-cell-when-hovered: - choice: color-neutral-90 + choice: color-neutral-98 background-color-for-table-header: - choice: color-accent + choice: color-neutral-95 background-color-for-tag: - description: '' choice: color-neutral-95 background-color-for-tag-warning: - description: '' choice: color-warning-95 background-color-for-tag-when-hovered: - choice: color-neutral-95 + choice: color-neutral-90 background-color-for-collapsible-panel-header-icon-when-disabled: - choice: color-accent-98 + choice: color-surface background-color-for-select-input-option-when-hovered: - description: '' - choice: color-neutral-90 + choice: color-neutral-98 background-color-for-avatar: - description: '' - choice: color-neutral-60 + choice: color-accent background-color-for-avatar-when-highlighted: - description: '' - choice: color-neutral + choice: color-accent-30 background-color-for-stamp-as-positive: - description: '' - choice: color-primary-85 + choice: color-primary-95 background-color-for-localized-input-label: - choice: color-accent-98 + choice: color-surface background-color-for-localized-input-label-when-readonly: - choice: color-accent-95 + choice: color-neutral-95 background-color-for-localized-input-label-when-disabled: - choice: color-accent-98 + choice: color-neutral-95 background-color-for-localized-rich-text-body-button-when-active: - choice: color-accent-30 + choice: color-accent-20 background-color-for-localized-rich-text-body-button: - choice: color-neutral-90 + choice: color-neutral-95 background-color-for-rich-text-dropdown-when-hovered: - choice: color-neutral-90 + choice: color-neutral-95 background-color-for-rich-text-more-styles-dropdown-when-hovered: - choice: color-neutral-90 + choice: color-info-95 background-color-for-rich-text-button: - choice: color-accent-30 + choice: color-accent-20 background-color-for-tooltip: - choice: color-accent + choice: color-accent-10 background-color-for-view-switcher: choice: color-surface background-color-for-view-switcher-when-disabled: - choice: color-accent-98 + choice: color-surface background-color-for-view-switcher-when-selected: choice: color-neutral-95 background-color-for-view-switcher-when-hovered: - choice: color-neutral-90 + choice: color-neutral-95 background-color-for-content-notification-when-error: - choice: color-surface + choice: color-error-95 background-color-for-content-notification-when-info: - choice: color-surface + choice: color-info-95 background-color-for-content-notification-when-warning: - choice: color-surface + choice: color-warning-95 background-color-for-content-notification-when-success: - choice: color-surface + choice: color-primary-95 background-color-for-content-notification-icon-when-error: - choice: color-error + choice: color-error-95 background-color-for-content-notification-icon-when-info: - choice: color-info + choice: color-info-95 background-color-for-content-notification-icon-when-warning: - choice: color-warning + choice: color-warning-95 background-color-for-content-notification-icon-when-success: - choice: color-primary + choice: color-primary-95 background-color-for-checkbox-input-icon: - choice: color-surface + choice: color-primary background-color-for-checkbox-input-icon-when-disabled: - choice: color-surface + choice: color-neutral background-color-for-checkbox-input-icon-when-readonly: - choice: color-surface + choice: color-neutral-60 background-color-for-checkbox-input-icon-when-error: - choice: color-surface + choice: color-error background-color-for-checkbox-input-icon-when-hovered: - choice: color-surface + choice: color-neutral-90 background-color-for-primary-action-dropdown-when-active: - choice: color-neutral-95 + choice: color-neutral-90 background-color-for-primary-action-dropdown-when-disabled: - choice: color-accent-98 + choice: color-neutral-95 background-color-for-toggle-input-track: - choice: color-neutral-60 - background-color-for-toggle-input-track-when-disabled: choice: color-neutral + background-color-for-toggle-input-track-when-disabled: + choice: color-neutral-90 background-color-for-toggle-input-thumb-when-disabled: - choice: color-accent-95 + choice: color-neutral-60 background-color-for-toggle-input-track-when-checked: - choice: color-primary + choice: color-primary-40 background-color-for-toggle-input-thumb-when-checked: - choice: color-surface - background-color-for-toggle-input-track-when-checked-and-disabled: choice: color-primary-25 + background-color-for-toggle-input-track-when-checked-and-disabled: + choice: color-accent-90 background-color-for-toggle-input-thumb-when-checked-and-disabled: - choice: color-neutral + choice: color-accent-60 borders: label: Borders prefix: border decisions: border-for-button-as-secondary: - choice: 'none' + choice: '1px solid var(--color-neutral)' border-for-button-as-secondary-when-hovered: - choice: 'none' + choice: '1px solid var(--color-neutral)' border-for-button-as-secondary-when-active: - choice: 'none' + choice: '1px solid var(--color-neutral)' border-for-card-when-raised: - choice: 'none' + choice: '1px solid var(--color-neutral-90)' border-for-collapsible-panel-header-icon-when-disabled: - choice: '1px solid var(--color-neutral)' - border-for-view-switcher: choice: 'none' + border-for-view-switcher: + choice: '1px solid var(--color-neutral)' border-for-select-input-tag: - choice: 'none' + choice: '1px solid var(--color-neutral-85)' border-for-radio-input-option: - choice: border-width-1 + choice: border-width-2 border-for-calendar-menu-when-focused: - choice: '1px solid var(--color-primary)' + choice: 'none' borderColors: label: Border Colors prefix: border-color decisions: border-color-for-input: - description: '' - choice: color-neutral-60 + choice: color-neutral border-color-for-input-when-focused: - description: '' choice: color-primary border-color-for-input-when-disabled: - description: '' choice: color-neutral border-color-for-input-when-readonly: - description: '' - choice: color-neutral + choice: color-surface border-color-for-input-when-error: - description: '' choice: color-error border-color-for-input-when-warning: - description: '' choice: color-warning border-color-for-input-when-hovered: - description: '' - choice: color-primary + choice: color-neutral border-color-for-tag: - description: '' - choice: color-neutral-60 + choice: color-neutral border-color-for-tag-warning: - description: '' choice: color-warning border-color-for-tag-when-focused: - description: '' - choice: color-primary + choice: color-neutral border-color-for-tag-when-hovered: - choice: color-warning + choice: color-neutral border-color-for-button-as-icon: - choice: color-surface + choice: color-neutral border-color-for-button-as-icon-as-info: - choice: color-info + choice: color-neutral border-color-for-button-as-icon-as-primary: - choice: color-primary - border-color-for-button-as-icon-when-disabled: choice: color-neutral + border-color-for-button-as-icon-when-disabled: + choice: color-surface border-color-for-table-header: - choice: color-neutral + choice: color-surface border-color-for-table-header-as-bottom: - choice: color-accent + choice: color-neutral-90 border-color-for-table-manager-droppable-list: - choice: color-neutral-60 + choice: color-neutral border-color-for-collapsible-panel-header: - choice: color-neutral-60 + choice: color-neutral-90 border-color-for-stamp-when-error: - choice: color-error + choice: color-error-85 border-color-for-stamp-when-warning: - choice: color-warning + choice: color-warning-85 border-color-for-stamp-as-positive: - choice: color-primary-40 + choice: color-primary-85 border-color-for-stamp-as-information: - choice: color-info + choice: color-info-85 border-color-for-stamp-as-primary: - choice: color-primary-25 + choice: color-primary-85 border-color-for-stamp-as-secondary: - choice: color-neutral-60 + choice: color-neutral-85 border-color-for-localized-input-label: choice: color-neutral border-color-for-localized-input-label-when-readonly: - choice: color-neutral + choice: color-surface border-color-for-content-notification-when-error: - choice: color-error + choice: color-error-85 border-color-for-content-notification-when-info: - choice: color-info + choice: color-info-85 border-color-for-content-notification-when-warning: - choice: color-warning + choice: color-warning-85 border-color-for-content-notification-when-success: - choice: color-primary + choice: color-primary-85 border-color-for-group-heading-select-input-options: - choice: color-neutral + choice: color-neutral-90 border-color-for-select-input-menu: - choice: color-primary + choice: color-surface border-color-for-select-input-when-readonly: - choice: color-neutral + choice: color-neutral-95 border-color-for-select-input-menu-when-warning: - choice: color-warning + choice: color-surface border-color-for-select-input-menu-when-error: - choice: color-error + choice: color-surface border-color-for-checkbox-input-icon: - choice: color-neutral-60 + choice: color-primary border-color-for-checkbox-input-icon-when-disabled: choice: color-neutral border-color-for-checkbox-input-icon-when-readonly: - choice: color-neutral + choice: color-neutral-60 border-color-for-checkbox-input-icon-when-error: choice: color-error border-color-for-radio-input: - choice: color-neutral - border-color-for-radio-input-when-disabled: choice: color-neutral-60 - border-color-for-radio-input-when-readonly: + border-color-for-radio-input-when-disabled: choice: color-neutral + border-color-for-radio-input-when-readonly: + choice: color-neutral-60 border-color-for-radio-input-when-checked: - choice: color-neutral - border-color-for-radio-input-when-focused: choice: color-primary + border-color-for-radio-input-when-focused: + choice: color-neutral-60 border-color-for-primary-action-dropdown-menu: - choice: color-neutral + choice: color-surface borderRadiuses: label: Border Radius prefix: border-radius decisions: border-radius-for-button-as-big: - choice: border-radius-6 + choice: border-radius-4 border-radius-for-button-as-medium: choice: border-radius-4 border-radius-for-button-as-icon-as-big: - choice: border-radius-6 + choice: border-radius-4 border-radius-for-button-as-icon-as-medium: choice: border-radius-4 border-radius-for-button-as-icon-as-small: choice: border-radius-2 border-radius-for-input: - description: '' - choice: border-radius-6 + choice: border-radius-4 border-radius-for-tag: - description: '' choice: border-radius-2 border-radius-for-card: - choice: border-radius-6 + choice: border-radius-4 border-radius-for-table-manager-droppable-list: - choice: border-radius-6 + choice: border-radius-4 border-radius-for-stamp: - choice: border-radius-2 + choice: border-radius-20 border-radius-for-view-switcher: - choice: border-radius-6 + choice: border-radius-4 border-radius-for-content-notification: - choice: '0 var(--border-radius-6) var(--border-radius-6) 0' + choice: '0 var(--border-radius-4) var(--border-radius-4) 0' border-radius-for-content-notification-icon: - choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)' + choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)' border-radius-for-primary-action-dropdown: - choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)' + choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)' border-radius-for-primary-action-dropdown-icon: - choice: '0 var(--border-radius-6) var(--border-radius-6) 0' + choice: '0 var(--border-radius-4) var(--border-radius-4) 0' border-radius-for-primary-action-dropdown-menu: - choice: border-radius-6 + choice: border-radius-4 borderWidths: label: Border width @@ -786,844 +757,89 @@ decisionGroupsByTheme: border-width-for-input-when-focused: choice: border-width-1 border-width-for-tag: - choice: border-width-1 + choice: '1px 1px 1px 0' border-width-for-select-input: - choice: border-width-1 + choice: border-width-2 border-width-for-content-notification-icon: - choice: '0px' - border-left-width-for-content-notification: choice: border-width-1 + border-left-width-for-content-notification: + choice: '0px' border-width-for-checkbox-input-icon: - choice: border-width-1 + choice: border-width-2 border-for-primary-action-dropdown-icon: - choice: '0px 0px 0px 1px' + choice: '1px 1px 1px 0px' boxShadows: label: Box shadows prefix: box-shadow decisions: box-shadow-for-datetime-input-when-hovered: - choice: 'inset 0 0 0 2px' + choice: 'inset 0 0 0 1px' box-shadow-for-view-switcher: - choice: 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12) + choice: shadow-0 box-shadow-for-view-switcher-when-selected: - choice: shadow-9 + choice: shadow-0 box-shadow-for-select-input-when-focused: - choice: 'inset 0 0 0 2px' + choice: 'inset 0 0 0 1px' box-shadow-for-calendar-menu-when-focused: - choice: 'none' + choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)' fontColors: label: Font Colors prefix: font-color decisions: font-color-for-text: - description: '' choice: color-solid - font-color-for-text-when-disabled: - choice: color-neutral - font-color-for-input: - description: '' - choice: color-solid - font-color-for-input-when-disabled: - description: '' - choice: color-neutral-60 - font-color-for-input-when-error: - description: '' - choice: color-error - font-color-for-input-when-readonly: - description: '' - choice: color-neutral-60 - font-color-for-input-when-warning: - description: '' - choice: color-warning - font-color-for-tag: - description: '' - choice: color-solid - font-color-for-tag-remove-icon: - choice: color-solid - font-color-for-tag-drag-icon: - choice: color-solid - font-color-for-tag-remove-icon-when-hovered: - choice: color-warning - font-color-for-tag-when-disabled: - description: '' - choice: color-neutral-60 - font-color-for-text-when-inverted: - description: '' - choice: color-surface - font-color-for-link-as-inverted: - choice: color-surface - font-color-for-link-as-primary: - choice: color-primary - font-color-for-link-as-secondary: - choice: color-solid - font-color-for-link-as-primary-when-active: - choice: color-primary-25 - font-color-for-link-as-secondary-when-active: - choice: color-primary - font-color-for-table-header: - choice: color-surface - font-color-for-localized-input-label: - choice: color-neutral-60 - font-color-for-view-switcher: - choice: color-solid - font-color-for-view-switcher-when-disabled: - choice: color-neutral-60 - font-color-for-view-switcher-when-selected: - choice: color-solid - font-color-for-clear-input-icon: - choice: color-solid - font-color-for-clear-input-icon-when-hovered: - choice: color-warning - font-color-for-content-notification: - choice: color-solid - font-color-for-content-notification-icon-when-error: - choice: color-surface - font-color-for-content-notification-icon-when-warning: - choice: color-surface - font-color-for-content-notification-icon-when-success: - choice: color-surface - font-color-for-content-notification-icon-when-info: - choice: color-surface - font-color-for-search-input-icon: - choice: color-solid - font-color-for-search-input-icon-when-hovered: - choice: color-primary - font-color-for-select-input-icon: - choice: color-solid - font-color-for-select-input-when-error: - choice: color-solid - font-color-for-select-input-when-warning: - choice: color-solid - font-color-for-select-input-icon-when-error: - choice: color-solid - font-color-for-select-input-icon-when-warning: - choice: color-solid - font-color-for-money-input-currency-dropdown-indicator: - choice: color-solid - font-color-for-search-input-icon-when-readonly: - choice: color-neutral-60 - font-color-for-checkbox-input-label: - choice: color-solid - font-color-for-checkbox-input-label-when-error: - choice: color-error - font-color-for-checkbox-input-label-when-disabled: - choice: color-neutral-40 - font-color-for-checkbox-input-label-when-readonly: - choice: color-neutral-40 - font-color-for-radio-input-when-disabled: - choice: color-neutral-60 - font-color-for-radio-input-when-error: - choice: color-error - font-color-for-radio-input-when-readonly: - choice: color-neutral-60 - font-color-for-radio-input-when-warning: - choice: color-warning - font-color-for-flat-button-as-primary: - choice: color-primary - font-color-for-flat-button-as-primary-when-hovered: - choice: color-primary-25 - font-color-for-flat-button-as-critical: - choice: color-error - font-color-for-flat-button-as-critical-when-hovered: - choice: color-error-25 - font-color-for-flat-button-as-secondary: - choice: color-solid - font-color-for-flat-button-as-inverted: - choice: color-surface - font-color-for-flat-button-icon-when-disabled: - choice: color-neutral-60 - font-color-for-secondary-icon-button-as-primary: - choice: color-primary - font-color-for-secondary-icon-button-as-primary-when-hovered: - choice: color-primary-25 - - heights: - label: Height - prefix: height - decisions: - height-for-button-as-big: - choice: '32px' - height-for-button-as-medium: - choice: '24px' - height-for-button-as-icon-as-big: - choice: '32px' - height-for-button-as-icon-as-medium: - choice: '24px' - height-for-button-as-icon-as-small: - choice: '16px' - height-for-input: - choice: '32px' - height-for-view-switcher: - choice: '32px' - height-for-view-switcher-when-condensed: - choice: '24px' - height-for-select-input-tag: - choice: '26px' - height-for-radio-input-option: - choice: '16px' - height-for-radio-input-option-when-checked: - choice: '8px' - height-for-primary-action-dropdown: - choice: '32px' - - widths: - label: Width - prefix: width - decisions: - width-for-avatar-as-medium: - choice: '48px' - - minWidths: - label: Min width - prefix: min-width - decisions: - min-width-for-money-input-currency-dropdown: - choice: '72px' - - placeholderFontColors: - label: Placeholder font colors - prefix: placeholder-font-color - decisions: - placeholder-font-color-for-input: - description: '' - choice: color-neutral-60 - - fontSizes: - label: Font Sizes - prefix: font-size - decisions: - font-size-for-button: - description: '' - choice: font-size-30 - font-size-for-input: - description: '' - choice: font-size-30 - font-size-for-text-as-h1: - description: '' - choice: font-size-69 - font-size-for-text-as-h2: - description: '' - choice: font-size-66 - font-size-for-text-as-h3: - description: '' - choice: font-size-63 - font-size-for-text-as-h4: - description: '' - choice: font-size-45 - font-size-for-text-as-h5: - description: '' - choice: font-size-35 - font-size-for-text-as-body: - description: '' - choice: font-size-30 - font-size-for-text-as-detail: - description: '' - choice: font-size-15 - font-size-for-body: - description: '' - choice: '13px' - font-size-for-link: - description: '' - choice: font-size-30 - font-size-for-stamp: - choice: font-size-30 - font-size-for-view-switcher: - choice: font-size-30 - font-size-for-table: - choice: font-size-30 - font-size-for-avatar-as-small: - choice: font-size-30 - font-size-for-avatar-as-medium: - choice: font-size-60 - font-size-for-avatar-as-big: - choice: font-size-78 - font-size-for-localized-input-label: - choice: font-size-30 - font-size-for-content-notification: - choice: font-size-30 - font-size-for-select-input-tag: - choice: font-size-15 - - iconColors: - label: Icon colors - prefix: icon-color - decisions: - icon-color-for-datetime-input-icon: - choice: color-solid - icon-color-for-datetime-input-icon-when-hovered: - choice: color-warning - - lineHeights: - label: Line Heights - prefix: line-height - decisions: - line-height-for-text-as-h1: - description: '' - choice: 'inherit' - line-height-for-text-as-h2: - description: '' - choice: 'inherit' - line-height-for-text-as-h3: - description: '' - choice: 'inherit' - line-height-for-text-as-h4: - description: '' - choice: 'inherit' - line-height-for-text-as-h5: - description: '' - choice: 'inherit' - line-height-for-text-as-body: - description: '' - choice: 'inherit' - line-height-for-text-as-detail: - description: '' - choice: 'inherit' - line-height-for-select-input-options: - choice: 'inherit' - line-height-for-table-header: - choice: 'inherit' - - fontWeights: - label: Font Weights - prefix: font-weight - decisions: - font-weight-for-text-as-h1: - description: '' - choice: font-weight-300 - font-weight-for-text-as-h2: - description: '' - choice: font-weight-300 - font-weight-for-text-as-h3: - description: '' - choice: font-weight-300 - font-weight-for-text-as-h4: - description: '' - choice: font-weight-400 - font-weight-for-text-as-h5: - description: '' - choice: font-weight-400 - font-weight-for-text-as-body: - description: '' - choice: font-weight-400 - font-weight-for-text-as-detail: - description: '' - choice: font-weight-400 - font-weight-for-button: - choice: font-weight-400 - font-weight-for-table-header: - choice: font-weight-400 - font-weight-for-text-as-bold: - choice: font-weight-700 - - margins: - label: Margins - prefix: margin - decisions: - margin-for-table-header: - choice: spacing-20 - margin-for-table-as-condensed: - choice: spacing-20 - margin-for-view-switcher-icon: - choice: '0 var(--spacing-10) 0 0' - margin-for-group-heading-select-input-options: - choice: spacing-10 - margin-for-select-input-icon: - choice: spacing-10 - margin-left-for-select-input-icon: - choice: 'inherit' - margin-right-for-money-input-precision-badge: - choice: spacing-10 - margin-right-for-search-input-icon: - choice: spacing-20 - margin-right-for-clear-input-icon: - choice: spacing-10 - margin-left-for-radio-input-label: - choice: spacing-20 - margin-right-for-primary-action-dropdown: - choice: spacing-10 - margin-top-for-primary-action-dropdown: - choice: 'none' - margin-for-localized-rich-text-body-button: - choice: 'none' - margin-for-rich-text-divider: - choice: '0 var(--spacing-10)' - margin-for-rich-text-dropdown-item-label: - choice: '0 0 0 var(--spacing-10)' - margin-for-tag-list: - choice: '0 var(--spacing-10) var(--spacing-10) 0' - paddings: - label: Paddings - prefix: padding - decisions: - padding-for-stamp: - choice: 'var(--spacing-10) var(--spacing-20)' - padding-for-stamp-as-condensed: - choice: '1px var(--spacing-10)' - padding-for-tag: - choice: '5px var(--spacing-20)' - padding-for-table-header: - choice: spacing-30 - padding-for-table-header-as-condensed: - choice: spacing-20 - padding-for-table-cell: - choice: spacing-30 - padding-for-table-cell-as-condensed: - choice: spacing-20 - padding-for-table-manager-droppable-list: - choice: spacing-20 - padding-for-table-manager-settings-panel: - choice: spacing-30 - padding-for-table-manager-draggable-tag: - choice: spacing-10 - padding-for-collapsible-panel-header: - choice: 'var(--spacing-20) var(--spacing-30)' - padding-for-collapsible-panel-header-as-condensed: - choice: spacing-20 - padding-for-collapsible-panel-section-wrapper: - choice: spacing-30 - padding-for-collapsible-panel-section-wrapper-as-condensed: - choice: spacing-20 - padding-for-collapsible-panel-section-description: - choice: '0 0 var(--spacing-50)' - padding-for-collapsible-panel-section-description-as-condensed: - choice: '0 0 var(--spacing-30)' - padding-for-input: - choice: spacing-20 - padding-for-multiline-input: - choice: 'var(--spacing-10) var(--spacing-20)' - padding-for-localized-rich-text-input-label: - choice: '0 var(--spacing-20)' - padding-for-localized-rich-text-dropdown-button: - choice: '3px var(--spacing-20)' - padding-for-localized-rich-text-dropdown-item: - choice: 'var(--spacing-10) var(--spacing-20)' - padding-for-localized-rich-text-body-button: - choice: 'var(--spacing-10)' - padding-for-localized-input-label: - choice: '0 var(--spacing-20)' - padding-for-rich-text-input: - choice: 'none' - padding-for-rich-text-toolbar: - choice: 'var(--spacing-10) 7px' - padding-left-for-rich-text-toolbar: - choice: '3px' - padding-for-rich-text-editor-container: - choice: '6px var(--spacing-20) var(--spacing-10)' - padding-for-localized-multiline-text-input-label: - choice: '0 var(--spacing-20)' - padding-for-tag-remove-icon: - choice: '0 var(--spacing-10)' - padding-for-tooltip: - choice: 'var(--spacing-10) var(--spacing-20)' - padding-for-view-switcher: - choice: '0 var(--spacing-30) 0 var(--spacing-30)' - padding-for-view-switcher-when-condensed: - choice: '0 var(--spacing-20) 0 var(--spacing-20)' - padding-for-content-notification: - choice: 'var(--spacing-20)' - padding-for-content-notification-icon: - choice: 'var(--spacing-20) var(--spacing-30)' - padding-left-for-select-input-options: - choice: spacing-20 - padding-right-for-select-input-options: - choice: spacing-20 - padding-top-for-select-input-options: - choice: spacing-10 - padding-bottom-for-select-input-options: - choice: spacing-10 - padding-for-group-heading-select-input-options: - choice: spacing-20 - padding-for-select-input-menu: - choice: 'inherit' - padding-for-money-input-currency-dropdown: - choice: '0 var(--spacing-20)' - padding-for-selectable-search-input-dropdown: - choice: '0 var(--spacing-20)' - padding-for-primary-action-dropdown: - choice: '0 var(--spacing-20)' - padding-for-primary-action-dropdown-icon: - choice: '0 var(--spacing-10)' - padding-for-button-as-medium: - choice: '0 var(--spacing-20)' - padding-for-button-as-big: - choice: '0 var(--spacing-30)' - - shadows: - label: Shadows - prefix: shadow - decisions: - shadow-for-button: - choice: shadow-7 - shadow-for-button-when-focused: - choice: shadow-8 - shadow-for-button-when-hovered: - choice: shadow-8 - shadow-for-button-when-active: - choice: shadow-9 - shadow-for-button-when-disabled: - choice: '0 0 0 1px var(--color-neutral) inset' - shadow-box-tag-when-hovered: - description: '' - deprecated: true - choice: shadow-1 - shadow-for-card-when-raised: - choice: shadow-1 - shadow-for-input: - choice: shadow-0 - shadow-for-input-when-focused: - choice: 'inset 0 0 0 2px var(--color-primary)' - shadow-for-input-when-error: - choice: shadow-0 - shadow-for-input-when-warning: - choice: shadow-0 - shadow-for-tooltip: - choice: shadow-15 - shadow-for-select-input-menu: - choice: shadow-7 - shadow-for-primary-action-dropdown: - choice: shadow-7 - shadow-for-primary-action-dropdown-when-hovered: - choice: shadow-8 - shadow-for-primary-action-dropdown-when-active: - choice: shadow-9 - shadow-for-primary-action-dropdown-menu: - choice: shadow-1 - shadow-for-toggle-input-thumb: - choice: shadow-7 - shadow-for-tag-when-hovered: - choice: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)' - - test: - alignItems: - label: Flex align items - prefix: align-items - decisions: - align-items-for-select-input-tag: - choice: 'center' - - backgroundColors: - label: Background Colors - prefix: background-color - decisions: - background-color-for-button-when-active: - choice: color-solid-10 - background-color-for-button-when-hovered: - choice: color-solid-05 - background-color-for-button-as-primary-when-active: - choice: '#15A390' # color-primary with 10% black opacity - background-color-for-button-as-primary-when-hovered: - choice: '#17AB97' # color-primary with 5% black opacity - background-color-for-button-as-icon-as-primary-when-active: - choice: '#15A390' - background-color-for-button-as-icon-as-primary-when-hovered: - choice: color-primary - background-color-for-button-as-icon-as-info-when-active: - choice: '#057FCC' # color-info with 10% black opacity - background-color-for-button-as-icon-as-info-when-hovered: - choice: color-info - background-color-for-button-as-urgent-when-active: - choice: '#DC630A' # color-warning with 10% black opacity - background-color-for-button-as-urgent-when-hovered: - choice: '#E7680D' # color-warning with 5% black opacity - background-color-for-button-when-disabled: - choice: color-neutral-95 - background-color-for-table-cell-when-hovered: - choice: color-neutral-98 - background-color-for-table-header: - choice: color-neutral-95 - background-color-for-collapsible-panel-header-icon-when-disabled: - choice: color-surface - background-color-for-input-when-hovered: - choice: color-neutral-98 - background-color-for-input-when-disabled: - choice: color-neutral-95 - background-color-for-input-when-active: - choice: color-info-95 - background-color-for-input-when-readonly: - choice: color-neutral-95 - background-color-for-avatar: - description: '' - choice: color-accent - background-color-for-avatar-when-highlighted: - description: '' - choice: color-accent-30 - background-color-for-stamp-as-positive: - description: '' - choice: color-primary-95 - background-color-for-localized-input-label: - choice: color-surface - background-color-for-localized-input-label-when-readonly: - choice: color-neutral-95 - background-color-for-localized-input-label-when-disabled: - choice: color-neutral-95 - background-color-for-localized-rich-text-body-button-when-active: - choice: color-accent-20 - background-color-for-localized-rich-text-body-button: - choice: color-neutral-95 - background-color-for-rich-text-dropdown-when-hovered: - choice: color-neutral-95 - background-color-for-rich-text-more-styles-dropdown-when-hovered: - choice: color-info-95 - background-color-for-rich-text-button: - choice: color-accent-20 - background-color-for-tooltip: - choice: color-accent-10 - background-color-for-view-switcher-when-disabled: - choice: color-surface - background-color-for-view-switcher-when-selected: - choice: color-neutral-95 - background-color-for-view-switcher-when-hovered: - choice: color-neutral-95 - background-color-for-content-notification-when-error: - choice: color-error-95 - background-color-for-content-notification-when-info: - choice: color-info-95 - background-color-for-content-notification-when-warning: - choice: color-warning-95 - background-color-for-content-notification-when-success: - choice: color-primary-95 - background-color-for-content-notification-icon-when-error: - choice: color-error-95 - background-color-for-content-notification-icon-when-info: - choice: color-info-95 - background-color-for-content-notification-icon-when-warning: - choice: color-warning-95 - background-color-for-content-notification-icon-when-success: - choice: color-primary-95 - background-color-for-select-input-option-when-hovered: - choice: color-neutral-98 - background-color-for-checkbox-input-icon: - choice: color-primary - background-color-for-checkbox-input-icon-when-disabled: - choice: color-neutral - background-color-for-checkbox-input-icon-when-readonly: - choice: color-neutral-60 - background-color-for-checkbox-input-icon-when-error: - choice: color-error - background-color-for-checkbox-input-icon-when-hovered: - choice: color-neutral-90 - background-color-for-primary-action-dropdown-when-active: - choice: color-neutral-90 - background-color-for-primary-action-dropdown-when-disabled: - choice: color-neutral-95 - background-color-for-toggle-input-track: - choice: color-neutral - background-color-for-toggle-input-track-when-disabled: - choice: color-neutral-90 - background-color-for-toggle-input-thumb-when-disabled: - choice: color-neutral-60 - background-color-for-toggle-input-track-when-checked: - choice: color-primary-40 - background-color-for-toggle-input-thumb-when-checked: - choice: color-primary-25 - background-color-for-toggle-input-track-when-checked-and-disabled: - choice: color-accent-90 - background-color-for-toggle-input-thumb-when-checked-and-disabled: - choice: color-accent-60 - background-color-for-tag-when-hovered: - choice: color-neutral-90 - - borders: - label: Borders - prefix: border - decisions: - border-for-button-as-secondary: - choice: '1px solid var(--color-neutral)' - border-for-button-as-secondary-when-hovered: - choice: '1px solid var(--color-neutral)' - border-for-button-as-secondary-when-active: - choice: '1px solid var(--color-neutral)' - border-for-card-when-raised: - choice: '1px solid var(--color-neutral-90)' - border-for-collapsible-panel-header-icon-when-disabled: - choice: 'none' - border-for-view-switcher: - choice: '1px solid var(--color-neutral)' - border-for-select-input-tag: - choice: '1px solid var(--color-neutral-85)' - border-for-radio-input-option: - choice: border-width-2 - border-for-calendar-menu-when-focused: - choice: 'none' - - borderColors: - label: Border Colors - prefix: border-color - decisions: - border-color-for-input: - choice: color-neutral - border-color-for-input-when-disabled: - choice: color-neutral - border-color-for-input-when-hovered: - choice: color-neutral - border-color-for-input-when-readonly: - choice: color-surface - border-color-for-input-when-focused: - choice: color-primary - border-color-for-button-as-icon: - choice: color-neutral - border-color-for-button-as-icon-as-info: - choice: color-neutral - border-color-for-button-as-icon-as-primary: - choice: color-neutral - border-color-for-button-as-icon-when-disabled: - choice: color-surface - border-color-for-card-when-raised: - choice: color-neutral-90 - border-color-for-table-header: - choice: color-surface - border-color-for-table-header-as-bottom: - choice: color-neutral-90 - border-color-for-table-manager-droppable-list: - choice: color-neutral - border-color-for-collapsible-panel-header: - choice: color-neutral-90 - border-color-for-stamp-when-error: - choice: color-error-85 - border-color-for-stamp-when-warning: - choice: color-warning-85 - border-color-for-stamp-as-positive: - choice: color-primary-85 - border-color-for-stamp-as-information: - choice: color-info-85 - border-color-for-stamp-as-primary: - choice: color-primary-85 - border-color-for-stamp-as-secondary: - choice: color-neutral-85 - border-color-for-localized-input-label-when-readonly: - choice: color-surface - border-color-for-tag: - choice: color-neutral - border-color-for-tag-when-focused: - choice: color-neutral - border-color-for-tag-when-hovered: - choice: color-neutral - border-color-for-content-notification-when-error: - choice: color-error-85 - border-color-for-content-notification-when-info: - choice: color-info-85 - border-color-for-content-notification-when-warning: - choice: color-warning-85 - border-color-for-content-notification-when-success: - choice: color-primary-85 - border-color-for-group-heading-select-input-options: - choice: color-neutral-90 - border-color-for-select-input-menu: - choice: color-surface - border-color-for-select-input-when-readonly: - choice: color-neutral-95 - border-color-for-select-input-menu-when-warning: - choice: color-surface - border-color-for-select-input-menu-when-error: - choice: color-surface - border-color-for-checkbox-input-icon: - choice: color-primary - border-color-for-checkbox-input-icon-when-disabled: - choice: color-neutral - border-color-for-checkbox-input-icon-when-readonly: - choice: color-neutral-60 - border-color-for-checkbox-input-icon-when-error: - choice: color-error - border-color-for-radio-input: - choice: color-neutral-60 - border-color-for-radio-input-when-disabled: - choice: color-neutral - border-color-for-radio-input-when-readonly: - choice: color-neutral-60 - border-color-for-radio-input-when-checked: - choice: color-primary - border-color-for-radio-input-when-focused: - choice: color-neutral-60 - border-color-for-primary-action-dropdown-menu: - choice: color-surface - - borderRadiuses: - label: Border radiuses - prefix: border-radius - decisions: - border-radius-for-button-as-big: - choice: border-radius-4 - border-radius-for-button-as-medium: - choice: border-radius-4 - border-radius-for-button-as-icon-as-big: - choice: border-radius-4 - border-radius-for-button-as-icon-as-medium: - choice: border-radius-4 - border-radius-for-button-as-icon-as-small: - choice: border-radius-2 - border-radius-for-card: - choice: border-radius-4 - border-radius-for-table-manager-droppable-list: - choice: border-radius-4 - border-radius-for-input: - choice: border-radius-4 - border-radius-for-stamp: - choice: border-radius-20 - border-radius-for-view-switcher: - choice: border-radius-4 - border-radius-for-content-notification: - choice: '0 var(--border-radius-4) var(--border-radius-4) 0' - border-radius-for-content-notification-icon: - choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)' - border-radius-for-primary-action-dropdown: - choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)' - border-radius-for-primary-action-dropdown-icon: - choice: '0 var(--border-radius-4) var(--border-radius-4) 0' - border-radius-for-primary-action-dropdown-menu: - choice: border-radius-4 - - borderWidths: - label: Border width - prefix: border-width - decisions: - border-width-for-tag: - choice: '1px 1px 1px 0' - border-width-for-content-notification-icon: - choice: border-width-1 - border-left-width-for-content-notification: - choice: '0px' - border-width-for-select-input: - choice: border-width-2 - border-width-for-checkbox-input-icon: - choice: border-width-2 - border-for-primary-action-dropdown-icon: - choice: '1px 1px 1px 0px' - - boxShadows: - label: Box shadows - prefix: box-shadow - decisions: - box-shadow-for-datetime-input-when-hovered: - choice: 'inset 0 0 0 1px' - box-shadow-for-view-switcher: - choice: shadow-0 - box-shadow-for-view-switcher-when-selected: - choice: shadow-0 - box-shadow-for-select-input-when-focused: - choice: 'inset 0 0 0 1px' - box-shadow-for-calendar-menu-when-focused: - choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)' - - fontColors: - label: Font Colors - prefix: font-color - decisions: font-color-for-text-when-disabled: choice: color-neutral-60 - font-color-for-table-header: + font-color-for-input: choice: color-solid + font-color-for-input-when-disabled: + choice: color-neutral-60 + font-color-for-input-when-error: + choice: color-error font-color-for-input-when-readonly: choice: color-neutral-40 + font-color-for-input-when-warning: + choice: color-warning + font-color-for-tag: + choice: color-solid font-color-for-tag-remove-icon: choice: color-neutral-40 font-color-for-tag-drag-icon: choice: color-neutral-40 font-color-for-tag-remove-icon-when-hovered: choice: color-error + font-color-for-tag-when-disabled: + choice: color-neutral-60 + font-color-for-text-when-inverted: + choice: color-surface + font-color-for-link-as-inverted: + choice: color-surface + font-color-for-link-as-primary: + choice: color-primary-25 + font-color-for-link-as-secondary: + choice: color-solid + font-color-for-link-as-primary-when-active: + choice: color-primary + font-color-for-link-as-secondary-when-active: + choice: color-primary + font-color-for-table-header: + choice: color-solid + font-color-for-localized-input-label: + choice: color-neutral-60 font-color-for-view-switcher: choice: color-neutral-40 + font-color-for-view-switcher-when-disabled: + choice: color-neutral-60 + font-color-for-view-switcher-when-selected: + choice: color-solid + font-color-for-clear-input-icon: + choice: color-neutral-40 + font-color-for-clear-input-icon-when-hovered: + choice: color-error + font-color-for-content-notification: + choice: color-solid font-color-for-content-notification-icon-when-error: choice: color-error font-color-for-content-notification-icon-when-warning: @@ -1632,12 +848,10 @@ decisionGroupsByTheme: choice: color-primary font-color-for-content-notification-icon-when-info: choice: color-info - font-color-for-clear-input-icon-when-hovered: - choice: color-error - font-color-for-clear-input-icon: - choice: color-neutral-40 font-color-for-search-input-icon: choice: color-neutral-60 + font-color-for-search-input-icon-when-hovered: + choice: color-primary font-color-for-select-input-icon: choice: color-neutral-60 font-color-for-select-input-when-error: @@ -1650,6 +864,8 @@ decisionGroupsByTheme: choice: color-warning font-color-for-money-input-currency-dropdown-indicator: choice: color-neutral-40 + font-color-for-search-input-icon-when-readonly: + choice: color-neutral-60 font-color-for-checkbox-input-label: choice: color-solid font-color-for-checkbox-input-label-when-error: @@ -1658,23 +874,90 @@ decisionGroupsByTheme: choice: color-neutral-60 font-color-for-checkbox-input-label-when-readonly: choice: color-neutral-40 + font-color-for-radio-input-when-disabled: + choice: color-neutral-60 + font-color-for-radio-input-when-error: + choice: color-error + font-color-for-radio-input-when-readonly: + choice: color-neutral-60 + font-color-for-radio-input-when-warning: + choice: color-warning font-color-for-flat-button-as-primary: choice: color-primary-25 font-color-for-flat-button-as-primary-when-hovered: choice: color-primary - font-color-for-link-as-primary: - choice: color-primary-25 - font-color-for-link-as-primary-when-active: - choice: color-primary + font-color-for-flat-button-as-critical: + choice: color-error + font-color-for-flat-button-as-critical-when-hovered: + choice: color-error-25 + font-color-for-flat-button-as-secondary: + choice: color-solid + font-color-for-flat-button-as-inverted: + choice: color-surface + font-color-for-flat-button-icon-when-disabled: + choice: color-neutral-60 font-color-for-secondary-icon-button-as-primary: choice: color-primary-25 font-color-for-secondary-icon-button-as-primary-when-hovered: choice: color-primary + heights: + label: Height + prefix: height + decisions: + height-for-button-as-big: + choice: '40px' + height-for-button-as-medium: + choice: '32px' + height-for-button-as-icon-as-big: + choice: '40px' + height-for-button-as-icon-as-medium: + choice: '32px' + height-for-button-as-icon-as-small: + choice: '16px' + height-for-input: + choice: '40px' + height-for-view-switcher: + choice: '40px' + height-for-view-switcher-when-condensed: + choice: '32px' + height-for-select-input-tag: + choice: '32px' + height-for-radio-input-option: + choice: '18px' + height-for-radio-input-option-when-checked: + choice: '10px' + height-for-primary-action-dropdown: + choice: '40px' + + widths: + label: Width + prefix: width + decisions: + width-for-avatar-as-medium: + choice: '40px' + + minWidths: + label: Min width + prefix: min-width + decisions: + min-width-for-money-input-currency-dropdown: + choice: '80px' + + placeholderFontColors: + label: Placeholder font colors + prefix: placeholder-font-color + decisions: + placeholder-font-color-for-input: + description: '' + choice: color-neutral-60 + fontSizes: label: Font Sizes prefix: font-size decisions: + font-size-for-button: + choice: font-size-20 font-size-for-input: choice: font-size-30 font-size-for-text-as-h1: @@ -1693,8 +976,8 @@ decisionGroupsByTheme: choice: font-size-20 font-size-for-body: choice: '16px' - font-size-for-button: - choice: font-size-20 + font-size-for-link: + choice: font-size-30 font-size-for-stamp: choice: font-size-20 font-size-for-view-switcher: @@ -1709,33 +992,37 @@ decisionGroupsByTheme: choice: font-size-80 font-size-for-localized-input-label: choice: font-size-30 + font-size-for-content-notification: + choice: font-size-30 font-size-for-select-input-tag: choice: font-size-30 + iconColors: + label: Icon colors + prefix: icon-color + decisions: + icon-color-for-datetime-input-icon: + choice: color-neutral-40 + icon-color-for-datetime-input-icon-when-hovered: + choice: color-error + lineHeights: label: Line Heights prefix: line-height decisions: line-height-for-text-as-h1: - description: '' choice: line-height-60 line-height-for-text-as-h2: - description: '' choice: line-height-50 line-height-for-text-as-h3: - description: '' choice: line-height-30 line-height-for-text-as-h4: - description: '' choice: line-height-20 line-height-for-text-as-h5: - description: '' choice: line-height-20 line-height-for-text-as-body: - description: '' choice: line-height-40 line-height-for-text-as-detail: - description: '' choice: line-height-20 line-height-for-select-input-options: choice: line-height-40 @@ -1747,25 +1034,18 @@ decisionGroupsByTheme: prefix: font-weight decisions: font-weight-for-text-as-h1: - description: '' choice: font-weight-600 font-weight-for-text-as-h2: - description: '' choice: font-weight-500 font-weight-for-text-as-h3: - description: '' choice: font-weight-500 font-weight-for-text-as-h4: - description: '' choice: font-weight-500 font-weight-for-text-as-h5: - description: '' choice: font-weight-500 font-weight-for-text-as-body: - description: '' choice: font-weight-400 font-weight-for-text-as-detail: - description: '' choice: font-weight-400 font-weight-for-button: choice: font-weight-500 @@ -1774,58 +1054,6 @@ decisionGroupsByTheme: font-weight-for-text-as-bold: choice: font-weight-600 - heights: - label: Heights - prefix: height - decisions: - height-for-button-as-big: - choice: '40px' - height-for-button-as-medium: - choice: '32px' - height-for-button-as-icon-as-big: - choice: '40px' - height-for-button-as-icon-as-medium: - choice: '32px' - height-for-button-as-icon-as-small: - choice: '16px' - height-for-input: - choice: '40px' - height-for-view-switcher: - choice: '40px' - height-for-view-switcher-when-condensed: - choice: '32px' - height-for-select-input-tag: - choice: '32px' - height-for-radio-input-option: - choice: '18px' - height-for-radio-input-option-when-checked: - choice: '10px' - height-for-primary-action-dropdown: - choice: '40px' - - iconColors: - label: Icon colors - prefix: icon-color - decisions: - icon-color-for-datetime-input-icon: - choice: color-neutral-40 - icon-color-for-datetime-input-icon-when-hovered: - choice: color-error - - widths: - label: Width - prefix: width - decisions: - width-for-avatar-as-medium: - choice: '40px' - - minWidths: - label: Min width - prefix: min-width - decisions: - min-width-for-money-input-currency-dropdown: - choice: '80px' - margins: label: Margins prefix: margin @@ -1862,6 +1090,7 @@ decisionGroupsByTheme: choice: '0 0 0 var(--spacing-20)' margin-for-tag-list: choice: '0 var(--spacing-20) var(--spacing-20) 0' + paddings: label: Paddings prefix: padding @@ -1910,6 +1139,8 @@ decisionGroupsByTheme: choice: 'var(--spacing-20) var(--spacing-30)' padding-for-localized-rich-text-body-button: choice: 'var(--spacing-20)' + padding-for-localized-input-label: + choice: '0 12px' padding-for-rich-text-input: choice: 'var(--spacing-20) var(--spacing-30)' padding-for-rich-text-toolbar: @@ -1918,8 +1149,8 @@ decisionGroupsByTheme: choice: 'none' padding-for-rich-text-editor-container: choice: 'var(--spacing-20) 0 0' - padding-for-localized-input-label: - choice: '0 12px' + padding-for-localized-multiline-text-input-label: + choice: '0 var(--spacing-20)' padding-for-tag-remove-icon: choice: '0 12px' padding-for-tooltip: @@ -1961,6 +1192,10 @@ decisionGroupsByTheme: label: Shadows prefix: shadow decisions: + shadow-box-tag-when-hovered: + description: '' + deprecated: true + choice: shadow-1 shadow-for-button: choice: shadow-0 shadow-for-button-when-focused: diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts index 33bb5c8264..f3cf7f822b 100644 --- a/design-system/src/design-tokens.ts +++ b/design-system/src/design-tokens.ts @@ -53,7 +53,7 @@ export const themes = { borderRadius20: '20px', borderWidth1: '1px', borderWidth2: '2px', - fontFamily: "'Open Sans', sans-serif", + fontFamily: "'Inter', system-ui", fontSize10: '0.75rem', fontSize20: '0.875rem', fontSize30: '1rem', @@ -139,400 +139,6 @@ export const themes = { breakPointBiggerdesktop: '1280px', breakPointGiantdesktop: '1680px', breakPointJumbodesktop: '1920px', - alignItemsForSelectInputTag: 'unset', - backgroundColorForButtonWhenActive: '#fff', - backgroundColorForButtonWhenHovered: '#fff', - backgroundColorForButtonAsPrimaryWhenActive: '#00b39e', - backgroundColorForButtonAsPrimaryWhenHovered: - 'hsl(172.9608938547486, 100%, 25%)', - backgroundColorForButtonAsIconAsPrimaryWhenActive: '#00b39e', - backgroundColorForButtonAsIconAsPrimaryWhenHovered: '#00b39e', - backgroundColorForButtonAsIconAsInfoWhenActive: '#078cdf', - backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf', - backgroundColorForButtonAsUrgentWhenActive: '#f16d0e', - backgroundColorForButtonAsUrgentWhenHovered: - 'hsl(25.110132158590307, 89.0196078431%, 25%)', - backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForInput: '#fff', - backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', - backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForInputWhenHovered: '#fff', - backgroundColorForInputWhenFocused: '#fff', - backgroundColorForInputWhenReadonly: '#fff', - backgroundColorForInputWhenActive: 'hsl(195, 35.2941176471%, 95%)', - backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 90%)', - backgroundColorForTableHeader: '#213c45', - backgroundColorForTag: 'hsl(0, 0%, 95%)', - backgroundColorForTagWarning: - 'hsl(25.110132158590307, 89.0196078431%, 95%)', - backgroundColorForTagWhenHovered: 'hsl(0, 0%, 95%)', - backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: - 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)', - backgroundColorForAvatar: 'hsl(0, 0%, 60%)', - backgroundColorForAvatarWhenHighlighted: '#ccc', - backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)', - backgroundColorForLocalizedInputLabel: 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForLocalizedInputLabelWhenReadonly: - 'hsl(195, 35.2941176471%, 95%)', - backgroundColorForLocalizedInputLabelWhenDisabled: - 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForLocalizedRichTextBodyButtonWhenActive: - 'hsl(195, 35.2941176471%, 30%)', - backgroundColorForLocalizedRichTextBodyButton: 'hsl(0, 0%, 90%)', - backgroundColorForRichTextDropdownWhenHovered: 'hsl(0, 0%, 90%)', - backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'hsl(0, 0%, 90%)', - backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 30%)', - backgroundColorForTooltip: '#213c45', - backgroundColorForViewSwitcher: '#fff', - backgroundColorForViewSwitcherWhenDisabled: 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)', - backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 90%)', - backgroundColorForContentNotificationWhenError: '#fff', - backgroundColorForContentNotificationWhenInfo: '#fff', - backgroundColorForContentNotificationWhenWarning: '#fff', - backgroundColorForContentNotificationWhenSuccess: '#fff', - backgroundColorForContentNotificationIconWhenError: '#e60050', - backgroundColorForContentNotificationIconWhenInfo: '#078cdf', - backgroundColorForContentNotificationIconWhenWarning: '#f16d0e', - backgroundColorForContentNotificationIconWhenSuccess: '#00b39e', - backgroundColorForCheckboxInputIcon: '#fff', - backgroundColorForCheckboxInputIconWhenDisabled: '#fff', - backgroundColorForCheckboxInputIconWhenReadonly: '#fff', - backgroundColorForCheckboxInputIconWhenError: '#fff', - backgroundColorForCheckboxInputIconWhenHovered: '#fff', - backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 95%)', - backgroundColorForPrimaryActionDropdownWhenDisabled: - 'hsl(195, 35.2941176471%, 98%)', - backgroundColorForToggleInputTrack: 'hsl(0, 0%, 60%)', - backgroundColorForToggleInputTrackWhenDisabled: '#ccc', - backgroundColorForToggleInputThumbWhenDisabled: - 'hsl(195, 35.2941176471%, 95%)', - backgroundColorForToggleInputTrackWhenChecked: '#00b39e', - backgroundColorForToggleInputThumbWhenChecked: '#fff', - backgroundColorForToggleInputTrackWhenCheckedAndDisabled: - 'hsl(172.9608938547486, 100%, 25%)', - backgroundColorForToggleInputThumbWhenCheckedAndDisabled: '#ccc', - borderForButtonAsSecondary: 'none', - borderForButtonAsSecondaryWhenHovered: 'none', - borderForButtonAsSecondaryWhenActive: 'none', - borderForCardWhenRaised: 'none', - borderForCollapsiblePanelHeaderIconWhenDisabled: - '1px solid var(--color-neutral)', - borderForViewSwitcher: 'none', - borderForSelectInputTag: 'none', - borderForRadioInputOption: '1px', - borderForCalendarMenuWhenFocused: '1px solid var(--color-primary)', - borderColorForInput: 'hsl(0, 0%, 60%)', - borderColorForInputWhenFocused: '#00b39e', - borderColorForInputWhenDisabled: '#ccc', - borderColorForInputWhenReadonly: '#ccc', - borderColorForInputWhenError: '#e60050', - borderColorForInputWhenWarning: '#f16d0e', - borderColorForInputWhenHovered: '#00b39e', - borderColorForTag: 'hsl(0, 0%, 60%)', - borderColorForTagWarning: '#f16d0e', - borderColorForTagWhenFocused: '#00b39e', - borderColorForTagWhenHovered: '#f16d0e', - borderColorForButtonAsIcon: '#fff', - borderColorForButtonAsIconAsInfo: '#078cdf', - borderColorForButtonAsIconAsPrimary: '#00b39e', - borderColorForButtonAsIconWhenDisabled: '#ccc', - borderColorForTableHeader: '#ccc', - borderColorForTableHeaderAsBottom: '#213c45', - borderColorForTableManagerDroppableList: 'hsl(0, 0%, 60%)', - borderColorForCollapsiblePanelHeader: 'hsl(0, 0%, 60%)', - borderColorForStampWhenError: '#e60050', - borderColorForStampWhenWarning: '#f16d0e', - borderColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 40%)', - borderColorForStampAsInformation: '#078cdf', - borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 25%)', - borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)', - borderColorForLocalizedInputLabel: '#ccc', - borderColorForLocalizedInputLabelWhenReadonly: '#ccc', - borderColorForContentNotificationWhenError: '#e60050', - borderColorForContentNotificationWhenInfo: '#078cdf', - borderColorForContentNotificationWhenWarning: '#f16d0e', - borderColorForContentNotificationWhenSuccess: '#00b39e', - borderColorForGroupHeadingSelectInputOptions: '#ccc', - borderColorForSelectInputMenu: '#00b39e', - borderColorForSelectInputWhenReadonly: '#ccc', - borderColorForSelectInputMenuWhenWarning: '#f16d0e', - borderColorForSelectInputMenuWhenError: '#e60050', - borderColorForCheckboxInputIcon: 'hsl(0, 0%, 60%)', - borderColorForCheckboxInputIconWhenDisabled: '#ccc', - borderColorForCheckboxInputIconWhenReadonly: '#ccc', - borderColorForCheckboxInputIconWhenError: '#e60050', - borderColorForRadioInput: '#ccc', - borderColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)', - borderColorForRadioInputWhenReadonly: '#ccc', - borderColorForRadioInputWhenChecked: '#ccc', - borderColorForRadioInputWhenFocused: '#00b39e', - borderColorForPrimaryActionDropdownMenu: '#ccc', - borderRadiusForButtonAsBig: '6px', - borderRadiusForButtonAsMedium: '4px', - borderRadiusForButtonAsIconAsBig: '6px', - borderRadiusForButtonAsIconAsMedium: '4px', - borderRadiusForButtonAsIconAsSmall: '2px', - borderRadiusForInput: '6px', - borderRadiusForTag: '2px', - borderRadiusForCard: '6px', - borderRadiusForTableManagerDroppableList: '6px', - borderRadiusForStamp: '2px', - borderRadiusForViewSwitcher: '6px', - borderRadiusForContentNotification: - '0 var(--border-radius-6) var(--border-radius-6) 0', - borderRadiusForContentNotificationIcon: - 'var(--border-radius-6) 0 0 var(--border-radius-6)', - borderRadiusForPrimaryActionDropdown: - 'var(--border-radius-6) 0 0 var(--border-radius-6)', - borderRadiusForPrimaryActionDropdownIcon: - '0 var(--border-radius-6) var(--border-radius-6) 0', - borderRadiusForPrimaryActionDropdownMenu: '6px', - borderWidthForInput: '1px', - borderWidthForInputWhenWarning: '1px', - borderWidthForInputWhenError: '1px', - borderWidthForInputWhenFocused: '1px', - borderWidthForTag: '1px', - borderWidthForSelectInput: '1px', - borderWidthForContentNotificationIcon: '0px', - borderLeftWidthForContentNotification: '1px', - borderWidthForCheckboxInputIcon: '1px', - borderForPrimaryActionDropdownIcon: '0px 0px 0px 1px', - boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px', - boxShadowForViewSwitcher: - '0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)', - boxShadowForViewSwitcherWhenSelected: - 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)', - boxShadowForSelectInputWhenFocused: 'inset 0 0 0 2px', - boxShadowForCalendarMenuWhenFocused: 'none', - fontColorForText: '#1a1a1a', - fontColorForTextWhenDisabled: '#ccc', - fontColorForInput: '#1a1a1a', - fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForInputWhenError: '#e60050', - fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)', - fontColorForInputWhenWarning: '#f16d0e', - fontColorForTag: '#1a1a1a', - fontColorForTagRemoveIcon: '#1a1a1a', - fontColorForTagDragIcon: '#1a1a1a', - fontColorForTagRemoveIconWhenHovered: '#f16d0e', - fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForTextWhenInverted: '#fff', - fontColorForLinkAsInverted: '#fff', - fontColorForLinkAsPrimary: '#00b39e', - fontColorForLinkAsSecondary: '#1a1a1a', - fontColorForLinkAsPrimaryWhenActive: 'hsl(172.9608938547486, 100%, 25%)', - fontColorForLinkAsSecondaryWhenActive: '#00b39e', - fontColorForTableHeader: '#fff', - fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)', - fontColorForViewSwitcher: '#1a1a1a', - fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForViewSwitcherWhenSelected: '#1a1a1a', - fontColorForClearInputIcon: '#1a1a1a', - fontColorForClearInputIconWhenHovered: '#f16d0e', - fontColorForContentNotification: '#1a1a1a', - fontColorForContentNotificationIconWhenError: '#fff', - fontColorForContentNotificationIconWhenWarning: '#fff', - fontColorForContentNotificationIconWhenSuccess: '#fff', - fontColorForContentNotificationIconWhenInfo: '#fff', - fontColorForSearchInputIcon: '#1a1a1a', - fontColorForSearchInputIconWhenHovered: '#00b39e', - fontColorForSelectInputIcon: '#1a1a1a', - fontColorForSelectInputWhenError: '#1a1a1a', - fontColorForSelectInputWhenWarning: '#1a1a1a', - fontColorForSelectInputIconWhenError: '#1a1a1a', - fontColorForSelectInputIconWhenWarning: '#1a1a1a', - fontColorForMoneyInputCurrencyDropdownIndicator: '#1a1a1a', - fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)', - fontColorForCheckboxInputLabel: '#1a1a1a', - fontColorForCheckboxInputLabelWhenError: '#e60050', - fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 40%)', - fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)', - fontColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForRadioInputWhenError: '#e60050', - fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)', - fontColorForRadioInputWhenWarning: '#f16d0e', - fontColorForFlatButtonAsPrimary: '#00b39e', - fontColorForFlatButtonAsPrimaryWhenHovered: - 'hsl(172.9608938547486, 100%, 25%)', - fontColorForFlatButtonAsCritical: '#e60050', - fontColorForFlatButtonAsCriticalWhenHovered: - 'hsl(339.1304347826087, 100%, 25%)', - fontColorForFlatButtonAsSecondary: '#1a1a1a', - fontColorForFlatButtonAsInverted: '#fff', - fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForSecondaryIconButtonAsPrimary: '#00b39e', - fontColorForSecondaryIconButtonAsPrimaryWhenHovered: - 'hsl(172.9608938547486, 100%, 25%)', - heightForButtonAsBig: '32px', - heightForButtonAsMedium: '24px', - heightForButtonAsIconAsBig: '32px', - heightForButtonAsIconAsMedium: '24px', - heightForButtonAsIconAsSmall: '16px', - heightForInput: '32px', - heightForViewSwitcher: '32px', - heightForViewSwitcherWhenCondensed: '24px', - heightForSelectInputTag: '26px', - heightForRadioInputOption: '16px', - heightForRadioInputOptionWhenChecked: '8px', - heightForPrimaryActionDropdown: '32px', - widthForAvatarAsMedium: '48px', - minWidthForMoneyInputCurrencyDropdown: '72px', - placeholderFontColorForInput: 'hsl(0, 0%, 60%)', - fontSizeForButton: '1rem', - fontSizeForInput: '1rem', - fontSizeForTextAsH1: '2.4615rem', - fontSizeForTextAsH2: '1.8462rem', - fontSizeForTextAsH3: '1.5385rem', - fontSizeForTextAsH4: '1.2308rem', - fontSizeForTextAsH5: '1.0769rem', - fontSizeForTextAsBody: '1rem', - fontSizeForTextAsDetail: '0.9231rem', - fontSizeForBody: '13px', - fontSizeForLink: '1rem', - fontSizeForStamp: '1rem', - fontSizeForViewSwitcher: '1rem', - fontSizeForTable: '1rem', - fontSizeForAvatarAsSmall: '1rem', - fontSizeForAvatarAsMedium: '1.5rem', - fontSizeForAvatarAsBig: '3rem', - fontSizeForLocalizedInputLabel: '1rem', - fontSizeForContentNotification: '1rem', - fontSizeForSelectInputTag: '0.9231rem', - iconColorForDatetimeInputIcon: '#1a1a1a', - iconColorForDatetimeInputIconWhenHovered: '#f16d0e', - lineHeightForTextAsH1: 'inherit', - lineHeightForTextAsH2: 'inherit', - lineHeightForTextAsH3: 'inherit', - lineHeightForTextAsH4: 'inherit', - lineHeightForTextAsH5: 'inherit', - lineHeightForTextAsBody: 'inherit', - lineHeightForTextAsDetail: 'inherit', - lineHeightForSelectInputOptions: 'inherit', - lineHeightForTableHeader: 'inherit', - fontWeightForTextAsH1: '300', - fontWeightForTextAsH2: '300', - fontWeightForTextAsH3: '300', - fontWeightForTextAsH4: '400', - fontWeightForTextAsH5: '400', - fontWeightForTextAsBody: '400', - fontWeightForTextAsDetail: '400', - fontWeightForButton: '400', - fontWeightForTableHeader: '400', - fontWeightForTextAsBold: '700', - marginForTableHeader: '8px', - marginForTableAsCondensed: '8px', - marginForViewSwitcherIcon: '0 var(--spacing-10) 0 0', - marginForGroupHeadingSelectInputOptions: '4px', - marginForSelectInputIcon: '4px', - marginLeftForSelectInputIcon: 'inherit', - marginRightForMoneyInputPrecisionBadge: '4px', - marginRightForSearchInputIcon: '8px', - marginRightForClearInputIcon: '4px', - marginLeftForRadioInputLabel: '8px', - marginRightForPrimaryActionDropdown: '4px', - marginTopForPrimaryActionDropdown: 'none', - marginForLocalizedRichTextBodyButton: 'none', - marginForRichTextDivider: '0 var(--spacing-10)', - marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)', - marginForTagList: '0 var(--spacing-10) var(--spacing-10) 0', - paddingForStamp: 'var(--spacing-10) var(--spacing-20)', - paddingForStampAsCondensed: '1px var(--spacing-10)', - paddingForTag: '5px var(--spacing-20)', - paddingForTableHeader: '16px', - paddingForTableHeaderAsCondensed: '8px', - paddingForTableCell: '16px', - paddingForTableCellAsCondensed: '8px', - paddingForTableManagerDroppableList: '8px', - paddingForTableManagerSettingsPanel: '16px', - paddingForTableManagerDraggableTag: '4px', - paddingForCollapsiblePanelHeader: 'var(--spacing-20) var(--spacing-30)', - paddingForCollapsiblePanelHeaderAsCondensed: '8px', - paddingForCollapsiblePanelSectionWrapper: '16px', - paddingForCollapsiblePanelSectionWrapperAsCondensed: '8px', - paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-50)', - paddingForCollapsiblePanelSectionDescriptionAsCondensed: - '0 0 var(--spacing-30)', - paddingForInput: '8px', - paddingForMultilineInput: 'var(--spacing-10) var(--spacing-20)', - paddingForLocalizedRichTextInputLabel: '0 var(--spacing-20)', - paddingForLocalizedRichTextDropdownButton: '3px var(--spacing-20)', - paddingForLocalizedRichTextDropdownItem: - 'var(--spacing-10) var(--spacing-20)', - paddingForLocalizedRichTextBodyButton: 'var(--spacing-10)', - paddingForLocalizedInputLabel: '0 var(--spacing-20)', - paddingForRichTextInput: 'none', - paddingForRichTextToolbar: 'var(--spacing-10) 7px', - paddingLeftForRichTextToolbar: '3px', - paddingForRichTextEditorContainer: - '6px var(--spacing-20) var(--spacing-10)', - paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)', - paddingForTagRemoveIcon: '0 var(--spacing-10)', - paddingForTooltip: 'var(--spacing-10) var(--spacing-20)', - paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)', - paddingForViewSwitcherWhenCondensed: - '0 var(--spacing-20) 0 var(--spacing-20)', - paddingForContentNotification: 'var(--spacing-20)', - paddingForContentNotificationIcon: 'var(--spacing-20) var(--spacing-30)', - paddingLeftForSelectInputOptions: '8px', - paddingRightForSelectInputOptions: '8px', - paddingTopForSelectInputOptions: '4px', - paddingBottomForSelectInputOptions: '4px', - paddingForGroupHeadingSelectInputOptions: '8px', - paddingForSelectInputMenu: 'inherit', - paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)', - paddingForSelectableSearchInputDropdown: '0 var(--spacing-20)', - paddingForPrimaryActionDropdown: '0 var(--spacing-20)', - paddingForPrimaryActionDropdownIcon: '0 var(--spacing-10)', - paddingForButtonAsMedium: '0 var(--spacing-20)', - paddingForButtonAsBig: '0 var(--spacing-30)', - shadowForButton: - '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)', - shadowForButtonWhenFocused: - '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)', - shadowForButtonWhenHovered: - '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)', - shadowForButtonWhenActive: - 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)', - shadowForButtonWhenDisabled: '0 0 0 1px var(--color-neutral) inset', - shadowBoxTagWhenHovered: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - shadowForCardWhenRaised: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - shadowForInput: 'none', - shadowForInputWhenFocused: 'inset 0 0 0 2px var(--color-primary)', - shadowForInputWhenError: 'none', - shadowForInputWhenWarning: 'none', - shadowForTooltip: - '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)', - shadowForSelectInputMenu: - '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)', - shadowForPrimaryActionDropdown: - '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)', - shadowForPrimaryActionDropdownWhenHovered: - '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)', - shadowForPrimaryActionDropdownWhenActive: - 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)', - shadowForPrimaryActionDropdownMenu: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - shadowForToggleInputThumb: - '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)', - shadowForTagWhenHovered: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - fontSizeM: '1rem', - bigButtonHeight: '32px', - smallButtonHeight: '24px', - sizeHeightInput: '32px', - fontFamilyDefault: "'Open Sans', sans-serif", - fontSizeDefault: '1rem', - fontSizeSmall: '0.9231rem', - shadowBoxTagHover: - '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', - sizeHeightTag: '26px', - }, - test: { - fontFamily: "'Inter', system-ui", alignItemsForSelectInputTag: 'center', backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)', backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)', @@ -544,15 +150,23 @@ export const themes = { backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf', backgroundColorForButtonAsUrgentWhenActive: '#DC630A', backgroundColorForButtonAsUrgentWhenHovered: '#E7680D', - backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)', - backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 98%)', - backgroundColorForTableHeader: 'hsl(0, 0%, 95%)', - backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff', - backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)', + backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)', + backgroundColorForInput: '#fff', + backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)', backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)', + backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)', + backgroundColorForInputWhenFocused: '#fff', + backgroundColorForInputWhenReadonly: 'hsl(0, 0%, 95%)', backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)', - backgroundColorForInputWhenReadonly: 'hsl(0, 0%, 95%)', + backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 98%)', + backgroundColorForTableHeader: 'hsl(0, 0%, 95%)', + backgroundColorForTag: 'hsl(0, 0%, 95%)', + backgroundColorForTagWarning: + 'hsl(25.110132158590307, 89.0196078431%, 95%)', + backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)', + backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff', + backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)', backgroundColorForAvatar: '#213c45', backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)', backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)', @@ -567,6 +181,7 @@ export const themes = { 'hsl(203.05555555555554, 93.9130434783%, 95%)', backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 20%)', backgroundColorForTooltip: 'hsl(195, 35.2941176471%, 10%)', + backgroundColorForViewSwitcher: '#fff', backgroundColorForViewSwitcherWhenDisabled: '#fff', backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)', backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 95%)', @@ -586,7 +201,6 @@ export const themes = { 'hsl(25.110132158590307, 89.0196078431%, 95%)', backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)', - backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)', backgroundColorForCheckboxInputIcon: '#00b39e', backgroundColorForCheckboxInputIconWhenDisabled: '#ccc', backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)', @@ -605,7 +219,6 @@ export const themes = { 'hsl(195, 35.2941176471%, 90%)', backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)', - backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)', borderForButtonAsSecondary: '1px solid var(--color-neutral)', borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)', borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)', @@ -616,15 +229,20 @@ export const themes = { borderForRadioInputOption: '2px', borderForCalendarMenuWhenFocused: 'none', borderColorForInput: '#ccc', + borderColorForInputWhenFocused: '#00b39e', borderColorForInputWhenDisabled: '#ccc', - borderColorForInputWhenHovered: '#ccc', borderColorForInputWhenReadonly: '#fff', - borderColorForInputWhenFocused: '#00b39e', + borderColorForInputWhenError: '#e60050', + borderColorForInputWhenWarning: '#f16d0e', + borderColorForInputWhenHovered: '#ccc', + borderColorForTag: '#ccc', + borderColorForTagWarning: '#f16d0e', + borderColorForTagWhenFocused: '#ccc', + borderColorForTagWhenHovered: '#ccc', borderColorForButtonAsIcon: '#ccc', borderColorForButtonAsIconAsInfo: '#ccc', borderColorForButtonAsIconAsPrimary: '#ccc', borderColorForButtonAsIconWhenDisabled: '#fff', - borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)', borderColorForTableHeader: '#fff', borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)', borderColorForTableManagerDroppableList: '#ccc', @@ -637,10 +255,8 @@ export const themes = { 'hsl(203.05555555555554, 93.9130434783%, 85%)', borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)', borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)', + borderColorForLocalizedInputLabel: '#ccc', borderColorForLocalizedInputLabelWhenReadonly: '#fff', - borderColorForTag: '#ccc', - borderColorForTagWhenFocused: '#ccc', - borderColorForTagWhenHovered: '#ccc', borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)', borderColorForContentNotificationWhenInfo: @@ -669,9 +285,10 @@ export const themes = { borderRadiusForButtonAsIconAsBig: '4px', borderRadiusForButtonAsIconAsMedium: '4px', borderRadiusForButtonAsIconAsSmall: '2px', + borderRadiusForInput: '4px', + borderRadiusForTag: '2px', borderRadiusForCard: '4px', borderRadiusForTableManagerDroppableList: '4px', - borderRadiusForInput: '4px', borderRadiusForStamp: '20px', borderRadiusForViewSwitcher: '4px', borderRadiusForContentNotification: @@ -683,10 +300,14 @@ export const themes = { borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0', borderRadiusForPrimaryActionDropdownMenu: '4px', + borderWidthForInput: '1px', + borderWidthForInputWhenWarning: '1px', + borderWidthForInputWhenError: '1px', + borderWidthForInputWhenFocused: '1px', borderWidthForTag: '1px 1px 1px 0', + borderWidthForSelectInput: '2px', borderWidthForContentNotificationIcon: '1px', borderLeftWidthForContentNotification: '0px', - borderWidthForSelectInput: '2px', borderWidthForCheckboxInputIcon: '2px', borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px', boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px', @@ -694,37 +315,80 @@ export const themes = { boxShadowForViewSwitcherWhenSelected: 'none', boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px', boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)', + fontColorForText: '#1a1a1a', fontColorForTextWhenDisabled: 'hsl(0, 0%, 60%)', - fontColorForTableHeader: '#1a1a1a', + fontColorForInput: '#1a1a1a', + fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)', + fontColorForInputWhenError: '#e60050', fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)', + fontColorForInputWhenWarning: '#f16d0e', + fontColorForTag: '#1a1a1a', fontColorForTagRemoveIcon: 'hsl(0, 0%, 40%)', fontColorForTagDragIcon: 'hsl(0, 0%, 40%)', fontColorForTagRemoveIconWhenHovered: '#e60050', + fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)', + fontColorForTextWhenInverted: '#fff', + fontColorForLinkAsInverted: '#fff', + fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)', + fontColorForLinkAsSecondary: '#1a1a1a', + fontColorForLinkAsPrimaryWhenActive: '#00b39e', + fontColorForLinkAsSecondaryWhenActive: '#00b39e', + fontColorForTableHeader: '#1a1a1a', + fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)', fontColorForViewSwitcher: 'hsl(0, 0%, 40%)', + fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)', + fontColorForViewSwitcherWhenSelected: '#1a1a1a', + fontColorForClearInputIcon: 'hsl(0, 0%, 40%)', + fontColorForClearInputIconWhenHovered: '#e60050', + fontColorForContentNotification: '#1a1a1a', fontColorForContentNotificationIconWhenError: '#e60050', fontColorForContentNotificationIconWhenWarning: '#f16d0e', fontColorForContentNotificationIconWhenSuccess: '#00b39e', fontColorForContentNotificationIconWhenInfo: '#078cdf', - fontColorForClearInputIconWhenHovered: '#e60050', - fontColorForClearInputIcon: 'hsl(0, 0%, 40%)', fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)', + fontColorForSearchInputIconWhenHovered: '#00b39e', fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)', fontColorForSelectInputWhenError: '#e60050', fontColorForSelectInputWhenWarning: '#f16d0e', fontColorForSelectInputIconWhenError: '#e60050', fontColorForSelectInputIconWhenWarning: '#f16d0e', fontColorForMoneyInputCurrencyDropdownIndicator: 'hsl(0, 0%, 40%)', + fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)', fontColorForCheckboxInputLabel: '#1a1a1a', fontColorForCheckboxInputLabelWhenError: '#e60050', fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 60%)', fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)', + fontColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)', + fontColorForRadioInputWhenError: '#e60050', + fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)', + fontColorForRadioInputWhenWarning: '#f16d0e', fontColorForFlatButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)', fontColorForFlatButtonAsPrimaryWhenHovered: '#00b39e', - fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)', - fontColorForLinkAsPrimaryWhenActive: '#00b39e', + fontColorForFlatButtonAsCritical: '#e60050', + fontColorForFlatButtonAsCriticalWhenHovered: + 'hsl(339.1304347826087, 100%, 25%)', + fontColorForFlatButtonAsSecondary: '#1a1a1a', + fontColorForFlatButtonAsInverted: '#fff', + fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)', fontColorForSecondaryIconButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)', fontColorForSecondaryIconButtonAsPrimaryWhenHovered: '#00b39e', + heightForButtonAsBig: '40px', + heightForButtonAsMedium: '32px', + heightForButtonAsIconAsBig: '40px', + heightForButtonAsIconAsMedium: '32px', + heightForButtonAsIconAsSmall: '16px', + heightForInput: '40px', + heightForViewSwitcher: '40px', + heightForViewSwitcherWhenCondensed: '32px', + heightForSelectInputTag: '32px', + heightForRadioInputOption: '18px', + heightForRadioInputOptionWhenChecked: '10px', + heightForPrimaryActionDropdown: '40px', + widthForAvatarAsMedium: '40px', + minWidthForMoneyInputCurrencyDropdown: '80px', + placeholderFontColorForInput: 'hsl(0, 0%, 60%)', + fontSizeForButton: '0.875rem', fontSizeForInput: '1rem', fontSizeForTextAsH1: '1.5rem', fontSizeForTextAsH2: '1.25rem', @@ -734,7 +398,7 @@ export const themes = { fontSizeForTextAsBody: '1rem', fontSizeForTextAsDetail: '0.875rem', fontSizeForBody: '16px', - fontSizeForButton: '0.875rem', + fontSizeForLink: '1rem', fontSizeForStamp: '0.875rem', fontSizeForViewSwitcher: '0.875rem', fontSizeForTable: '0.875rem', @@ -742,7 +406,10 @@ export const themes = { fontSizeForAvatarAsMedium: '1rem', fontSizeForAvatarAsBig: '2.5rem', fontSizeForLocalizedInputLabel: '1rem', + fontSizeForContentNotification: '1rem', fontSizeForSelectInputTag: '1rem', + iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)', + iconColorForDatetimeInputIconWhenHovered: '#e60050', lineHeightForTextAsH1: '2.125rem', lineHeightForTextAsH2: '1.75rem', lineHeightForTextAsH3: '1.5rem', @@ -762,22 +429,6 @@ export const themes = { fontWeightForButton: '500', fontWeightForTableHeader: '600', fontWeightForTextAsBold: '600', - heightForButtonAsBig: '40px', - heightForButtonAsMedium: '32px', - heightForButtonAsIconAsBig: '40px', - heightForButtonAsIconAsMedium: '32px', - heightForButtonAsIconAsSmall: '16px', - heightForInput: '40px', - heightForViewSwitcher: '40px', - heightForViewSwitcherWhenCondensed: '32px', - heightForSelectInputTag: '32px', - heightForRadioInputOption: '18px', - heightForRadioInputOptionWhenChecked: '10px', - heightForPrimaryActionDropdown: '40px', - iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)', - iconColorForDatetimeInputIconWhenHovered: '#e60050', - widthForAvatarAsMedium: '40px', - minWidthForMoneyInputCurrencyDropdown: '80px', marginForTableHeader: '16px', marginForTableCellAsCondensed: '8px', marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0', @@ -820,11 +471,12 @@ export const themes = { paddingForLocalizedRichTextDropdownItem: 'var(--spacing-20) var(--spacing-30)', paddingForLocalizedRichTextBodyButton: 'var(--spacing-20)', + paddingForLocalizedInputLabel: '0 12px', paddingForRichTextInput: 'var(--spacing-20) var(--spacing-30)', paddingForRichTextToolbar: 'none', paddingLeftForRichTextToolbar: 'none', paddingForRichTextEditorContainer: 'var(--spacing-20) 0 0', - paddingForLocalizedInputLabel: '0 12px', + paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)', paddingForTagRemoveIcon: '0 12px', paddingForTooltip: 'var(--spacing-20) 12px', paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)', @@ -845,6 +497,8 @@ export const themes = { paddingForPrimaryActionDropdownIcon: '0 var(--spacing-20)', paddingForButtonAsMedium: '0 var(--spacing-30)', paddingForButtonAsBig: '0 var(--spacing-30)', + shadowBoxTagWhenHovered: + '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', shadowForButton: 'none', shadowForButtonWhenFocused: 'none', shadowForButtonWhenHovered: 'none', @@ -863,6 +517,16 @@ export const themes = { shadowForPrimaryActionDropdownMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)', shadowForToggleInputThumb: '0px 1px 5px rgba(0, 0, 0, 0.2)', shadowForTagWhenHovered: 'none', + fontSizeM: '1rem', + bigButtonHeight: '32px', + smallButtonHeight: '24px', + sizeHeightInput: '32px', + fontFamilyDefault: "'Open Sans', sans-serif", + fontSizeDefault: '1rem', + fontSizeSmall: '0.9231rem', + shadowBoxTagHover: + '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)', + sizeHeightTag: '26px', }, } as const; @@ -922,7 +586,7 @@ const designTokens = { borderRadius20: 'var(--border-radius-20, 20px)', borderWidth1: 'var(--border-width-1, 1px)', borderWidth2: 'var(--border-width-2, 2px)', - fontFamily: "var(--font-family, 'Open Sans', sans-serif)", + fontFamily: "var(--font-family, 'Inter', system-ui)", fontSize10: 'var(--font-size-10, 0.75rem)', fontSize20: 'var(--font-size-20, 0.875rem)', fontSize30: 'var(--font-size-30, 1rem)', @@ -1015,346 +679,356 @@ const designTokens = { breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)', breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)', breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)', - alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, unset)', + alignItemsForSelectInputTag: + 'var(--align-items-for-select-input-tag, center)', backgroundColorForButtonWhenActive: - 'var(--background-color-for-button-when-active, #fff)', + 'var(--background-color-for-button-when-active, hsl(0deg 0% 10% / 10%))', backgroundColorForButtonWhenHovered: - 'var(--background-color-for-button-when-hovered, #fff)', + 'var(--background-color-for-button-when-hovered, hsl(0deg 0% 10% / 5%))', backgroundColorForButtonAsPrimaryWhenActive: - 'var(--background-color-for-button-as-primary-when-active, #00b39e)', + 'var(--background-color-for-button-as-primary-when-active, #15A390)', backgroundColorForButtonAsPrimaryWhenHovered: - 'var(--background-color-for-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))', + 'var(--background-color-for-button-as-primary-when-hovered, #17AB97)', backgroundColorForButtonAsIconAsPrimaryWhenActive: - 'var(--background-color-for-button-as-icon-as-primary-when-active, #00b39e)', + 'var(--background-color-for-button-as-icon-as-primary-when-active, #15A390)', backgroundColorForButtonAsIconAsPrimaryWhenHovered: 'var(--background-color-for-button-as-icon-as-primary-when-hovered, #00b39e)', backgroundColorForButtonAsIconAsInfoWhenActive: - 'var(--background-color-for-button-as-icon-as-info-when-active, #078cdf)', + 'var(--background-color-for-button-as-icon-as-info-when-active, #057FCC)', backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)', backgroundColorForButtonAsUrgentWhenActive: - 'var(--background-color-for-button-as-urgent-when-active, #f16d0e)', + 'var(--background-color-for-button-as-urgent-when-active, #DC630A)', backgroundColorForButtonAsUrgentWhenHovered: - 'var(--background-color-for-button-as-urgent-when-hovered, hsl(25.110132158590307, 89.0196078431%, 25%))', + 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)', backgroundColorForButtonWhenDisabled: - 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))', backgroundColorForInput: 'var(--background-color-for-input, #fff)', backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))', backgroundColorForInputWhenDisabled: - 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))', backgroundColorForInputWhenHovered: - 'var(--background-color-for-input-when-hovered, #fff)', + 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))', backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)', backgroundColorForInputWhenReadonly: - 'var(--background-color-for-input-when-readonly, #fff)', + 'var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))', backgroundColorForInputWhenActive: - 'var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))', + 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))', backgroundColorForTableCellWhenHovered: - 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 90%))', + 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 98%))', backgroundColorForTableHeader: - 'var(--background-color-for-table-header, #213c45)', + 'var(--background-color-for-table-header, hsl(0, 0%, 95%))', backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))', backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))', backgroundColorForTagWhenHovered: - 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 95%))', + 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 90%))', backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: - 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, #fff)', backgroundColorForSelectInputOptionWhenHovered: - 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))', - backgroundColorForAvatar: - 'var(--background-color-for-avatar, hsl(0, 0%, 60%))', + 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 98%))', + backgroundColorForAvatar: 'var(--background-color-for-avatar, #213c45)', backgroundColorForAvatarWhenHighlighted: - 'var(--background-color-for-avatar-when-highlighted, #ccc)', + 'var(--background-color-for-avatar-when-highlighted, hsl(195, 35.2941176471%, 30%))', backgroundColorForStampAsPositive: - 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))', + 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 95%))', backgroundColorForLocalizedInputLabel: - 'var(--background-color-for-localized-input-label, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-localized-input-label, #fff)', backgroundColorForLocalizedInputLabelWhenReadonly: - 'var(--background-color-for-localized-input-label-when-readonly, hsl(195, 35.2941176471%, 95%))', + 'var(--background-color-for-localized-input-label-when-readonly, hsl(0, 0%, 95%))', backgroundColorForLocalizedInputLabelWhenDisabled: - 'var(--background-color-for-localized-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-localized-input-label-when-disabled, hsl(0, 0%, 95%))', backgroundColorForLocalizedRichTextBodyButtonWhenActive: - 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 30%))', + 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 20%))', backgroundColorForLocalizedRichTextBodyButton: - 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 90%))', + 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 95%))', backgroundColorForRichTextDropdownWhenHovered: - 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 90%))', + 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 95%))', backgroundColorForRichTextMoreStylesDropdownWhenHovered: - 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(0, 0%, 90%))', + 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(203.05555555555554, 93.9130434783%, 95%))', backgroundColorForRichTextButton: - 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 30%))', - backgroundColorForTooltip: 'var(--background-color-for-tooltip, #213c45)', + 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 20%))', + backgroundColorForTooltip: + 'var(--background-color-for-tooltip, hsl(195, 35.2941176471%, 10%))', backgroundColorForViewSwitcher: 'var(--background-color-for-view-switcher, #fff)', backgroundColorForViewSwitcherWhenDisabled: - 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-view-switcher-when-disabled, #fff)', backgroundColorForViewSwitcherWhenSelected: 'var(--background-color-for-view-switcher-when-selected, hsl(0, 0%, 95%))', backgroundColorForViewSwitcherWhenHovered: - 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 90%))', + 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 95%))', backgroundColorForContentNotificationWhenError: - 'var(--background-color-for-content-notification-when-error, #fff)', + 'var(--background-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 95%))', backgroundColorForContentNotificationWhenInfo: - 'var(--background-color-for-content-notification-when-info, #fff)', + 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))', backgroundColorForContentNotificationWhenWarning: - 'var(--background-color-for-content-notification-when-warning, #fff)', + 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))', backgroundColorForContentNotificationWhenSuccess: - 'var(--background-color-for-content-notification-when-success, #fff)', + 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))', backgroundColorForContentNotificationIconWhenError: - 'var(--background-color-for-content-notification-icon-when-error, #e60050)', + 'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))', backgroundColorForContentNotificationIconWhenInfo: - 'var(--background-color-for-content-notification-icon-when-info, #078cdf)', + 'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))', backgroundColorForContentNotificationIconWhenWarning: - 'var(--background-color-for-content-notification-icon-when-warning, #f16d0e)', + 'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))', backgroundColorForContentNotificationIconWhenSuccess: - 'var(--background-color-for-content-notification-icon-when-success, #00b39e)', + 'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))', backgroundColorForCheckboxInputIcon: - 'var(--background-color-for-checkbox-input-icon, #fff)', + 'var(--background-color-for-checkbox-input-icon, #00b39e)', backgroundColorForCheckboxInputIconWhenDisabled: - 'var(--background-color-for-checkbox-input-icon-when-disabled, #fff)', + 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)', backgroundColorForCheckboxInputIconWhenReadonly: - 'var(--background-color-for-checkbox-input-icon-when-readonly, #fff)', + 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))', backgroundColorForCheckboxInputIconWhenError: - 'var(--background-color-for-checkbox-input-icon-when-error, #fff)', + 'var(--background-color-for-checkbox-input-icon-when-error, #e60050)', backgroundColorForCheckboxInputIconWhenHovered: - 'var(--background-color-for-checkbox-input-icon-when-hovered, #fff)', + 'var(--background-color-for-checkbox-input-icon-when-hovered, hsl(0, 0%, 90%))', backgroundColorForPrimaryActionDropdownWhenActive: - 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 95%))', + 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 90%))', backgroundColorForPrimaryActionDropdownWhenDisabled: - 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(195, 35.2941176471%, 98%))', + 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(0, 0%, 95%))', backgroundColorForToggleInputTrack: - 'var(--background-color-for-toggle-input-track, hsl(0, 0%, 60%))', + 'var(--background-color-for-toggle-input-track, #ccc)', backgroundColorForToggleInputTrackWhenDisabled: - 'var(--background-color-for-toggle-input-track-when-disabled, #ccc)', + 'var(--background-color-for-toggle-input-track-when-disabled, hsl(0, 0%, 90%))', backgroundColorForToggleInputThumbWhenDisabled: - 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(195, 35.2941176471%, 95%))', + 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(0, 0%, 60%))', backgroundColorForToggleInputTrackWhenChecked: - 'var(--background-color-for-toggle-input-track-when-checked, #00b39e)', + 'var(--background-color-for-toggle-input-track-when-checked, hsl(172.9608938547486, 100%, 40%))', backgroundColorForToggleInputThumbWhenChecked: - 'var(--background-color-for-toggle-input-thumb-when-checked, #fff)', + 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))', backgroundColorForToggleInputTrackWhenCheckedAndDisabled: - 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(172.9608938547486, 100%, 25%))', + 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))', backgroundColorForToggleInputThumbWhenCheckedAndDisabled: - 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, #ccc)', - borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)', + 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))', + borderForButtonAsSecondary: + 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))', borderForButtonAsSecondaryWhenHovered: - 'var(--border-for-button-as-secondary-when-hovered, none)', + 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))', borderForButtonAsSecondaryWhenActive: - 'var(--border-for-button-as-secondary-when-active, none)', - borderForCardWhenRaised: 'var(--border-for-card-when-raised, none)', + 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))', + borderForCardWhenRaised: + 'var(--border-for-card-when-raised, 1px solid var(--color-neutral-90))', borderForCollapsiblePanelHeaderIconWhenDisabled: - 'var(--border-for-collapsible-panel-header-icon-when-disabled, 1px solid var(--color-neutral))', - borderForViewSwitcher: 'var(--border-for-view-switcher, none)', - borderForSelectInputTag: 'var(--border-for-select-input-tag, none)', - borderForRadioInputOption: 'var(--border-for-radio-input-option, 1px)', + 'var(--border-for-collapsible-panel-header-icon-when-disabled, none)', + borderForViewSwitcher: + 'var(--border-for-view-switcher, 1px solid var(--color-neutral))', + borderForSelectInputTag: + 'var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))', + borderForRadioInputOption: 'var(--border-for-radio-input-option, 2px)', borderForCalendarMenuWhenFocused: - 'var(--border-for-calendar-menu-when-focused, 1px solid var(--color-primary))', - borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))', + 'var(--border-for-calendar-menu-when-focused, none)', + borderColorForInput: 'var(--border-color-for-input, #ccc)', borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)', borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)', borderColorForInputWhenReadonly: - 'var(--border-color-for-input-when-readonly, #ccc)', + 'var(--border-color-for-input-when-readonly, #fff)', borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)', borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)', borderColorForInputWhenHovered: - 'var(--border-color-for-input-when-hovered, #00b39e)', - borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))', + 'var(--border-color-for-input-when-hovered, #ccc)', + borderColorForTag: 'var(--border-color-for-tag, #ccc)', borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)', borderColorForTagWhenFocused: - 'var(--border-color-for-tag-when-focused, #00b39e)', + 'var(--border-color-for-tag-when-focused, #ccc)', borderColorForTagWhenHovered: - 'var(--border-color-for-tag-when-hovered, #f16d0e)', - borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #fff)', + 'var(--border-color-for-tag-when-hovered, #ccc)', + borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #ccc)', borderColorForButtonAsIconAsInfo: - 'var(--border-color-for-button-as-icon-as-info, #078cdf)', + 'var(--border-color-for-button-as-icon-as-info, #ccc)', borderColorForButtonAsIconAsPrimary: - 'var(--border-color-for-button-as-icon-as-primary, #00b39e)', + 'var(--border-color-for-button-as-icon-as-primary, #ccc)', borderColorForButtonAsIconWhenDisabled: - 'var(--border-color-for-button-as-icon-when-disabled, #ccc)', - borderColorForTableHeader: 'var(--border-color-for-table-header, #ccc)', + 'var(--border-color-for-button-as-icon-when-disabled, #fff)', + borderColorForTableHeader: 'var(--border-color-for-table-header, #fff)', borderColorForTableHeaderAsBottom: - 'var(--border-color-for-table-header-as-bottom, #213c45)', + 'var(--border-color-for-table-header-as-bottom, hsl(0, 0%, 90%))', borderColorForTableManagerDroppableList: - 'var(--border-color-for-table-manager-droppable-list, hsl(0, 0%, 60%))', + 'var(--border-color-for-table-manager-droppable-list, #ccc)', borderColorForCollapsiblePanelHeader: - 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 60%))', + 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 90%))', borderColorForStampWhenError: - 'var(--border-color-for-stamp-when-error, #e60050)', + 'var(--border-color-for-stamp-when-error, hsl(339.1304347826087, 100%, 85%))', borderColorForStampWhenWarning: - 'var(--border-color-for-stamp-when-warning, #f16d0e)', + 'var(--border-color-for-stamp-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))', borderColorForStampAsPositive: - 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 40%))', + 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))', borderColorForStampAsInformation: - 'var(--border-color-for-stamp-as-information, #078cdf)', + 'var(--border-color-for-stamp-as-information, hsl(203.05555555555554, 93.9130434783%, 85%))', borderColorForStampAsPrimary: - 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 25%))', + 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 85%))', borderColorForStampAsSecondary: - 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))', + 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 85%))', borderColorForLocalizedInputLabel: 'var(--border-color-for-localized-input-label, #ccc)', borderColorForLocalizedInputLabelWhenReadonly: - 'var(--border-color-for-localized-input-label-when-readonly, #ccc)', + 'var(--border-color-for-localized-input-label-when-readonly, #fff)', borderColorForContentNotificationWhenError: - 'var(--border-color-for-content-notification-when-error, #e60050)', + 'var(--border-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 85%))', borderColorForContentNotificationWhenInfo: - 'var(--border-color-for-content-notification-when-info, #078cdf)', + 'var(--border-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))', borderColorForContentNotificationWhenWarning: - 'var(--border-color-for-content-notification-when-warning, #f16d0e)', + 'var(--border-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))', borderColorForContentNotificationWhenSuccess: - 'var(--border-color-for-content-notification-when-success, #00b39e)', + 'var(--border-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 85%))', borderColorForGroupHeadingSelectInputOptions: - 'var(--border-color-for-group-heading-select-input-options, #ccc)', + 'var(--border-color-for-group-heading-select-input-options, hsl(0, 0%, 90%))', borderColorForSelectInputMenu: - 'var(--border-color-for-select-input-menu, #00b39e)', + 'var(--border-color-for-select-input-menu, #fff)', borderColorForSelectInputWhenReadonly: - 'var(--border-color-for-select-input-when-readonly, #ccc)', + 'var(--border-color-for-select-input-when-readonly, hsl(0, 0%, 95%))', borderColorForSelectInputMenuWhenWarning: - 'var(--border-color-for-select-input-menu-when-warning, #f16d0e)', + 'var(--border-color-for-select-input-menu-when-warning, #fff)', borderColorForSelectInputMenuWhenError: - 'var(--border-color-for-select-input-menu-when-error, #e60050)', + 'var(--border-color-for-select-input-menu-when-error, #fff)', borderColorForCheckboxInputIcon: - 'var(--border-color-for-checkbox-input-icon, hsl(0, 0%, 60%))', + 'var(--border-color-for-checkbox-input-icon, #00b39e)', borderColorForCheckboxInputIconWhenDisabled: 'var(--border-color-for-checkbox-input-icon-when-disabled, #ccc)', borderColorForCheckboxInputIconWhenReadonly: - 'var(--border-color-for-checkbox-input-icon-when-readonly, #ccc)', + 'var(--border-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))', borderColorForCheckboxInputIconWhenError: 'var(--border-color-for-checkbox-input-icon-when-error, #e60050)', - borderColorForRadioInput: 'var(--border-color-for-radio-input, #ccc)', + borderColorForRadioInput: + 'var(--border-color-for-radio-input, hsl(0, 0%, 60%))', borderColorForRadioInputWhenDisabled: - 'var(--border-color-for-radio-input-when-disabled, hsl(0, 0%, 60%))', + 'var(--border-color-for-radio-input-when-disabled, #ccc)', borderColorForRadioInputWhenReadonly: - 'var(--border-color-for-radio-input-when-readonly, #ccc)', + 'var(--border-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))', borderColorForRadioInputWhenChecked: - 'var(--border-color-for-radio-input-when-checked, #ccc)', + 'var(--border-color-for-radio-input-when-checked, #00b39e)', borderColorForRadioInputWhenFocused: - 'var(--border-color-for-radio-input-when-focused, #00b39e)', + 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))', borderColorForPrimaryActionDropdownMenu: - 'var(--border-color-for-primary-action-dropdown-menu, #ccc)', - borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)', + 'var(--border-color-for-primary-action-dropdown-menu, #fff)', + borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)', borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)', borderRadiusForButtonAsIconAsBig: - 'var(--border-radius-for-button-as-icon-as-big, 6px)', + 'var(--border-radius-for-button-as-icon-as-big, 4px)', borderRadiusForButtonAsIconAsMedium: 'var(--border-radius-for-button-as-icon-as-medium, 4px)', borderRadiusForButtonAsIconAsSmall: 'var(--border-radius-for-button-as-icon-as-small, 2px)', - borderRadiusForInput: 'var(--border-radius-for-input, 6px)', + borderRadiusForInput: 'var(--border-radius-for-input, 4px)', borderRadiusForTag: 'var(--border-radius-for-tag, 2px)', - borderRadiusForCard: 'var(--border-radius-for-card, 6px)', + borderRadiusForCard: 'var(--border-radius-for-card, 4px)', borderRadiusForTableManagerDroppableList: - 'var(--border-radius-for-table-manager-droppable-list, 6px)', - borderRadiusForStamp: 'var(--border-radius-for-stamp, 2px)', - borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 6px)', + 'var(--border-radius-for-table-manager-droppable-list, 4px)', + borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)', + borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)', borderRadiusForContentNotification: - 'var(--border-radius-for-content-notification, 0 var(--border-radius-6) var(--border-radius-6) 0)', + 'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)', borderRadiusForContentNotificationIcon: - 'var(--border-radius-for-content-notification-icon, var(--border-radius-6) 0 0 var(--border-radius-6))', + 'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))', borderRadiusForPrimaryActionDropdown: - 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-6) 0 0 var(--border-radius-6))', + 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))', borderRadiusForPrimaryActionDropdownIcon: - 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-6) var(--border-radius-6) 0)', + 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)', borderRadiusForPrimaryActionDropdownMenu: - 'var(--border-radius-for-primary-action-dropdown-menu, 6px)', + 'var(--border-radius-for-primary-action-dropdown-menu, 4px)', borderWidthForInput: 'var(--border-width-for-input, 1px)', borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)', borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)', borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)', - borderWidthForTag: 'var(--border-width-for-tag, 1px)', - borderWidthForSelectInput: 'var(--border-width-for-select-input, 1px)', + borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)', + borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)', borderWidthForContentNotificationIcon: - 'var(--border-width-for-content-notification-icon, 0px)', + 'var(--border-width-for-content-notification-icon, 1px)', borderLeftWidthForContentNotification: - 'var(--border-left-width-for-content-notification, 1px)', + 'var(--border-left-width-for-content-notification, 0px)', borderWidthForCheckboxInputIcon: - 'var(--border-width-for-checkbox-input-icon, 1px)', + 'var(--border-width-for-checkbox-input-icon, 2px)', borderForPrimaryActionDropdownIcon: - 'var(--border-for-primary-action-dropdown-icon, 0px 0px 0px 1px)', + 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)', boxShadowForDatetimeInputWhenHovered: - 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)', - boxShadowForViewSwitcher: - 'var(--box-shadow-for-view-switcher, 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12))', + 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 1px)', + boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, none)', boxShadowForViewSwitcherWhenSelected: - 'var(--box-shadow-for-view-switcher-when-selected, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))', + 'var(--box-shadow-for-view-switcher-when-selected, none)', boxShadowForSelectInputWhenFocused: - 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 2px)', + 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)', boxShadowForCalendarMenuWhenFocused: - 'var(--box-shadow-for-calendar-menu-when-focused, none)', + 'var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))', fontColorForText: 'var(--font-color-for-text, #1a1a1a)', fontColorForTextWhenDisabled: - 'var(--font-color-for-text-when-disabled, #ccc)', + 'var(--font-color-for-text-when-disabled, hsl(0, 0%, 60%))', fontColorForInput: 'var(--font-color-for-input, #1a1a1a)', fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))', fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)', fontColorForInputWhenReadonly: - 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))', + 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))', fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)', fontColorForTag: 'var(--font-color-for-tag, #1a1a1a)', - fontColorForTagRemoveIcon: 'var(--font-color-for-tag-remove-icon, #1a1a1a)', - fontColorForTagDragIcon: 'var(--font-color-for-tag-drag-icon, #1a1a1a)', + fontColorForTagRemoveIcon: + 'var(--font-color-for-tag-remove-icon, hsl(0, 0%, 40%))', + fontColorForTagDragIcon: + 'var(--font-color-for-tag-drag-icon, hsl(0, 0%, 40%))', fontColorForTagRemoveIconWhenHovered: - 'var(--font-color-for-tag-remove-icon-when-hovered, #f16d0e)', + 'var(--font-color-for-tag-remove-icon-when-hovered, #e60050)', fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))', fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)', fontColorForLinkAsInverted: 'var(--font-color-for-link-as-inverted, #fff)', - fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, #00b39e)', + fontColorForLinkAsPrimary: + 'var(--font-color-for-link-as-primary, hsl(172.9608938547486, 100%, 25%))', fontColorForLinkAsSecondary: 'var(--font-color-for-link-as-secondary, #1a1a1a)', fontColorForLinkAsPrimaryWhenActive: - 'var(--font-color-for-link-as-primary-when-active, hsl(172.9608938547486, 100%, 25%))', + 'var(--font-color-for-link-as-primary-when-active, #00b39e)', fontColorForLinkAsSecondaryWhenActive: 'var(--font-color-for-link-as-secondary-when-active, #00b39e)', - fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)', + fontColorForTableHeader: 'var(--font-color-for-table-header, #1a1a1a)', fontColorForLocalizedInputLabel: 'var(--font-color-for-localized-input-label, hsl(0, 0%, 60%))', - fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)', + fontColorForViewSwitcher: + 'var(--font-color-for-view-switcher, hsl(0, 0%, 40%))', fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))', fontColorForViewSwitcherWhenSelected: 'var(--font-color-for-view-switcher-when-selected, #1a1a1a)', - fontColorForClearInputIcon: 'var(--font-color-for-clear-input-icon, #1a1a1a)', + fontColorForClearInputIcon: + 'var(--font-color-for-clear-input-icon, hsl(0, 0%, 40%))', fontColorForClearInputIconWhenHovered: - 'var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)', + 'var(--font-color-for-clear-input-icon-when-hovered, #e60050)', fontColorForContentNotification: 'var(--font-color-for-content-notification, #1a1a1a)', fontColorForContentNotificationIconWhenError: - 'var(--font-color-for-content-notification-icon-when-error, #fff)', + 'var(--font-color-for-content-notification-icon-when-error, #e60050)', fontColorForContentNotificationIconWhenWarning: - 'var(--font-color-for-content-notification-icon-when-warning, #fff)', + 'var(--font-color-for-content-notification-icon-when-warning, #f16d0e)', fontColorForContentNotificationIconWhenSuccess: - 'var(--font-color-for-content-notification-icon-when-success, #fff)', + 'var(--font-color-for-content-notification-icon-when-success, #00b39e)', fontColorForContentNotificationIconWhenInfo: - 'var(--font-color-for-content-notification-icon-when-info, #fff)', + 'var(--font-color-for-content-notification-icon-when-info, #078cdf)', fontColorForSearchInputIcon: - 'var(--font-color-for-search-input-icon, #1a1a1a)', + 'var(--font-color-for-search-input-icon, hsl(0, 0%, 60%))', fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #00b39e)', fontColorForSelectInputIcon: - 'var(--font-color-for-select-input-icon, #1a1a1a)', + 'var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))', fontColorForSelectInputWhenError: - 'var(--font-color-for-select-input-when-error, #1a1a1a)', + 'var(--font-color-for-select-input-when-error, #e60050)', fontColorForSelectInputWhenWarning: - 'var(--font-color-for-select-input-when-warning, #1a1a1a)', + 'var(--font-color-for-select-input-when-warning, #f16d0e)', fontColorForSelectInputIconWhenError: - 'var(--font-color-for-select-input-icon-when-error, #1a1a1a)', + 'var(--font-color-for-select-input-icon-when-error, #e60050)', fontColorForSelectInputIconWhenWarning: - 'var(--font-color-for-select-input-icon-when-warning, #1a1a1a)', + 'var(--font-color-for-select-input-icon-when-warning, #f16d0e)', fontColorForMoneyInputCurrencyDropdownIndicator: - 'var(--font-color-for-money-input-currency-dropdown-indicator, #1a1a1a)', + 'var(--font-color-for-money-input-currency-dropdown-indicator, hsl(0, 0%, 40%))', fontColorForSearchInputIconWhenReadonly: 'var(--font-color-for-search-input-icon-when-readonly, hsl(0, 0%, 60%))', fontColorForCheckboxInputLabel: @@ -1362,7 +1036,7 @@ const designTokens = { fontColorForCheckboxInputLabelWhenError: 'var(--font-color-for-checkbox-input-label-when-error, #e60050)', fontColorForCheckboxInputLabelWhenDisabled: - 'var(--font-color-for-checkbox-input-label-when-disabled, hsl(0, 0%, 40%))', + 'var(--font-color-for-checkbox-input-label-when-disabled, hsl(0, 0%, 60%))', fontColorForCheckboxInputLabelWhenReadonly: 'var(--font-color-for-checkbox-input-label-when-readonly, hsl(0, 0%, 40%))', fontColorForRadioInputWhenDisabled: @@ -1374,9 +1048,9 @@ const designTokens = { fontColorForRadioInputWhenWarning: 'var(--font-color-for-radio-input-when-warning, #f16d0e)', fontColorForFlatButtonAsPrimary: - 'var(--font-color-for-flat-button-as-primary, #00b39e)', + 'var(--font-color-for-flat-button-as-primary, hsl(172.9608938547486, 100%, 25%))', fontColorForFlatButtonAsPrimaryWhenHovered: - 'var(--font-color-for-flat-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))', + 'var(--font-color-for-flat-button-as-primary-when-hovered, #00b39e)', fontColorForFlatButtonAsCritical: 'var(--font-color-for-flat-button-as-critical, #e60050)', fontColorForFlatButtonAsCriticalWhenHovered: @@ -1388,225 +1062,219 @@ const designTokens = { fontColorForFlatButtonIconWhenDisabled: 'var(--font-color-for-flat-button-icon-when-disabled, hsl(0, 0%, 60%))', fontColorForSecondaryIconButtonAsPrimary: - 'var(--font-color-for-secondary-icon-button-as-primary, #00b39e)', + 'var(--font-color-for-secondary-icon-button-as-primary, hsl(172.9608938547486, 100%, 25%))', fontColorForSecondaryIconButtonAsPrimaryWhenHovered: - 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))', - heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)', - heightForButtonAsMedium: 'var(--height-for-button-as-medium, 24px)', - heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)', + 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, #00b39e)', + heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)', + heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)', + heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 40px)', heightForButtonAsIconAsMedium: - 'var(--height-for-button-as-icon-as-medium, 24px)', + 'var(--height-for-button-as-icon-as-medium, 32px)', heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)', - heightForInput: 'var(--height-for-input, 32px)', - heightForViewSwitcher: 'var(--height-for-view-switcher, 32px)', + heightForInput: 'var(--height-for-input, 40px)', + heightForViewSwitcher: 'var(--height-for-view-switcher, 40px)', heightForViewSwitcherWhenCondensed: - 'var(--height-for-view-switcher-when-condensed, 24px)', - heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)', - heightForRadioInputOption: 'var(--height-for-radio-input-option, 16px)', + 'var(--height-for-view-switcher-when-condensed, 32px)', + heightForSelectInputTag: 'var(--height-for-select-input-tag, 32px)', + heightForRadioInputOption: 'var(--height-for-radio-input-option, 18px)', heightForRadioInputOptionWhenChecked: - 'var(--height-for-radio-input-option-when-checked, 8px)', + 'var(--height-for-radio-input-option-when-checked, 10px)', heightForPrimaryActionDropdown: - 'var(--height-for-primary-action-dropdown, 32px)', - widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)', + 'var(--height-for-primary-action-dropdown, 40px)', + widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 40px)', minWidthForMoneyInputCurrencyDropdown: - 'var(--min-width-for-money-input-currency-dropdown, 72px)', + 'var(--min-width-for-money-input-currency-dropdown, 80px)', placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))', - fontSizeForButton: 'var(--font-size-for-button, 1rem)', + fontSizeForButton: 'var(--font-size-for-button, 0.875rem)', fontSizeForInput: 'var(--font-size-for-input, 1rem)', - fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 2.4615rem)', - fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.8462rem)', - fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.5385rem)', - fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1.2308rem)', - fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1.0769rem)', + fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 1.5rem)', + fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.25rem)', + fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.125rem)', + fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1rem)', + fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1rem)', fontSizeForTextAsBody: 'var(--font-size-for-text-as-body, 1rem)', - fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.9231rem)', - fontSizeForBody: 'var(--font-size-for-body, 13px)', + fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.875rem)', + fontSizeForBody: 'var(--font-size-for-body, 16px)', fontSizeForLink: 'var(--font-size-for-link, 1rem)', - fontSizeForStamp: 'var(--font-size-for-stamp, 1rem)', - fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 1rem)', - fontSizeForTable: 'var(--font-size-for-table, 1rem)', - fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 1rem)', - fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)', - fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)', + fontSizeForStamp: 'var(--font-size-for-stamp, 0.875rem)', + fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 0.875rem)', + fontSizeForTable: 'var(--font-size-for-table, 0.875rem)', + fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 0.875rem)', + fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1rem)', + fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 2.5rem)', fontSizeForLocalizedInputLabel: 'var(--font-size-for-localized-input-label, 1rem)', fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)', - fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 0.9231rem)', + fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 1rem)', iconColorForDatetimeInputIcon: - 'var(--icon-color-for-datetime-input-icon, #1a1a1a)', + 'var(--icon-color-for-datetime-input-icon, hsl(0, 0%, 40%))', iconColorForDatetimeInputIconWhenHovered: - 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)', - lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)', - lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, inherit)', - lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, inherit)', - lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, inherit)', - lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, inherit)', - lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, inherit)', - lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, inherit)', + 'var(--icon-color-for-datetime-input-icon-when-hovered, #e60050)', + lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, 2.125rem)', + lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, 1.75rem)', + lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, 1.5rem)', + lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, 1.375rem)', + lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, 1.375rem)', + lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, 1.625rem)', + lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, 1.375rem)', lineHeightForSelectInputOptions: - 'var(--line-height-for-select-input-options, inherit)', - lineHeightForTableHeader: 'var(--line-height-for-table-header, inherit)', - fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 300)', - fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 300)', - fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 300)', - fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 400)', - fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 400)', + 'var(--line-height-for-select-input-options, 1.625rem)', + lineHeightForTableHeader: 'var(--line-height-for-table-header, 26px)', + fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 600)', + fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 500)', + fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 500)', + fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 500)', + fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 500)', fontWeightForTextAsBody: 'var(--font-weight-for-text-as-body, 400)', fontWeightForTextAsDetail: 'var(--font-weight-for-text-as-detail, 400)', - fontWeightForButton: 'var(--font-weight-for-button, 400)', - fontWeightForTableHeader: 'var(--font-weight-for-table-header, 400)', - fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 700)', - marginForTableHeader: 'var(--margin-for-table-header, 8px)', - marginForTableAsCondensed: 'var(--margin-for-table-as-condensed, 8px)', + fontWeightForButton: 'var(--font-weight-for-button, 500)', + fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)', + fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)', + marginForTableHeader: 'var(--margin-for-table-header, 16px)', + marginForTableCellAsCondensed: + 'var(--margin-for-table-cell-as-condensed, 8px)', marginForViewSwitcherIcon: - 'var(--margin-for-view-switcher-icon, 0 var(--spacing-10) 0 0)', + 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)', marginForGroupHeadingSelectInputOptions: - 'var(--margin-for-group-heading-select-input-options, 4px)', - marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 4px)', - marginLeftForSelectInputIcon: - 'var(--margin-left-for-select-input-icon, inherit)', + 'var(--margin-for-group-heading-select-input-options, 8px)', + marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 8px)', + marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, 8px)', marginRightForMoneyInputPrecisionBadge: - 'var(--margin-right-for-money-input-precision-badge, 4px)', + 'var(--margin-right-for-money-input-precision-badge, 12px)', marginRightForSearchInputIcon: - 'var(--margin-right-for-search-input-icon, 8px)', - marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)', - marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 8px)', + 'var(--margin-right-for-search-input-icon, 12px)', + marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 8px)', + marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 4px)', marginRightForPrimaryActionDropdown: - 'var(--margin-right-for-primary-action-dropdown, 4px)', + 'var(--margin-right-for-primary-action-dropdown, 8px)', marginTopForPrimaryActionDropdown: - 'var(--margin-top-for-primary-action-dropdown, none)', + 'var(--margin-top-for-primary-action-dropdown, 8px)', marginForLocalizedRichTextBodyButton: - 'var(--margin-for-localized-rich-text-body-button, none)', + 'var(--margin-for-localized-rich-text-body-button, 0 2px var(--spacing-20) 2px)', marginForRichTextDivider: - 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))', + 'var(--margin-for-rich-text-divider, var(--spacing-10) 2px)', marginForRichTextDropdownItemLabel: - 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))', + 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-20))', marginForTagList: - 'var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)', - paddingForStamp: - 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))', + 'var(--margin-for-tag-list, 0 var(--spacing-20) var(--spacing-20) 0)', + paddingForStamp: 'var(--padding-for-stamp, 4px 12px)', paddingForStampAsCondensed: - 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))', - paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))', - paddingForTableHeader: 'var(--padding-for-table-header, 16px)', + 'var(--padding-for-stamp-as-condensed, 0 var(--spacing-20))', + paddingForTag: 'var(--padding-for-tag, 2px 12px)', + paddingForTableHeader: 'var(--padding-for-table-header, 24px)', paddingForTableHeaderAsCondensed: - 'var(--padding-for-table-header-as-condensed, 8px)', - paddingForTableCell: 'var(--padding-for-table-cell, 16px)', + 'var(--padding-for-table-header-as-condensed, 24px)', + paddingForTableCell: + 'var(--padding-for-table-cell, var(--spacing-30) var(--spacing-40))', paddingForTableCellAsCondensed: - 'var(--padding-for-table-cell-as-condensed, 8px)', + 'var(--padding-for-table-cell-as-condensed, var(--spacing-20) var(--spacing-40))', paddingForTableManagerDroppableList: - 'var(--padding-for-table-manager-droppable-list, 8px)', + 'var(--padding-for-table-manager-droppable-list, 16px)', paddingForTableManagerSettingsPanel: - 'var(--padding-for-table-manager-settings-panel, 16px)', + 'var(--padding-for-table-manager-settings-panel, var(--spacing-40) var(--spacing-50))', paddingForTableManagerDraggableTag: - 'var(--padding-for-table-manager-draggable-tag, 4px)', + 'var(--padding-for-table-manager-draggable-tag, var(--spacing-10) 0)', paddingForCollapsiblePanelHeader: - 'var(--padding-for-collapsible-panel-header, var(--spacing-20) var(--spacing-30))', + 'var(--padding-for-collapsible-panel-header, var(--spacing-30) 0)', paddingForCollapsiblePanelHeaderAsCondensed: - 'var(--padding-for-collapsible-panel-header-as-condensed, 8px)', + 'var(--padding-for-collapsible-panel-header-as-condensed, var(--spacing-20) 0)', paddingForCollapsiblePanelSectionWrapper: - 'var(--padding-for-collapsible-panel-section-wrapper, 16px)', + 'var(--padding-for-collapsible-panel-section-wrapper, var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10)))', paddingForCollapsiblePanelSectionWrapperAsCondensed: - 'var(--padding-for-collapsible-panel-section-wrapper-as-condensed, 8px)', + 'var(--padding-for-collapsible-panel-section-wrapper-as-condensed, var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10)))', paddingForCollapsiblePanelSectionDescription: - 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-50))', + 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-40))', paddingForCollapsiblePanelSectionDescriptionAsCondensed: - 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-30))', - paddingForInput: 'var(--padding-for-input, 8px)', - paddingForMultilineInput: - 'var(--padding-for-multiline-input, var(--spacing-10) var(--spacing-20))', + 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-40))', + paddingForInput: 'var(--padding-for-input, 16px)', + paddingForMultilineInput: 'var(--padding-for-multiline-input, 8px)', paddingForLocalizedRichTextInputLabel: - 'var(--padding-for-localized-rich-text-input-label, 0 var(--spacing-20))', + 'var(--padding-for-localized-rich-text-input-label, var(--spacing-20) 12px)', paddingForLocalizedRichTextDropdownButton: - 'var(--padding-for-localized-rich-text-dropdown-button, 3px var(--spacing-20))', + 'var(--padding-for-localized-rich-text-dropdown-button, 5px var(--spacing-20))', paddingForLocalizedRichTextDropdownItem: - 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-10) var(--spacing-20))', + 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-20) var(--spacing-30))', paddingForLocalizedRichTextBodyButton: - 'var(--padding-for-localized-rich-text-body-button, var(--spacing-10))', + 'var(--padding-for-localized-rich-text-body-button, var(--spacing-20))', paddingForLocalizedInputLabel: - 'var(--padding-for-localized-input-label, 0 var(--spacing-20))', - paddingForRichTextInput: 'var(--padding-for-rich-text-input, none)', - paddingForRichTextToolbar: - 'var(--padding-for-rich-text-toolbar, var(--spacing-10) 7px)', + 'var(--padding-for-localized-input-label, 0 12px)', + paddingForRichTextInput: + 'var(--padding-for-rich-text-input, var(--spacing-20) var(--spacing-30))', + paddingForRichTextToolbar: 'var(--padding-for-rich-text-toolbar, none)', paddingLeftForRichTextToolbar: - 'var(--padding-left-for-rich-text-toolbar, 3px)', + 'var(--padding-left-for-rich-text-toolbar, none)', paddingForRichTextEditorContainer: - 'var(--padding-for-rich-text-editor-container, 6px var(--spacing-20) var(--spacing-10))', + 'var(--padding-for-rich-text-editor-container, var(--spacing-20) 0 0)', paddingForLocalizedMultilineTextInputLabel: 'var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))', - paddingForTagRemoveIcon: - 'var(--padding-for-tag-remove-icon, 0 var(--spacing-10))', - paddingForTooltip: - 'var(--padding-for-tooltip, var(--spacing-10) var(--spacing-20))', + paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 12px)', + paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)', paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))', paddingForViewSwitcherWhenCondensed: - 'var(--padding-for-view-switcher-when-condensed, 0 var(--spacing-20) 0 var(--spacing-20))', + 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)', paddingForContentNotification: - 'var(--padding-for-content-notification, var(--spacing-20))', + 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))', paddingForContentNotificationIcon: - 'var(--padding-for-content-notification-icon, var(--spacing-20) var(--spacing-30))', + 'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))', paddingLeftForSelectInputOptions: - 'var(--padding-left-for-select-input-options, 8px)', + 'var(--padding-left-for-select-input-options, 16px)', paddingRightForSelectInputOptions: - 'var(--padding-right-for-select-input-options, 8px)', + 'var(--padding-right-for-select-input-options, 16px)', paddingTopForSelectInputOptions: - 'var(--padding-top-for-select-input-options, 4px)', + 'var(--padding-top-for-select-input-options, 8px)', paddingBottomForSelectInputOptions: - 'var(--padding-bottom-for-select-input-options, 4px)', + 'var(--padding-bottom-for-select-input-options, 8px)', paddingForGroupHeadingSelectInputOptions: - 'var(--padding-for-group-heading-select-input-options, 8px)', - paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)', + 'var(--padding-for-group-heading-select-input-options, 16px)', + paddingForSelectInputMenu: + 'var(--padding-for-select-input-menu, var(--spacing-10) 0)', paddingForMoneyInputCurrencyDropdown: - 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))', + 'var(--padding-for-money-input-currency-dropdown, 0 12px)', paddingForSelectableSearchInputDropdown: - 'var(--padding-for-selectable-search-input-dropdown, 0 var(--spacing-20))', + 'var(--padding-for-selectable-search-input-dropdown, 0 12px)', paddingForPrimaryActionDropdown: - 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-20))', + 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-30))', paddingForPrimaryActionDropdownIcon: - 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-10))', + 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-20))', paddingForButtonAsMedium: - 'var(--padding-for-button-as-medium, 0 var(--spacing-20))', + 'var(--padding-for-button-as-medium, 0 var(--spacing-30))', paddingForButtonAsBig: 'var(--padding-for-button-as-big, 0 var(--spacing-30))', - shadowForButton: - 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))', - shadowForButtonWhenFocused: - 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))', - shadowForButtonWhenHovered: - 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))', - shadowForButtonWhenActive: - 'var(--shadow-for-button-when-active, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))', - shadowForButtonWhenDisabled: - 'var(--shadow-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)', shadowBoxTagWhenHovered: 'var(--shadow-box-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))', + shadowForButton: 'var(--shadow-for-button, none)', + shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, none)', + shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, none)', + shadowForButtonWhenActive: 'var(--shadow-for-button-when-active, none)', + shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, none)', shadowForCardWhenRaised: - 'var(--shadow-for-card-when-raised, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-card-when-raised, 0 1px 5px 0 rgba(0, 0, 0, 0.05))', shadowForInput: 'var(--shadow-for-input, none)', shadowForInputWhenFocused: - 'var(--shadow-for-input-when-focused, inset 0 0 0 2px var(--color-primary))', - shadowForInputWhenError: 'var(--shadow-for-input-when-error, none)', - shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)', + 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))', + shadowForInputWhenError: + 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))', + shadowForInputWhenWarning: + 'var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))', shadowForTooltip: - 'var(--shadow-for-tooltip, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))', + 'var(--shadow-for-tooltip, 0px 1px 2px 0px rgba(0, 0, 0, 0.25))', shadowForSelectInputMenu: - 'var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))', shadowForPrimaryActionDropdown: - 'var(--shadow-for-primary-action-dropdown, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-primary-action-dropdown, none)', shadowForPrimaryActionDropdownWhenHovered: - 'var(--shadow-for-primary-action-dropdown-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-primary-action-dropdown-when-hovered, none)', shadowForPrimaryActionDropdownWhenActive: - 'var(--shadow-for-primary-action-dropdown-when-active, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))', + 'var(--shadow-for-primary-action-dropdown-when-active, none)', shadowForPrimaryActionDropdownMenu: - 'var(--shadow-for-primary-action-dropdown-menu, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-primary-action-dropdown-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))', shadowForToggleInputThumb: - 'var(--shadow-for-toggle-input-thumb, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))', - shadowForTagWhenHovered: - 'var(--shadow-for-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))', + 'var(--shadow-for-toggle-input-thumb, 0px 1px 5px rgba(0, 0, 0, 0.2))', + shadowForTagWhenHovered: 'var(--shadow-for-tag-when-hovered, none)', fontSizeM: 'var(--font-size-m, 1rem)', bigButtonHeight: 'var(--big-button-height, 32px)', smallButtonHeight: 'var(--small-button-height, 24px)', diff --git a/design-system/src/theme-provider.spec.js b/design-system/src/theme-provider.spec.js deleted file mode 100644 index a876fb6ce0..0000000000 --- a/design-system/src/theme-provider.spec.js +++ /dev/null @@ -1,193 +0,0 @@ -/* eslint-disable testing-library/no-wait-for-multiple-assertions */ -import { Component, useState } from 'react'; -import { designTokens } from '@commercetools-uikit/design-system'; -import PropTypes from 'prop-types'; -import { screen, render, fireEvent, waitFor } from '../../test/test-utils'; -import { ThemeProvider, withThemeContext } from './theme-provider'; - -const TestComponent = (props) => ( -
- {props.text} -
-); -TestComponent.propTypes = { - text: PropTypes.string.isRequired, -}; - -const globalParentSelector = () => document.body; -const localParentSelector = () => document.getElementById('localParent'); - -const TestComponentWithThemeProvider = () => { - const [globalTheme, setGlobalTheme] = useState({ - name: 'default', - overrides: {}, - }); - const [localTheme, setLocalTheme] = useState({ - name: 'default', - overrides: {}, - }); - - return ( - <> - - - - -
- - -
- - ); -}; - -describe('ThemeProvider', () => { - it('should change `--color-solid` and `--color-surface` values and `data-theme` of global test provider after global theme switch button click', async () => { - const { container } = render(); - const globalThemeProvider = document.body; - const localThemeProvider = container.querySelector('#localParent'); - expect(globalThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(globalThemeProvider).toHaveAttribute('data-theme', 'default'); - expect(localThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(localThemeProvider).toHaveAttribute('data-theme', 'default'); - - // global theme change - fireEvent.click( - screen.getByRole('button', { - name: /change global theme/i, - }) - ); - - await waitFor(() => { - expect(globalThemeProvider).toHaveStyle( - `--color-solid: red; --color-surface: yellow;` - ); - expect(globalThemeProvider).toHaveAttribute('data-theme', 'test'); - expect(localThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(localThemeProvider).toHaveAttribute('data-theme', 'default'); - }); - }); - it('should change `--color-solid` and `--color-surface` values and `data-theme` of local test provider after local theme switch button click', async () => { - const { container } = render(); - const globalThemeProvider = document.body; - const localThemeProvider = container.querySelector('#localParent'); - expect(globalThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(globalThemeProvider).toHaveAttribute('data-theme', 'default'); - expect(localThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(localThemeProvider).toHaveAttribute('data-theme', 'default'); - - // local theme change - fireEvent.click( - screen.getByRole('button', { - name: /change local theme/i, - }) - ); - - await waitFor(() => { - expect(globalThemeProvider).toHaveStyle( - `--color-solid: #1a1a1a; --color-surface: #fff;` - ); - expect(globalThemeProvider).toHaveAttribute('data-theme', 'default'); - expect(localThemeProvider).toHaveStyle( - `--color-solid: green; --color-surface: tomato;` - ); - expect(localThemeProvider).toHaveAttribute('data-theme', 'test'); - }); - }); - - it('should add custom color to local theme css properties', async () => { - const { container } = render(); - const globalThemeProvider = document.body; - const localThemeProvider = container.querySelector('#localParent'); - expect(localThemeProvider).not.toHaveStyle(`--custom-color: #BADA55`); - expect(globalThemeProvider).not.toHaveStyle(`--custom-color: #BADA55`); - - // local theme change - fireEvent.click( - screen.getByRole('button', { - name: /change local theme/i, - }) - ); - - await waitFor(() => { - expect(localThemeProvider).toHaveStyle(`--custom-color: #BADA55`); - expect(globalThemeProvider).not.toHaveStyle(`--custom-color: #BADA55`); - }); - }); - - it('should render a class component wrapped in themed HOC', () => { - class DummyComponent extends Component { - render() { - return ( -
- {/* eslint-disable-next-line react/prop-types */} -

Current theme is: {this.props.theme}

- {/* eslint-disable-next-line react/prop-types */} -

Themed value: {this.props.themedValue('foo', 'bar')}

-
- ); - } - } - - const WrappedComponent = withThemeContext(DummyComponent); - - render( - <> - - - - ); - - screen.getByText('Current theme is: test'); - screen.getByText('Themed value: bar'); - }); -}); diff --git a/design-system/src/theme-provider.tsx b/design-system/src/theme-provider.tsx index 48d3991820..ad38dd35c6 100644 --- a/design-system/src/theme-provider.tsx +++ b/design-system/src/theme-provider.tsx @@ -1,16 +1,13 @@ import { useLayoutEffect, - useState, useRef, - useEffect, + useCallback, type ReactNode, type JSXElementConstructor, - useCallback, } from 'react'; import isObject from 'lodash/isObject'; import merge from 'lodash/merge'; import isEqual from 'lodash/isEqual'; -import { useMutationObserver } from '@commercetools-uikit/hooks'; import { themes } from './design-tokens'; import { transformTokensToCssVarsValues } from './utils'; @@ -103,6 +100,7 @@ ThemeProvider.defaultProps = { type TUseThemeResult = { theme: ThemeName; + /** @deprecated */ themedValue: < Old extends string | ReactNode | undefined, New extends string | ReactNode | undefined @@ -110,46 +108,19 @@ type TUseThemeResult = { defaultThemeValue: Old, newThemeValue: New ) => Old | New; + /** @deprecated */ isNewTheme: boolean; }; -const useTheme = (parentSelector = defaultParentSelector): TUseThemeResult => { - const [theme, setTheme] = useState('default'); - const parentSelectorRef = useRef(parentSelector); - - const mutationChangeCallback = useCallback((mutationList) => { - // We expect only a single element in the mutation list as we configured the - // observer to only listen to `data-theme` changes. - const [mutationEvent] = mutationList; - setTheme((mutationEvent.target as HTMLElement).dataset.theme as ThemeName); - }, []); - - useMutationObserver(parentSelector(), mutationChangeCallback, { - attributes: true, - attributeFilter: ['data-theme'], - }); - +const useTheme = (_parentSelector = defaultParentSelector): TUseThemeResult => { const themedValue: TUseThemeResult['themedValue'] = useCallback( - (defaultThemeValue, newThemeValue) => - theme === 'default' ? defaultThemeValue : newThemeValue, - [theme] + (_defaultThemeValue, newThemeValue) => newThemeValue, + [] ); - // If we use 'useLayoutEffect' here, we would be trying to read the - // data attribute before it gets set from the effect in the ThemeProvider - useEffect(() => { - // We need to read the current theme after the provider is rendered - // to have the actual selected theme (calculated client-side) in the - // hook local state - const nextTheme = parentSelectorRef.current()?.dataset.theme as ThemeName; - if (nextTheme) { - setTheme(nextTheme); - } - }, []); - return { - theme, + theme: 'default', themedValue, - isNewTheme: theme === 'test', + isNewTheme: true, }; }; diff --git a/design-system/src/theme-provider.visualroute.jsx b/design-system/src/theme-provider.visualroute.jsx index ac67b5c01d..17ffeae098 100644 --- a/design-system/src/theme-provider.visualroute.jsx +++ b/design-system/src/theme-provider.visualroute.jsx @@ -1,4 +1,3 @@ -import { useState } from 'react'; import { useTheme, designTokens } from '@commercetools-uikit/design-system'; import { Switch, Route } from 'react-router'; import kebabCase from 'lodash/kebabCase'; @@ -9,7 +8,6 @@ import { LocalDarkThemeProvider, LocalThemeProvider, } from '../../test/percy'; -import { ThemeProvider } from './theme-provider'; export const routePath = '/theme-provider'; @@ -137,57 +135,8 @@ TestComponent.propTypes = { text: PropTypes.string.isRequired, }; -const localThemeParentSelector = () => document.getElementById('local'); - -const InteractiveRoute = () => { - const [globalTheme, setGlobalTheme] = useState({ name: 'default', overrides: {} }); - const [localTheme, setLocalTheme] = useState({ name: 'default', overrides: {} }); - - return ( - <> - - - - -
- - -
- - ); -}; - export const component = () => ( - ); diff --git a/design-system/src/theme-provider.visualspec.js b/design-system/src/theme-provider.visualspec.js index 074428e9bb..d0a6078daa 100644 --- a/design-system/src/theme-provider.visualspec.js +++ b/design-system/src/theme-provider.visualspec.js @@ -1,5 +1,4 @@ import percySnapshot from '@percy/puppeteer'; -import { getDocument, queries } from 'pptr-testing-library'; describe('ThemeProvider', () => { it('Default', async () => { @@ -8,31 +7,3 @@ describe('ThemeProvider', () => { await percySnapshot(page, 'ThemeProvider'); }); }); - -describe('Interactive', () => { - it('applies changes to global and local theme provider', async () => { - await page.goto(`${globalThis.HOST}/theme-provider/interactive`); - const doc = await getDocument(page); - - // change global theme - const globalThemeChangeButton = await queries.findByText( - doc, - 'change global theme' - ); - - await globalThemeChangeButton.click(); - await page.waitForSelector('[data-theme="test"]'); - // TODO: uncomment when issue with Percy is resolved - // await percySnapshot(page, 'ThemeProvider - after global theme change'); - - // change local theme - const localThemeChangeButton = await queries.findByText( - doc, - 'change local theme' - ); - await localThemeChangeButton.click(); - await page.waitForSelector('[data-theme="test"]'); - // TODO: uncomment when issue with Percy is resolved - // await percySnapshot(page, 'ThemeProvider - after local theme change'); - }); -}); diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts b/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts index 5d0c4e1d91..fb8322aae6 100644 --- a/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts +++ b/packages/calendar-utils/src/calendar-body/calendar-body.styles.ts @@ -67,8 +67,7 @@ const getIconFontColor = (props: TCalendarBody) => { const getCalendarIconContainerStyles = ( props: TCalendarBody, - state: TState, - isNewTheme: boolean + state: TState ) => { return [ css` @@ -93,10 +92,6 @@ const getCalendarIconContainerStyles = ( border-color: ${designTokens.borderColorForInputWhenFocused}; } `, - !isNewTheme && - css` - border-left: 1px solid ${getIconBorderColor(props, state)}; - `, ]; }; @@ -145,11 +140,7 @@ const getInputContainerBackgroundColor = (props: TCalendarBody) => { return designTokens.backgroundColorForInput; }; -const getInputContainerStyles = ( - props: TCalendarBody, - state: TState, - isNewTheme: boolean -) => { +const getInputContainerStyles = (props: TCalendarBody, state: TState) => { return [ css` appearance: none; @@ -195,22 +186,7 @@ const getInputContainerStyles = ( } } `, - !isNewTheme && - css` - &:hover, - &:hover > button, - &:focus > button { - border-color: ${props.isDisabled || - props.hasError || - props.hasWarning || - props.isReadOnly || - ((props.isOpen || state.isFocused) && !props.isReadOnly) - ? '' - : designTokens.borderColorForInputWhenFocused}; - } - `, - isNewTheme && - (props.hasError || props.hasWarning) && + (props.hasError || props.hasWarning) && css` box-shadow: ${designTokens.boxShadowForDatetimeInputWhenHovered}; `, diff --git a/packages/calendar-utils/src/calendar-body/calendar-body.tsx b/packages/calendar-utils/src/calendar-body/calendar-body.tsx index a5eb6b6297..3f450b905b 100644 --- a/packages/calendar-utils/src/calendar-body/calendar-body.tsx +++ b/packages/calendar-utils/src/calendar-body/calendar-body.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { useCallback, type LegacyRef, @@ -6,7 +5,6 @@ import { type KeyboardEvent, } from 'react'; import type { Theme } from '@emotion/react'; -import { useTheme } from '@commercetools-uikit/design-system'; import { CalendarIcon, ClockIcon, CloseIcon } from '@commercetools-uikit/icons'; import Inline from '@commercetools-uikit/spacings-inline'; import { useToggleState } from '@commercetools-uikit/hooks'; @@ -85,7 +83,6 @@ const defaultProps: Pick = { export const CalendarBody = (props: TCalendarBody) => { const [isFocused, toggleIsFocused] = useToggleState(false); - const { isNewTheme } = useTheme(); const onInputFocus = props.inputProps?.onFocus; @@ -131,7 +128,7 @@ export const CalendarBody = (props: TCalendarBody) => { return ( -
+
{ )}
diff --git a/packages/components/buttons/icon-button/src/icon-button.tsx b/packages/components/buttons/icon-button/src/icon-button.tsx index b819394548..1ffc10fc2e 100644 --- a/packages/components/buttons/icon-button/src/icon-button.tsx +++ b/packages/components/buttons/icon-button/src/icon-button.tsx @@ -7,7 +7,7 @@ import { cloneElement, } from 'react'; import { css } from '@emotion/react'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import { filterInvalidAttributes, warning } from '@commercetools-uikit/utils'; import AccessibleButton from '@commercetools-uikit/accessible-button'; import { @@ -94,7 +94,6 @@ const IconButton = ( !(props.theme !== 'default' && !props.isToggleButton), `Invalid prop \`theme\` supplied to \`IconButton\`. Only toggle buttons may have a theme.` ); - const { themedValue } = useTheme(); const buttonAttributes = { 'data-track-component': 'IconButton', @@ -127,7 +126,7 @@ const IconButton = ( box-shadow 150ms ease-in-out; `, getBaseStyles(props.theme, props.isDisabled, isActive), - getShapeStyles(themedValue(props.shape, 'square'), props.size), + getShapeStyles('square', props.size), getSizeStyles(props.size), getHoverStyles(props.isDisabled, props.theme), ]} diff --git a/packages/components/collapsible-panel/src/collapsible-panel-header.tsx b/packages/components/collapsible-panel/src/collapsible-panel-header.tsx index d34195830b..bce52d9ead 100644 --- a/packages/components/collapsible-panel/src/collapsible-panel-header.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel-header.tsx @@ -1,28 +1,14 @@ -// TODO: @redesign cleanup import { ReactNode } from 'react'; -import { useTheme } from '@commercetools-uikit/design-system'; import Text from '@commercetools-uikit/text'; type TCollapsiblePanelHeader = { children: ReactNode; }; -const CollapsiblePanelHeader = (props: TCollapsiblePanelHeader) => { - const { isNewTheme } = useTheme(); - - if (isNewTheme) { - return ( - - {props.children} - - ); - } - - return ( - - {props.children} - - ); -}; +const CollapsiblePanelHeader = (props: TCollapsiblePanelHeader) => ( + + {props.children} + +); CollapsiblePanelHeader.displayName = 'CollapsiblePanelHeader'; diff --git a/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx b/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx index f37c156f26..0129c7f5b9 100644 --- a/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel.styles.tsx @@ -19,14 +19,12 @@ const getHeaderContainerStyles = ( props: Pick< TCollapsiblePanel, 'headerControlsAlignment' | 'condensed' | 'isDisabled' | 'isSticky' - > & { isNewTheme: boolean }, + >, isOpen: boolean ) => { const baseStyles = css` background-color: ${designTokens.colorSurface}; - border-bottom: ${isOpen || props.isNewTheme - ? '1px solid ' + designTokens.borderColorForCollapsiblePanelHeader - : 'none'}; + border-bottom: ${`1px solid ${designTokens.borderColorForCollapsiblePanelHeader}`}; position: relative; border-top-left-radius: ${designTokens.borderRadius6}; border-top-right-radius: ${designTokens.borderRadius6}; @@ -76,14 +74,6 @@ const baseContainerStyles = css` font-size: ${designTokens.fontSizeDefault}; `; -const getBaseContainerStyles = (isNewTheme: boolean) => - !isNewTheme - ? css` - box-shadow: ${designTokens.shadow1}; - border-radius: ${designTokens.borderRadius6}; - ` - : undefined; - const HeaderControlsWrapper = styled.div` margin-left: ${designTokens.spacing30}; display: flex; @@ -110,7 +100,6 @@ const SectionDescriptionWrapper = styled.div<{ condensed?: boolean }>` type TSectionWrapper = { condensed?: boolean; isExpandControlHidden?: boolean; - isNewTheme: boolean; children: ReactNode; }; const SectionWrapper = forwardRef( @@ -126,7 +115,7 @@ const SectionWrapper = forwardRef( : designTokens.paddingForCollapsiblePanelSectionWrapper }; `, - props.isNewTheme && props.isExpandControlHidden && 'padding-left: 0;', + props.isExpandControlHidden && 'padding-left: 0;', ]} > {props.children} @@ -140,7 +129,6 @@ export { baseContainerStyles, getHeaderContainerStyles, getThemeStyle, - getBaseContainerStyles, SectionContent, SectionDescriptionWrapper, SectionWrapper, diff --git a/packages/components/collapsible-panel/src/collapsible-panel.tsx b/packages/components/collapsible-panel/src/collapsible-panel.tsx index aeab9f7cf2..67ba4b897e 100644 --- a/packages/components/collapsible-panel/src/collapsible-panel.tsx +++ b/packages/components/collapsible-panel/src/collapsible-panel.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { ReactNode } from 'react'; import isNil from 'lodash/isNil'; import styled from '@emotion/styled'; @@ -21,11 +20,10 @@ import { HeaderControlsWrapper, SectionWrapper, SectionContent, - getBaseContainerStyles, SectionDescriptionWrapper, } from './collapsible-panel.styles'; import CollapsiblePanelHeader from './collapsible-panel-header'; -import { useTheme } from '@commercetools-uikit/design-system'; + const HeaderContainer = styled(AccessibleButton)``; const panelButtonSequentialId = createSequentialId('collapsible-panel-button-'); @@ -148,39 +146,27 @@ const defaultProps: Pick< }; const HeadLineText = ( - props: Pick & { - isNewTheme: boolean; - } + props: Pick ) => { if (!props.condensed) { return <>{props.header}; } - if (props.isNewTheme) { - return ( - - {props.header} - - ); - } else { - return ( - - {props.header} - - ); - } + return ( + + {props.header} + + ); }; // When `isClosed` is provided the component behaves as a controlled component, // otherwise it will behave like an uncontrolled component. const CollapsiblePanel = (props: TCollapsiblePanel) => { - const { isNewTheme, themedValue } = useTheme(); const panelButtonId = useFieldId(props.id, panelButtonSequentialId); const panelContentId = useFieldId(undefined, panelContentSequentialId); // Pass only `data-*` props const dataProps = filterDataAttributes(props); const scale = props.condensed ? 's' : 'm'; - const iconSize = themedValue(props.condensed ? 'small' : 'medium', 'medium'); const isClosedAndIsDefaultClosed = !isNil(props.isClosed) && !isNil(props.isDefaultClosed); @@ -217,11 +203,7 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => { {({ isOpen, toggle, containerStyles, registerContentNode }) => (
{ { aria-controls={panelContentId} aria-expanded={isOpen ? 'true' : 'false'} > - + {!props.hideExpansionControls && ( )} - + {props.secondaryHeader && ( @@ -283,11 +258,10 @@ const CollapsiblePanel = (props: TCollapsiblePanel) => { ref={registerContentNode} condensed={props.condensed} isExpandControlHidden={props.hideExpansionControls} - isNewTheme={isNewTheme} > {props.description && ( - + {props.description} diff --git a/packages/components/collapsible-panel/src/header-icon.tsx b/packages/components/collapsible-panel/src/header-icon.tsx index efefcf4441..44bd7cf062 100644 --- a/packages/components/collapsible-panel/src/header-icon.tsx +++ b/packages/components/collapsible-panel/src/header-icon.tsx @@ -1,22 +1,13 @@ -// TODO: @redesign cleanup import { css } from '@emotion/react'; -import { - designTokens, - useTheme, - type ThemeName, -} from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import { AngleDownIcon, AngleRightIcon } from '@commercetools-uikit/icons'; -const sizeIconContainer = '24px'; -const sizeIconContainerSmall = '14px'; - const getArrowColor = ({ tone, isDisabled, - theme, -}: Pick & { theme: ThemeName }) => { +}: Pick) => { if (isDisabled) return 'neutral60'; - if (tone === 'urgent') return theme === 'default' ? 'surface' : 'warning'; + if (tone === 'urgent') return 'warning'; return 'solid'; }; @@ -29,11 +20,6 @@ type THeaderIcon = { }; const HeaderIcon = (props: THeaderIcon) => { - const { theme, isNewTheme } = useTheme(); - const backgroundColor = - props.tone === 'urgent' && !isNewTheme - ? designTokens.colorWarning - : designTokens.colorSurface; return (
{ align-items: center; justify-content: center; `, - !isNewTheme && - css` - height: ${props.size === 'small' - ? sizeIconContainerSmall - : sizeIconContainer}; - width: ${props.size === 'small' - ? sizeIconContainerSmall - : sizeIconContainer}; - - border-radius: 50%; - flex-shrink: 0; - box-shadow: ${designTokens.shadow7}; - background-color: ${backgroundColor}; - border: ${backgroundColor}; - `, props.isDisabled && css` box-shadow: none; @@ -71,7 +42,6 @@ const HeaderIcon = (props: THeaderIcon) => { color={getArrowColor({ tone: props.tone, isDisabled: props.isDisabled, - theme, })} size={props.size} /> @@ -80,7 +50,6 @@ const HeaderIcon = (props: THeaderIcon) => { color={getArrowColor({ tone: props.tone, isDisabled: props.isDisabled, - theme, })} size={props.size} /> diff --git a/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx b/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx index fbaaffb69c..3fa0980cc3 100644 --- a/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx +++ b/packages/components/data-table-manager/src/column-settings-manager/column-settings-manager.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { useMemo, useCallback, @@ -14,7 +13,7 @@ import { DragDropContext, type DropResult } from 'react-beautiful-dnd'; import debounce from 'debounce-promise'; import differenceWith from 'lodash/differenceWith'; import styled from '@emotion/styled'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import AsyncSelectInput from '@commercetools-uikit/async-select-input'; import FieldLabel from '@commercetools-uikit/field-label'; import Spacings from '@commercetools-uikit/spacings'; @@ -139,7 +138,6 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => { } const intl = useIntl(); - const { themedValue } = useTheme(); const [isDragging, setIsDragging] = useState(false); const { searchHiddenColumns } = props; @@ -188,17 +186,14 @@ export const ColumnSettingsManager = (props: TColumnSettingsManagerProps) => { containerTheme={props.managerTheme} > - + - - - + + + { isDragging={isDragging} aria-labelledby="visible-columns" > - + { - const { themedValue } = useTheme(); const areDisplaySettingsEnabled = Boolean( props.displaySettings && !props.displaySettings.disableDisplaySettings ); @@ -174,7 +171,7 @@ const DataTableManager = (props: TDataTableManagerProps) => { onSettingsChange={props.onSettingsChange} columnManager={props.columnManager} displaySettings={props.displaySettings} - managerTheme={themedValue(props.managerTheme, 'light')} + managerTheme="light" /> {cloneElement(props.children, { columns, diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx index abe40d185b..d7dafbb831 100644 --- a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx +++ b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { useState, type ReactElement, type ReactNode } from 'react'; import { warning } from '@commercetools-uikit/utils'; import { useIntl, type MessageDescriptor } from 'react-intl'; @@ -7,7 +6,7 @@ import AccessibleHidden from '@commercetools-uikit/accessible-hidden'; import SelectInput from '@commercetools-uikit/select-input'; import { TableIcon } from '@commercetools-uikit/icons'; import Spacings from '@commercetools-uikit/spacings'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import { UPDATE_ACTIONS, COLUMN_MANAGER, DISPLAY_SETTINGS } from '../constants'; import DisplaySettingsManager, { DENSITY_COMPACT, @@ -189,7 +188,6 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { ); const intl = useIntl(); - const { themedValue } = useTheme(); const [openedPanelId, setOpenedPanelId] = useState( null ); @@ -221,7 +219,7 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { const handleSettingsPanelChange = () => setOpenedPanelId(null); return ( - + {props.topBar} {dropdownOptions.length > 0 && ( @@ -239,9 +237,7 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { placeholder={intl.formatMessage(messages.placeholder)} onChange={handleDropdownChange} options={dropdownOptions} - iconLeft={ - - } + iconLeft={} /> )} @@ -265,7 +261,6 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { managerTheme={props.managerTheme} /> )} - {openedPanelId === COLUMN_MANAGER && ( { const intl = useIntl(); - const { themedValue } = useTheme(); const textWrappingOption = props.isWrappingText ? SHOW_HIDE_ON_DEMAND : WRAPPED_TEXT_VISIBLE; const densityDisplayOption = props.isCondensed ? DENSITY_COMPACT : DENSITY_DEFAULT; - const columnStackScale = themedValue('s', 'l'); return ( { gridTemplateColumns="repeat(2, 1fr)" > - + @@ -89,7 +86,7 @@ const DensityManager = (props: TDensityManagerProps) => { - + diff --git a/packages/components/data-table-manager/src/settings-container/settings-container.tsx b/packages/components/data-table-manager/src/settings-container/settings-container.tsx index 359c2a5f9f..42187388e3 100644 --- a/packages/components/data-table-manager/src/settings-container/settings-container.tsx +++ b/packages/components/data-table-manager/src/settings-container/settings-container.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react'; import { useIntl, type MessageDescriptor } from 'react-intl'; import styled from '@emotion/styled'; @@ -8,7 +7,7 @@ import Card from '@commercetools-uikit/card'; import Spacings from '@commercetools-uikit/spacings'; import Text from '@commercetools-uikit/text'; import { CloseIcon } from '@commercetools-uikit/icons'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; type TSettingsContainerProps = { title: MessageDescriptor & { @@ -38,23 +37,15 @@ const CardContentWrapper = styled.div` const SettingsContainer = (props: TSettingsContainerProps) => { const intl = useIntl(); - const { themedValue } = useTheme(); return ( {({ registerContentNode, containerStyles }) => ( - + - + - + { - +
{props.children}
diff --git a/packages/components/data-table/src/header-cell.styles.tsx b/packages/components/data-table/src/header-cell.styles.tsx index 3f0ac2a695..10a208f4e1 100644 --- a/packages/components/data-table/src/header-cell.styles.tsx +++ b/packages/components/data-table/src/header-cell.styles.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { getCellInnerStyles } from './cell.styles'; @@ -88,7 +87,6 @@ const HeaderCellInner = styled.div` type TBaseHeaderCell = { disableHeaderStickiness?: boolean; shouldClipContent?: boolean; - isNewTheme?: boolean; }; const BaseHeaderCell = styled.th` color: ${designTokens.fontColorForTableHeader}; @@ -114,22 +112,6 @@ const BaseHeaderCell = styled.th` :active { z-index: 2; } - /** - * header row bottom border: - * - not using "border-bottom" since it stands out in front of the resize indicator and counts towards the row height - */ - ${(props) => - !props.isNewTheme && - `:before { - content: ''; - position: absolute; - z-index: -1; - width: 100%; - height: 1px; - bottom: 0; - left: 0; - background-color: ${designTokens.borderColorForTableHeaderAsBottom}; - };`} ${HeaderCellInner} { ${(props) => (props.shouldClipContent ? 'overflow: hidden;' : '')} diff --git a/packages/components/data-table/src/header-cell.tsx b/packages/components/data-table/src/header-cell.tsx index 49a07972fb..2ba791f561 100644 --- a/packages/components/data-table/src/header-cell.tsx +++ b/packages/components/data-table/src/header-cell.tsx @@ -1,4 +1,3 @@ -// TODO: @redesign cleanup import { useContext, useRef, @@ -11,7 +10,6 @@ import { AngleDownIcon, AngleUpDownIcon, } from '@commercetools-uikit/icons'; -import { useTheme } from '@commercetools-uikit/design-system'; import { BaseHeaderCell, HeaderCellInner, @@ -49,7 +47,6 @@ const HeaderCellWrapper = ( | 'onColumnResized' > ) => { - const { isNewTheme } = useTheme(); const columnResizingReducer = useContext( ColumnResizingContext ) as TColumnResizingReducer; @@ -96,7 +93,6 @@ const HeaderCellWrapper = ( data-id={props.columnKey} shouldClipContent={shouldClipContent} disableHeaderStickiness={props.disableHeaderStickiness} - isNewTheme={isNewTheme} > {props.children} {!props.disableResizing && } diff --git a/packages/components/field-label/src/field-label.tsx b/packages/components/field-label/src/field-label.tsx index 68fd526dc0..531fa98db8 100644 --- a/packages/components/field-label/src/field-label.tsx +++ b/packages/components/field-label/src/field-label.tsx @@ -14,9 +14,7 @@ import Text from '@commercetools-uikit/text'; import Constraints from '@commercetools-uikit/constraints'; import Inline from '@commercetools-uikit/spacings-inline'; import Label from '@commercetools-uikit/label'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; - -// TODO: @redesign cleanup +import { designTokens } from '@commercetools-uikit/design-system'; export type TFieldLabelProps = { /** @@ -106,8 +104,6 @@ const LabelRowWrapper = styled.div` `; const FieldLabel = (props: TFieldLabelProps) => { - const { theme } = useTheme(); - if (props.hintIcon) { warning( props.hintIcon.props.size === undefined, @@ -122,13 +118,9 @@ const FieldLabel = (props: TFieldLabelProps) => { return ( - + ); }; diff --git a/packages/components/link/src/link.tsx b/packages/components/link/src/link.tsx index cce33f854c..6e4ec4da7e 100644 --- a/packages/components/link/src/link.tsx +++ b/packages/components/link/src/link.tsx @@ -10,7 +10,7 @@ import styled from '@emotion/styled'; import { Link as ReactRouterLink } from 'react-router-dom'; import { css } from '@emotion/react'; import { FormattedMessage } from 'react-intl'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import { filterInvalidAttributes, warning } from '@commercetools-uikit/utils'; import { ExternalLinkIcon } from '@commercetools-uikit/icons'; @@ -100,7 +100,7 @@ const getActiveColorValue = (tone: string = 'primary') => { return designTokens.fontColorForLinkAsInverted; }; -const getLinkStyles = (props: TLinkProps & { isNewTheme: boolean }) => { +const getLinkStyles = (props: TLinkProps) => { const iconColor = getTextColorValue(props.tone); const iconHoverColor = getActiveColorValue(props.tone); @@ -116,11 +116,6 @@ const getLinkStyles = (props: TLinkProps & { isNewTheme: boolean }) => { } text-decoration: underline; `, - !props.isNewTheme - ? css` - font-size: ${designTokens.fontSizeForLink}; - ` - : null, ]; }; @@ -132,7 +127,6 @@ const Wrapper = styled.span` `; const Link = (props: TLinkProps) => { - const { isNewTheme } = useTheme(); const remainingProps = filterInvalidAttributes(props); const color = getTextColorValue(props.tone); @@ -157,7 +151,7 @@ const Link = (props: TLinkProps) => { `} > { return ( diff --git a/packages/components/notifications/src/content-notification/content-notification.tsx b/packages/components/notifications/src/content-notification/content-notification.tsx index 974d4cdb9d..781e143e37 100644 --- a/packages/components/notifications/src/content-notification/content-notification.tsx +++ b/packages/components/notifications/src/content-notification/content-notification.tsx @@ -3,11 +3,10 @@ import type { MessageDescriptor } from 'react-intl'; import { Children, ReactNode } from 'react'; import { FormattedMessage } from 'react-intl'; import { css } from '@emotion/react'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import { ErrorIcon, WarningIcon, - InfoIcon, CheckBoldIcon, InformationIcon, } from '@commercetools-uikit/icons'; @@ -73,15 +72,12 @@ const getIconContainerBackgroundColour = (props: TContentNotificationProps) => { } }; -const getIconByType = ( - props: TContentNotificationProps, - isNewTheme: boolean -) => { +const getIconByType = (props: TContentNotificationProps) => { switch (props.type) { case 'error': return ErrorIcon; case 'info': - return isNewTheme ? InformationIcon : InfoIcon; + return InformationIcon; case 'warning': return WarningIcon; default: @@ -120,8 +116,7 @@ const getIconColor = (props: TContentNotificationProps) => { }; const NotificationIcon = (props: TContentNotificationProps) => { - const { isNewTheme } = useTheme(); - const Icon = getIconByType(props, isNewTheme); + const Icon = getIconByType(props); return (
{ const intl = useIntl(); - const { themedValue } = useTheme(); const [pageNumberInputId] = useState(uniqueId('page-number-')); - const TotalPagesCountComponent = themedValue(Text.Body, Label); const paginationForm = useFormik({ initialValues: { page: props.page }, @@ -100,7 +95,7 @@ const PageNavigator = (props: TPageNavigatorProps) => { horizontalConstraint={2} />
- { }; const PageSizeSelector = (props: TPageSizeSelectorProps) => { - const { themedValue } = useTheme(); const [perPageSelectorId] = useState(uniqueId('per-page-selector-')); const options = mapRangeToListOfOptions(props.perPageRange); const hasValidPerPageOption = options.includes(props.perPage); @@ -76,7 +74,7 @@ const PageSizeSelector = (props: TPageSizeSelectorProps) => { return ( - + { +const getButtonStyles = (isDisabled: boolean) => { const baseButtonStyles = css` display: flex; align-items: center; @@ -33,7 +32,7 @@ const getButtonStyles = (isDisabled: boolean, isNewTheme: boolean) => { css` box-shadow: none; background-color: ${designTokens.backgroundColorForPrimaryActionDropdownWhenDisabled}; - border: ${isNewTheme && `1px solid ${designTokens.colorNeutral}`}; + border: ${`1px solid ${designTokens.colorNeutral}`}; `, ]; } @@ -42,10 +41,10 @@ const getButtonStyles = (isDisabled: boolean, isNewTheme: boolean) => { css` background-color: ${designTokens.colorSurface}; box-shadow: ${designTokens.shadowForPrimaryActionDropdown}; - border: ${isNewTheme && `1px solid ${designTokens.colorNeutral}`}; + border: ${`1px solid ${designTokens.colorNeutral}`}; &:hover { box-shadow: ${designTokens.shadowForPrimaryActionDropdownWhenHovered}; - background-color: ${isNewTheme && designTokens.colorNeutral95}; + background-color: ${designTokens.colorNeutral95}; } &:active { box-shadow: ${designTokens.shadowForPrimaryActionDropdownWhenActive}; @@ -63,7 +62,6 @@ type TDropdownHead = { children: string; isDisabled: boolean; chevron: ReactElement; - isNewTheme: boolean; }; const DropdownHead = (props: TDropdownHead) => ( @@ -78,7 +76,7 @@ const DropdownHead = (props: TDropdownHead) => ( onClick={props.onClick} isDisabled={props.isDisabled} css={[ - ...getButtonStyles(props.isDisabled, props.isNewTheme), + ...getButtonStyles(props.isDisabled), css` padding: ${designTokens.paddingForPrimaryActionDropdown}; border-radius: ${designTokens.borderRadiusForPrimaryActionDropdown}; @@ -120,7 +118,6 @@ DropdownHead.displayName = 'DropdownHead'; type TDropdownChevron = { onClick: () => void; isDisabled: boolean; - isNewTheme: boolean; isOpen: boolean; }; @@ -132,7 +129,7 @@ const DropdownChevron = forwardRef( onClick={props.onClick} isDisabled={props.isDisabled} css={[ - ...getButtonStyles(props.isDisabled, props.isNewTheme), + ...getButtonStyles(props.isDisabled), css` padding: ${designTokens.paddingForPrimaryActionDropdownIcon}; border-radius: ${designTokens.borderRadiusForPrimaryActionDropdownIcon}; @@ -163,7 +160,7 @@ const DropdownChevron = forwardRef( ), { - color: props.isDisabled || props.isNewTheme ? 'neutral60' : 'solid', + color: 'neutral60', size: 'small', } )} @@ -174,7 +171,7 @@ const DropdownChevron = forwardRef( DropdownChevron.displayName = 'DropdownChevron'; -const Options = styled.div<{ isNewTheme: boolean }>` +const Options = styled.div` position: absolute; z-index: 5; width: 100%; @@ -185,11 +182,10 @@ const Options = styled.div<{ isNewTheme: boolean }>` margin-top: ${designTokens.marginTopForPrimaryActionDropdown}; > button { - padding-left: ${(props) => props.isNewTheme && designTokens.spacing30}; + padding-left: ${designTokens.spacing30}; white-space: normal; &:active { - background-color: ${(props) => - props.isNewTheme && designTokens.colorInfo95}; + background-color: ${designTokens.colorInfo95}; } } `; @@ -214,7 +210,6 @@ export type TPrimaryActionDropdown = { const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => { const ref = useRef(); const [isOpen, toggle] = useToggleState(false); - const { isNewTheme } = useTheme(); const handleGlobalClick = useCallback( (event) => { @@ -277,14 +272,12 @@ const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => { } onClick={handleClickOnChevron} isDisabled={primaryOption.props.isDisabled} - isNewTheme={isNewTheme} isOpen={isOpen} /> } @@ -292,7 +285,7 @@ const PrimaryActionDropdown = (props: TPrimaryActionDropdown) => { {primaryOption.props.children} {isOpen && !primaryOption.props.isDisabled && ( - {childrenAsArray} + {childrenAsArray} )}
); diff --git a/packages/components/stamp/src/stamp.tsx b/packages/components/stamp/src/stamp.tsx index 37018fc671..cebf792d61 100644 --- a/packages/components/stamp/src/stamp.tsx +++ b/packages/components/stamp/src/stamp.tsx @@ -1,7 +1,6 @@ -// TODO: @redesign cleanup import { cloneElement, type ReactElement, type ReactNode } from 'react'; import { css } from '@emotion/react'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import Text from '@commercetools-uikit/text'; import SpacingsInline from '@commercetools-uikit/spacings-inline'; import { useWarnDeprecatedProp } from '@commercetools-uikit/utils'; @@ -156,13 +155,11 @@ const getStampStyles = (props: StylesFunctionParams) => { }; const Stamp = (props: TStampProps) => { - const { themedValue } = useTheme(); - const overrideTextColor = themedValue(false, true); const Icon = props.icon && cloneElement(props.icon, { size: 'medium', - color: getIconColor(props, overrideTextColor), + color: getIconColor(props, true), }); useWarnDeprecatedProp( @@ -175,17 +172,15 @@ const Stamp = (props: TStampProps) => { return (
{Icon} {props.label ? ( - - {props.label} - + {props.label} ) : ( props.children )} diff --git a/packages/components/tag/src/tag-body.tsx b/packages/components/tag/src/tag-body.tsx index 04b9ef1d56..23a4b05bf0 100644 --- a/packages/components/tag/src/tag-body.tsx +++ b/packages/components/tag/src/tag-body.tsx @@ -1,11 +1,10 @@ -// TODO: @redesign cleanup import type { TTagProps } from './tag'; import { ReactNode } from 'react'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; import { Link } from 'react-router-dom'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import Text from '@commercetools-uikit/text'; import { DragIcon } from '@commercetools-uikit/icons'; import Spacings from '@commercetools-uikit/spacings'; @@ -48,7 +47,7 @@ const getTextDetailColor = (isDisabled: TTagBodyProps['isDisabled']) => { return designTokens.colorSolid; }; -const getContentWrapperStyles = (props: TTagBodyProps, isNewTheme: boolean) => { +const getContentWrapperStyles = (props: TTagBodyProps) => { return css` position: relative; display: flex; @@ -77,7 +76,6 @@ const getContentWrapperStyles = (props: TTagBodyProps, isNewTheme: boolean) => { } ${props.isDisabled && - isNewTheme && ` * { color: ${designTokens.colorNeutral60} !important; @@ -87,19 +85,17 @@ const getContentWrapperStyles = (props: TTagBodyProps, isNewTheme: boolean) => { }; const TagBody = (props: TTagBodyProps) => { - const { themedValue, isNewTheme } = useTheme(); const textTone = props.isDisabled ? 'secondary' : 'inherit'; - const TextComponent = themedValue(Text.Detail, Text.Body); return ( { &:hover { box-shadow: ${designTokens.shadowForTagWhenHovered}; } - ${!isNewTheme && - ` - &:hover::after { - position: absolute; - right: -1px; - content: ''; - background-color: ${ - props.type === 'warning' - ? designTokens.colorWarning - : designTokens.borderColorForTagWhenFocused - }; - width: 1px; - height: 100%; - } - `} `, props.styles?.body, ]} @@ -134,13 +115,9 @@ const TagBody = (props: TTagBodyProps) => { > {props.isDraggable && !props.isDisabled ? ( - + ) : null} - {props.children} + {props.children} ); diff --git a/packages/components/tag/src/tag.spec.js b/packages/components/tag/src/tag.spec.js index d7e711d775..a2c1cf893e 100644 --- a/packages/components/tag/src/tag.spec.js +++ b/packages/components/tag/src/tag.spec.js @@ -52,15 +52,15 @@ describe('when disabled', () => { expect(onClick).not.toHaveBeenCalled(); }); - it('should not call onRemove when clicked', () => { + it('should not render the remove icon', () => { const onRemove = jest.fn(); render( Bread ); - screen.getByLabelText('Remove').click(); - expect(onRemove).not.toHaveBeenCalled(); + const removeIcon = screen.queryByLabelText('Remove'); + expect(removeIcon).not.toBeInTheDocument(); }); }); diff --git a/packages/components/tag/src/tag.tsx b/packages/components/tag/src/tag.tsx index 4b88e9baa2..a1f2768ea3 100644 --- a/packages/components/tag/src/tag.tsx +++ b/packages/components/tag/src/tag.tsx @@ -1,9 +1,8 @@ -// TODO: @redesign cleanup import type { LocationDescriptor } from 'history'; import { ReactNode, MouseEvent, KeyboardEvent } from 'react'; import { css, type SerializedStyles } from '@emotion/react'; import { Link } from 'react-router-dom'; -import { designTokens, useTheme } from '@commercetools-uikit/design-system'; +import { designTokens } from '@commercetools-uikit/design-system'; import Constraints from '@commercetools-uikit/constraints'; import AccessibleButton from '@commercetools-uikit/accessible-button'; import { CloseBoldIcon } from '@commercetools-uikit/icons'; @@ -79,7 +78,6 @@ const defaultProps: Pick< }; const Tag = (props: TTagProps) => { - const { isNewTheme } = useTheme(); const linkProps = props.to && !props.isDisabled ? { as: Link, to: props.to } : {}; return ( @@ -119,7 +117,7 @@ const Tag = (props: TTagProps) => { {props.children} - {Boolean(props.onRemove) && !(isNewTheme && props.isDisabled) && ( + {Boolean(props.onRemove) && !props.isDisabled && (