npm - @commercetools-frontend/ui-kit - Versions diffs - 15.13.1 → 15.14.0 - Mend

@commercetools-frontend/ui-kit 15.13.1 → 15.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
package/materials/custom-properties.css +123 -10
package/materials/custom-properties.json +75 -10
package/materials/internals/definition.yaml +316 -26
package/package.json +35 -35

package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED Viewed

@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.1";
+var version = "15.14.0";
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {

package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED Viewed

@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
 var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.1";
+var version = "15.14.0";
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {

package/dist/commercetools-frontend-ui-kit.esm.js CHANGED Viewed

@@ -33,6 +33,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
 export { customProperties, designTokens } from '@commercetools-uikit/design-system';
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.1";
+var version = "15.14.0";
 export { version };

package/materials/custom-properties.css CHANGED Viewed

@@ -16,6 +16,7 @@
   --color-accent-20: hsl(195, 35.2941176471%, 20%);
   --color-accent-30: hsl(195, 35.2941176471%, 30%);
   --color-accent-40: hsl(195, 35.2941176471%, 40%);
+  --color-accent-60: hsl(195, 35.2941176471%, 60%);
   --color-accent-90: hsl(195, 35.2941176471%, 90%);
   --color-accent-95: hsl(195, 35.2941176471%, 95%);
   --color-accent-98: hsl(195, 35.2941176471%, 98%);
@@ -174,6 +175,7 @@
     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%,
@@ -183,16 +185,30 @@
   --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-multiline-text-input-label: hsl(
+  --background-color-for-localized-input-label: hsl(195, 35.2941176471%, 98%);
+  --background-color-for-localized-input-label-when-readonly: hsl(
     195,
     35.2941176471%,
-    98%
+    95%
   );
-  --background-color-for-localized-multiline-text-input-label-when-disabled: hsl(
+  --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-view-switcher: #fff;
   --background-color-for-view-switcher-when-disabled: hsl(
@@ -215,6 +231,27 @@
   --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;
@@ -224,6 +261,7 @@
   --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%);
   --border-color-for-input-when-focused: #00b39e;
   --border-color-for-input-when-disabled: #ccc;
@@ -249,8 +287,8 @@
   --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-localized-multiline-text-input-label: #ccc;
-  --border-color-for-localized-multiline-text-input-label-when-readonly: #ccc;
+  --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;
@@ -269,8 +307,9 @@
   --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-radius-for-button-as-small: 4px;
+  --border-radius-for-button-as-medium: 4px;
   --border-radius-for-button-as-icon-as-big: 6px;
   --border-radius-for-button-as-icon-as-medium: 4px;
   --border-radius-for-button-as-icon-as-small: 2px;
@@ -284,6 +323,11 @@
     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-width-for-input: 1px;
   --border-width-for-input-when-warning: 1px;
   --border-width-for-input-when-error: 1px;
@@ -293,6 +337,7 @@
   --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);
@@ -300,7 +345,9 @@
     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;
   --font-color-for-text: #1a1a1a;
+  --font-color-for-text-when-disabled: #ccc;
   --font-color-for-input: #1a1a1a;
   --font-color-for-input-when-disabled: hsl(0, 0%, 60%);
   --font-color-for-input-when-error: #e60050;
@@ -312,8 +359,17 @@
   --font-color-for-tag-remove-icon-when-hovered: #f16d0e;
   --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-secondary: #1a1a1a;
+  --font-color-for-link-as-primary-when-active: hsl(
+    172.9608938547486,
+    100%,
+    25%
+  );
+  --font-color-for-link-as-secondary-when-active: #00b39e;
   --font-color-for-table-header: #fff;
-  --font-color-for-localized-multiline-text-input-label: hsl(0, 0%, 60%);
+  --font-color-for-localized-input-label: hsl(0, 0%, 60%);
   --font-color-for-view-switcher: #1a1a1a;
   --font-color-for-view-switcher-when-disabled: hsl(0, 0%, 60%);
   --font-color-for-view-switcher-when-selected: #1a1a1a;
@@ -341,8 +397,29 @@
   --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-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-small: 24px;
+  --height-for-button-as-medium: 24px;
   --height-for-button-as-icon-as-big: 32px;
   --height-for-button-as-icon-as-medium: 24px;
   --height-for-button-as-icon-as-small: 16px;
@@ -352,6 +429,7 @@
   --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;
   --placeholder-font-color-for-input: hsl(0, 0%, 60%);
@@ -372,7 +450,7 @@
   --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-localized-multiline-text-input-label: 0.9231rem;
+  --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;
@@ -384,6 +462,8 @@
   --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;
@@ -393,6 +473,7 @@
   --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;
@@ -403,6 +484,11 @@
   --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);
   --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);
@@ -423,6 +509,16 @@
   --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-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);
