@salutejs/plasma-new-hope 0.84.2-canary.1217.9226352649.0 → 0.85.0-canary.1213.9224571157.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (175) hide show
  1. package/cjs/components/Button/Button.css +9 -6
  2. package/cjs/components/Button/Button.js +16 -2
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +31 -10
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_1oz1dew.css +8 -0
  7. package/cjs/components/Button/Button.tokens.js +5 -0
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_p85v51.css → cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +1 -0
  21. package/cjs/components/Checkbox/Checkbox.styles.js.map +1 -1
  22. package/cjs/components/Drawer/Drawer.css +9 -6
  23. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  24. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
  26. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  27. package/cjs/components/IconButton/IconButton.css +10 -7
  28. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  29. package/cjs/components/IconButton/{IconButton.styles_1hknr37.css → IconButton.styles_7v8g0e.css} +1 -1
  30. package/cjs/components/Notification/Notification.css +9 -6
  31. package/cjs/components/Notification/NotificationsProvider.css +9 -6
  32. package/cjs/components/Pagination/Pagination.css +11 -8
  33. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  34. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  35. package/cjs/components/Radiobox/Radiobox.js.map +1 -1
  36. package/cjs/components/Select/Select.css +9 -6
  37. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  38. package/cjs/components/Toast/Toast.css +9 -6
  39. package/cjs/components/Toast/ToastController.css +9 -6
  40. package/cjs/index.css +12 -9
  41. package/es/components/Button/Button.css +9 -6
  42. package/es/components/Button/Button.js +17 -3
  43. package/es/components/Button/Button.js.map +1 -1
  44. package/es/components/Button/Button.styles.js +29 -11
  45. package/es/components/Button/Button.styles.js.map +1 -1
  46. package/es/components/Button/Button.styles_1oz1dew.css +8 -0
  47. package/es/components/Button/Button.tokens.js +5 -0
  48. package/es/components/Button/Button.tokens.js.map +1 -1
  49. package/es/components/Button/variations/_stretching/base.js +1 -1
  50. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  51. package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  52. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  53. package/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
  54. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  55. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  56. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  57. package/{cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css → es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css} +1 -1
  58. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  59. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  60. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +1 -0
  61. package/es/components/Checkbox/Checkbox.styles.js.map +1 -1
  62. package/es/components/Drawer/Drawer.css +9 -6
  63. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  64. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  65. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
  66. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  67. package/es/components/IconButton/IconButton.css +10 -7
  68. package/es/components/IconButton/IconButton.styles.js +1 -1
  69. package/es/components/IconButton/{IconButton.styles_1hknr37.css → IconButton.styles_7v8g0e.css} +1 -1
  70. package/es/components/Notification/Notification.css +9 -6
  71. package/es/components/Notification/NotificationsProvider.css +9 -6
  72. package/es/components/Pagination/Pagination.css +11 -8
  73. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  74. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  75. package/es/components/Radiobox/Radiobox.js.map +1 -1
  76. package/es/components/Select/Select.css +9 -6
  77. package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  78. package/es/components/Toast/Toast.css +9 -6
  79. package/es/components/Toast/ToastController.css +9 -6
  80. package/es/index.css +12 -9
  81. package/package.json +2 -2
  82. package/styled-components/cjs/components/Button/Button.js +16 -2
  83. package/styled-components/cjs/components/Button/Button.styles.js +20 -12
  84. package/styled-components/cjs/components/Button/Button.template-doc.mdx +47 -0
  85. package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
  86. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  87. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
  88. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +2 -1
  89. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  90. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
  91. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  92. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  93. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  94. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  95. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  96. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  97. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  98. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  99. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  100. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  101. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  102. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  103. package/styled-components/es/components/Button/Button.js +17 -3
  104. package/styled-components/es/components/Button/Button.styles.js +19 -11
  105. package/styled-components/es/components/Button/Button.template-doc.mdx +47 -0
  106. package/styled-components/es/components/Button/Button.tokens.js +5 -0
  107. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  108. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +1 -0
  109. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +3 -2
  110. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  111. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +4 -2
  112. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  113. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  114. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  115. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  116. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  117. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  118. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  119. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  120. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  121. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  122. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  123. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  124. package/types/components/Button/Button.d.ts.map +1 -1
  125. package/types/components/Button/Button.styles.d.ts +5 -1
  126. package/types/components/Button/Button.styles.d.ts.map +1 -1
  127. package/types/components/Button/Button.tokens.d.ts +5 -0
  128. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  129. package/types/components/Button/Button.types.d.ts +28 -4
  130. package/types/components/Button/Button.types.d.ts.map +1 -1
  131. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +1 -0
  132. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  133. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  134. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  135. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  136. package/types/components/Notification/Notification.styles.d.ts +43 -1
  137. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  138. package/types/components/Pagination/Pagination.styles.d.ts +86 -2
  139. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  140. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +43 -1
  141. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  142. package/types/components/Radiobox/Radiobox.d.ts +3 -3
  143. package/types/components/Radiobox/Radiobox.d.ts.map +1 -1
  144. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +43 -1
  145. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  146. package/types/components/Toast/Toast.styles.d.ts +43 -1
  147. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  148. package/types/components/Toast/utils.d.ts +43 -1
  149. package/types/components/Toast/utils.d.ts.map +1 -1
  150. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  151. package/types/examples/plasma_b2c/components/Button/Button.d.ts +43 -1
  152. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  153. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  154. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +43 -1
  155. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  156. package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts +1 -1
  157. package/types/examples/plasma_b2c/components/Radiobox/Radiobox.d.ts.map +1 -1
  158. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  159. package/types/examples/plasma_web/components/Button/Button.d.ts +43 -1
  160. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  161. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  162. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +43 -1
  163. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  164. package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts +1 -1
  165. package/types/examples/plasma_web/components/Radiobox/Radiobox.d.ts.map +1 -1
  166. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  167. package/types/examples/sds_engineer/components/Button/Button.d.ts +43 -1
  168. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  169. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  170. package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts +1 -1
  171. package/types/examples/sds_engineer/components/Radiobox/Radiobox.d.ts.map +1 -1
  172. package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
  173. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +0 -1
  174. package/es/components/Button/Button.styles_uqvh6u.css +0 -5
  175. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +0 -1
