@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.10

package/src/styles/component-settings.scss

@@ -0,0 +1,75 @@
+// Генерируется build/plugins/generate-component-settings.ts — не редактировать руками.
+// Агрегат публичных SASS-переменных: глобальные настройки + переменные всех компонентов.
+// Цель для configFile плагина @central-design-system/vite-plugin (docs/sass-variables.md).
+
+@forward './settings';
+@forward '../components/CdsApp/styles/CdsApp.variables';
+@forward '../components/CdsAutocomplete/styles/CdsAutocomplete.variables';
+@forward '../components/CdsAvatar/styles/CdsAvatar.variables';
+@forward '../components/CdsBadge/styles/CdsBadge.variables';
+@forward '../components/CdsBreadcrumbs/styles/CdsBreadcrumbs.variables';
+@forward '../components/CdsButton/styles/CdsButton.variables';
+@forward '../components/CdsButtonGroup/styles/CdsButtonGroup.variables';
+@forward '../components/CdsButtonToggle/styles/CdsButtonToggle.variables';
+@forward '../components/CdsCarousel/styles/CdsCarousel.variables';
+@forward '../components/CdsCheckbox/styles/CdsCheckbox.variables';
+@forward '../components/CdsCheckboxButton/styles/CdsCheckboxButton.variables';
+@forward '../components/CdsCombobox/styles/CdsCombobox.variables';
+@forward '../components/CdsCounter/styles/CdsCounter.variables';
+@forward '../components/CdsDateInput/styles/CdsDateInput.variables';
+@forward '../components/CdsDatePicker/styles/CdsDatePicker.variables';
+@forward '../components/CdsDescription/styles/CdsDescription.variables';
+@forward '../components/CdsDivider/styles/CdsDivider.variables';
+@forward '../components/CdsDrawer/styles/CdsDrawer.variables';
+@forward '../components/CdsEmptyState/styles/CdsEmptyState.variables';
+@forward '../components/CdsExpandablePanel/styles/CdsExpandablePanel.variables';
+@forward '../components/CdsField/styles/CdsField.variables';
+@forward '../components/CdsFileInput/styles/CdsFileInput.variables';
+@forward '../components/CdsFileUpload/styles/CdsFileUpload.variables';
+@forward '../components/CdsFooter/styles/CdsFooter.variables';
+@forward '../components/CdsForm/styles/CdsForm.variables';
+@forward '../components/CdsFunctionalButton/styles/CdsFunctionalButton.variables';
+@forward '../components/CdsHeader/styles/CdsHeader.variables';
+@forward '../components/CdsHighlight/styles/CdsHighlight.variables';
+@forward '../components/CdsIcon/styles/CdsIcon.variables';
+@forward '../components/CdsImage/styles/CdsImage.variables';
+@forward '../components/CdsInput/styles/CdsInput.variables';
+@forward '../components/CdsLabel/styles/CdsLabel.variables';
+@forward '../components/CdsLayout/styles/CdsLayout.variables';
+@forward '../components/CdsLink/styles/CdsLink.variables';
+@forward '../components/CdsList/styles/CdsList.variables';
+@forward '../components/CdsLoader/styles/CdsLoader.variables';
+@forward '../components/CdsMenu/styles/CdsMenu.variables';
+@forward '../components/CdsMessages/styles/CdsMessages.variables';
+@forward '../components/CdsModal/styles/CdsModal.variables';
+@forward '../components/CdsNotification/styles/CdsNotification.variables';
+@forward '../components/CdsNotificationAlert/styles/CdsNotificationAlert.variables';
+@forward '../components/CdsOtpInput/styles/CdsOtpInput.variables';
+@forward '../components/CdsOverlay/styles/CdsOverlay.variables';
+@forward '../components/CdsPagination/styles/CdsPagination.variables';
+@forward '../components/CdsProgressBar/styles/CdsProgressBar.variables';
+@forward '../components/CdsProgressCircle/styles/CdsProgressCircle.variables';
+@forward '../components/CdsRadio/styles/CdsRadio.variables';
+@forward '../components/CdsRadioGroup/styles/CdsRadioGroup.variables';
+@forward '../components/CdsResponsive/styles/CdsResponsive.variables';
+@forward '../components/CdsSelect/styles/CdsSelect.variables';
+@forward '../components/CdsSkeletonLoader/styles/CdsSkeletonLoader.variables';
+@forward '../components/CdsSlideGroup/styles/CdsSlideGroup.variables';
+@forward '../components/CdsSlideView/styles/CdsSlideView.variables';
+@forward '../components/CdsStages/styles/CdsStages.variables';
+@forward '../components/CdsStatus/styles/CdsStatus.variables';
+@forward '../components/CdsSteps/styles/CdsSteps.variables';
+@forward '../components/CdsTable/styles/CdsTable.variables';
+@forward '../components/CdsTabs/styles/CdsTabs.variables';
+@forward '../components/CdsTag/styles/CdsTag.variables';
+@forward '../components/CdsTagGroup/styles/CdsTagGroup.variables';
+@forward '../components/CdsTextArea/styles/CdsTextArea.variables';
+@forward '../components/CdsTextInput/styles/CdsTextInput.variables';
+@forward '../components/CdsTimePicker/styles/CdsTimePicker.variables';
+@forward '../components/CdsToast/styles/CdsToast.variables';
+@forward '../components/CdsToggle/styles/CdsToggle.variables';
+@forward '../components/CdsToolbar/styles/CdsToolbar.variables';
+@forward '../components/CdsTooltip/styles/CdsTooltip.variables';
+@forward '../components/CdsTree/styles/CdsTree.variables';
+@forward '../components/CdsUploader/styles/CdsUploader.variables';
+@forward '../components/CdsVirtualScroll/styles/CdsVirtualScroll.variables';

