@salutejs/sdds-scan 0.353.0-next-sbcom.0 → 0.353.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/css/cjs/components/Accordion/Accordion.config.js +1 -1
  2. package/dist/css/cjs/components/Accordion/Accordion.config.js.map +1 -1
  3. package/dist/css/cjs/components/Accordion/{Accordion.config_14040du.css → Accordion.config_1jtv6cs.css} +1 -1
  4. package/dist/css/cjs/components/Accordion/Accordion.css +6 -6
  5. package/dist/css/cjs/components/Autocomplete/Autocomplete.config.js +1 -1
  6. package/dist/css/cjs/components/Autocomplete/Autocomplete.config.js.map +1 -1
  7. package/dist/css/cjs/components/Autocomplete/{Autocomplete.config_eb4ip9.css → Autocomplete.config_o19v9l.css} +2 -2
  8. package/dist/css/cjs/components/Autocomplete/Autocomplete.css +12 -12
  9. package/dist/css/cjs/components/Badge/Badge.clear.config.js +37 -0
  10. package/dist/css/cjs/components/Badge/Badge.clear.config.js.map +1 -0
  11. package/dist/css/cjs/components/Badge/Badge.clear.config_1smo55y.css +13 -0
  12. package/dist/css/cjs/components/Badge/Badge.config.js +1 -1
  13. package/dist/css/cjs/components/Badge/Badge.config.js.map +1 -1
  14. package/dist/css/cjs/components/Badge/{Badge.config_j8iuvb.css → Badge.config_1pq0w6n.css} +1 -1
  15. package/dist/css/cjs/components/Badge/Badge.css +43 -14
  16. package/dist/css/cjs/components/Badge/Badge.js +15 -1
  17. package/dist/css/cjs/components/Badge/Badge.js.map +1 -1
  18. package/dist/css/cjs/components/Badge/Badge.transparent.config.js +40 -0
  19. package/dist/css/cjs/components/Badge/Badge.transparent.config.js.map +1 -0
  20. package/dist/css/cjs/components/Badge/Badge.transparent.config_1i6yuih.css +14 -0
  21. package/dist/css/cjs/components/Combobox/Combobox.config.js +1 -1
  22. package/dist/css/cjs/components/Combobox/Combobox.config.js.map +1 -1
  23. package/dist/css/{es/components/Combobox/Combobox.config_13f3b8v.css → cjs/components/Combobox/Combobox.config_f0xl7j.css} +2 -2
  24. package/dist/css/cjs/components/Combobox/Combobox.css +15 -15
  25. package/dist/css/cjs/components/LinkButton/LinkButton.config.js +1 -1
  26. package/dist/css/cjs/components/LinkButton/LinkButton.config.js.map +1 -1
  27. package/dist/css/cjs/components/LinkButton/LinkButton.config_1bq7pk7.css +10 -0
  28. package/dist/css/cjs/components/LinkButton/LinkButton.css +10 -10
  29. package/dist/css/cjs/components/Select/Select.config.js +1 -1
  30. package/dist/css/cjs/components/Select/Select.config.js.map +1 -1
  31. package/dist/css/cjs/components/Select/{Select.config_13gaguy.css → Select.config_178y107.css} +2 -2
  32. package/dist/css/cjs/components/Select/Select.css +21 -21
  33. package/dist/css/cjs/components/Slider/Slider.config.js +1 -1
  34. package/dist/css/cjs/components/Slider/Slider.config.js.map +1 -1
  35. package/dist/css/cjs/components/Slider/{Slider.config_1wzmcut.css → Slider.config_lxv4o0.css} +3 -3
  36. package/dist/css/cjs/components/Slider/Slider.css +10 -10
  37. package/dist/css/cjs/components/TextField/TextField.config.js +1 -1
  38. package/dist/css/cjs/components/TextField/TextField.config.js.map +1 -1
  39. package/dist/css/{es/components/TextField/TextField.config_s6coqm.css → cjs/components/TextField/TextField.config_1o8qdnt.css} +2 -2
  40. package/dist/css/cjs/components/TextField/TextField.css +18 -18
  41. package/dist/css/cjs/components/TextFieldGroup/TextFieldGroup.config.js +1 -1
  42. package/dist/css/cjs/components/TextFieldGroup/TextFieldGroup.config.js.map +1 -1
  43. package/dist/css/{es/components/TextFieldGroup/TextFieldGroup.config_1pl0lc1.css → cjs/components/TextFieldGroup/TextFieldGroup.config_103fro3.css} +2 -2
  44. package/dist/css/cjs/components/TextFieldGroup/TextFieldGroup.css +7 -7
  45. package/dist/css/cjs/index.css +146 -117
  46. package/dist/css/es/components/Accordion/Accordion.config.js +1 -1
  47. package/dist/css/es/components/Accordion/Accordion.config.js.map +1 -1
  48. package/dist/css/es/components/Accordion/{Accordion.config_14040du.css → Accordion.config_1jtv6cs.css} +1 -1
  49. package/dist/css/es/components/Accordion/Accordion.css +6 -6
  50. package/dist/css/es/components/Autocomplete/Autocomplete.config.js +1 -1
  51. package/dist/css/es/components/Autocomplete/Autocomplete.config.js.map +1 -1
  52. package/dist/css/es/components/Autocomplete/{Autocomplete.config_eb4ip9.css → Autocomplete.config_o19v9l.css} +2 -2
  53. package/dist/css/es/components/Autocomplete/Autocomplete.css +12 -12
  54. package/dist/css/es/components/Badge/Badge.clear.config.js +33 -0
  55. package/dist/css/es/components/Badge/Badge.clear.config.js.map +1 -0
  56. package/dist/css/es/components/Badge/Badge.clear.config_1smo55y.css +13 -0
  57. package/dist/css/es/components/Badge/Badge.config.js +1 -1
  58. package/dist/css/es/components/Badge/Badge.config.js.map +1 -1
  59. package/dist/css/es/components/Badge/{Badge.config_j8iuvb.css → Badge.config_1pq0w6n.css} +1 -1
  60. package/dist/css/es/components/Badge/Badge.css +43 -14
  61. package/dist/css/es/components/Badge/Badge.js +16 -5
  62. package/dist/css/es/components/Badge/Badge.js.map +1 -1
  63. package/dist/css/es/components/Badge/Badge.transparent.config.js +36 -0
  64. package/dist/css/es/components/Badge/Badge.transparent.config.js.map +1 -0
  65. package/dist/css/es/components/Badge/Badge.transparent.config_1i6yuih.css +14 -0
  66. package/dist/css/es/components/Combobox/Combobox.config.js +1 -1
  67. package/dist/css/es/components/Combobox/Combobox.config.js.map +1 -1
  68. package/dist/css/{cjs/components/Combobox/Combobox.config_13f3b8v.css → es/components/Combobox/Combobox.config_f0xl7j.css} +2 -2
  69. package/dist/css/es/components/Combobox/Combobox.css +15 -15
  70. package/dist/css/es/components/LinkButton/LinkButton.config.js +1 -1
  71. package/dist/css/es/components/LinkButton/LinkButton.config.js.map +1 -1
  72. package/dist/css/es/components/LinkButton/LinkButton.config_1bq7pk7.css +10 -0
  73. package/dist/css/es/components/LinkButton/LinkButton.css +10 -10
  74. package/dist/css/es/components/Select/Select.config.js +1 -1
  75. package/dist/css/es/components/Select/Select.config.js.map +1 -1
  76. package/dist/css/es/components/Select/{Select.config_13gaguy.css → Select.config_178y107.css} +2 -2
  77. package/dist/css/es/components/Select/Select.css +21 -21
  78. package/dist/css/es/components/Slider/Slider.config.js +1 -1
  79. package/dist/css/es/components/Slider/Slider.config.js.map +1 -1
  80. package/dist/css/es/components/Slider/{Slider.config_1wzmcut.css → Slider.config_lxv4o0.css} +3 -3
  81. package/dist/css/es/components/Slider/Slider.css +10 -10
  82. package/dist/css/es/components/TextField/TextField.config.js +1 -1
  83. package/dist/css/es/components/TextField/TextField.config.js.map +1 -1
  84. package/dist/css/{cjs/components/TextField/TextField.config_s6coqm.css → es/components/TextField/TextField.config_1o8qdnt.css} +2 -2
  85. package/dist/css/es/components/TextField/TextField.css +18 -18
  86. package/dist/css/es/components/TextFieldGroup/TextFieldGroup.config.js +1 -1
  87. package/dist/css/es/components/TextFieldGroup/TextFieldGroup.config.js.map +1 -1
  88. package/dist/css/{cjs/components/TextFieldGroup/TextFieldGroup.config_1pl0lc1.css → es/components/TextFieldGroup/TextFieldGroup.config_103fro3.css} +2 -2
  89. package/dist/css/es/components/TextFieldGroup/TextFieldGroup.css +7 -7
  90. package/dist/css/es/index.css +146 -117
  91. package/dist/styled-components/cjs/components/Accordion/Accordion.config.js +1 -1
  92. package/dist/styled-components/cjs/components/Autocomplete/Autocomplete.config.js +2 -2
  93. package/dist/styled-components/cjs/components/Badge/Badge.clear.config.js +65 -0
  94. package/dist/styled-components/cjs/components/Badge/Badge.config.common.js +107 -0
  95. package/dist/styled-components/cjs/components/Badge/Badge.config.js +6 -69
  96. package/dist/styled-components/cjs/components/Badge/Badge.js +29 -4
  97. package/dist/styled-components/cjs/components/Badge/Badge.transparent.config.js +75 -0
  98. package/dist/styled-components/cjs/components/Combobox/Combobox.config.js +2 -2
  99. package/dist/styled-components/cjs/components/LinkButton/LinkButton.config.js +12 -18
  100. package/dist/styled-components/cjs/components/Scrollbar/Scrollbar.config.js +3 -1
  101. package/dist/styled-components/cjs/components/Select/Select.config.js +2 -2
  102. package/dist/styled-components/cjs/components/Slider/Slider.config.js +0 -3
  103. package/dist/styled-components/cjs/components/TextField/TextField.config.js +2 -2
  104. package/dist/styled-components/cjs/components/TextFieldGroup/TextFieldGroup.config.js +2 -2
  105. package/dist/styled-components/es/components/Accordion/Accordion.config.js +1 -1
  106. package/dist/styled-components/es/components/Autocomplete/Autocomplete.config.js +2 -2
  107. package/dist/styled-components/es/components/Badge/Badge.clear.config.js +55 -0
  108. package/dist/styled-components/es/components/Badge/Badge.config.common.js +80 -0
  109. package/dist/styled-components/es/components/Badge/Badge.config.js +6 -69
  110. package/dist/styled-components/es/components/Badge/Badge.js +13 -2
  111. package/dist/styled-components/es/components/Badge/Badge.transparent.config.js +65 -0
  112. package/dist/styled-components/es/components/Combobox/Combobox.config.js +2 -2
  113. package/dist/styled-components/es/components/LinkButton/LinkButton.config.js +12 -18
  114. package/dist/styled-components/es/components/Scrollbar/Scrollbar.config.js +3 -1
  115. package/dist/styled-components/es/components/Select/Select.config.js +2 -2
  116. package/dist/styled-components/es/components/Slider/Slider.config.js +0 -3
  117. package/dist/styled-components/es/components/TextField/TextField.config.js +2 -2
  118. package/dist/styled-components/es/components/TextFieldGroup/TextFieldGroup.config.js +2 -2
  119. package/package.json +8 -8
  120. package/types/components/Attach/Attach.d.ts +32 -16
  121. package/types/components/Autocomplete/Autocomplete.d.ts +8 -8
  122. package/types/components/Avatar/Avatar.d.ts +8 -0
  123. package/types/components/Badge/Badge.clear.config.d.ts +29 -0
  124. package/types/components/Badge/Badge.config.common.d.ts +5 -0
  125. package/types/components/Badge/Badge.d.ts +327 -15
  126. package/types/components/Badge/Badge.transparent.config.d.ts +32 -0
  127. package/types/components/CodeInput/CodeInput.d.ts +1 -1
  128. package/types/components/DatePicker/DatePicker.d.ts +5 -1
  129. package/types/components/Dropdown/Dropdown.d.ts +2 -2
  130. package/types/components/Range/Range.d.ts +372 -0
  131. package/types/components/Scrollbar/Scrollbar.config.d.ts +2 -0
  132. package/types/components/TextArea/TextArea.d.ts +8 -8
  133. package/types/components/TextField/TextField.d.ts +8 -8
  134. package/types/components/TimePicker/TimePicker.d.ts +8 -2
  135. package/dist/css/cjs/components/LinkButton/LinkButton.config_eybdtc.css +0 -10
  136. package/dist/css/es/components/LinkButton/LinkButton.config_eybdtc.css +0 -10