@@ -10,28 +10,36 @@ import { classes, tokens } from './Button.tokens';
10
10
  // issue #823
11
11
  var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
12
12
  var Spinner = /*#__PURE__*/component(mergedConfig);
13
- export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
14
-
15
- // TODO: PLASMA-2164
16
- // WHY do we need applyEllipsis ??
17
- // Если внутри кнопки тескт и на нее решили повесить square пропс
18
13
  export var ButtonText = /*#__PURE__*/styled.span.withConfig({
19
14
  componentId: "plasma-new-hope__sc-9d9bqj-0"
20
- })([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/applyEllipsis());
15
+ })(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
16
+ export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
17
+ componentId: "plasma-new-hope__sc-9d9bqj-1"
18
+ })(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
21
19
 
22
20
  // TODO: #720
23
21
  export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
24
- componentId: "plasma-new-hope__sc-9d9bqj-1"
25
- })(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
22
+ componentId: "plasma-new-hope__sc-9d9bqj-2"
23
+ })(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
26
24
  var isLoading = _ref.isLoading;
27
25
  return isLoading ? '0' : '1';
26
+ }, function (_ref2) {
27
+ var contentPlacing = _ref2.contentPlacing;
28
+ return contentPlacing;
28
29
  });
29
30
  export var Loader = /*#__PURE__*/styled.div.withConfig({
30
- componentId: "plasma-new-hope__sc-9d9bqj-2"
31
+ componentId: "plasma-new-hope__sc-9d9bqj-3"
31
32
  })(["position:absolute;"]);
32
33
  export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
33
- componentId: "plasma-new-hope__sc-9d9bqj-3"
34
+ componentId: "plasma-new-hope__sc-9d9bqj-4"
34
35
  })(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
36
+ export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
37
+ componentId: "plasma-new-hope__sc-9d9bqj-5"
38
+ })(["display:flex;margin:var(", ");"], tokens.buttonLeftContentMargin);
39
+ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
40
+ componentId: "plasma-new-hope__sc-9d9bqj-6"
41
+ })(["display:flex;margin:var(", ");"], tokens.buttonRightContentMargin);
42
+ export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
35
43
 