@@ -439,6 +535,10 @@
   --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-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),
@@ -461,6 +561,20 @@
     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);
   --font-size-m: 1rem;
   --big-button-height: 32px;
   --small-button-height: 24px;
@@ -471,5 +585,4 @@
   --shadow-box-tag-hover: 0 1px 3px rgba(0, 0, 0, 0.12),
     0 1px 2px rgba(0, 0, 0, 0.24);
   --size-height-tag: 26px;
-  --standard-input-height: 32px;
 }

package/materials/custom-properties.json CHANGED Viewed

@@ -9,6 +9,7 @@
   "--color-accent-20": "hsl(195, 35.2941176471%, 20%)",
   "--color-accent-30": "hsl(195, 35.2941176471%, 30%)",
   "--color-accent-40": "hsl(195, 35.2941176471%, 40%)",
+  "--color-accent-60": "hsl(195, 35.2941176471%, 60%)",
   "--color-accent-90": "hsl(195, 35.2941176471%, 90%)",
   "--color-accent-95": "hsl(195, 35.2941176471%, 95%)",
   "--color-accent-98": "hsl(195, 35.2941176471%, 98%)",
@@ -150,13 +151,20 @@
   "--background-color-for-table-header": "#213c45",
   "--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-multiline-text-input-label": "hsl(195, 35.2941176471%, 98%)",
-  "--background-color-for-localized-multiline-text-input-label-when-disabled": "hsl(195, 35.2941176471%, 98%)",
+  "--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-view-switcher": "#fff",
   "--background-color-for-view-switcher-when-disabled": "hsl(195, 35.2941176471%, 98%)",
@@ -175,6 +183,15 @@
   "--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",
@@ -183,6 +200,7 @@
   "--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%)",
   "--border-color-for-input-when-focused": "#00b39e",
   "--border-color-for-input-when-disabled": "#ccc",
@@ -208,8 +226,8 @@
   "--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-localized-multiline-text-input-label": "#ccc",
-  "--border-color-for-localized-multiline-text-input-label-when-readonly": "#ccc",
+  "--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",
@@ -228,8 +246,9 @@
   "--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-radius-for-button-as-small": "4px",
+  "--border-radius-for-button-as-medium": "4px",
   "--border-radius-for-button-as-icon-as-big": "6px",
   "--border-radius-for-button-as-icon-as-medium": "4px",
   "--border-radius-for-button-as-icon-as-small": "2px",
@@ -241,6 +260,9 @@
   "--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-width-for-input": "1px",
   "--border-width-for-input-when-warning": "1px",
   "--border-width-for-input-when-error": "1px",
@@ -250,11 +272,14 @@
   "--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",
   "--font-color-for-text": "#1a1a1a",
+  "--font-color-for-text-when-disabled": "#ccc",
   "--font-color-for-input": "#1a1a1a",
   "--font-color-for-input-when-disabled": "hsl(0, 0%, 60%)",
   "--font-color-for-input-when-error": "#e60050",
@@ -266,8 +291,13 @@
   "--font-color-for-tag-remove-icon-when-hovered": "#f16d0e",
   "--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-secondary": "#1a1a1a",