package/src/styles/generic/_fonts.scss

@@ -9,7 +9,7 @@
     font-style: normal;
     font-weight: 100 900;
     src:
-      url('../assets/fonts/PTRootUI/PT-Root-UI_VF.woff2') format('woff2-variations'),
-      url('../assets/fonts/PTRootUI/PT-Root-UI_VF.woff') format('woff-variations');
+      url('../assets/fonts/PTRootUI/pt-root-ui_vf.woff2') format('woff2-variations'),
+      url('../assets/fonts/PTRootUI/pt-root-ui_vf.woff') format('woff-variations');
   }
 }

package/src/styles/settings/_index.scss

@@ -1 +1,7 @@
 @forward "./variables";
+
+// Переменные сетки (брейкпоинты, колонки, гаттеры) — часть публичных настроек:
+// конфигурируются вместе с остальными через `@use '…/styles' with (…)`
+// или `@use '…/styles/settings' with (…)`. Модуль содержит только переменные,
+// CSS не эмитит. Миксины брейкпоинтов остаются в отдельном входе `styles/breakpoints`.
+@forward "../utilities/grid/config";

package/src/styles/tools/_absolute.sass

@@ -0,0 +1,9 @@
+@mixin absolute($pseudo: false)
+  &
+    @if ($pseudo)
+      content: ''
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%

package/src/styles/tools/_border.sass

@@ -0,0 +1,10 @@
+@mixin border($color: null, $style: null, $width: null, $thin-width: false)
+  &
+    border-color: $color
+    border-style: $style
+    border-width: $width
+
+  @if $thin-width
+    &--border
+      border-width: $thin-width
+      box-shadow: none

package/src/styles/tools/_motion.scss

@@ -9,10 +9,8 @@ $cds-duration-normal: 300; 		// Раскрытие элементов, сист
 $cds-duration-slow: 400; 			// Раскрытие большого элемента, важные системные уведомления
 $cds-duration-very-slow: 500; // Затемнение фона
 