36
44
  // INFO: Для возможности переиспользования стилей в других компонентах
37
45
  export var baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat(addFocus({
@@ -39,4 +47,4 @@ export var baseContent = /*#__PURE__*/"\n position: relative;\n display: i
39
47
  outlineSize: 'var(--plasma_private-btn-outline-size)',
40
48
  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
41
49
  outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
42
- }), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: auto;\n }\n");
50
+ }), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: fit-content;\n }\n");
@@ -12,6 +12,11 @@ import { PropsTable, Description } from '@site/src/components';
12
12
  <Description name="Button" />
13
13
  <PropsTable name="Button" />
14
14
 
15
+ :::caution Взаимоисключающие свойства
16
+ Свойство `value` - это значение кнопки. Оно отображается справа от основного текста.<br/>
17
+ `value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя.
18
+ :::
19
+
15
20
  ## Использование
16
21
  Компонент `Button` может содержать текст, который указывается в
17
22
  свойстве `text`, или любой контент напрямую через `children`.
@@ -68,6 +73,48 @@ export function App() {
68
73
  }
69
74
  ```
70
75
 
76
+ ### Ширина кнопки
77
+ Ширина кнопки регулируется с помощью свойства `stretching`.
78
+ Возможные значения свойства `contentPlacing`:
79
+ + `auto` – ширина подстраивается под контент;
80
+ + `filled` – кнопка растягивается на всю доступную ширину;
81
+ + `fixed` – кнопка фиксированной ширины.
82
+
83
+ ```tsx live
84
+ import React from 'react';
85
+ import { Button } from '@salutejs/{{package}}';
86
+
87
+ export function App() {
88
+ return (
89
+ <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
90
+ <Button text="Button" stretching="fixed" />
91
+ <Button text="Button" stretching="auto" />
92
+ <Button text="Button" stretching="filled" />
93
+ </div>
94
+ );
95
+ }
96
+ ```
97
+
98
+ ### Позиционирование контента внутри
99
+ Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
100
+ Возможные значения свойства `contentPlacing`:
101
+ + `default` – контент центрируется;
102
+ + `relaxed` – контент распологается по краям.
103
+
104
+ ```tsx live
105
+ import React from 'react';
106
+ import { Button } from '@salutejs/{{package}}';
107
+
108
+ export function App() {
109
+ return (
110
+ <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
111
+ <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
112
+ <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
113
+ </div>
114
+ );
115
+ }
116
+ ```
117
+
71
118
  ### Вид кнопки
72
119
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
73
120
  + `"primary"` – основная;
@@ -3,11 +3,13 @@ export var classes = {
3
3
  autoStretching: 'button-stretching-auto',
4
4
  filledStretching: 'button-stretching-filled',
5
5
  fixedStretching: 'button-stretching-fixed',
6
+ contentRelaxed: 'button-content-relaxed',
6
7
  buttonSquare: 'button-square',
7
8
  buttonItem: 'button-item'
8
9
  };