+  "--font-color-for-link-as-primary-when-active": "hsl(172.9608938547486, 100%, 25%)",
+  "--font-color-for-link-as-secondary-when-active": "#00b39e",
   "--font-color-for-table-header": "#fff",
-  "--font-color-for-localized-multiline-text-input-label": "hsl(0, 0%, 60%)",
+  "--font-color-for-localized-input-label": "hsl(0, 0%, 60%)",
   "--font-color-for-view-switcher": "#1a1a1a",
   "--font-color-for-view-switcher-when-disabled": "hsl(0, 0%, 60%)",
   "--font-color-for-view-switcher-when-selected": "#1a1a1a",
@@ -295,8 +325,17 @@
   "--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-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-small": "24px",
+  "--height-for-button-as-medium": "24px",
   "--height-for-button-as-icon-as-big": "32px",
   "--height-for-button-as-icon-as-medium": "24px",
   "--height-for-button-as-icon-as-small": "16px",
@@ -306,6 +345,7 @@
   "--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",
   "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
@@ -326,7 +366,7 @@
   "--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-localized-multiline-text-input-label": "0.9231rem",
+  "--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",
@@ -338,6 +378,8 @@
   "--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",
@@ -347,6 +389,7 @@
   "--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",
@@ -357,6 +400,11 @@
   "--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)",
   "--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)",
@@ -376,6 +424,14 @@
   "--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-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)",
@@ -391,6 +447,10 @@
   "--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-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)",
@@ -404,6 +464,12 @@
   "--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)",
   "--font-size-m": "1rem",
   "--big-button-height": "32px",
   "--small-button-height": "24px",
@@ -412,6 +478,5 @@
   "--font-size-default": "1rem",
   "--font-size-small": "0.9231rem",
   "--shadow-box-tag-hover": "0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)",
-  "--size-height-tag": "26px",
-  "--standard-input-height": "32px"
+  "--size-height-tag": "26px"
 }

package/materials/internals/definition.yaml CHANGED Viewed

@@ -46,6 +46,7 @@ choiceGroupsByTheme:
         color-accent-20: 'hsl(195, 35.2941176471%, 20%)'
         color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
         color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
+        color-accent-60: 'hsl(195, 35.2941176471%, 60%)'
         color-accent-90: 'hsl(195, 35.2941176471%, 90%)'
         color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
         color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
@@ -261,6 +262,8 @@ states:
     description: 'When the element is condensed'
   checked:
     description: 'When the element is checked'
+  checked-and-disabled:
+    description: 'When the element is checked and disabled'
 variants:
   h1:
@@ -289,6 +292,8 @@ variants:
     description: 'To differentiate component primary type'
   secondary:
     description: 'To differentiate component secondary type'
+  inverted:
+    description: 'To differentiate component inverted type'
   urgent:
     description: 'To differentiate component urgent type'
   info:
@@ -301,6 +306,10 @@ variants:
     description: 'To differentiate component positive style'
   information:
     description: 'To differentiate component information style'
+  critical:
+    description: 'To differentiate component critical style'
+  bold:
+    description: 'When the element is bold'
 componentGroups:
   button:
@@ -357,10 +366,30 @@ componentGroups:
     description: 'Avatar elements'
   multiline-input:
     description: 'Multiline input elements'
+  localized-input-label:
+    description: 'Localized multiline text input label elements'
   localized-rich-text-input-label:
     description: 'Localized rich text input label elements'
   localized-multiline-text-input-label:
     description: 'Localized multiline text input label elements'
+  localized-rich-text-body-button:
+    description: 'Localized rich text input button elements'
+  localized-rich-text-dropdown-button:
+    description: 'Localized rich text input dropdown elements'
+  localized-rich-text-dropdown-item:
+    description: 'Localized rich text input dropdown item elements'
+  rich-text-input:
+    description: 'rich text input elements'
+  rich-text-editor-container:
+    description: 'Rich text editor container elements'
+  rich-text-divider:
+    description: 'Rich text divider elements'
+  rich-text-dropdown:
+    description: 'Rich text dropdown elements'
+  rich-text-dropdown-item-label:
+    description: 'Rich text dropdown item label elements'
+  rich-text-more-styles-dropdown:
+    description: 'Rich text more styles dropdown elements'
   tooltip:
     description: 'Tooltip elements'
   view-switcher:
@@ -405,6 +434,28 @@ componentGroups:
     description: 'Selectable select input dropdown elements'
   selectable-search-input-dropdown:
     description: 'Selectable search input dropdown elements'
+  primary-action-dropdown:
+    description: 'Primary action dropdown elements'
+  primary-action-dropdown-icon:
+    description: 'Primary action dropdown icon elements'
+  primary-action-dropdown-menu:
+    description: 'Primary action dropdown menu elements'
+  toggle-input-track:
+    description: 'Toggle input track pseudo-elements'
+  toggle-input-thumb:
+    description: 'Toggle input thumb pseudo-elements'
+  rich-text-toolbar:
+    description: 'Rich text tool bar element'
+  rich-text-button:
+    description: 'Rich text button element'
+  calendar-menu:
+    description: 'Calendar menu element'
+  flat-button:
+    description: 'Flat button elements'
+  flat-button-icon:
+    description: 'Flat button icon elements'
+  secondary-icon-button:
+    description: 'Secondary icon button elements'
 decisionGroupsByTheme:
   default:
@@ -470,6 +521,8 @@ decisionGroupsByTheme:
         background-color-for-tag-warning:
           description: ''
           choice: color-warning-95
+        background-color-for-tag-when-hovered:
+          choice: color-neutral-95
         background-color-for-collapsible-panel-header-icon-when-disabled:
           choice: color-accent-98
         background-color-for-select-input-option-when-hovered:
@@ -484,12 +537,22 @@ decisionGroupsByTheme:
         background-color-for-stamp-as-positive:
           description: ''
           choice: color-primary-85
-        background-color-for-localized-multiline-text-input-label:
-          description: ''
+        background-color-for-localized-input-label:
           choice: color-accent-98
-        background-color-for-localized-multiline-text-input-label-when-disabled:
-          description: ''
+        background-color-for-localized-input-label-when-readonly:
+          choice: color-accent-95
+        background-color-for-localized-input-label-when-disabled:
           choice: color-accent-98
+        background-color-for-localized-rich-text-body-button-when-active:
+          choice: color-accent-30
+        background-color-for-localized-rich-text-body-button:
+          choice: color-neutral-90
+        background-color-for-rich-text-dropdown-when-hovered:
+          choice: color-neutral-90
+        background-color-for-rich-text-more-styles-dropdown-when-hovered:
+          choice: color-neutral-90
+        background-color-for-rich-text-button:
+          choice: color-accent-30
         background-color-for-tooltip:
           choice: color-accent
         background-color-for-view-switcher:
@@ -526,6 +589,24 @@ decisionGroupsByTheme:
           choice: color-surface
         background-color-for-checkbox-input-icon-when-hovered:
           choice: color-surface
+        background-color-for-primary-action-dropdown-when-active:
+          choice: color-neutral-95
+        background-color-for-primary-action-dropdown-when-disabled:
+          choice: color-accent-98
+        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-thumb-when-disabled:
+          choice: color-accent-95
+        background-color-for-toggle-input-track-when-checked:
+          choice: color-primary
+        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-thumb-when-checked-and-disabled:
+          choice: color-neutral
     borders:
       label: Borders
@@ -547,6 +628,8 @@ decisionGroupsByTheme:
           choice: 'none'
         border-for-radio-input-option:
           choice: border-width-1
+        border-for-calendar-menu-when-focused:
+          choice: '1px solid var(--color-primary)'
     borderColors:
       label: Border Colors
@@ -612,9 +695,9 @@ decisionGroupsByTheme:
           choice: color-primary-25
         border-color-for-stamp-as-secondary:
           choice: color-neutral-60
-        border-color-for-localized-multiline-text-input-label:
+        border-color-for-localized-input-label:
           choice: color-neutral