@@ -0,0 +1,55 @@
1
+ import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
2
+ import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
3
+ export const config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'm'
7
+ },
8
+ variations: {
9
+ view: {
10
+ default: css`
11
+ ${badgeTokens.color}: var(--text-primary);
12
+ `,
13
+ accent: css`
14
+ ${badgeTokens.color}: var(--text-accent);
15
+ `,
16
+ positive: css`
17
+ ${badgeTokens.color}: var(--text-positive);
18
+ `,
19
+ warning: css`
20
+ ${badgeTokens.color}: var(--text-warning);
21
+ `,
22
+ negative: css`
23
+ ${badgeTokens.color}: var(--text-negative);
24
+ `,
25
+ dark: css`
26
+ ${badgeTokens.color}: var(--on-light-text-primary);
27
+ `,
28
+ light: css`
29
+ ${badgeTokens.color}: var(--on-dark-text-primary);
30
+ `
31
+ },
32
+ size: {
33
+ l: css`
34
+ ${sizeL}
35
+ `,
36
+ m: css`
37
+ ${sizeM}
38
+ `,
39
+ s: css`
40
+ ${sizeS}
41
+ `,
42
+ xs: css`
43
+ ${sizeXS}
44
+ `
45
+ },
46
+ pilled: {
47
+ true: css`
48
+ ${pilled}
49
+ `
50
+ },
51
+ truncate: {
52
+ true: css``
53
+ }
54
+ }
55
+ };
@@ -0,0 +1,80 @@
1
+ import { badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
2
+ export const sizeL = `
3
+ ${badgeTokens.borderRadius}: 0.5rem;
4
+ ${badgeTokens.height}: 1.75rem;
5
+ ${badgeTokens.padding}: 0 0.6875rem;
6
+ ${badgeTokens.paddingIconOnly}: 0 0.375rem;
7
+
8
+ ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
9
+ ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
10
+ ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
11
+ ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
12
+ ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
13
+ ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
14
+
15
+ ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
16
+ ${badgeTokens.leftContentMarginRight}: 0.25rem;
17
+
18
+ ${badgeTokens.rightContentMarginLeft}: 0.25rem;
19
+ ${badgeTokens.rightContentMarginRight}: -0.0625rem;
20
+ `;
21
+ export const sizeM = `
22
+ ${badgeTokens.borderRadius}: 0.375rem;
23
+ ${badgeTokens.height}: 1.5rem;
24
+ ${badgeTokens.padding}: 0 0.5625rem;
25
+ ${badgeTokens.paddingIconOnly}: 0 0.375rem;
26
+
27
+ ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
28
+ ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
29
+ ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
30
+ ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
31
+ ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
32
+ ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
33
+
34
+ ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
35
+ ${badgeTokens.leftContentMarginRight}: 0.1875rem;
36
+
37
+ ${badgeTokens.rightContentMarginLeft}: 0.1875rem;
38
+ ${badgeTokens.rightContentMarginRight}: -0.0625rem;
39
+ `;
40
+ export const sizeS = `
41
+ ${badgeTokens.borderRadius}: 0.375rem;
42
+ ${badgeTokens.height}: 1.25rem;
43
+ ${badgeTokens.padding}: 0 0.4375rem;
44
+ ${badgeTokens.paddingIconOnly}: 0 0.25rem;
45
+
46
+ ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
47
+ ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
48
+ ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
49
+ ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
50
+ ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
51
+ ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
52
+
53
+ ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
54
+ ${badgeTokens.leftContentMarginRight}: 0.125rem;
55
+
56
+ ${badgeTokens.rightContentMarginLeft}: 0.125rem;
57
+ ${badgeTokens.rightContentMarginRight}: -0.0625rem;
58
+ `;
59
+ export const sizeXS = `
60
+ ${badgeTokens.borderRadius}: 0.25rem;
61
+ ${badgeTokens.height}: 1rem;
62
+ ${badgeTokens.padding}: 0 0.25rem;
63
+ ${badgeTokens.paddingIconOnly}: 0 0.188rem;
64
+
65
+ ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
66
+ ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
67
+ ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
68
+ ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
69
+ ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
70
+ ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
71
+
72
+ ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
73
+ ${badgeTokens.leftContentMarginRight}: 0.125rem;
74
+
75
+ ${badgeTokens.rightContentMarginLeft}: 0.125rem;
76
+ ${badgeTokens.rightContentMarginRight}: -0.0625rem;
77
+ `;
78
+ export const pilled = `
79
+ ${badgeTokens.pilledBorderRadius}: 1000px;
80
+ `;
@@ -1,4 +1,5 @@
1
1
  import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
2
+ import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
2
3
  export const config = {
3
4
  defaults: {
4
5
  view: 'default',
@@ -72,85 +73,21 @@ export const config = {
72
73
  },
73
74
  size: {
74
75
  l: css`
75
- ${badgeTokens.borderRadius}: 0.5rem;
76
- ${badgeTokens.height}: 1.75rem;
77
- ${badgeTokens.padding}: 0 0.6875rem;
78
- ${badgeTokens.paddingIconOnly}: 0 0.375rem;
79
-
80
- ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
81
- ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
82
- ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
83
- ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
84
- ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
85
- ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
86
-
87
- ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
88
- ${badgeTokens.leftContentMarginRight}: 0.25rem;
89
-
90
- ${badgeTokens.rightContentMarginLeft}: 0.25rem;
91
- ${badgeTokens.rightContentMarginRight}: -0.0625rem;
76
+ ${sizeL}
92
77
  `,
93
78
  m: css`
94
- ${badgeTokens.borderRadius}: 0.375rem;
95
- ${badgeTokens.height}: 1.5rem;
96
- ${badgeTokens.padding}: 0 0.5625rem;
97
- ${badgeTokens.paddingIconOnly}: 0 0.375rem;
98
-
99
- ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
100
- ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
101
- ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
102
- ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
103
- ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
104
- ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
105
-
106
- ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
107
- ${badgeTokens.leftContentMarginRight}: 0.1875rem;
108
-
109
- ${badgeTokens.rightContentMarginLeft}: 0.1875rem;
110
- ${badgeTokens.rightContentMarginRight}: -0.0625rem;
79
+ ${sizeM}
111
80
  `,
112
81
  s: css`
113
- ${badgeTokens.borderRadius}: 0.375rem;
114
- ${badgeTokens.height}: 1.25rem;
115
- ${badgeTokens.padding}: 0 0.4375rem;
116
- ${badgeTokens.paddingIconOnly}: 0 0.25rem;
117
-
118
- ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
119
- ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
120
- ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
121
- ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
122
- ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
123
- ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
124
-
125
- ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
126
- ${badgeTokens.leftContentMarginRight}: 0.125rem;
127
-
128
- ${badgeTokens.rightContentMarginLeft}: 0.125rem;
129
- ${badgeTokens.rightContentMarginRight}: -0.0625rem;
82
+ ${sizeS}
130
83
  `,
131
84
  xs: css`
132
- ${badgeTokens.borderRadius}: 0.25rem;
133
- ${badgeTokens.height}: 1rem;
134
- ${badgeTokens.padding}: 0 0.25rem;
135
- ${badgeTokens.paddingIconOnly}: 0 0.188rem;
136
-
137
- ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
138
- ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
139
- ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
140
- ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight);
141
- ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
142
- ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
143
-
144
- ${badgeTokens.leftContentMarginLeft}: -0.0625rem;
145
- ${badgeTokens.leftContentMarginRight}: 0.125rem;
146
-
147
- ${badgeTokens.rightContentMarginLeft}: 0.125rem;
148
- ${badgeTokens.rightContentMarginRight}: -0.0625rem;
85
+ ${sizeXS}
149
86
  `
150
87
  },
151
88
  pilled: {
152
89
  true: css`
153
- ${badgeTokens.pilledBorderRadius}: 1.25rem;
90
+ ${pilled}
154
91
  `
155
92
  },
156
93
  transparent: {
@@ -1,6 +1,17 @@
1
- import { badgeConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';
1
+ import { badgeConfig, component, mergeConfig, createConditionalComponent } from '@salutejs/plasma-new-hope/styled-components';
2
2
  import { config } from './Badge.config';
3
+ import { config as clearConfig } from './Badge.clear.config';
4
+ import { config as transparentConfig } from './Badge.transparent.config';
3
5
  const mergedConfig = mergeConfig(badgeConfig, config);
6
+ export const BadgeDefault = component(mergedConfig);
7
+ const mergedConfigClear = mergeConfig(badgeConfig, clearConfig);
8
+ export const BadgeClear = component(mergedConfigClear);
9
+ const mergedConfigTransparent = mergeConfig(badgeConfig, transparentConfig);
10
+ export const BadgeTransparent = component(mergedConfigTransparent);
4
11
  /**
5
12
  * Компонент Badge.
6
- */ export const Badge = component(mergedConfig);
13
+ */ export const Badge = createConditionalComponent({
14
+ default: BadgeDefault,
15
+ clear: BadgeClear,
16
+ transparent: BadgeTransparent
17
+ });
@@ -0,0 +1,65 @@
1
+ import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
2
+ import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
3
+ export const config = {
4
+ defaults: {
5
+ view: 'default',
6
+ size: 'm'
7
+ },
8
+ variations: {
9
+ view: {
10
+ default: css`
11
+ ${badgeTokens.color}: var(--text-primary);
12
+ ${badgeTokens.background}: var(--surface-transparent-secondary);
13
+ `,
14
+ accent: css`
15
+ ${badgeTokens.color}: var(--text-accent);
16
+ ${badgeTokens.background}: var(--surface-transparent-accent);
17
+ `,
18
+ positive: css`
19
+ ${badgeTokens.color}: var(--text-positive);
20
+ ${badgeTokens.background}: var(--surface-transparent-positive);
21
+ `,
22
+ warning: css`
23
+ ${badgeTokens.color}: var(--text-warning);
24
+ ${badgeTokens.background}: var(--surface-transparent-warning);
25
+ `,
26
+ negative: css`
27
+ ${badgeTokens.color}: var(--text-negative);
28
+ ${badgeTokens.background}: var(--surface-transparent-negative);
29
+ `,
30
+ dark: css`
31
+ ${badgeTokens.color}: var(--on-dark-text-primary);
32
+ ${badgeTokens.background}: var(--on-light-surface-transparent-deep);
33
+ `,
34
+ light: css`
35
+ ${badgeTokens.color}: var(--on-dark-text-primary);
36
+ ${badgeTokens.background}: var(--on-dark-surface-transparent-card);
37
+ `
38
+ },
39
+ size: {
40
+ l: css`
41
+ ${sizeL}
42
+ `,
43
+ m: css`
44
+ ${sizeM}
45
+ `,
46
+ s: css`
47
+ ${sizeS}
48
+ `,
49
+ xs: css`
50
+ ${sizeXS}
51
+ `
52
+ },
53
+ pilled: {
54
+ true: css`
55
+ ${pilled}
56
+ `
57
+ },
58
+ transparent: {
59
+ true: css``
60
+ },
61
+ truncate: {
62
+ true: css``
63
+ }
64
+ }
65
+ };
@@ -265,7 +265,7 @@ export const config = {
265
265
  ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
266
266
  ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
267
267
 
268
- ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
268
+ ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
269
269
  ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
270
270
  ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
271
271
  ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -386,7 +386,7 @@ export const config = {
386
386
  ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
387
387
  ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
388
388
 
389
- ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
389
+ ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
390
390
  ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
391
391
  ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
392
392
  ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -7,67 +7,61 @@ export const config = {
7
7
  variations: {
8
8
  view: {
9
9
  default: css`
10
- ${linkButtonTokens.linkButtonColor}: var(--text-primary);
11
10
  ${linkButtonTokens.linkButtonIconColor}: var(--text-primary);
12
11
  ${linkButtonTokens.linkButtonTextColor}: var(--text-primary);
13
12
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
14
- ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover);
15
- ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active);
13
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-primary-hover);
14
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-primary-active);
16
15
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
17
16
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover);
18
17
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active);
19
18
  `,
20
19
  accent: css`
21
- ${linkButtonTokens.linkButtonColor}: var(--text-accent);
22
20
  ${linkButtonTokens.linkButtonIconColor}: var(--text-accent);
23
21
  ${linkButtonTokens.linkButtonTextColor}: var(--text-accent);
24
22
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
25
- ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover);
26
- ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active);
23
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-accent-hover);
24
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-accent-active);
27
25
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
28
26
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover);
29
27
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active);
30
28
  `,
31
29
  positive: css`
32
- ${linkButtonTokens.linkButtonColor}: var(--text-positive);
33
30
  ${linkButtonTokens.linkButtonIconColor}: var(--text-positive);
34
31
  ${linkButtonTokens.linkButtonTextColor}: var(--text-positive);
35
32
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
36
- ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover);
37
- ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active);
33
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-positive-hover);
34
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-positive-active);
38
35
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
39
36
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover);
40
37
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active);
41
38
  `,
42
39
  warning: css`
43
- ${linkButtonTokens.linkButtonColor}: var(--text-warning);
44
40
  ${linkButtonTokens.linkButtonIconColor}: var(--text-warning);
45
41
  ${linkButtonTokens.linkButtonTextColor}: var(--text-warning);
46
42
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
47
- ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover);
48
- ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active);
43
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-warning-hover);
44
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-warning-active);
49
45
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
50
46
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover);
51
47
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active);
52
48
  `,
53
49
  negative: css`
54
- ${linkButtonTokens.linkButtonColor}: var(--text-negative);
55
50
  ${linkButtonTokens.linkButtonIconColor}: var(--text-negative);
56
51
  ${linkButtonTokens.linkButtonTextColor}: var(--text-negative);
57
52
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
58
- ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover);
59
- ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active);
53
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-negative-hover);
54
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-negative-active);
60
55
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
61
56
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover);
62
57
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active);
63
58
  `,
64
59
  info: css`
65
- ${linkButtonTokens.linkButtonColor}: var(--text-info);
66
60
  ${linkButtonTokens.linkButtonIconColor}: var(--text-info);
67
61
  ${linkButtonTokens.linkButtonTextColor}: var(--text-info);
68
62
  ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
69
- ${linkButtonTokens.linkButtonColorHover}: var(--text-info-hover);
70
- ${linkButtonTokens.linkButtonColorActive}: var(--text-info-active);
63
+ ${linkButtonTokens.linkButtonIconColorHover}: var(--text-info-hover);
64
+ ${linkButtonTokens.linkButtonIconColorActive}: var(--text-info-active);
71
65
  ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
72
66
  ${linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover);
73
67
  ${linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active);
@@ -2,7 +2,9 @@ export const config = {
2
2
  view: {
3
3
  default: {
4
4
  trackColor: 'var(--surface-transparent-primary)',
5
- thumbColor: 'var(--surface-transparent-tertiary)'
5
+ thumbColor: 'var(--surface-transparent-tertiary)',
6
+ thumbHoverColor: 'var(--surface-transparent-tertiary-hover)',
7
+ thumbActiveColor: 'var(--surface-transparent-tertiary-active)'
6
8
  }
7
9
  },
8
10
  size: {
@@ -372,7 +372,7 @@ export const config = {
372
372
  ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto;
373
373
  ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto;
374
374
 
375
- ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
375
+ ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
376
376
  ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
377
377
  ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
378
378
  ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -497,7 +497,7 @@ export const config = {
497
497
  ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto;
498
498
  ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto;
499
499
 
500
- ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
500
+ ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
501
501
  ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
502
502
  ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
503
503
  ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -119,7 +119,6 @@ export const config = {
119
119
 
120
120
  ${sliderTokens.railThickness}: 0.25rem;
121
121
  ${sliderTokens.railBorderRadius}: 0.125rem;
122
- ${sliderTokens.railIndent}: 0.75rem;
123
122
 
124
123
  ${sliderTokens.textFieldWrapperGap}: 0.125rem;
125
124
 
@@ -168,7 +167,6 @@ export const config = {
168
167
 
169
168
  ${sliderTokens.railThickness}: 0.25rem;
170
169
  ${sliderTokens.railBorderRadius}: 0.125rem;
171
- ${sliderTokens.railIndent}: 0.75rem;
172
170
 
173
171
  ${sliderTokens.textFieldWrapperGap}: 0.125rem;
174
172
 
@@ -217,7 +215,6 @@ export const config = {
217
215
 
218
216
  ${sliderTokens.railThickness}: 0.25rem;
219
217
  ${sliderTokens.railBorderRadius}: 0.125rem;
220
- ${sliderTokens.railIndent}: 0.75rem;
221
218
 
222
219
  ${sliderTokens.textFieldWrapperGap}: 0.125rem;
223
220
 
@@ -171,7 +171,7 @@ export const config = {
171
171
  ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
172
172
  ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
173
173
 
174
- ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
174
+ ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
175
175
  ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
176
176
  ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
177
177
  ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -257,7 +257,7 @@ export const config = {
257
257
  ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
258
258
  ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
259
259
 
260
- ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
260
+ ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
261
261
  ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
262
262
  ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
263
263
  ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -35,7 +35,7 @@ export const config = {
35
35
  ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
36
36
  ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
37
37
 
38
- ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
38
+ ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
39
39
  ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
40
40
  ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
41
41
  ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
@@ -91,7 +91,7 @@ export const config = {
91
91
  ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
92
92
  ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
93
93
 
94
- ${tokens.leftHelperPadding}: 0.25rem 0 0 0;
94
+ ${tokens.leftHelperOffset}: 0.25rem 0 0 0;
95
95
  ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
96
96
  ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
97
97
  ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salutejs/sdds-scan",
3
- "version": "0.353.0-next-sbcom.0",
3
+ "version": "0.353.0",
4
4
  "description": "Salute Design System / React UI kit for SDDS SCAN web applications",
5
5
  "author": "Salute Frontend Team <salute.developers@gmail.com>",
6
6
  "publishConfig": {
@@ -40,8 +40,8 @@
40
40
  "styled-components": "^5.3.1"
41
41
  },
42
42
  "dependencies": {
43
- "@salutejs/plasma-new-hope": "0.367.0-next-sbcom.0",
44
- "@salutejs/sdds-themes": "0.69.0-next-sbcom.0"
43
+ "@salutejs/plasma-new-hope": "0.367.0",
44
+ "@salutejs/sdds-themes": "0.69.0"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@babel/cli": "7.24.1",
@@ -60,10 +60,10 @@
60
60
  "@rollup/plugin-commonjs": "^25.0.4",
61
61
  "@rollup/plugin-node-resolve": "^15.1.0",
62
62
  "@salutejs/plasma-colors": "0.16.0",
63
- "@salutejs/plasma-core": "1.230.0-next-sbcom.0",
64
- "@salutejs/plasma-cy-utils": "0.160.0-next-sbcom.0",
65
- "@salutejs/plasma-icons": "1.241.0-next-sbcom.0",
66
- "@salutejs/plasma-sb-utils": "0.231.0-next-sbcom.0",
63
+ "@salutejs/plasma-core": "1.230.0",
64
+ "@salutejs/plasma-cy-utils": "0.160.0",
65
+ "@salutejs/plasma-icons": "1.241.0",
66
+ "@salutejs/plasma-sb-utils": "0.231.0",
67
67
  "@types/node": "16.7.13",
68
68
  "@types/react": "18.0.28",
69
69
  "@types/react-dom": "18.0.11",
@@ -108,5 +108,5 @@
108
108
  "sideEffects": [
109
109
  "*.css"
110
110
  ],
111
- "gitHead": "c36f4190c057fe79a831970475df9ff7ad04c743"
111
+ "gitHead": "22cd4c680b11c65c8abe88d14e6c8c37af778906"
112
112
  }