@commercetools-uikit/design-system 16.1.0 → 16.2.0

package/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,273 @@
   --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-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%,
-    30%
+    20%
   );
-  --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-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(
-    0,
-    0%,
-    90%
+    203.05555555555554,
+    93.9130434783%,
+    95%
   );
-  --background-color-for-rich-text-button: hsl(195, 35.2941176471%, 30%);
-  --background-color-for-tooltip: #213c45;
+  --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-view-switcher-when-hovered: hsl(0, 0%, 95%);
+  --background-color-for-content-notification-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-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-when-warning: hsl(
+    25.110132158590307,
+    89.0196078431%,
+    95%
+  );
+  --background-color-for-content-notification-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: 4px;
+  --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-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 +416,158 @@
   --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
+  --padding-for-view-switcher-when-condensed: 0 12px 0 12px;
+  --padding-for-content-notification: var(--spacing-20) var(--spacing-30);
+  --padding-for-content-notification-message: 0 var(--spacing-30) 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-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;