-        border-color-for-localized-multiline-text-input-label-when-readonly:
+        border-color-for-localized-input-label-when-readonly:
           choice: color-neutral
         border-color-for-content-notification-when-error:
           choice: color-error
@@ -652,6 +735,8 @@ decisionGroupsByTheme:
           choice: color-neutral
         border-color-for-radio-input-when-focused:
           choice: color-primary
+        border-color-for-primary-action-dropdown-menu:
+          choice: color-neutral
     borderRadiuses:
       label: Border Radius
@@ -659,7 +744,7 @@ decisionGroupsByTheme:
       decisions:
         border-radius-for-button-as-big:
           choice: border-radius-6
-        border-radius-for-button-as-small:
+        border-radius-for-button-as-medium:
           choice: border-radius-4
         border-radius-for-button-as-icon-as-big:
           choice: border-radius-6
@@ -685,6 +770,12 @@ decisionGroupsByTheme:
           choice: '0 var(--border-radius-6) var(--border-radius-6) 0'
         border-radius-for-content-notification-icon:
           choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)'
+        border-radius-for-primary-action-dropdown:
+          choice: 'var(--border-radius-6) 0 0 var(--border-radius-6)'
+        border-radius-for-primary-action-dropdown-icon:
+          choice: '0 var(--border-radius-6) var(--border-radius-6) 0'
+        border-radius-for-primary-action-dropdown-menu:
+          choice: border-radius-6
     borderWidths:
       label: Border width
@@ -708,6 +799,8 @@ decisionGroupsByTheme:
           choice: border-width-1
         border-width-for-checkbox-input-icon:
           choice: border-width-1
+        border-for-primary-action-dropdown-icon:
+          choice: '0px 0px 0px 1px'
     boxShadows:
       label: Box shadows
@@ -721,6 +814,8 @@ decisionGroupsByTheme:
           choice: shadow-9
         box-shadow-for-select-input-when-focused:
           choice: 'inset 0 0 0 2px'
+        box-shadow-for-calendar-menu-when-focused:
+          choice: 'none'
     fontColors:
       label: Font Colors
@@ -729,6 +824,8 @@ decisionGroupsByTheme:
         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
@@ -759,9 +856,19 @@ decisionGroupsByTheme:
         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-multiline-text-input-label:
+        font-color-for-localized-input-label:
           choice: color-neutral-60
         font-color-for-view-switcher:
           choice: color-solid
@@ -817,6 +924,24 @@ decisionGroupsByTheme:
           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
@@ -824,7 +949,7 @@ decisionGroupsByTheme:
       decisions:
         height-for-button-as-big:
           choice: '32px'
-        height-for-button-as-small:
+        height-for-button-as-medium:
           choice: '24px'
         height-for-button-as-icon-as-big:
           choice: '32px'
@@ -844,6 +969,8 @@ decisionGroupsByTheme:
           choice: '16px'
         height-for-radio-input-option-when-checked:
           choice: '8px'
+        height-for-primary-action-dropdown:
+          choice: '32px'
     widths:
       label: Width
@@ -916,8 +1043,8 @@ decisionGroupsByTheme:
           choice: font-size-60
         font-size-for-avatar-as-big:
           choice: font-size-78
-        font-size-for-localized-multiline-text-input-label:
-          choice: font-size-15
+        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:
@@ -957,6 +1084,10 @@ decisionGroupsByTheme:
         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
@@ -987,6 +1118,8 @@ decisionGroupsByTheme:
           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
@@ -1012,7 +1145,16 @@ decisionGroupsByTheme:
           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)'
     paddings:
       label: Paddings
       prefix: padding
@@ -1055,6 +1197,22 @@ decisionGroupsByTheme:
           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:
@@ -1085,6 +1243,14 @@ decisionGroupsByTheme:
           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
@@ -1118,6 +1284,18 @@ decisionGroupsByTheme:
           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:
@@ -1154,9 +1332,9 @@ decisionGroupsByTheme:
         background-color-for-button-when-disabled:
           choice: color-neutral-95
         background-color-for-table-cell-when-hovered:
-          choice: color-neutral-95
+          choice: color-neutral-98
         background-color-for-table-header:
-          choice: color-surface
+          choice: color-neutral-95
         background-color-for-collapsible-panel-header-icon-when-disabled:
           choice: color-surface
         background-color-for-input-when-hovered:
@@ -1176,10 +1354,22 @@ decisionGroupsByTheme:
         background-color-for-stamp-as-positive:
           description: ''
           choice: color-primary-95
-        background-color-for-localized-multiline-text-input-label:
+        background-color-for-localized-input-label:
           choice: color-surface
-        background-color-for-localized-multiline-text-input-label-when-disabled:
+        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:
@@ -1216,6 +1406,26 @@ decisionGroupsByTheme:
           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
@@ -1237,6 +1447,8 @@ decisionGroupsByTheme:
           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
@@ -1282,10 +1494,12 @@ decisionGroupsByTheme:
           choice: color-primary-85
         border-color-for-stamp-as-secondary:
           choice: color-neutral-85
-        border-color-for-localized-multiline-text-input-label-when-readonly:
-          choice: color-neutral-90
+        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:
@@ -1324,6 +1538,8 @@ decisionGroupsByTheme:
           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
@@ -1331,7 +1547,7 @@ decisionGroupsByTheme:
       decisions:
         border-radius-for-button-as-big:
           choice: border-radius-4
-        border-radius-for-button-as-small:
+        border-radius-for-button-as-medium:
           choice: border-radius-4
         border-radius-for-button-as-icon-as-big:
           choice: border-radius-4
@@ -1353,6 +1569,12 @@ decisionGroupsByTheme:
           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
@@ -1368,6 +1590,8 @@ decisionGroupsByTheme:
           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
@@ -1381,13 +1605,17 @@ decisionGroupsByTheme:
           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:
-          choice: color-neutral-40
+          choice: color-solid
         font-color-for-input-when-readonly:
           choice: color-neutral-40
         font-color-for-tag-remove-icon:
@@ -1432,6 +1660,18 @@ decisionGroupsByTheme:
           choice: color-neutral-60
         font-color-for-checkbox-input-label-when-readonly:
           choice: color-neutral-40
+        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-secondary-icon-button-as-primary:
+          choice: color-primary-25
+        font-color-for-secondary-icon-button-as-primary-when-hovered:
+          choice: color-primary
     fontSizes:
       label: Font Sizes
@@ -1469,7 +1709,7 @@ decisionGroupsByTheme:
           choice: font-size-30
         font-size-for-avatar-as-big:
           choice: font-size-80
-        font-size-for-localized-multiline-text-input-label:
+        font-size-for-localized-input-label:
           choice: font-size-30
         font-size-for-select-input-tag:
           choice: font-size-30
@@ -1499,6 +1739,10 @@ decisionGroupsByTheme:
         line-height-for-text-as-detail:
           description: ''
           choice: line-height-20
+        line-height-for-select-input-options:
+          choice: line-height-40
+        line-height-for-table-header:
+          choice: '26px'
     fontWeights:
       label: Font Weights
@@ -1529,6 +1773,8 @@ decisionGroupsByTheme:
           choice: font-weight-500
         font-weight-for-table-header:
           choice: font-weight-600
+        font-weight-for-text-as-bold:
+          choice: font-weight-600
     heights:
       label: Heights
@@ -1536,7 +1782,7 @@ decisionGroupsByTheme:
       decisions:
         height-for-button-as-big:
           choice: '40px'
-        height-for-button-as-small:
+        height-for-button-as-medium:
           choice: '32px'
         height-for-button-as-icon-as-big:
           choice: '40px'
@@ -1556,6 +1802,8 @@ decisionGroupsByTheme:
           choice: '18px'
         height-for-radio-input-option-when-checked:
           choice: '10px'
+        height-for-primary-action-dropdown:
+          choice: '40px'
     iconColors:
       label: Icon colors