-/*
-* Easing component
-* @type Map
-*/
+// Easing component
+// @type Map
 $easing: (
   ease-in-out: (
     basic: cubic-bezier(0.37, 0, 0.63, 1),
@@ -28,13 +26,11 @@ $easing: (
   ),
 );
 
-/*
-* Get the transition-timing-function for a given easing and motion mode
-* @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
-* @param {String} $mode [basic] - Can be `basic` or `accent`
-* @param {Map} $easing [$easing] - Easing's map
-* @return {Function} CSS `cubic-bezier()` function
-*/
+// Get the transition-timing-function for a given easing and motion mode
+// @param {String} $type - Can be `ease-in-out`, `ease-in`, or `ease-out`
+// @param {String} $mode [basic] - Can be `basic` or `accent`
+// @param {Map} $easing [$easing] - Easing's map
+// @return {Function} CSS `cubic-bezier()` function
 @function get-motion($type, $mode: basic, $easing: $easing) {
   @if map.has-key($easing, $type) {
     $easing: map.get($easing, $type);
@@ -49,12 +45,10 @@ $easing: (
   }
 }
 
-/*
-* Set the transition-timing-function for a given easing and motion mode
-* @param {Number} $duration — The dynamic duration in ms
-* @param {String} $type - The name of the easing curve to apply
-* @param {String} $mode - The mode for the easing curve to use
-*/
+// Set the transition-timing-function for a given easing and motion mode
+// @param {Number} $duration — The dynamic duration in ms
+// @param {String} $type - The name of the easing curve to apply
+// @param {String} $mode - The mode for the easing curve to use
 @mixin cds-animation-motion($duration, $type, $mode) {
   transition: ($duration + ms) get-motion($type, $mode);
 }

package/src/styles/utilities/grid/_breakpoint.scss

@@ -43,8 +43,8 @@
       @content;
     }
   } @else if map.has-key($breakpoints, $name) {
-    // "and down" semantics aligned with the JS `useDisplay` composable
-    // (Vuetify convention): `down('sm')` covers the `sm` range AND everything
+    // "and down" semantics aligned with the JS `useDisplay` composable:
+    // `down('sm')` covers the `sm` range AND everything
     // below it, so the upper bound is the START of the NEXT breakpoint.
     // The max-width is that next breakpoint's width minus .02 (borrowed from
     // bootstrap — .02 instead of .01 avoids rounding issues in Safari).

package/src/styles/utilities/grid/_config.scss

@@ -1,5 +1,4 @@
 @use "sass:map";
-@use "../../tools";
 
 /// Namespace prefix
 /// @type String

package/src/themes/css/lumaDark.css

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: 0rem;
+  --cds-shadow-y-minus-300: 0rem;
+  --cds-shadow-y-minus-200: 0rem;
+  --cds-shadow-y-minus-100: 0rem;
+  --cds-shadow-y-400: 0rem;
+  --cds-shadow-y-300: 0rem;
+  --cds-shadow-y-200: 0rem;
+  --cds-shadow-y-100: 0rem;
+  --cds-shadow-x-minus-400: 0rem;
+  --cds-shadow-x-minus-300: 0rem;
+  --cds-shadow-x-minus-200: 0rem;
+  --cds-shadow-x-minus-100: 0rem;
+  --cds-shadow-x-400: 0rem;
+  --cds-shadow-x-300: 0rem;
+  --cds-shadow-x-200: 0rem;
+  --cds-shadow-x-100: 0rem;
+  --cds-shadow-blur-400: 0rem;
+  --cds-shadow-blur-300: 0rem;
+  --cds-shadow-blur-200: 0rem;
+  --cds-shadow-blur-100: 0rem;
+  --cds-font-weight-regular: 500;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 51, 55, 63;
+  --cds-color-surface-primary: 39, 42, 48;
+  --cds-color-surface-overlay: 39, 42, 48, 0.8;
+  --cds-color-surface-inverse: 220, 221, 227;
+  --cds-color-surface-elevated: 51, 55, 63;
+  --cds-color-status-warning-surface: 201, 164, 73;
+  --cds-color-status-warning-line: 190, 151, 55;
+  --cds-color-status-warning-fill-hover: 138, 101, 2;
+  --cds-color-status-warning-fill: 97, 67, 1;
+  --cds-color-status-warning-content: 234, 219, 186;
+  --cds-color-status-success-surface: 110, 186, 102;
+  --cds-color-status-success-line: 93, 175, 85;
+  --cds-color-status-success-fill-hover: 31, 124, 34;
+  --cds-color-status-success-fill: 13, 85, 18;
+  --cds-color-status-success-content: 202, 228, 196;
+  --cds-color-status-progress-surface: 77, 177, 255;
+  --cds-color-status-progress-line: 14, 164, 248;
+  --cds-color-status-progress-fill-hover: 1, 114, 172;
+  --cds-color-status-progress-fill: 1, 79, 119;
+  --cds-color-status-progress-content: 199, 224, 255;
+  --cds-color-status-info-surface: 165, 169, 178;
+  --cds-color-status-info-line: 152, 157, 168;
+  --cds-color-status-info-fill-hover: 102, 108, 121;
+  --cds-color-status-info-fill: 69, 73, 81;
+  --cds-color-status-info-content: 220, 221, 227;
+  --cds-color-status-indication-surface: 255, 158, 146;
+  --cds-color-status-indication-line: 255, 158, 146;
+  --cds-color-status-indication-fill-hover: 184, 66, 61;
+  --cds-color-status-indication-fill: 130, 40, 37;
+  --cds-color-status-indication-content: 255, 210, 204;
+  --cds-color-status-danger-surface: 255, 158, 146;
+  --cds-color-status-danger-line: 255, 158, 146;
+  --cds-color-status-danger-fill-hover: 184, 66, 61;
+  --cds-color-status-danger-fill: 130, 40, 37;
+  --cds-color-status-danger-content: 255, 210, 204;
+  --cds-color-page-primary: 26, 26, 26;
+  --cds-color-other-teal-surface: 10, 186, 206;
+  --cds-color-other-teal-line: 1, 172, 191;
+  --cds-color-other-teal-fill-hover: 0, 120, 134;
+  --cds-color-other-teal-fill: 4, 82, 91;
+  --cds-color-other-teal-content: 212, 242, 247;
+  --cds-color-other-purple-surface: 183, 154, 245;
+  --cds-color-other-purple-line: 174, 139, 238;
+  --cds-color-other-purple-fill-hover: 132, 87, 184;
+  --cds-color-other-purple-fill: 94, 56, 130;
+  --cds-color-other-purple-content: 243, 233, 254;
+  --cds-color-other-pink-surface: 232, 137, 209;
+  --cds-color-other-pink-line: 224, 120, 199;
+  --cds-color-other-pink-fill-hover: 172, 66, 150;
+  --cds-color-other-pink-fill: 122, 40, 105;
+  --cds-color-other-pink-content: 253, 230, 246;
+  --cds-color-other-lime-surface: 155, 178, 77;
+  --cds-color-other-lime-line: 141, 166, 59;
+  --cds-color-other-lime-fill-hover: 91, 116, 0;
+  --cds-color-other-lime-fill: 61, 79, 0;
+  --cds-color-other-lime-content: 235, 238, 216;
+  --cds-color-other-lemon-surface: 171, 174, 72;
+  --cds-color-other-lemon-line: 157, 162, 53;
+  --cds-color-other-lemon-fill-hover: 106, 113, 0;
+  --cds-color-other-lemon-fill: 72, 76, 1;
+  --cds-color-other-lemon-content: 238, 238, 217;
+  --cds-color-other-indigo-surface: 150, 164, 255;
+  --cds-color-other-indigo-line: 139, 149, 249;
+  --cds-color-other-indigo-fill-hover: 99, 98, 197;
+  --cds-color-other-indigo-fill: 64, 66, 141;
+  --cds-color-other-indigo-content: 235, 235, 255;
+  --cds-color-other-cyan-surface: 10, 190, 163;
+  --cds-color-other-cyan-line: 10, 176, 152;
+  --cds-color-other-cyan-fill-hover: 6, 122, 105;
+  --cds-color-other-cyan-fill: 0, 83, 72;
+  --cds-color-other-cyan-content: 213, 243, 235;
+  --cds-color-other-chocolate-surface: 212, 158, 109;
+  --cds-color-other-chocolate-line: 202, 145, 92;
+  --cds-color-other-chocolate-fill-hover: 152, 94, 31;
+  --cds-color-other-chocolate-fill: 110, 59, 1;
+  --cds-color-other-chocolate-content: 250, 234, 219;
+  --cds-color-line-tertiary-hover: 122, 128, 142;
+  --cds-color-line-tertiary: 86, 93, 103;
+  --cds-color-line-selected-hover: 146, 186, 254;
+  --cds-color-line-selected: 93, 157, 252;
+  --cds-color-line-secondary-hover: 152, 157, 168;
+  --cds-color-line-secondary: 122, 128, 142;
+  --cds-color-line-primary-hover: 181, 183, 192;
+  --cds-color-line-primary: 152, 157, 168;
+  --cds-color-line-focus-outline: 17, 89, 181;
+  --cds-color-line-focus: 93, 157, 252;
+  --cds-color-line-elevated: 130, 138, 151, 0.4;
+  --cds-color-line-disable: 102, 108, 121;
+  --cds-color-fill-selected-hover: 146, 186, 254;
+  --cds-color-fill-selected: 93, 157, 252;
+  --cds-color-fill-secondary-hover: 86, 93, 103;
+  --cds-color-fill-secondary-active: 102, 108, 121;
+  --cds-color-fill-secondary: 69, 73, 81;
+  --cds-color-fill-primary-hover: 69, 73, 81;
+  --cds-color-fill-primary-active: 86, 93, 103;
+  --cds-color-fill-primary: 39, 42, 48;
+  --cds-color-fill-elevated: 122, 128, 142;
+  --cds-color-fill-disable: 69, 73, 81;
+  --cds-color-content-tertiary: 181, 183, 192;
+  --cds-color-content-secondary: 207, 210, 215;
+  --cds-color-content-primary: 236, 236, 239;
+  --cds-color-content-placeholder: 165, 169, 178;
+  --cds-color-content-on-dark: 249, 249, 252;
+  --cds-color-content-link-visited: 192, 174, 248;
+  --cds-color-content-link: 146, 186, 254;
+  --cds-color-content-inverse: 26, 26, 26;
+  --cds-color-content-disable: 152, 157, 168;
+  --cds-color-brand-secondary-hover: 101, 11, 37;
+  --cds-color-brand-secondary-border: 138, 16, 52;
+  --cds-color-brand-secondary-active: 138, 16, 52;
+  --cds-color-brand-secondary: 58, 7, 21;
+  --cds-color-brand-primary-hover: 138, 16, 52;
+  --cds-color-brand-primary-content: 255, 217, 225;
+  --cds-color-brand-primary-border: 210, 21, 75;
+  --cds-color-brand-primary-active: 101, 11, 37;
+  --cds-color-brand-primary: 210, 21, 75;
+}

