@salutejs/plasma-new-hope 0.80.0-canary.1194.9064180211.0 → 0.80.0-dev.0

package/styled-components/es/components/Radiobox/Radiobox.js

@@ -1,27 +1,18 @@
+var _StyledEllipse;
 var _excluded = ["size", "view", "focused", "disabled", "id", "label", "description", "style", "className", "singleLine", "aria-label"];
-var _templateObject, _StyledEllipse;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React, { forwardRef, useMemo } from 'react';
-import { css } from 'styled-components';
-import styled from 'styled-components';
 import { safeUseId, extractTextFrom } from '@salutejs/plasma-core';
-import { applyNoUserSelect, applyEllipsis } from '../../mixins';
-import { StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledContent, StyledTrigger } from '../Checkbox/Checkbox';
+import { StyledContentWrapper, StyledDescription, StyledInput, StyledLabel, StyledContent, StyledTrigger } from '../Checkbox/Checkbox.styles';
 import { cx } from '../../utils';
-import { base as viewCSS } from './_view/base';
-import { base as sizeCSS } from './_size/base';
-import { base as disabledCSS } from './_disabled/base';
-import { base as focusedCSS } from './_focused/base';
-
-// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
-var mappingOverride = "\n    --plasma-checkbox-label-font-family: var(--plasma-radiobox-label-font-family);\n    --plasma-checkbox-label-font-size: var(--plasma-radiobox-label-font-size);\n    --plasma-checkbox-label-font-style: var(--plasma-radiobox-label-font-style);\n    --plasma-checkbox-label-font-weight: var(--plasma-radiobox-label-font-weight);\n    --plasma-checkbox-label-letter-spacing: var(--plasma-radiobox-label-letter-spacing);\n    --plasma-checkbox-label-line-height: var(--plasma-radiobox-label-line-height);\n    --plasma-checkbox-description-font-family: var(--plasma-radiobox-description-font-family);\n    --plasma-checkbox-description-font-size: var(--plasma-radiobox-description-font-size);\n    --plasma-checkbox-description-font-style: var(--plasma-radiobox-description-font-style);\n    --plasma-checkbox-description-font-weight: var(--plasma-radiobox-description-font-weight);\n    --plasma-checkbox-description-letter-spacing: var(--plasma-radiobox-description-letter-spacing);\n    --plasma-checkbox-description-line-height: var(--plasma-radiobox-description-line-height);\n    --plasma-checkbox-fill-color: var(--plasma-radiobox-fill-color);\n    --plasma-checkbox-description-color: var(--plasma-radiobox-description-color);\n    --plasma-checkbox-trigger-border-color: var(--plasma-radiobox-trigger-border-color);\n    --plasma-checkbox-content-top-offset: var(--plasma-radiobox-content-top-offset);\n    --plasma-checkbox-content-left-offset: var(--plasma-radiobox-content-left-offset);\n    --plasma-checkbox-trigger-size: var(--plasma-radiobox-trigger-size);\n    --plasma-checkbox-trigger-border-radius: var(--plasma-radiobox-trigger-border-radius);\n    --plasma-checkbox-trigger-margin: var(--plasma-radiobox-trigger-margin); \n";
-var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-fk5e49-0"
-})(["width:var(--plasma-radiobox-ellipse-size);height:var(--plasma-radiobox-ellipse-size);border-radius:var(--plasma-radiobox-ellipse-size);background-color:var(--plasma-radiobox-ellipse-color);transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"]);
-var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    ", ";\n\n    .single-line {\n        ", ";\n    }\n\n    margin: var(--plasma-radiobox-margin);\n\n    &.reset-margins {\n        margin: 0;\n    }\n\n    ", ";\n\n    position: relative;\n    align-items: flex-start;\n    display: flex;\n    cursor: pointer;\n"])), mappingOverride, /*#__PURE__*/applyEllipsis(), /*#__PURE__*/applyNoUserSelect());
+import { base as viewCSS } from './variations/_view/base';
+import { base as sizeCSS } from './variations/_size/base';
+import { base as disabledCSS } from './variations/_disabled/base';
+import { base as focusedCSS } from './variations/_focused/base';
+import { StyledEllipse, base } from './Radiobox.styles';
+import { classes } from './Radiobox.tokens';
 export var radioboxRoot = function radioboxRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
     var size = props.size,