9
10
  export var tokens = {
10
11
  buttonColor: '--plasma-button-color',
12
+ buttonValueColor: '--plasma-button-value-color',
11
13
  buttonBackgroundColor: '--plasma-button-background-color',
12
14
  buttonColorHover: '--plasma-button-color-hover',
13
15
  buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -26,6 +28,9 @@ export var tokens = {
26
28
  buttonFontWeight: '--plasma-button-font-weight',
27
29
  buttonLetterSpacing: '--plasma-button-letter-spacing',
28
30
  buttonLineHeight: '--plasma-button-line-height',
31
+ buttonLeftContentMargin: '--plasma-button-left-content-margin',
32
+ buttonRightContentMargin: '--plasma-button-right-content-margin',
33
+ buttonValueMargin: '--plasma-button-value-margin',
29
34
  buttonDisabledOpacity: '--plasma-button-disabled-opacity',
30
35
  buttonFocusColor: '--plasma-button-focus-color',
31
36
  buttonSpinnerColor: '--plasma-button-spinner-color',
@@ -1,3 +1,3 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../Button.tokens';
3
- export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
3
+ export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
@@ -14,6 +14,7 @@ export var classes = {
14
14
  export var tokens = {
15
15
  buttonGroupOrientation: '--plasma-button-group-orientation',
16
16
  buttonColor: '--plasma-button-group-item-color',
17
+ buttonValueColor: '--plasma-button-group-item-value-color',
17
18
  buttonBackgroundColor: '--plasma-button-group-item-background-color',
18
19
  buttonColorHover: '--plasma-button-group-item-color-hover',
19
20
  buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
@@ -1,3 +1,4 @@
1
1
  import { css } from 'styled-components';
2
- import { tokens } from '../../ButtonGroup.tokens';
3
- export var base = /*#__PURE__*/css(["flex-direction:var(", ");"], tokens.buttonGroupOrientation);
2
+ import { classes, tokens } from '../../ButtonGroup.tokens';
3
+ import { buttonClasses } from '../../../Button';
4
+ export var base = /*#__PURE__*/css(["flex-direction:var(", ");&.", " .", "{width:auto;}"], tokens.buttonGroupOrientation, classes.vertical, buttonClasses.buttonItem);
@@ -1,4 +1,4 @@
1
1
  import { css } from 'styled-components';
2
2
  import { classes, tokens } from '../../ButtonGroup.tokens';
3
3
  import { buttonClasses, buttonTokens } from '../../../Button';
4
- export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
4
+ export var base = /*#__PURE__*/css(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], classes.buttonGroupOverrideStyles, buttonClasses.buttonItem, buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonValueColor, tokens.buttonValueColor, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive);
@@ -1,4 +1,4 @@
1
- var _excluded = ["arrow", "iconSize"];
1
+ var _excluded = ["arrow", "iconSize", "value"];
2
2
  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); }
3
3
  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; }
4
4
  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; }
@@ -22,6 +22,7 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
22
22
  var arrow = props.arrow,
23
23
  _props$iconSize = props.iconSize,
24
24
  iconSize = _props$iconSize === void 0 ? 's' : _props$iconSize,
25
+ value = props.value,
25
26
  rest = _objectWithoutProperties(props, _excluded);
26
27
  var minimizeClass = arrow === 'minimize' ? classes.headerArrowIconMinimize : undefined;