@@ -1604,7 +1852,16 @@ decisionGroupsByTheme:
           choice: spacing-20
         margin-left-for-radio-input-label:
           choice: spacing-10
+        margin-right-for-primary-action-dropdown:
+          choice: spacing-20
+        margin-top-for-primary-action-dropdown:
+          choice: spacing-20
+        margin-for-localized-rich-text-body-button:
+          choice: '0 2px var(--spacing-20) 2px'
+        margin-for-rich-text-divider:
+          choice: 'var(--spacing-10) 2px'
+        margin-for-rich-text-dropdown-item-label:
+          choice: '0 0 0 var(--spacing-20)'
     paddings:
       label: Paddings
       prefix: padding
@@ -1646,8 +1903,22 @@ decisionGroupsByTheme:
         padding-for-multiline-input:
           choice: spacing-20
         padding-for-localized-rich-text-input-label:
-          choice: spacing-20
-        padding-for-localized-multiline-text-input-label:
+          choice: 'var(--spacing-20) 12px'
+        padding-for-localized-rich-text-dropdown-button:
+          choice: '5px var(--spacing-20)'
+        padding-for-localized-rich-text-dropdown-item:
+          choice: 'var(--spacing-20) var(--spacing-30)'
+        padding-for-localized-rich-text-body-button:
+          choice: 'var(--spacing-20)'
+        padding-for-rich-text-input:
+          choice: 'var(--spacing-20) var(--spacing-30)'
+        padding-for-rich-text-toolbar:
+          choice: 'none'
+        padding-left-for-rich-text-toolbar:
+          choice: 'none'
+        padding-for-rich-text-editor-container:
+          choice: 'var(--spacing-20) 0 0'
+        padding-for-localized-input-label:
           choice: '0 12px'
         padding-for-tag-remove-icon:
           choice: '0 12px'
@@ -1677,6 +1948,14 @@ decisionGroupsByTheme:
           choice: '0 12px'
         padding-for-selectable-search-input-dropdown:
           choice: '0 12px'
+        padding-for-primary-action-dropdown:
+          choice: '0 var(--spacing-30)'
+        padding-for-primary-action-dropdown-icon:
+          choice: '0 var(--spacing-20)'
+        padding-for-button-as-medium:
+          choice: '0 var(--spacing-30)'
+        padding-for-button-as-big:
+          choice: '0 var(--spacing-30)'
     shadows:
       label: Shadows
@@ -1706,6 +1985,18 @@ decisionGroupsByTheme:
           choice: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)'
         shadow-for-select-input-menu:
           choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
+        shadow-for-primary-action-dropdown:
+          choice: shadow-0
+        shadow-for-primary-action-dropdown-when-hovered:
+          choice: shadow-0
+        shadow-for-primary-action-dropdown-when-active:
+          choice: shadow-0
+        shadow-for-primary-action-dropdown-menu:
+          choice: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
+        shadow-for-toggle-input-thumb:
+          choice: '0px 1px 5px rgba(0, 0, 0, 0.2)'
+        shadow-for-tag-when-hovered:
+          choice: shadow-0
 # These tokens are deprecated as they don't follow our naming patterns.
 # Ideally they should be replaced with new tokens and not be used anymore.
@@ -1728,4 +2019,3 @@ plainTokens:
   font-size-small: 0.9231rem
   shadow-box-tag-hover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
   size-height-tag: 26px
-  standard-input-height: 32px

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend/ui-kit",
   "description": "A preset of all the UI-Kit components.",