@@ -47,15 +38,15 @@ export var radioboxRoot = function radioboxRoot(Root) {
     var isLabelAriaHidden = typeof label === 'string';
     var canFocused = focused ? 0 : -1;
     var hasContent = label || description;
-    var singleLineClass = singleLine ? 'single-line' : undefined;
-    var resetMargins = !hasContent ? 'reset-margins' : undefined;
+    var singleLineClass = singleLine ? classes.singleLine : undefined;
+    var onlyDescriptionClass = !label && description ? classes.onlyDescription : undefined;
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,
       disabled: disabled,
       focused: focused,
       style: style,
-      className: cx(className, resetMargins),
+      className: className,
       tabIndex: -1
     }, /*#__PURE__*/React.createElement(StyledInput, _extends({}, rest, {
       id: radioboxId,
@@ -68,11 +59,11 @@ export var radioboxRoot = function radioboxRoot(Root) {
     })), /*#__PURE__*/React.createElement(StyledContentWrapper, {
       htmlFor: radioboxId
     }, /*#__PURE__*/React.createElement(StyledTrigger, {
-      className: cx('radiobox-trigger', resetMargins)
+      className: classes.radioboxTrigger
     }, _StyledEllipse || (_StyledEllipse = /*#__PURE__*/React.createElement(StyledEllipse, null))), hasContent && /*#__PURE__*/React.createElement(StyledContent, {
       className: singleLineClass
     }, label && /*#__PURE__*/React.createElement(StyledLabel, {
-      className: singleLineClass,
+      className: cx(singleLineClass, onlyDescriptionClass),
       id: uniqLabelId,
       "aria-hidden": isLabelAriaHidden
     }, label), description && /*#__PURE__*/React.createElement(StyledDescription, {

package/styled-components/es/components/Radiobox/Radiobox.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { css } from 'styled-components';
+import { checkboxTokens } from '../Checkbox';
+import { applyEllipsis, applyNoUserSelect } from '../../mixins';
+import { classes, tokens } from './Radiobox.tokens';
+
+// NOTE: Необходимое переопределение токенов из компонента Checkbox т.к. используются его части
+var mappingOverride = /*#__PURE__*/"\n    ".concat(checkboxTokens.labelFontFamily, ": var(").concat(tokens.labelFontFamily, ");\n    ").concat(checkboxTokens.labelFontSize, ": var(").concat(tokens.labelFontSize, ");\n    ").concat(checkboxTokens.labelFontStyle, ": var(").concat(tokens.labelFontStyle, ");\n    ").concat(checkboxTokens.labelFontWeight, ": var(").concat(tokens.labelFontWeight, ");\n    ").concat(checkboxTokens.labelLetterSpacing, ": var(").concat(tokens.labelLetterSpacing, ");\n    ").concat(checkboxTokens.labelLineHeight, ": var(").concat(tokens.labelLineHeight, ");\n    ").concat(checkboxTokens.descriptionMarginTop, ": var(").concat(tokens.descriptionMarginTop, ");\n    ").concat(checkboxTokens.descriptionFontFamily, ": var(").concat(tokens.descriptionFontFamily, ");\n    ").concat(checkboxTokens.descriptionFontSize, ": var(").concat(tokens.descriptionFontSize, ");\n    ").concat(checkboxTokens.descriptionFontStyle, ": var(").concat(tokens.descriptionFontStyle, ");\n    ").concat(checkboxTokens.descriptionFontWeight, ": var(").concat(tokens.descriptionFontWeight, ");\n    ").concat(checkboxTokens.descriptionLetterSpacing, ": var(").concat(tokens.descriptionLetterSpacing, ");\n    ").concat(checkboxTokens.descriptionLineHeight, ": var(").concat(tokens.descriptionLineHeight, ");\n\n    ").concat(checkboxTokens.fillColor, ": var(").concat(tokens.fillColor, ");\n    ").concat(checkboxTokens.descriptionColor, ": var(").concat(tokens.descriptionColor, ");\n    ").concat(checkboxTokens.triggerBorderColor, ": var(").concat(tokens.triggerBorderColor, ");\n\n    ").concat(checkboxTokens.contentTopOffset, ": var(").concat(tokens.contentTopOffset, ");\n    ").concat(checkboxTokens.contentLeftOffset, ": var(").concat(tokens.contentLeftOffset, ");\n    ").concat(checkboxTokens.triggerSize, ": var(").concat(tokens.triggerSize, ");\n    ").concat(checkboxTokens.triggerBorderRadius, ": var(").concat(tokens.triggerBorderRadius, ");\n    ").concat(checkboxTokens.triggerMargin, ": var(").concat(tokens.triggerMargin, ");\n");
+export var StyledEllipse = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-rqiilp-0"
+})(["width:var(", ");height:var(", ");border-radius:var(", ");background-color:var(", ");transition:transform 0.3s ease-in-out;transform:scale(0);input:checked + label &{transform:scale(1);}"], tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseSize, tokens.ellipseColor);
+export var base = /*#__PURE__*/css(["", ";margin:var(", ");", ";position:relative;align-items:flex-start;display:flex;cursor:pointer;.", "{", ";}"], mappingOverride, tokens.margin, /*#__PURE__*/applyNoUserSelect(), classes.singleLine, /*#__PURE__*/applyEllipsis());

package/styled-components/es/components/Radiobox/Radiobox.tokens.js

@@ -0,0 +1,33 @@
+export var classes = {
+  singleLine: 'single-line',
+  radioboxTrigger: 'radiobox-trigger',
+  onlyDescription: 'only-description'
+};
+export var tokens = {
+  labelFontFamily: '--plasma-radiobox-label-font-family',
+  labelFontSize: '--plasma-radiobox-label-font-size',
+  labelFontStyle: '--plasma-radiobox-label-font-style',
+  labelFontWeight: '--plasma-radiobox-label-font-weight',
+  labelLetterSpacing: '--plasma-radiobox-label-letter-spacing',
+  labelLineHeight: '--plasma-radiobox-label-line-height',
+  descriptionMarginTop: '--plasma-checkbox-description-margin-top',
+  descriptionFontFamily: '--plasma-radiobox-description-font-family',
+  descriptionFontSize: '--plasma-radiobox-description-font-size',
+  descriptionFontStyle: '--plasma-radiobox-description-font-style',
+  descriptionFontWeight: '--plasma-radiobox-description-font-weight',
+  descriptionLetterSpacing: '--plasma-radiobox-description-letter-spacing',
+  descriptionLineHeight: '--plasma-radiobox-description-line-height',
+  fillColor: '--plasma-radiobox-fill-color',
+  descriptionColor: '--plasma-radiobox-description-color',
+  triggerBorderColor: '--plasma-radiobox-trigger-border-color',
+  contentTopOffset: '--plasma-radiobox-content-top-offset',
+  contentLeftOffset: '--plasma-radiobox-content-left-offset',
+  triggerSize: '--plasma-radiobox-trigger-size',
+  triggerBorderRadius: '--plasma-radiobox-trigger-border-radius',
+  triggerMargin: '--plasma-radiobox-trigger-margin',
+  margin: '--plasma-radiobox-margin',
+  ellipseSize: '--plasma-radiobox-ellipse-size',
+  ellipseColor: '--plasma-radiobox-ellipse-color',
+  disabledOpacity: '--plasma-radiobox-disabled-opacity',
+  focusColor: '--plasma-radiobox-focus-color'
+};

package/styled-components/es/components/Radiobox/index.js

@@ -1,2 +1,3 @@
 export { radioboxRoot, radioboxConfig } from './Radiobox';
-export { RadioGroup } from './RadioGroup';
+export { RadioGroup } from './RadioGroup';
+export { tokens as radioboxTokens } from './Radiobox.tokens';

package/styled-components/es/components/Radiobox/variations/_disabled/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { tokens } from '../../Radiobox.tokens';
+export var base = /*#__PURE__*/css(["input:disabled + label{opacity:var(", ");}input:disabled + label{cursor:not-allowed;}"], tokens.disabledOpacity);

package/styled-components/es/components/Radiobox/variations/_focused/base.js

@@ -0,0 +1,21 @@
+import { css } from 'styled-components';
+import { addFocus } from '../../../../mixins';
+import { classes, tokens } from '../../Radiobox.tokens';
+export var base = /*#__PURE__*/css([".", "{", "}input[data-focus-visible-added] + label .", "{border-color:transparent;", "}input[data-focus-visible-added]:checked + label .", "{", "}"], classes.radioboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '0',
+  outlineSize: '0.125rem',
+  outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
+  outlineColor: 'transparent'
+}), classes.radioboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.125rem',
+  outlineRadius: /*#__PURE__*/"var(".concat(tokens.triggerBorderRadius, ")"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
+  customFocusRules: /*#__PURE__*/"\n                &::before {\n                    box-shadow: 0 0 0 0.125rem var(".concat(tokens.focusColor, ");\n                }\n            ")
+}), classes.radioboxTrigger, /*#__PURE__*/addFocus({
+  outlineOffset: '-0.125rem',
+  outlineSize: '0.063rem',
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.triggerBorderRadius, ") + 0.125rem)"),
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.focusColor, ")"),
+  customFocusRules: /*#__PURE__*/"\n                &::before {\n                    box-shadow: 0 0 0 0.063rem var(".concat(tokens.focusColor, ");\n                }\n            ")
+}));

