@cloud-ru/ds-uikit-product-toggles-predefined 1.0.13 → 1.0.14-preview-a2208aeb.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 (20) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/components/ToggleCard/ToggleCard.js +1 -1
  3. package/dist/cjs/components/ToggleCard/styles.module.css +26 -31
  4. package/dist/cjs/components/ToggleCard/utils.js +1 -1
  5. package/dist/cjs/components/ToggleGroup/styles.module.css +3 -3
  6. package/dist/cjs/style.css +29 -34
  7. package/dist/cjs/types.d.ts +1 -0
  8. package/dist/esm/components/ToggleCard/ToggleCard.js +1 -1
  9. package/dist/esm/components/ToggleCard/styles.module.css +26 -31
  10. package/dist/esm/components/ToggleCard/utils.js +1 -1
  11. package/dist/esm/components/ToggleGroup/styles.module.css +3 -3
  12. package/dist/esm/style.css +29 -34
  13. package/dist/esm/types.d.ts +1 -0
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +7 -7
  17. package/src/components/ToggleCard/ToggleCard.tsx +6 -1
  18. package/src/components/ToggleCard/styles.module.scss +5 -6
  19. package/src/components/ToggleCard/utils.ts +1 -1
  20. package/src/types.ts +1 -0
package/dist/esm/style.css CHANGED
@@ -35,16 +35,16 @@
35
35
  width:100%;
36
36
  }
37
37
  .content[data-size=s]{
38
- gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
39
- padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
38
+ gap:var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px)));
39
+ padding:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
40
40
  }
41
41
  .content[data-size=m]{
42
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
43
- padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
42
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
43
+ padding:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
44
44
  }
45
45
  .content[data-size=l]{
46
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
47
- padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
46
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
47
+ padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
48
48
  }
49
49
 
50
50
  .emblem{
@@ -63,17 +63,12 @@
63
63
  .picture[data-size=m]{
64
64
  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
65
65
  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
66
- border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
67
- }
68
- .picture[data-size=l]{
69
- width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
70
- height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
71
- border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
66
+ border-radius:var(--sn-iconPredefined-anatomy-size-m-squared-borderRadius, var(--sn-primitive-dimension-6, 6px));
72
67
  }
73
68
  .picture[data-size="5xl"]{
74
69
  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
75
70
  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
76
- border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
71
+ border-radius:var(--sn-iconPredefined-anatomy-size-5xl-squared-borderRadius, var(--sn-primitive-dimension-12, 12px));
77
72
  }
78
73
 
79
74
  .textContent{
@@ -89,26 +84,26 @@
89
84
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
90
85
  }
91
86
  .content[data-size=s] .title{
92
- font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
87
+ font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
93
88
  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
94
- line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
95
- font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
89
+ line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-platform-comfort-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
+ font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-platform-comfort-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
96
91
  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
97
92
  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
98
93
  }
99
94
  .content[data-size=m] .title{
100
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
95
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
101
96
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
102
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
103
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
97
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
98
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
104
99
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
105
100
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
106
101
  }
107
102
  .content[data-size=l] .title{
108
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
103
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
109
104
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
110
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
111
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
105
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
106
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
112
107
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
113
108
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
114
109
  }
@@ -118,26 +113,26 @@
118
113
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
119
114
  }
120
115
  .content[data-size=s] .description{
121
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
116
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
122
117
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
123
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
124
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
118
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
119
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
125
120
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
126
121
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
127
122
  }
128
123
  .content[data-size=m] .description{
129
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
124
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
130
125
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
131
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
132
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
126
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
127
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
133
128
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
134
129
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
135
130
  }
136
131
  .content[data-size=l] .description{
137
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
132
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
138
133
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
139
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
134
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
135
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
141
136
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
142
137
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
143
138
  }
@@ -146,13 +141,13 @@
146
141
  display:grid;
147
142
  }
148
143
  .toggleGroup[data-gap=s]{
149
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
144
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
150
145
  }
151
146
  .toggleGroup[data-gap=m]{
152
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
147
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
153
148
  }
154
149
  .toggleGroup[data-gap=l]{
155
- gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
150
+ gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
156
151
  }
157
152
  .toggleGroup[data-orientation=horizontal]{
158
153
  grid-auto-rows:1fr;
package/dist/esm/types.d.ts CHANGED
@@ -26,6 +26,7 @@ export type ToggleCardProps = WithSupportProps<{
26
26
  /**
27
27
  * Ведущая эмблема. Передаются только параметры — сам `IconPredefined`
28
28
  * встроен в компонент; `size` эмблемы выводится из `size` карточки.
29
+ * По умолчанию `background: true` и `shape: 'squared'`, как в макете.
29
30
  */
30
31
  emblem?: Emblem;
31
32
  /** Промо-бейдж в правом верхнем углу карточки */