27
28
  return /*#__PURE__*/React.createElement(Root, {
@@ -30,7 +31,8 @@ export var headerArrowRoot = function headerArrowRoot(Root) {
30
31
  view: "clear",
31
32
  size: "s",
32
33
  tabIndex: -1,
33
- className: classes.headerArrow
34
+ className: classes.headerArrow,
35
+ value: String(value)
34
36
  }, rest), /*#__PURE__*/React.createElement(IconChevronLeft, _extends({
35
37
  size: iconSize,
36
38
  sizeCustomProperty: tokens.headerArrowIconSize,
@@ -8,27 +8,27 @@ export var config = {
8
8
  },
9
9
  variations: {
10
10
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
- black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
- white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
11
+ "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
+ accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
+ positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
+ warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
+ negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
+ black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
+ white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
21
21
  },
22
22
  size: {
23
- l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
24
- lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
25
- m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
26
- mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
27
- s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
28
- sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
29
- xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
30
- xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
31
- xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor)
23
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
24
+ lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
25
+ m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
26
+ mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
27
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
28
+ sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
29
+ xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
30
+ xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
31
+ xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
32
32
  },
33
33
  disabled: {
34
34
  "true": /*#__PURE__*/css(["", ":0.4;"], buttonTokens.buttonDisabledOpacity)
@@ -4,57 +4,103 @@ import type { StoryObj, Meta } from '@storybook/react';
4
4
  import { disableProps } from '@salutejs/plasma-sb-utils';
5
5
 
6
6
  import { IconMic } from '../../../../components/_Icon';
7
- import { buttonConfig } from '../../../../components/Button';
8
- import { mergeConfig } from '../../../../engines';
9
- import { WithTheme, argTypesFromConfig } from '../../../_helpers';
7
+ import { WithTheme } from '../../../_helpers';
10
8
 
11
- import { config } from './Button.config';
12
9
  import { Button } from './Button';
13
10
 
11
+ const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
12
+ const sizes = ['l', 'm', 's', 'xs', 'xxs'];
13
+ const stretchingValues = ['auto', 'filled', 'fixed'];
14
+ const pinValues = [
15
+ '',
16
+ 'square-square',
17
+ 'square-clear',
18
+ 'clear-square',
19
+ 'clear-clear',
20
+ 'clear-circle',
21
+ 'circle-clear',
22
+ 'circle-circle',
23
+ ];
24
+ const contentPlacinValues = ['default', 'relaxed'];
25
+
14
26
  const meta: Meta<typeof Button> = {
15
27
  title: 'plasma_b2c/Button',
16
28
  decorators: [WithTheme],
17
29
  component: Button,
18
30
  args: {
19
- text: 'Hello',
20
31
  view: 'default',
21
32
  size: 'm',
33
+ contentPlacing: 'default',
34
+ stretching: 'auto',
35
+ text: 'Hello',
36
+ value: 'Value',
22
37
  disabled: false,
23
38
  focused: true,
24
39
  square: false,
25
- stretching: 'auto',
26
40
  isLoading: false,
27
41
  },
28
42
  argTypes: {
29
- ...argTypesFromConfig(mergeConfig(buttonConfig, config)),
30
- pin: {
31
- options: [
32
- 'square-square',
33
- 'square-clear',
34
- 'clear-square',
35
- 'clear-clear',
36
- 'clear-circle',
37
- 'circle-clear',
38
- 'circle-circle',
39
- '',
40
- ],
43
+ view: {
44
+ options: views,
45
+ control: {
46
+ type: 'select',
47
+ },
48
+ },
49
+ size: {
50
+ options: sizes,
51
+ control: {
52
+ type: 'select',
53
+ },
54
+ },
55
+ contentPlacing: {
56
+ options: contentPlacinValues,
41
57
  control: {
42
58
  type: 'select',
43
59
  },
44
- table: { defaultValue: { summary: 'bottom' } },
45
60
  },
46
61
  stretching: {
47
- options: ['auto', 'filled', 'fixed'],
62
+ options: stretchingValues,
48
63
  control: {
49
64
  type: 'select',
50
65
  },
51
66
  },
67
+ pin: {
68
+ options: pinValues,
69
+ control: {
70
+ type: 'select',
71
+ },
72
+ table: { defaultValue: { summary: 'bottom' } },
73
+ },
52
74
  },
53
75
  };
54
76
 
55
77
  export default meta;
56
78
 
57
- export const Default: StoryObj<ComponentProps<typeof Button>> = {};
79
+ type StoryPropsDefault = ComponentProps<typeof Button> & {
80
+ enableContentLeft: boolean;
81
+ enableContentRight: boolean;
82
+ };
83
+
84
+ const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
85
+ const iconSize = size === 'xs' ? 'xs' : 's';
86
+
87
+ return (
88
+ <Button
89
+ contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
90
+ contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
91
+ size={size}
92
+ {...rest}
93
+ />
94
+ );
95
+ };
96
+
97
+ export const Default: StoryObj<StoryPropsDefault> = {
98
+ args: {
99
+ enableContentLeft: false,
100
+ enableContentRight: false,
101
+ },
102
+ render: (args) => <StoryDefault {...args} />,
103
+ };
58
104
 
59
105
  export const AccessibilityWithChildren: StoryObj<ComponentProps<typeof Button>> = {
60
106
  argTypes: { ...disableProps(['text']) },
@@ -7,16 +7,16 @@ export var config = {
7
7
  },
8
8
  variations: {
9
9
  view: {
10
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
11
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
12
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
13
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
14
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
15
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
16
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
17
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
18
- black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
19
- white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
10
+ "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
11
+ accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
12
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
13
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
14
+ positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
15
+ warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
16
+ negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
17
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
18
+ black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive),
19
+ white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonGroupTokens.buttonColor, buttonGroupTokens.buttonValueColor, buttonGroupTokens.buttonBackgroundColor, buttonGroupTokens.buttonColorHover, buttonGroupTokens.buttonBackgroundColorHover, buttonGroupTokens.buttonColorActive, buttonGroupTokens.buttonBackgroundColorActive)
20
20
  },
21
21
  size: {
22
22
  l: /*#__PURE__*/css(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], buttonGroupTokens.buttonDefaultRadius, buttonGroupTokens.buttonSegmentedRadius, buttonGroupTokens.buttonSideRadius, buttonGroupTokens.buttonHeight, buttonGroupTokens.buttonPadding, buttonGroupTokens.buttonFontFamily, buttonGroupTokens.buttonFontSize, buttonGroupTokens.buttonFontStyle, buttonGroupTokens.buttonFontWeight, buttonGroupTokens.buttonLetterSpacing, buttonGroupTokens.buttonLineHeight),
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
11
11
  type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
12
12
  type Story = StoryObj<StoryProps>;
13
13
 
14
- const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
14
+ const views = ['accent', 'default', 'secondary', 'positive', 'warning', 'negative', 'clear'];
15
15
  const sizes = ['l', 'm', 's', 'xs', 'xxs'];
16
16
  const orientationValues = ['horizontal', 'vertical'];
17
17
  const gapValues = ['none', 'dense', 'wide'];
@@ -8,27 +8,27 @@ export var config = {
8
8
  },
9
9
  variations: {
10
10
  view: {
11
- "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
- accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
- secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
- clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
- positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
- warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
- negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
- black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
- white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
11
+ "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--inverse-text-secondary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
12
+ accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
13
+ secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
14
+ clear: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
15
+ positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
16
+ warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
17
+ negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
18
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
19
+ black: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-text-secondary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive),
20
+ white: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-text-secondary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], buttonTokens.buttonColor, buttonTokens.buttonValueColor, buttonTokens.buttonBackgroundColor, buttonTokens.buttonColorHover, buttonTokens.buttonBackgroundColorHover, buttonTokens.buttonColorActive, buttonTokens.buttonBackgroundColorActive)
21
21
  },
22
22
  size: {
23
- l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
24
- lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
25
- m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
26
- mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
27
- s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
28
- sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
29
- xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
30
- xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor),
31
- xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor)
23
+ l: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":1.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 -0.125rem;", ":0 -0.125rem 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
24
+ lr: /*#__PURE__*/css(["", ":3.5rem;", ":12.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":1.375rem;", ":inherit;", ":0 0.5rem 0 0;", ":0 0 0 0.5rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
25
+ m: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 -0.125rem;", ":0 -0.125rem 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
26
+ mr: /*#__PURE__*/css(["", ":3rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":1.375rem;", ":inherit;", ":0 0.375rem 0 0;", ":0 0 0 0.375rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
27
+ s: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":1rem;", ":0.625rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
28
+ sr: /*#__PURE__*/css(["", ":2.5rem;", ":11.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":1.375rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
29
+ xs: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":0.75rem;", ":0.5rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
30
+ xsr: /*#__PURE__*/css(["", ":2rem;", ":10rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":1rem;", ":inherit;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin),
31
+ xxs: /*#__PURE__*/css(["", ":1.5rem;", ":8.75rem;", ":0.625rem;", ":0.375rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.75rem;", ":inherit;", ":0 0.25rem 0 -0.125rem;", ":0 -0.125rem 0 0.25rem;", ":0 0 0 0.25rem;"], buttonTokens.buttonHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, buttonTokens.buttonRadius, buttonTokens.buttonFontFamily, buttonTokens.buttonFontSize, buttonTokens.buttonFontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, buttonTokens.buttonLineHeight, buttonTokens.buttonSpinnerSize, buttonTokens.buttonSpinnerColor, buttonTokens.buttonLeftContentMargin, buttonTokens.buttonRightContentMargin, buttonTokens.buttonValueMargin)
32
32
  },
33
33
  disabled: {
34
34
  "true": /*#__PURE__*/css(["", ":0.4;"], buttonTokens.buttonDisabledOpacity)