package/styled-components/es/components/Radiobox/variations/_view/base.js

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+import { classes, tokens } from '../../Radiobox.tokens';
+export var base = /*#__PURE__*/css(["input:checked + label .", "{border:none;background:var(", ");border-color:var(", ");}"], classes.radioboxTrigger, tokens.fillColor, tokens.fillColor);

package/styled-components/es/components/TextField/TextField.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "contentLeft", "contentRight", "label", "labelPlacement", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,8 +25,6 @@ export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
 export var textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var id = _ref.id,
-      className = _ref.className,
-      style = _ref.style,
       contentLeft = _ref.contentLeft,
       contentRight = _ref.contentRight,
       label = _ref.label,
@@ -45,7 +43,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
       onSearch = _ref.onSearch,
-      onKeyDown = _ref.onKeyDown,
       rest = _objectWithoutProperties(_ref, _excluded);
     var contentRef = useRef(null);
     var inputRef = useRef(null);
@@ -125,10 +122,6 @@ export var textFieldRoot = function textFieldRoot(Root) {
         chipsRefs.current[index] = element;
       }
     };
-    var handleOnKeyDown = function handleOnKeyDown(event) {
-      handleInputKeydown(event);
-      onKeyDown && onKeyDown(event);
-    };
     useEffect(function () {
       if (!isChipEnumeration && !(values !== null && values !== void 0 && values.length)) {
         return;
@@ -147,9 +140,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       disabled: disabled,
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
-      onClick: handleInputFocus,
-      className: className,
-      style: style
+      onClick: handleInputFocus
     }, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: id
@@ -190,7 +181,7 @@ export var textFieldRoot = function textFieldRoot(Root) {
       disabled: disabled,
       readOnly: !disabled && readOnly,
       onChange: handleChange,
-      onKeyDown: handleOnKeyDown
+      onKeyDown: handleInputKeydown
     })), labelInside && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId

package/styled-components/es/engines/common.js

@@ -13,10 +13,6 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React from 'react';
 import { _component } from './styled-components';
-//
-// Тип HTMLAttributesOmitOnChange требуется чтобы использовать компонент с кастомным пропсом onChange
-//
-
 export var getStaticVariants = function getStaticVariants(config) {
   if (!config.variations) {
     return [];

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_b2c/components/Checkbox/Checkbox.stories.tsx

@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
 const StoryDefault = (props: CheckboxProps) => {
     return (
         <>
+            <Checkbox {...props} />
             <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
             <Checkbox
                 name="item.name"

package/styled-components/es/examples/plasma_b2c/components/Radiobox/Radiobox.config.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { radioboxTokens } from '../../../../components/Radiobox';
 export var config = {
   defaults: {
     view: 'accent',
@@ -9,27 +10,27 @@ export var config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.5rem;--plasma-radiobox-content-top-offset:0.1rem;--plasma-radiobox-content-left-offset 0.5rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1.375rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.625rem;--plasma-radiobox-content-top-offset:0.25rem;--plasma-radiobox-content-left-offset 0.625rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-accent);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-positive);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-warning);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-negative);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], radioboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/plasma_web/components/Checkbox/Checkbox.stories.tsx

@@ -96,6 +96,7 @@ const getState = (values: Record<string, boolean | undefined>, value: string) =>
 const StoryDefault = (props: CheckboxProps) => {
     return (
         <>
+            <Checkbox {...props} />
             <Checkbox name="item.name" value="item.value" label="Label" description="Description" {...props} />
             <Checkbox
                 name="item.name"

package/styled-components/es/examples/plasma_web/components/Radiobox/Radiobox.config.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import { radioboxTokens } from '../../../../components/Radiobox';
 export var config = {
   defaults: {
     view: 'accent',
@@ -9,27 +10,27 @@ export var config = {
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.5rem;--plasma-radiobox-content-top-offset:0.1rem;--plasma-radiobox-content-left-offset 0.5rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-radiobox-margin:0 0 0.188rem 0.188rem;--plasma-radiobox-trigger-margin:0.188rem 0;--plasma-radiobox-trigger-size:1.375rem;--plasma-radiobox-trigger-border-radius 1.125rem;--plasma-radiobox-ellipse-size 0.625rem;--plasma-radiobox-content-top-offset:0.25rem;--plasma-radiobox-content-left-offset 0.625rem;--plasma-radiobox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-radiobox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-radiobox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-radiobox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-radiobox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-radiobox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-radiobox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-radiobox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-radiobox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-radiobox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-radiobox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-radiobox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0;", ":1rem;", ":1.125rem;", ":0.5rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-xs-font-family);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":1.375rem;", ":1.125rem;", ":0.625rem;", ":0.125rem;", ":0.625rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-s-font-family);", ":0.125rem;", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], radioboxTokens.margin, radioboxTokens.triggerMargin, radioboxTokens.triggerSize, radioboxTokens.triggerBorderRadius, radioboxTokens.ellipseSize, radioboxTokens.contentTopOffset, radioboxTokens.contentLeftOffset, radioboxTokens.labelFontFamily, radioboxTokens.labelFontSize, radioboxTokens.labelFontStyle, radioboxTokens.labelFontWeight, radioboxTokens.labelLetterSpacing, radioboxTokens.labelLineHeight, radioboxTokens.descriptionFontFamily, radioboxTokens.descriptionMarginTop, radioboxTokens.descriptionFontSize, radioboxTokens.descriptionFontStyle, radioboxTokens.descriptionFontWeight, radioboxTokens.descriptionLetterSpacing, radioboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-primary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-secondary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-tertiary);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-paragraph);--plasma-radiobox-ellipse-color:var(--inverse-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-accent);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-positive);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-warning);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-radiobox-fill-color:var(--text-negative);--plasma-radiobox-ellipse-color:var(--on-dark-text-primary);--plasma-radiobox-description-color:var(--text-secondary);--plasma-radiobox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], radioboxTokens.fillColor, radioboxTokens.ellipseColor, radioboxTokens.descriptionColor, radioboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], radioboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-radiobox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], radioboxTokens.focusColor)
     }
   }
 };

