@commercetools-frontend/ui-kit 17.0.1 → 18.0.0

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

@@ -24,6 +24,7 @@ var label = require('@commercetools-uikit/label');
 var loadingSpinner = require('@commercetools-uikit/loading-spinner');
 var messages = require('@commercetools-uikit/messages');
 var pagination = require('@commercetools-uikit/pagination');
+var progressBar = require('@commercetools-uikit/progress-bar');
 var spacings = require('@commercetools-uikit/spacings');
 var stamp = require('@commercetools-uikit/stamp');
 var dataTable = require('@commercetools-uikit/data-table');
@@ -70,6 +71,7 @@ var fieldErrors__default = /*#__PURE__*/_interopDefault(fieldErrors);
 var grid__default = /*#__PURE__*/_interopDefault(grid);
 var label__default = /*#__PURE__*/_interopDefault(label);
 var loadingSpinner__default = /*#__PURE__*/_interopDefault(loadingSpinner);
+var progressBar__default = /*#__PURE__*/_interopDefault(progressBar);
 var spacings__default = /*#__PURE__*/_interopDefault(spacings);
 var stamp__default = /*#__PURE__*/_interopDefault(stamp);
 var dataTable__default = /*#__PURE__*/_interopDefault(dataTable);
@@ -79,7 +81,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 = "17.0.1";
+var version = "18.0.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {
@@ -166,6 +168,10 @@ Object.defineProperty(exports, 'Pagination', {
   enumerable: true,
   get: function () { return pagination.Pagination; }
 });