-  "version": "15.13.1",
+  "version": "15.14.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -24,40 +24,40 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/accessible-hidden": "15.13.1",
-    "@commercetools-uikit/avatar": "15.13.1",
-    "@commercetools-uikit/buttons": "15.13.1",
-    "@commercetools-uikit/card": "15.13.1",
-    "@commercetools-uikit/collapsible": "15.13.1",
-    "@commercetools-uikit/collapsible-motion": "15.13.1",
-    "@commercetools-uikit/collapsible-panel": "15.13.1",
-    "@commercetools-uikit/constraints": "15.13.1",
-    "@commercetools-uikit/data-table": "15.13.1",
-    "@commercetools-uikit/data-table-manager": "15.13.1",
-    "@commercetools-uikit/design-system": "15.13.1",
-    "@commercetools-uikit/field-errors": "15.13.1",
-    "@commercetools-uikit/field-label": "15.13.1",
-    "@commercetools-uikit/fields": "15.13.1",
-    "@commercetools-uikit/grid": "15.13.1",
-    "@commercetools-uikit/hooks": "15.13.1",
-    "@commercetools-uikit/i18n": "15.13.1",
-    "@commercetools-uikit/icons": "15.13.1",
-    "@commercetools-uikit/inputs": "15.13.1",
-    "@commercetools-uikit/label": "15.13.1",
-    "@commercetools-uikit/link": "15.13.1",
-    "@commercetools-uikit/loading-spinner": "15.13.1",
-    "@commercetools-uikit/messages": "15.13.1",
-    "@commercetools-uikit/notifications": "15.13.1",
-    "@commercetools-uikit/pagination": "15.13.1",
-    "@commercetools-uikit/primary-action-dropdown": "15.13.1",
-    "@commercetools-uikit/selectable-search-input": "15.13.1",
-    "@commercetools-uikit/spacings": "15.13.1",
-    "@commercetools-uikit/stamp": "15.13.1",
-    "@commercetools-uikit/tag": "15.13.1",
-    "@commercetools-uikit/text": "15.13.1",
-    "@commercetools-uikit/tooltip": "15.13.1",
-    "@commercetools-uikit/utils": "15.13.1",
-    "@commercetools-uikit/view-switcher": "15.13.1"
+    "@commercetools-uikit/accessible-hidden": "15.14.0",
+    "@commercetools-uikit/avatar": "15.14.0",
+    "@commercetools-uikit/buttons": "15.14.0",
+    "@commercetools-uikit/card": "15.14.0",
+    "@commercetools-uikit/collapsible": "15.14.0",
+    "@commercetools-uikit/collapsible-motion": "15.14.0",
+    "@commercetools-uikit/collapsible-panel": "15.14.0",
+    "@commercetools-uikit/constraints": "15.14.0",
+    "@commercetools-uikit/data-table": "15.14.0",
+    "@commercetools-uikit/data-table-manager": "15.14.0",
+    "@commercetools-uikit/design-system": "15.14.0",
+    "@commercetools-uikit/field-errors": "15.14.0",
+    "@commercetools-uikit/field-label": "15.14.0",
+    "@commercetools-uikit/fields": "15.14.0",
+    "@commercetools-uikit/grid": "15.14.0",
+    "@commercetools-uikit/hooks": "15.14.0",
+    "@commercetools-uikit/i18n": "15.14.0",
+    "@commercetools-uikit/icons": "15.14.0",
+    "@commercetools-uikit/inputs": "15.14.0",
+    "@commercetools-uikit/label": "15.14.0",
+    "@commercetools-uikit/link": "15.14.0",
+    "@commercetools-uikit/loading-spinner": "15.14.0",
+    "@commercetools-uikit/messages": "15.14.0",
+    "@commercetools-uikit/notifications": "15.14.0",
+    "@commercetools-uikit/pagination": "15.14.0",
+    "@commercetools-uikit/primary-action-dropdown": "15.14.0",
+    "@commercetools-uikit/selectable-search-input": "15.14.0",
+    "@commercetools-uikit/spacings": "15.14.0",
+    "@commercetools-uikit/stamp": "15.14.0",
+    "@commercetools-uikit/tag": "15.14.0",
+    "@commercetools-uikit/text": "15.14.0",
+    "@commercetools-uikit/tooltip": "15.14.0",
+    "@commercetools-uikit/utils": "15.14.0",
+    "@commercetools-uikit/view-switcher": "15.14.0"
   },
   "devDependencies": {
     "moment": "2.29.4",