package/styled-components/es/examples/sds_engineer/components/Checkbox/Checkbox.config.js

@@ -1,35 +1,35 @@
 import { css } from 'styled-components';
+import { checkboxTokens } from '../../../../components/Checkbox';
 export var config = {
   defaults: {
-    view: 'accent',
-    focused: 'true'
+    view: 'accent'
   },
   variations: {
     /**
      * Размер контрола.
      */
     size: {
-      s: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:0.875rem;--plasma-checkbox-trigger-border-radius:0.25rem;--plasma-checkbox-content-top-offset:0.0625rem;--plasma-checkbox-content-left-offset:0.5625rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-s-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-xs-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-xs-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-xs-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-xs-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-xs-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-xs-line-height);"]),
-      m: /*#__PURE__*/css(["--plasma-checkbox-margin:0 0 0.188rem 0.188rem;--plasma-checkbox-trigger-margin:0.188rem 0;--plasma-checkbox-trigger-size:1.25rem;--plasma-checkbox-trigger-border-radius:0.375rem;--plasma-checkbox-content-top-offset:0.1875rem;--plasma-checkbox-content-left-offset:0.75rem;--plasma-checkbox-label-font-family:var(--plasma-typo-body-m-font-family);--plasma-checkbox-label-font-size:var(--plasma-typo-body-m-font-size);--plasma-checkbox-label-font-style:var(--plasma-typo-body-m-font-style);--plasma-checkbox-label-font-weight:var(--plasma-typo-body-m-font-weight);--plasma-checkbox-label-letter-spacing:var(--plasma-typo-body-m-letter-spacing);--plasma-checkbox-label-line-height:var(--plasma-typo-body-m-line-height);--plasma-checkbox-description-font-family:var(--plasma-typo-body-s-font-family);--plasma-checkbox-description-font-size:var(--plasma-typo-body-s-font-size);--plasma-checkbox-description-font-style:var(--plasma-typo-body-s-font-style);--plasma-checkbox-description-font-weight:var(--plasma-typo-body-s-font-weight);--plasma-checkbox-description-letter-spacing:var(--plasma-typo-body-s-letter-spacing);--plasma-checkbox-description-line-height:var(--plasma-typo-body-s-line-height);"])
+      s: /*#__PURE__*/css(["", ":0;", ":0.063rem;", ":0.875rem;", ":0.25rem;", ":0;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight),
+      m: /*#__PURE__*/css(["", ":0;", ":0.125rem;", ":1.25rem;", ":0.375rem;", ":0.125rem;", ":0.75rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], checkboxTokens.margin, checkboxTokens.triggerMargin, checkboxTokens.triggerSize, checkboxTokens.triggerBorderRadius, checkboxTokens.contentTopOffset, checkboxTokens.contentLeftOffset, checkboxTokens.labelFontFamily, checkboxTokens.labelFontSize, checkboxTokens.labelFontStyle, checkboxTokens.labelFontWeight, checkboxTokens.labelLetterSpacing, checkboxTokens.labelLineHeight, checkboxTokens.descriptionMarginTop, checkboxTokens.descriptionFontFamily, checkboxTokens.descriptionFontSize, checkboxTokens.descriptionFontStyle, checkboxTokens.descriptionFontWeight, checkboxTokens.descriptionLetterSpacing, checkboxTokens.descriptionLineHeight)
     },
     /**
      * Вид контрола.
      */
     view: {
-      "default": /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-primary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      secondary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-secondary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      tertiary: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-tertiary);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      paragraph: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-paragraph);--plasma-checkbox-icon-color:var(--inverse-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      accent: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-accent);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      positive: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-positive);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      warning: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-warning);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"]),
-      negative: /*#__PURE__*/css(["--plasma-checkbox-fill-color:var(--text-negative);--plasma-checkbox-icon-color:var(--on-dark-text-primary);--plasma-checkbox-description-color:var(--text-secondary);--plasma-checkbox-trigger-border-color:var(--text-secondary);"])
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      secondary: /*#__PURE__*/css(["", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      tertiary: /*#__PURE__*/css(["", ":var(--text-tertiary);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      paragraph: /*#__PURE__*/css(["", ":var(--text-paragraph);", ":var(--inverse-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      accent: /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      positive: /*#__PURE__*/css(["", ":var(--text-positive);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      warning: /*#__PURE__*/css(["", ":var(--text-warning);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor),
+      negative: /*#__PURE__*/css(["", ":var(--text-negative);", ":var(--on-dark-text-primary);", ":var(--text-secondary);", ":var(--text-secondary);"], checkboxTokens.fillColor, checkboxTokens.iconColor, checkboxTokens.descriptionColor, checkboxTokens.triggerBorderColor)
     },
     disabled: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-disabled-opacity:0.4;"])
+      "true": /*#__PURE__*/css(["", ":0.4;"], checkboxTokens.disabledOpacity)
     },
     focused: {
-      "true": /*#__PURE__*/css(["--plasma-checkbox-focus-color:var(--text-accent);"])
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);"], checkboxTokens.focusColor)
     }
   }
 };