package/src/themes/css/lumaLight.css

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: -0.5rem;
+  --cds-shadow-y-minus-300: -0.375rem;
+  --cds-shadow-y-minus-200: -0.25rem;
+  --cds-shadow-y-minus-100: -0.125rem;
+  --cds-shadow-y-400: 0.5rem;
+  --cds-shadow-y-300: 0.375rem;
+  --cds-shadow-y-200: 0.25rem;
+  --cds-shadow-y-100: 0.125rem;
+  --cds-shadow-x-minus-400: -0.5rem;
+  --cds-shadow-x-minus-300: -0.375rem;
+  --cds-shadow-x-minus-200: -0.25rem;
+  --cds-shadow-x-minus-100: -0.125rem;
+  --cds-shadow-x-400: 0.5rem;
+  --cds-shadow-x-300: 0.375rem;
+  --cds-shadow-x-200: 0.25rem;
+  --cds-shadow-x-100: 0.125rem;
+  --cds-shadow-blur-400: 0.75rem;
+  --cds-shadow-blur-300: 0.5rem;
+  --cds-shadow-blur-200: 0.25rem;
+  --cds-shadow-blur-100: 0.125rem;
+  --cds-font-weight-regular: 500;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 236, 238, 242;
+  --cds-color-surface-primary: 255, 255, 255;
+  --cds-color-surface-overlay: 39, 42, 48, 0.5;
+  --cds-color-surface-inverse: 64, 70, 83;
+  --cds-color-surface-elevated: 255, 255, 255;
+  --cds-color-status-warning-surface: 166, 132, 10;
+  --cds-color-status-warning-line: 182, 146, 16;
+  --cds-color-status-warning-fill-hover: 222, 192, 72;
+  --cds-color-status-warning-fill: 242, 219, 130;
+  --cds-color-status-warning-content: 88, 64, 1;
+  --cds-color-status-success-surface: 60, 156, 44;
+  --cds-color-status-success-line: 80, 169, 70;
+  --cds-color-status-success-fill-hover: 151, 210, 131;
+  --cds-color-status-success-fill: 188, 232, 171;
+  --cds-color-status-success-content: 0, 80, 5;
+  --cds-color-status-progress-surface: 25, 143, 216;
+  --cds-color-status-progress-line: 43, 157, 233;
+  --cds-color-status-progress-fill-hover: 144, 200, 255;
+  --cds-color-status-progress-fill: 195, 223, 255;
+  --cds-color-status-progress-content: 0, 72, 113;
+  --cds-color-status-info-surface: 130, 138, 151;
+  --cds-color-status-info-line: 146, 152, 164;
+  --cds-color-status-info-fill-hover: 192, 195, 203;
+  --cds-color-status-info-fill: 218, 221, 226;
+  --cds-color-status-info-content: 64, 70, 83;
+  --cds-color-status-indication-surface: 209, 69, 63;
+  --cds-color-status-indication-line: 209, 69, 63;
+  --cds-color-status-indication-fill-hover: 255, 174, 158;
+  --cds-color-status-indication-fill: 255, 209, 198;
+  --cds-color-status-indication-content: 131, 17, 24;
+  --cds-color-status-danger-surface: 209, 69, 63;
+  --cds-color-status-danger-line: 209, 69, 63;
+  --cds-color-status-danger-fill-hover: 255, 174, 158;
+  --cds-color-status-danger-fill: 255, 209, 198;
+  --cds-color-status-danger-content: 131, 17, 24;
+  --cds-color-page-primary: 236, 238, 242;
+  --cds-color-other-teal-surface: 58, 150, 158;
+  --cds-color-other-teal-line: 60, 165, 173;
+  --cds-color-other-teal-fill-hover: 72, 214, 219;
+  --cds-color-other-teal-fill: 161, 233, 233;
+  --cds-color-other-teal-content: 2, 43, 47;
+  --cds-color-other-purple-surface: 169, 111, 222;
+  --cds-color-other-purple-line: 179, 129, 225;
+  --cds-color-other-purple-fill-hover: 214, 184, 239;
+  --cds-color-other-purple-fill: 232, 213, 246;
+  --cds-color-other-purple-content: 47, 15, 80;
+  --cds-color-other-pink-surface: 210, 92, 184;
+  --cds-color-other-pink-line: 219, 112, 196;
+  --cds-color-other-pink-fill-hover: 243, 172, 231;
+  --cds-color-other-pink-fill: 248, 209, 242;
+  --cds-color-other-pink-content: 66, 13, 53;
+  --cds-color-other-lime-surface: 120, 146, 44;
+  --cds-color-other-lime-line: 133, 161, 45;
+  --cds-color-other-lime-fill-hover: 182, 204, 101;
+  --cds-color-other-lime-fill: 212, 228, 144;
+  --cds-color-other-lime-content: 32, 41, 1;
+  --cds-color-other-lemon-surface: 142, 140, 35;
+  --cds-color-other-lemon-line: 157, 155, 37;
+  --cds-color-other-lemon-fill-hover: 203, 198, 95;
+  --cds-color-other-lemon-fill: 230, 223, 131;
+  --cds-color-other-lemon-content: 40, 38, 1;
+  --cds-color-other-indigo-surface: 128, 126, 236;
+  --cds-color-other-indigo-line: 145, 141, 236;
+  --cds-color-other-indigo-fill-hover: 195, 189, 249;
+  --cds-color-other-indigo-fill: 221, 217, 252;
+  --cds-color-other-indigo-content: 31, 31, 85;
+  --cds-color-other-cyan-surface: 67, 151, 134;
+  --cds-color-other-cyan-line: 72, 166, 146;
+  --cds-color-other-cyan-fill-hover: 88, 216, 190;
+  --cds-color-other-cyan-fill: 159, 235, 216;
+  --cds-color-other-cyan-content: 5, 43, 36;
+  --cds-color-other-chocolate-surface: 172, 127, 88;
+  --cds-color-other-chocolate-line: 183, 143, 109;
+  --cds-color-other-chocolate-fill-hover: 216, 190, 169;
+  --cds-color-other-chocolate-fill: 231, 217, 204;
+  --cds-color-other-chocolate-content: 54, 29, 1;
+  --cds-color-line-tertiary-hover: 175, 179, 189;
+  --cds-color-line-tertiary: 204, 207, 214;
+  --cds-color-line-selected-hover: 41, 120, 212;
+  --cds-color-line-selected: 77, 152, 249;
+  --cds-color-line-secondary-hover: 146, 152, 164;
+  --cds-color-line-secondary: 175, 179, 189;
+  --cds-color-line-primary-hover: 114, 121, 135;
+  --cds-color-line-primary: 146, 152, 164;
+  --cds-color-line-focus-outline: 164, 197, 254;
+  --cds-color-line-focus: 77, 152, 249;
+  --cds-color-line-elevated: 255, 255, 255;
+  --cds-color-line-disable: 192, 195, 203;
+  --cds-color-fill-selected-hover: 41, 120, 212;
+  --cds-color-fill-selected: 77, 152, 249;
+  --cds-color-fill-secondary-hover: 204, 207, 214;
+  --cds-color-fill-secondary-active: 192, 195, 203;
+  --cds-color-fill-secondary: 218, 221, 226;
+  --cds-color-fill-primary-hover: 218, 221, 226;
+  --cds-color-fill-primary-active: 204, 207, 214;
+  --cds-color-fill-primary: 255, 255, 255;
+  --cds-color-fill-elevated: 255, 255, 255;
+  --cds-color-fill-disable: 218, 221, 226;
+  --cds-color-content-tertiary: 114, 121, 135;
+  --cds-color-content-secondary: 79, 86, 102;
+  --cds-color-content-primary: 33, 38, 49;
+  --cds-color-content-placeholder: 130, 138, 151;
+  --cds-color-content-on-dark: 255, 255, 255;
+  --cds-color-content-link-visited: 149, 94, 200;
+  --cds-color-content-link: 41, 120, 212;
+  --cds-color-content-inverse: 255, 255, 255;
+  --cds-color-content-disable: 146, 152, 164;
+  --cds-color-brand-secondary-hover: 247, 207, 218;
+  --cds-color-brand-secondary-border: 251, 231, 236;
+  --cds-color-brand-secondary-active: 240, 168, 188;
+  --cds-color-brand-secondary: 251, 231, 236;
+  --cds-color-brand-primary-hover: 210, 21, 75;
+  --cds-color-brand-primary-content: 125, 14, 39;
+  --cds-color-brand-primary-border: 199, 27, 60;
+  --cds-color-brand-primary-active: 224, 71, 110;
+  --cds-color-brand-primary: 199, 27, 60;
+}