+Object.defineProperty(exports, 'ProgressBar', {
+  enumerable: true,
+  get: function () { return progressBar__default["default"]; }
+});
 Object.defineProperty(exports, 'Spacings', {
   enumerable: true,
   get: function () { return spacings__default["default"]; }

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

@@ -24,6 +24,7 @@ var label = require('@commercetools-uikit/label');
 var loadingSpinner = require('@commercetools-uikit/loading-spinner');
 var messages = require('@commercetools-uikit/messages');
 var pagination = require('@commercetools-uikit/pagination');
+var progressBar = require('@commercetools-uikit/progress-bar');
 var spacings = require('@commercetools-uikit/spacings');
 var stamp = require('@commercetools-uikit/stamp');
 var dataTable = require('@commercetools-uikit/data-table');
@@ -70,6 +71,7 @@ var fieldErrors__default = /*#__PURE__*/_interopDefault(fieldErrors);
 var grid__default = /*#__PURE__*/_interopDefault(grid);
 var label__default = /*#__PURE__*/_interopDefault(label);
 var loadingSpinner__default = /*#__PURE__*/_interopDefault(loadingSpinner);
+var progressBar__default = /*#__PURE__*/_interopDefault(progressBar);
 var spacings__default = /*#__PURE__*/_interopDefault(spacings);
 var stamp__default = /*#__PURE__*/_interopDefault(stamp);
 var dataTable__default = /*#__PURE__*/_interopDefault(dataTable);
@@ -79,7 +81,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 = "17.0.1";
+var version = "18.0.0";
 
 exports.i18n = i18n__namespace;
 Object.defineProperty(exports, 'AccessibleHidden', {
@@ -166,6 +168,10 @@ Object.defineProperty(exports, 'Pagination', {
   enumerable: true,
   get: function () { return pagination.Pagination; }
 });
+Object.defineProperty(exports, 'ProgressBar', {
+  enumerable: true,
+  get: function () { return progressBar__default["default"]; }
+});
 Object.defineProperty(exports, 'Spacings', {
   enumerable: true,
   get: function () { return spacings__default["default"]; }

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

@@ -21,6 +21,7 @@ export { default as Label } from '@commercetools-uikit/label';
 export { default as LoadingSpinner } from '@commercetools-uikit/loading-spinner';
 export { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 export { PageNavigator, PageSizeSelector, Pagination } from '@commercetools-uikit/pagination';
+export { default as ProgressBar } from '@commercetools-uikit/progress-bar';
 export { default as Spacings } from '@commercetools-uikit/spacings';
 export { default as Stamp } from '@commercetools-uikit/stamp';
 export { default as DataTable } from '@commercetools-uikit/data-table';
@@ -33,6 +34,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 = "17.0.1";
+var version = "18.0.0";
 
 export { version };

package/dist/declarations/src/index.d.ts

@@ -21,6 +21,7 @@ export { default as Label } from '@commercetools-uikit/label';
 export { default as LoadingSpinner } from '@commercetools-uikit/loading-spinner';
 export { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 export { PageNavigator, PageSizeSelector, Pagination, } from '@commercetools-uikit/pagination';
+export { default as ProgressBar } from '@commercetools-uikit/progress-bar';
 export { default as Spacings } from '@commercetools-uikit/spacings';
 export { default as Stamp } from '@commercetools-uikit/stamp';
 export { default as DataTable } from '@commercetools-uikit/data-table';

package/materials/custom-properties.css

@@ -173,6 +173,7 @@
   --spacing-30: 16px;
   --spacing-40: 24px;
   --spacing-50: 32px;
+  --spacing-55: 40px;
   --spacing-60: 48px;
   --spacing-70: 64px;
   --transition-linear-80ms: 80ms linear;
@@ -183,23 +184,8 @@
   --break-point-biggerdesktop: 1280px;
   --break-point-giantdesktop: 1680px;
   --break-point-jumbodesktop: 1920px;
-  --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: hsl(
-    175,
-    55%,
-    45%
-  );
-  --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: #dc630a;
-  --background-color-for-button-as-urgent-when-hovered: #e7680d;
-  --background-color-for-button-as-critical-when-active: #b3003e;
-  --background-color-for-button-as-critical-when-hovered: #cc0047;
+  --background-color-for-button-when-active: hsl(232, 18%, 95%);
+  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
   --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
   --background-color-for-input: #fff;
   --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
@@ -214,19 +200,6 @@
   );
   --background-color-for-input-as-quiet: transparent;
   --background-color-for-input-as-quiet-when-hovered: hsl(0deg 0% 10% / 2%);
-  --background-color-for-table-cell-when-hovered: hsl(232, 18%, 98%);
-  --background-color-for-table-header: hsl(232, 18%, 98%);
-  --background-color-for-tag: hsl(232, 18%, 95%);
-  --background-color-for-tag-warning: hsl(
-    25.110132158590307,
-    89.0196078431%,
-    95%
-  );
-  --background-color-for-tag-when-hovered: hsl(232, 18%, 90%);
-  --background-color-for-collapsible-panel-header-icon-when-disabled: #fff;
-  --background-color-for-select-input-option-when-hovered: hsl(232, 18%, 98%);
-  --background-color-for-stamp-as-positive: hsl(175, 70%, 90%);
-  --background-color-for-stamp-as-primary: hsl(175, 70%, 90%);
   --background-color-for-localized-input-label: #fff;
   --background-color-for-localized-input-label-when-readonly: hsl(
     232,
@@ -238,90 +211,6 @@
     18%,
     95%
   );
-  --background-color-for-localized-rich-text-body-button-when-active: hsl(
-    195,
-    35.2941176471%,
-    20%
-  );
-  --background-color-for-localized-rich-text-body-button: hsl(232, 18%, 95%);
-  --background-color-for-rich-text-dropdown-when-hovered: hsl(232, 18%, 95%);
-  --background-color-for-rich-text-more-styles-dropdown-when-hovered: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    95%
-  );
-  --background-color-for-rich-text-button: hsl(195, 35.2941176471%, 20%);
-  --background-color-for-tooltip: hsl(195, 35.2941176471%, 10%);
-  --background-color-for-view-switcher: #fff;
-  --background-color-for-view-switcher-when-disabled: #fff;
-  --background-color-for-view-switcher-when-selected: hsl(232, 18%, 95%);
-  --background-color-for-view-switcher-when-hovered: hsl(232, 18%, 95%);
-  --background-color-for-content-notification-when-error: hsl(
-    339.1304347826087,
-    100%,
-    95%
-  );
-  --background-color-for-content-notification-when-info: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    95%
-  );
-  --background-color-for-content-notification-when-warning: hsl(
-    25.110132158590307,
-    89.0196078431%,
-    95%
-  );
-  --background-color-for-content-notification-when-success: hsl(175, 90%, 95%);
-  --background-color-for-checkbox-input-icon: hsl(175, 55%, 45%);
-  --background-color-for-checkbox-input-icon-when-disabled: hsl(232, 18%, 80%);
-  --background-color-for-checkbox-input-icon-when-readonly: hsl(232, 18%, 60%);
-  --background-color-for-checkbox-input-icon-when-error: #e60050;
-  --background-color-for-checkbox-input-icon-when-hovered: hsl(232, 18%, 90%);
-  --background-color-for-primary-action-dropdown-when-active: hsl(
-    232,
-    18%,
-    90%
-  );
-  --background-color-for-primary-action-dropdown-when-disabled: hsl(
-    232,
-    18%,
-    95%
-  );
-  --background-color-for-toggle-input-track: hsl(232, 18%, 80%);
-  --background-color-for-toggle-input-track-when-disabled: hsl(232, 18%, 90%);
-  --background-color-for-toggle-input-thumb-when-disabled: hsl(232, 18%, 60%);
-  --background-color-for-toggle-input-track-when-checked: hsl(175, 55%, 40%);
-  --background-color-for-toggle-input-thumb-when-checked: hsl(175, 55%, 25%);
-  --background-color-for-toggle-input-track-when-checked-and-disabled: hsl(
-    195,
-    35.2941176471%,
-    90%
-  );
-  --background-color-for-toggle-input-thumb-when-checked-and-disabled: hsl(
-    195,
-    35.2941176471%,
-    60%
-  );
-  --background-color-for-button-as-secondary-when-info: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    95%
-  );
-  --background-color-for-button-as-secondary-when-info-and-hovered: #ceebfd;
-  --background-color-for-button-as-secondary-when-info-and-active: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    85%
-  );
-  --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: hsl(232, 18%, 80%);
   --border-color-for-input-when-focused: hsl(175, 55%, 45%);
   --border-color-for-input-when-disabled: hsl(232, 18%, 80%);
@@ -330,321 +219,31 @@
   --border-color-for-input-when-warning: #f16d0e;
   --border-color-for-input-when-hovered: hsl(232, 18%, 80%);
   --border-color-for-input-as-quiet: transparent;
-  --border-color-for-tag: hsl(232, 18%, 80%);
-  --border-color-for-tag-warning: #f16d0e;
-  --border-color-for-tag-when-focused: hsl(232, 18%, 80%);
-  --border-color-for-tag-when-hovered: hsl(232, 18%, 80%);
-  --border-color-for-button-as-icon: hsl(232, 18%, 80%);
-  --border-color-for-button-as-icon-as-info: hsl(232, 18%, 80%);
-  --border-color-for-button-as-icon-as-primary: hsl(232, 18%, 80%);
-  --border-color-for-button-as-icon-when-disabled: #fff;
-  --border-color-for-table-header: #fff;
-  --border-color-for-table-header-as-bottom: hsl(232, 18%, 95%);
-  --border-color-for-table-manager-droppable-list: hsl(232, 18%, 80%);
-  --border-color-for-collapsible-panel-header: hsl(232, 18%, 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(175, 70%, 85%);
-  --border-color-for-stamp-as-information: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    85%
-  );
-  --border-color-for-stamp-as-primary: hsl(175, 70%, 85%);
-  --border-color-for-stamp-as-secondary: hsl(232, 18%, 85%);
-  --border-color-for-localized-input-label: hsl(232, 18%, 80%);
-  --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(175, 70%, 85%);
-  --border-color-for-group-heading-select-input-options: hsl(232, 18%, 90%);
-  --border-color-for-select-input-menu: #fff;
-  --border-color-for-select-input-when-readonly: hsl(232, 18%, 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: hsl(175, 55%, 45%);
-  --border-color-for-checkbox-input-icon-when-disabled: hsl(232, 18%, 80%);
-  --border-color-for-checkbox-input-icon-when-readonly: hsl(232, 18%, 60%);
-  --border-color-for-checkbox-input-icon-when-error: #e60050;
-  --border-color-for-radio-input: hsl(232, 18%, 60%);
-  --border-color-for-radio-input-when-disabled: hsl(232, 18%, 80%);
-  --border-color-for-radio-input-when-readonly: hsl(232, 18%, 60%);
-  --border-color-for-radio-input-when-checked: hsl(175, 55%, 45%);
-  --border-color-for-radio-input-when-focused: hsl(232, 18%, 60%);
-  --border-color-for-primary-action-dropdown-menu: #fff;
-  --border-color-for-button-as-secondary-when-info: hsl(
-    203.05555555555554,
-    93.9130434783%,
-    85%
-  );
   --border-radius-for-button-as-big: 4px;
   --border-radius-for-button-as-medium: 4px;
-  --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: 4px;
-  --border-radius-for-tag: 2px;
-  --border-radius-for-card: 4px;
-  --border-radius-for-table-manager-droppable-list: 4px;
-  --border-radius-for-stamp: 4px;
-  --border-radius-for-stamp-as-condensed: 2px;
-  --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 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);
-  --box-shadow-for-table: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
-  --font-color-for-text: #1a1a1a;
-  --font-color-for-text-when-disabled: hsl(232, 18%, 60%);
   --font-color-for-input: #1a1a1a;
   --font-color-for-input-when-disabled: hsl(232, 18%, 60%);
   --font-color-for-input-when-error: #e60050;
   --font-color-for-input-when-readonly: hsl(232, 18%, 40%);
   --font-color-for-input-when-warning: #f16d0e;
-  --font-color-for-tag: #1a1a1a;
-  --font-color-for-tag-remove-icon: hsl(232, 18%, 40%);
-  --font-color-for-tag-drag-icon: hsl(232, 18%, 40%);
-  --font-color-for-tag-remove-icon-when-hovered: #e60050;
-  --font-color-for-tag-when-disabled: hsl(232, 18%, 60%);
-  --font-color-for-text-when-inverted: #fff;
-  --font-color-for-link-as-inverted: #fff;
-  --font-color-for-link-as-primary: hsl(175, 55%, 30%);
-  --font-color-for-link-as-secondary: #1a1a1a;
-  --font-color-for-link-as-primary-when-active: hsl(175, 55%, 45%);
-  --font-color-for-link-as-secondary-when-active: hsl(175, 55%, 45%);
-  --font-color-for-table-header: hsl(232, 18%, 40%);
-  --font-color-for-localized-input-label: hsl(232, 18%, 60%);
-  --font-color-for-view-switcher: hsl(232, 18%, 40%);
-  --font-color-for-view-switcher-when-disabled: hsl(232, 18%, 60%);
-  --font-color-for-view-switcher-when-selected: #1a1a1a;
-  --font-color-for-clear-input-icon: hsl(232, 18%, 40%);
-  --font-color-for-clear-input-icon-when-hovered: #e60050;
-  --font-color-for-content-notification: #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: hsl(175, 55%, 45%);
-  --font-color-for-content-notification-icon-when-info: #078cdf;
-  --font-color-for-search-input-icon: hsl(232, 18%, 60%);
-  --font-color-for-search-input-icon-when-hovered: hsl(175, 55%, 45%);
-  --font-color-for-select-input-icon: hsl(232, 18%, 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(232, 18%, 40%);
-  --font-color-for-search-input-icon-when-readonly: hsl(232, 18%, 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(232, 18%, 60%);
-  --font-color-for-checkbox-input-label-when-readonly: hsl(232, 18%, 40%);
-  --font-color-for-radio-input-when-disabled: hsl(232, 18%, 60%);
-  --font-color-for-radio-input-when-error: #e60050;
-  --font-color-for-radio-input-when-readonly: hsl(232, 18%, 60%);
-  --font-color-for-radio-input-when-warning: #f16d0e;
-  --font-color-for-flat-button-as-primary: hsl(175, 55%, 30%);
-  --font-color-for-flat-button-as-primary-when-hovered: hsl(175, 55%, 45%);
-  --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(232, 18%, 60%);
-  --font-color-for-secondary-icon-button-as-primary: hsl(175, 55%, 25%);
-  --font-color-for-secondary-icon-button-as-primary-when-hovered: hsl(
-    175,
-    55%,
-    45%
-  );
   --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-button-as-small: 16px;
   --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;
+  --height-for-input-as-small: 32px;
   --placeholder-font-color-for-input: hsl(232, 18%, 60%);
   --font-size-for-button: 0.875rem;
   --font-size-for-input: 1rem;
-  --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-caption: 0.75rem;
-  --font-size-for-text-as-detail: 0.875rem;
-  --font-size-for-body: 16px;
-  --font-size-for-link: 1rem;
-  --font-size-for-view-switcher: 0.875rem;
-  --font-size-for-table: 0.875rem;
-  --font-size-for-localized-input-label: 1rem;
-  --font-size-for-content-notification: 1rem;
-  --font-size-for-select-input-tag: 1rem;
-  --icon-color-for-datetime-input-icon: hsl(232, 18%, 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-caption: 1.125rem;
-  --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-caption: 400;
-  --font-weight-for-text-as-detail: 400;
-  --font-weight-for-button: 500;
-  --font-weight-for-table-header: 500;
-  --font-weight-for-text-as-bold: 600;
-  --margin-for-table-header: 8px;
-  --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: var(--spacing-05) var(--spacing-10);
-  --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-input-as-quiet: 8px;
-  --padding-for-multiline-input: 8px;
-  --padding-for-localized-rich-text-input-label: var(--spacing-20) 12px;
-  --padding-for-localized-rich-text-dropdown-button: 5px var(--spacing-20);
-  --padding-for-localized-rich-text-dropdown-item: var(--spacing-20)
-    var(--spacing-30);
-  --padding-for-localized-rich-text-body-button: var(--spacing-20);
-  --padding-for-localized-input-label: 0 12px;
-  --padding-for-rich-text-input: var(--spacing-20) var(--spacing-30);
-  --padding-for-rich-text-toolbar: none;
-  --padding-left-for-rich-text-toolbar: none;
-  --padding-for-rich-text-editor-container: var(--spacing-20) 0 0;
-  --padding-for-localized-multiline-text-input-label: 0 var(--spacing-20);
-  --padding-for-tag-remove-icon: 0 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 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-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-box-tag-when-hovered: 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);
+  --padding-for-input: 0 var(--spacing-30);
+  --padding-for-input-as-quiet: 0 var(--spacing-20);
+  --padding-for-button: 0 var(--spacing-30);
   --shadow-for-input: none;
   --shadow-for-input-when-focused: inset 0 0 0 1px var(--color-primary);
   --shadow-for-input-when-error: inset 0 0 0 1px var(--color-error);
   --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;
-  --size-height-input: 32px;
-  --font-family-default: 'Open Sans', sans-serif;
-  --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;
 }