package/src/themes/index.ts

@@ -4,6 +4,8 @@ export { default as b2bDark } from './b2bDark';
 export { default as b2bLight } from './b2bLight';
 export { default as cdsDark } from './cdsDark';
 export { default as cdsLight } from './cdsLight';
+export { default as lumaDark } from './lumaDark';
+export { default as lumaLight } from './lumaLight';
 export { default as promoDark } from './promoDark';
 export { default as promoLight } from './promoLight';
 
@@ -12,6 +14,8 @@ export type Themes = {
   cdsDark: ThemeDefinition;
   b2bLight: ThemeDefinition;
   b2bDark: ThemeDefinition;
+  lumaLight: ThemeDefinition;
+  lumaDark: ThemeDefinition;
   promoDark: ThemeDefinition;
   promoLight: ThemeDefinition;
 };

package/src/themes/lumaDark.ts

@@ -0,0 +1,21 @@
+import cdsDark from './cdsDark';
+
+export default {
+  ...cdsDark,
+  colors: {
+    ...cdsDark.colors,
+    'surface-secondary': '#24262C',
+    'surface-primary': '#1B1D21',
+    'surface-elevated': '#24262C',
+    'page-primary': '#16171A',
+    'brand-secondary-hover': '#8A1034',
+    'brand-secondary-border': '#A01639',
+    'brand-secondary-active': '#A01639',
+    'brand-secondary': '#6F0C28',
+    'brand-primary-hover': '#8A1034',
+    'brand-primary-content': '#FFD9E1',
+    'brand-primary-border': '#D2154B',
+    'brand-primary-active': '#650B25',
+    'brand-primary': '#D2154B'
+  }
+};

package/src/themes/lumaLight.ts

@@ -0,0 +1,17 @@
+import cdsLight from './cdsLight';
+
+export default {
+  ...cdsLight,
+  colors: {
+    ...cdsLight.colors,
+    'brand-secondary-hover': '#F7CFDA',
+    'brand-secondary-border': '#FBE7EC',
+    'brand-secondary-active': '#F0A8BC',
+    'brand-secondary': '#FBE7EC',
+    'brand-primary-hover': '#D2154B',
+    'brand-primary-content': '#7D0E27',
+    'brand-primary-border': '#C71B3C',
+    'brand-primary-active': '#E0476E',
+    'brand-primary': '#C71B3C'
+  }
+};

package/dist/es/entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"entry.js","sources":["../../src/entry.ts"],"sourcesContent":["/* eslint-disable simple-import-sort/imports */\n\n// Styles\nimport './styles/common.scss';\n\n// Types\nimport type { CdsOptions } from './cds';\nimport { createCds as _createCds } from './cds';\n\n// Libraries\nimport * as components from './components';\nimport * as directives from './directives';\nimport * as themes from './themes';\nimport * as utils from './utils';\n\n/**\n * Компоненты и директивы намеренно НЕ подмешиваются здесь по умолчанию: замыкание на\n * namespace-импорт `components` удерживает всю библиотеку в бандле потребителя и делает\n * tree-shaking невозможным. Регистрируемый набор передаёт вызывающая сторона —\n * либо целиком (`createCds({ components, directives })`), либо точечно.\n * См. `docs/treeshaking.md`.\n */\nexport const createCds = (options: CdsOptions = {}) => {\n  return _createCds(options);\n};\n\nexport const version = __CDS_VERSION__;\ncreateCds.version = version;\n\n// Inject all components into the global @vue/runtime-core\n// This allows intellisense in templates w/out direct importing\ndeclare module '@vue/runtime-core' {\n  export interface GlobalComponents {\n    CdsApp: typeof components.CdsApp;\n    CdsAutocomplete: typeof components.CdsAutocomplete;\n    CdsAvatar: typeof components.CdsAvatar;\n    CdsBadge: typeof components.CdsBadge;\n    CdsBreadcrumbs: typeof components.CdsBreadcrumbs;\n    CdsBreadcrumbsItem: typeof components.CdsBreadcrumbsItem;\n    CdsBreadcrumbsDivider: typeof components.CdsBreadcrumbsDivider;\n    CdsButton: typeof components.CdsButton;\n    CdsButtonGroup: typeof components.CdsButtonGroup;\n    CdsButtonToggle: typeof components.CdsButtonToggle;\n    CdsCard: typeof components.CdsCard;\n    CdsCardGroup: typeof components.CdsCardGroup;\n    CdsCardItem: typeof components.CdsCardItem;\n    CdsCardTitle: typeof components.CdsCardTitle;\n    CdsCardSubtitle: typeof components.CdsCardSubtitle;\n    CdsCardText: typeof components.CdsCardText;\n    CdsCardActions: typeof components.CdsCardActions;\n    CdsCardDivider: typeof components.CdsCardDivider;\n    CdsCarousel: typeof components.CdsCarousel;\n    CdsCarouselItem: typeof components.CdsCarouselItem;\n    CdsCheckbox: typeof components.CdsCheckbox;\n    CdsCheckboxButton: typeof components.CdsCheckboxButton;\n    CdsCombobox: typeof components.CdsCombobox;\n    CdsCounter: typeof components.CdsCounter;\n    CdsDateInput: typeof components.CdsDateInput;\n    CdsDatePicker: typeof components.CdsDatePicker;\n    CdsDefaultsProvider: typeof components.CdsDefaultsProvider;\n    CdsDescription: typeof components.CdsDescription;\n    CdsDivider: typeof components.CdsDivider;\n    CdsDrawer: typeof components.CdsDrawer;\n    CdsEmptyState: typeof components.CdsEmptyState;\n    CdsExpandablePanels: typeof components.CdsExpandablePanels;\n    CdsExpandablePanel: typeof components.CdsExpandablePanel;\n    CdsExpandablePanelTitle: typeof components.CdsExpandablePanelTitle;\n    CdsExpandablePanelContent: typeof components.CdsExpandablePanelContent;\n    CdsField: typeof components.CdsField;\n    CdsFileInput: typeof components.CdsFileInput;\n    CdsFileUpload: typeof components.CdsFileUpload;\n    CdsFileUploadDropzone: typeof components.CdsFileUploadDropzone;\n    CdsFileUploadList: typeof components.CdsFileUploadList;\n    CdsFileUploadItem: typeof components.CdsFileUploadItem;\n    CdsFooter: typeof components.CdsFooter;\n    CdsForm: typeof components.CdsForm;\n    CdsLabel: typeof components.CdsLabel;\n    CdsLayout: typeof components.CdsLayout;\n    CdsLink: typeof components.CdsLink;\n    CdsList: typeof components.CdsList;\n    CdsListItem: typeof components.CdsListItem;\n    CdsListItemAction: typeof components.CdsListItemAction;\n    CdsListItemImage: typeof components.CdsListItemImage;\n    CdsListItemMedia: typeof components.CdsListItemMedia;\n    CdsListItemSubtitle: typeof components.CdsListItemSubtitle;\n    CdsListItemDescription: typeof components.CdsListItemDescription;\n    CdsListItemTitle: typeof components.CdsListItemTitle;\n    CdsListItemDivider: typeof components.CdsListItemDivider;\n    CdsListGroup: typeof components.CdsListGroup;\n    CdsLoader: typeof components.CdsLoader;\n    CdsMain: typeof components.CdsMain;\n    CdsMenu: typeof components.CdsMenu;\n    CdsFunctionalButton: typeof components.CdsFunctionalButton;\n    CdsCol: typeof components.CdsCol;\n    CdsGrid: typeof components.CdsGrid;\n    CdsRow: typeof components.CdsRow;\n    CdsHeader: typeof components.CdsHeader;\n    CdsHighlight: typeof components.CdsHighlight;\n    CdsIcon: typeof components.CdsIcon;\n    CdsImage: typeof components.CdsImage;\n    CdsInput: typeof components.CdsInput;\n    CdsMessages: typeof components.CdsMessages;\n    CdsModal: typeof components.CdsModal;\n    CdsNotification: typeof components.CdsNotification;\n    CdsNotificationAlert: typeof components.CdsNotificationAlert;\n    CdsOverlay: typeof components.CdsOverlay;\n    CdsPage: typeof components.CdsPage;\n    CdsPagination: typeof components.CdsPagination;\n    CdsProgressBar: typeof components.CdsProgressBar;\n    CdsProgressCircle: typeof components.CdsProgressCircle;\n    CdsRadio: typeof components.CdsRadio;\n    CdsRadioGroup: typeof components.CdsRadioGroup;\n    CdsResponsive: typeof components.CdsResponsive;\n    CdsSelect: typeof components.CdsSelect;\n    CdsSelectionControl: typeof components.CdsSelectionControl;\n    CdsSelectionControlGroup: typeof components.CdsSelectionControlGroup;\n    CdsSkeletonLoader: typeof components.CdsSkeletonLoader;\n    CdsSlideGroup: typeof components.CdsSlideGroup;\n    CdsSlideGroupItem: typeof components.CdsSlideGroupItem;\n    CdsSlideView: typeof components.CdsSlideView;\n    CdsSlideViewItem: typeof components.CdsSlideViewItem;\n    CdsStages: typeof components.CdsStages;\n    CdsStatus: typeof components.CdsStatus;\n    CdsSteps: typeof components.CdsSteps;\n    CdsStepsActions: typeof components.CdsStepsActions;\n    CdsStepsItem: typeof components.CdsStepsItem;\n    CdsStepsView: typeof components.CdsStepsView;\n    CdsStepsViewItem: typeof components.CdsStepsViewItem;\n    CdsSurface: typeof components.CdsSurface;\n    CdsTable: typeof components.CdsTable;\n    CdsTableColumn: typeof components.CdsTableColumn;\n    CdsTableColumnGroup: typeof components.CdsTableColumnGroup;\n    CdsTabs: typeof components.CdsTabs;\n    CdsTabsView: typeof components.CdsTabsView;\n    CdsTabsViewItem: typeof components.CdsTabsViewItem;\n    CdsTab: typeof components.CdsTab;\n    CdsTag: typeof components.CdsTag;\n    CdsTagGroup: typeof components.CdsTagGroup;\n    CdsTextArea: typeof components.CdsTextArea;\n    CdsTextInput: typeof components.CdsTextInput;\n    CdsTimePicker: typeof components.CdsTimePicker;\n    CdsToast: typeof components.CdsToast;\n    CdsToastQueue: typeof components.CdsToastQueue;\n    CdsToggle: typeof components.CdsToggle;\n    CdsToolbar: typeof components.CdsToolbar;\n    CdsToolbarTitle: typeof components.CdsToolbarTitle;\n    CdsTooltip: typeof components.CdsTooltip;\n    CdsTree: typeof components.CdsTree;\n    CdsTreeNode: typeof components.CdsTreeNode;\n    CdsTreeDirectory: typeof components.CdsTreeDirectory;\n    CdsUploader: typeof components.CdsUploader;\n    CdsVirtualScroll: typeof components.CdsVirtualScroll;\n    CdsVirtualScrollItem: typeof components.CdsVirtualScrollItem;\n  }\n}\n\nexport { components, directives, themes, utils };\n\nexport type { Blueprint, CdsInstance, CdsOptions } from './cds';\n\nexport * from './assets';\nexport * from './components';\nexport * from './composables';\nexport * from './directives';\nexport * from './hooks';\nexport * from './transitions';\n"],"names":["_createCds"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,YAAY,CAAC,UAAsB,OAAO;AACrD,SAAOA,YAAW,OAAO;AAC3B;AAEO,MAAM,UAAU;AACvB,UAAU,UAAU;"}