@cloud-ru/ds-loader 1.0.1 → 1.0.2-preview-d50a3da1.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 (24) hide show
  1. package/dist/cjs/components/Spinner/Spinner.js +2 -2
  2. package/dist/cjs/components/Spinner/constants.d.ts +1 -3
  3. package/dist/cjs/components/Spinner/constants.js +6 -6
  4. package/dist/cjs/components/Spinner/styles.module.css +35 -10
  5. package/dist/cjs/components/Sun/constants.d.ts +3 -2
  6. package/dist/cjs/components/Sun/constants.js +4 -3
  7. package/dist/cjs/components/Sun/styles.module.css +8 -8
  8. package/dist/cjs/style.css +43 -18
  9. package/dist/esm/components/Spinner/Spinner.js +2 -2
  10. package/dist/esm/components/Spinner/constants.d.ts +1 -3
  11. package/dist/esm/components/Spinner/constants.js +6 -6
  12. package/dist/esm/components/Spinner/styles.module.css +35 -10
  13. package/dist/esm/components/Sun/constants.d.ts +3 -2
  14. package/dist/esm/components/Sun/constants.js +4 -3
  15. package/dist/esm/components/Sun/styles.module.css +8 -8
  16. package/dist/esm/style.css +43 -18
  17. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  18. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  19. package/package.json +2 -2
  20. package/src/components/Spinner/Spinner.tsx +3 -8
  21. package/src/components/Spinner/constants.ts +6 -8
  22. package/src/components/Spinner/styles.module.scss +9 -2
  23. package/src/components/Sun/constants.ts +4 -3
  24. package/src/components/Sun/styles.module.scss +2 -2
package/dist/cjs/components/Spinner/Spinner.js CHANGED
@@ -13,8 +13,8 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
13
13
  const utils_2 = require("./utils");
14
14
  /** Компонент спиннер */
15
15
  function Spinner({ size = constants_1.LOADER_SIZE.S, className, ...rest }) {
16
- const { frame, ring, strokeWidth } = constants_2.SPINNER_GEOMETRY[size];
16
+ const { frame, ring } = constants_2.SPINNER_GEOMETRY[size];
17
17
  const center = frame / 2;
18
18
  const radius = ring / 2;
19
- return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${frame} ${frame}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: (0, classnames_1.default)(styles_module_scss_1.default.spinner, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size, children: [(0, jsx_runtime_1.jsx)("circle", { opacity: constants_2.SPINNER_TRACK_OPACITY, cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), (0, jsx_runtime_1.jsx)("path", { d: (0, utils_2.buildQuarterArcPath)(center, radius), strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
19
+ return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${frame} ${frame}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: (0, classnames_1.default)(styles_module_scss_1.default.spinner, className), ...(0, utils_1.extractSupportProps)(rest), "data-size": size, children: [(0, jsx_runtime_1.jsx)("circle", { opacity: constants_2.SPINNER_TRACK_OPACITY, cx: center, cy: center, r: radius }), (0, jsx_runtime_1.jsx)("path", { d: (0, utils_2.buildQuarterArcPath)(center, radius), strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
20
20
  }
package/dist/cjs/components/Spinner/constants.d.ts CHANGED
@@ -4,12 +4,10 @@ type SpinnerGeometry = {
4
4
  frame: number;
5
5
  /** Диаметр кольца по центру обводки */
6
6
  ring: number;
7
- /** Толщина обводки кольца и дуги */
8
- strokeWidth: number;
9
7
  };
10
8
  /**
11
9
  * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
12
- * (страница `loader`, узел `2918:21302`).
10
+ * (страница `loader`, узел `2918:21302`). Толщина обводки — токен `density.icon.strokeWeight` в стилях.
13
11
  */
14
12
  export declare const SPINNER_GEOMETRY: Record<LoaderSize, SpinnerGeometry>;
15
13
  /** Прозрачность трека — кольца под вращающейся дугой */
package/dist/cjs/components/Spinner/constants.js CHANGED
@@ -4,14 +4,14 @@ exports.SPINNER_TRACK_OPACITY = exports.SPINNER_GEOMETRY = void 0;
4
4
  const constants_1 = require("../constants");
5
5
  /**
6
6
  * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
7
- * (страница `loader`, узел `2918:21302`).
7
+ * (страница `loader`, узел `2918:21302`). Толщина обводки — токен `density.icon.strokeWeight` в стилях.
8
8
  */
9
9
  exports.SPINNER_GEOMETRY = {
10
- [constants_1.LOADER_SIZE['2XS']]: { frame: 8, ring: 6, strokeWidth: 0.5 },
11
- [constants_1.LOADER_SIZE.XS]: { frame: 16, ring: 9, strokeWidth: 1.25 },
12
- [constants_1.LOADER_SIZE.S]: { frame: 24, ring: 13, strokeWidth: 1.5 },
13
- [constants_1.LOADER_SIZE.M]: { frame: 32, ring: 20, strokeWidth: 2 },
14
- [constants_1.LOADER_SIZE.L]: { frame: 40, ring: 30, strokeWidth: 2.5 },
10
+ [constants_1.LOADER_SIZE['2XS']]: { frame: 8, ring: 6 },
11
+ [constants_1.LOADER_SIZE.XS]: { frame: 16, ring: 9 },
12
+ [constants_1.LOADER_SIZE.S]: { frame: 24, ring: 13 },
13
+ [constants_1.LOADER_SIZE.M]: { frame: 32, ring: 20 },
14
+ [constants_1.LOADER_SIZE.L]: { frame: 40, ring: 30 },
15
15
  };
16
16
  /** Прозрачность трека — кольца под вращающейся дугой */
17
17
  exports.SPINNER_TRACK_OPACITY = 0.24;
package/dist/cjs/components/Spinner/styles.module.css CHANGED
@@ -10,24 +10,49 @@
10
10
  mask-type:alpha;
11
11
  }
12
12
  .spinner[data-size="2xs"]{
13
- width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
14
- height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
13
+ width:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
14
+ height:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
15
+ }
16
+ .spinner[data-size="2xs"] circle,
17
+ .spinner[data-size="2xs"] path{
18
+ stroke-width:var(--sn-density-icon-strokeWeight-2xs, var(--sn-platform-comfort-icon-strokeWeight-2xs, 0.5px));
19
+ vector-effect:non-scaling-stroke;
15
20
  }
16
21
  .spinner[data-size=xs]{
17
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
18
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
22
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
23
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
24
+ }
25
+ .spinner[data-size=xs] circle,
26
+ .spinner[data-size=xs] path{
27
+ stroke-width:var(--sn-density-icon-strokeWeight-xs, var(--sn-platform-comfort-icon-strokeWeight-xs, 1.5px));
28
+ vector-effect:non-scaling-stroke;
19
29
  }
20
30
  .spinner[data-size=s]{
21
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
22
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
31
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
32
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
33
+ }
34
+ .spinner[data-size=s] circle,
35
+ .spinner[data-size=s] path{
36
+ stroke-width:var(--sn-density-icon-strokeWeight-s, var(--sn-platform-comfort-icon-strokeWeight-s, 1.5px));
37
+ vector-effect:non-scaling-stroke;
23
38
  }
24
39
  .spinner[data-size=m]{
25
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
26
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
40
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
41
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
42
+ }
43
+ .spinner[data-size=m] circle,
44
+ .spinner[data-size=m] path{
45
+ stroke-width:var(--sn-density-icon-strokeWeight-m, var(--sn-platform-comfort-icon-strokeWeight-m, 2px));
46
+ vector-effect:non-scaling-stroke;
27
47
  }
28
48
  .spinner[data-size=l]{
29
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
30
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
49
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
50
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
51
+ }
52
+ .spinner[data-size=l] circle,
53
+ .spinner[data-size=l] path{
54
+ stroke-width:var(--sn-density-icon-strokeWeight-l, var(--sn-platform-comfort-icon-strokeWeight-l, 2.5px));
55
+ vector-effect:non-scaling-stroke;
31
56
  }
32
57
  @keyframes spin{
33
58
  to{
package/dist/cjs/components/Sun/constants.d.ts CHANGED
@@ -8,11 +8,12 @@ import { SunSize } from '../types';
8
8
  *
9
9
  * | размер | иконка | эталон Figma | `strokeWidth` |
10
10
  * |--------|--------|--------------|---------------|
11
- * | `xs` | 16 | 1.25 | 1.875 |
11
+ * | `xs` | 16 | 1 | 1.5 |
12
12
  * | `s` | 24 | 1.5 | 1.5 |
13
13
  * | `m` | 32 | 2 | 1.5 |
14
14
  * | `l` | 40 | 2.5 | 1.5 |
15
15
  *
16
- * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
16
+ * Эталон — токен `density.icon.strokeWeight.<size>` в desktop compact; в других режимах
17
+ * размер иконки и токен растут пропорционально.
17
18
  */
18
19
  export declare const SUN_STROKE_WIDTH: Record<SunSize, number>;
package/dist/cjs/components/Sun/constants.js CHANGED
@@ -11,15 +11,16 @@ const constants_1 = require("../constants");
11
11
  *
12
12
  * | размер | иконка | эталон Figma | `strokeWidth` |
13
13
  * |--------|--------|--------------|---------------|
14
- * | `xs` | 16 | 1.25 | 1.875 |
14
+ * | `xs` | 16 | 1 | 1.5 |
15
15
  * | `s` | 24 | 1.5 | 1.5 |
16
16
  * | `m` | 32 | 2 | 1.5 |
17
17
  * | `l` | 40 | 2.5 | 1.5 |
18
18
  *
19
- * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
19
+ * Эталон — токен `density.icon.strokeWeight.<size>` в desktop compact; в других режимах
20
+ * размер иконки и токен растут пропорционально.
20
21
  */
21
22
  exports.SUN_STROKE_WIDTH = {
22
- [constants_1.SUN_SIZE.XS]: 1.875,
23
+ [constants_1.SUN_SIZE.XS]: 1.5,
23
24
  [constants_1.SUN_SIZE.S]: 1.5,
24
25
  [constants_1.SUN_SIZE.M]: 1.5,
25
26
  [constants_1.SUN_SIZE.L]: 1.5,
package/dist/cjs/components/Sun/styles.module.css CHANGED
@@ -3,20 +3,20 @@
3
3
  fill:currentcolor;
4
4
  }
5
5
  .sun[data-size=xs]{
6
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
7
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
6
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
7
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
8
8
  }
9
9
  .sun[data-size=s]{
10
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
11
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
10
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
11
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
12
12
  }
13
13
  .sun[data-size=m]{
14
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
15
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
14
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
15
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
16
16
  }
17
17
  .sun[data-size=l]{
18
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
19
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
18
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
19
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
20
20
  }
21
21
  .sun > path{
22
22
  stroke:currentcolor;
package/dist/cjs/style.css CHANGED
@@ -10,24 +10,49 @@
10
10
  mask-type:alpha;
11
11
  }
12
12
  .spinner[data-size="2xs"]{
13
- width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
14
- height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
13
+ width:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
14
+ height:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
15
+ }
16
+ .spinner[data-size="2xs"] circle,
17
+ .spinner[data-size="2xs"] path{
18
+ stroke-width:var(--sn-density-icon-strokeWeight-2xs, var(--sn-platform-comfort-icon-strokeWeight-2xs, 0.5px));
19
+ vector-effect:non-scaling-stroke;
15
20
  }
16
21
  .spinner[data-size=xs]{
17
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
18
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
22
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
23
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
24
+ }
25
+ .spinner[data-size=xs] circle,
26
+ .spinner[data-size=xs] path{
27
+ stroke-width:var(--sn-density-icon-strokeWeight-xs, var(--sn-platform-comfort-icon-strokeWeight-xs, 1.5px));
28
+ vector-effect:non-scaling-stroke;
19
29
  }
20
30
  .spinner[data-size=s]{
21
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
22
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
31
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
32
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
33
+ }
34
+ .spinner[data-size=s] circle,
35
+ .spinner[data-size=s] path{
36
+ stroke-width:var(--sn-density-icon-strokeWeight-s, var(--sn-platform-comfort-icon-strokeWeight-s, 1.5px));
37
+ vector-effect:non-scaling-stroke;
23
38
  }
24
39
  .spinner[data-size=m]{
25
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
26
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
40
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
41
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
42
+ }
43
+ .spinner[data-size=m] circle,
44
+ .spinner[data-size=m] path{
45
+ stroke-width:var(--sn-density-icon-strokeWeight-m, var(--sn-platform-comfort-icon-strokeWeight-m, 2px));
46
+ vector-effect:non-scaling-stroke;
27
47
  }
28
48
  .spinner[data-size=l]{
29
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
30
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
49
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
50
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
51
+ }
52
+ .spinner[data-size=l] circle,
53
+ .spinner[data-size=l] path{
54
+ stroke-width:var(--sn-density-icon-strokeWeight-l, var(--sn-platform-comfort-icon-strokeWeight-l, 2.5px));
55
+ vector-effect:non-scaling-stroke;
31
56
  }
32
57
  @keyframes spin{
33
58
  to{
@@ -39,20 +64,20 @@
39
64
  fill:currentcolor;
40
65
  }
41
66
  .sun[data-size=xs]{
42
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
43
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
67
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
68
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
44
69
  }
45
70
  .sun[data-size=s]{
46
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
47
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
71
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
72
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
48
73
  }
49
74
  .sun[data-size=m]{
50
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
51
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
75
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
76
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
52
77
  }
53
78
  .sun[data-size=l]{
54
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
55
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
79
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
80
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
56
81
  }
57
82
  .sun > path{
58
83
  stroke:currentcolor;
package/dist/esm/components/Spinner/Spinner.js CHANGED
@@ -7,8 +7,8 @@ import styles from './styles.module.css';
7
7
  import { buildQuarterArcPath } from './utils.js';
8
8
  /** Компонент спиннер */
9
9
  export function Spinner({ size = LOADER_SIZE.S, className, ...rest }) {
10
- const { frame, ring, strokeWidth } = SPINNER_GEOMETRY[size];
10
+ const { frame, ring } = SPINNER_GEOMETRY[size];
11
11
  const center = frame / 2;
12
12
  const radius = ring / 2;
13
- return (_jsxs("svg", { viewBox: `0 0 ${frame} ${frame}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, className), ...extractSupportProps(rest), "data-size": size, children: [_jsx("circle", { opacity: SPINNER_TRACK_OPACITY, cx: center, cy: center, r: radius, strokeWidth: strokeWidth }), _jsx("path", { d: buildQuarterArcPath(center, radius), strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
13
+ return (_jsxs("svg", { viewBox: `0 0 ${frame} ${frame}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: cn(styles.spinner, className), ...extractSupportProps(rest), "data-size": size, children: [_jsx("circle", { opacity: SPINNER_TRACK_OPACITY, cx: center, cy: center, r: radius }), _jsx("path", { d: buildQuarterArcPath(center, radius), strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
14
14
  }
package/dist/esm/components/Spinner/constants.d.ts CHANGED
@@ -4,12 +4,10 @@ type SpinnerGeometry = {
4
4
  frame: number;
5
5
  /** Диаметр кольца по центру обводки */
6
6
  ring: number;
7
- /** Толщина обводки кольца и дуги */
8
- strokeWidth: number;
9
7
  };
10
8
  /**
11
9
  * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
12
- * (страница `loader`, узел `2918:21302`).
10
+ * (страница `loader`, узел `2918:21302`). Толщина обводки — токен `density.icon.strokeWeight` в стилях.
13
11
  */
14
12
  export declare const SPINNER_GEOMETRY: Record<LoaderSize, SpinnerGeometry>;
15
13
  /** Прозрачность трека — кольца под вращающейся дугой */
package/dist/esm/components/Spinner/constants.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { LOADER_SIZE } from '../constants.js';
2
2
  /**
3
3
  * Геометрия кольца по размерам — снята с мастера Figma `loader/loaderSpinner`
4
- * (страница `loader`, узел `2918:21302`).
4
+ * (страница `loader`, узел `2918:21302`). Толщина обводки — токен `density.icon.strokeWeight` в стилях.
5
5
  */
6
6
  export const SPINNER_GEOMETRY = {
7
- [LOADER_SIZE['2XS']]: { frame: 8, ring: 6, strokeWidth: 0.5 },
8
- [LOADER_SIZE.XS]: { frame: 16, ring: 9, strokeWidth: 1.25 },
9
- [LOADER_SIZE.S]: { frame: 24, ring: 13, strokeWidth: 1.5 },
10
- [LOADER_SIZE.M]: { frame: 32, ring: 20, strokeWidth: 2 },
11
- [LOADER_SIZE.L]: { frame: 40, ring: 30, strokeWidth: 2.5 },
7
+ [LOADER_SIZE['2XS']]: { frame: 8, ring: 6 },
8
+ [LOADER_SIZE.XS]: { frame: 16, ring: 9 },
9
+ [LOADER_SIZE.S]: { frame: 24, ring: 13 },
10
+ [LOADER_SIZE.M]: { frame: 32, ring: 20 },
11
+ [LOADER_SIZE.L]: { frame: 40, ring: 30 },
12
12
  };
13
13
  /** Прозрачность трека — кольца под вращающейся дугой */
14
14
  export const SPINNER_TRACK_OPACITY = 0.24;
package/dist/esm/components/Spinner/styles.module.css CHANGED
@@ -10,24 +10,49 @@
10
10
  mask-type:alpha;
11
11
  }
12
12
  .spinner[data-size="2xs"]{
13
- width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
14
- height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
13
+ width:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
14
+ height:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
15
+ }
16
+ .spinner[data-size="2xs"] circle,
17
+ .spinner[data-size="2xs"] path{
18
+ stroke-width:var(--sn-density-icon-strokeWeight-2xs, var(--sn-platform-comfort-icon-strokeWeight-2xs, 0.5px));
19
+ vector-effect:non-scaling-stroke;
15
20
  }
16
21
  .spinner[data-size=xs]{
17
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
18
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
22
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
23
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
24
+ }
25
+ .spinner[data-size=xs] circle,
26
+ .spinner[data-size=xs] path{
27
+ stroke-width:var(--sn-density-icon-strokeWeight-xs, var(--sn-platform-comfort-icon-strokeWeight-xs, 1.5px));
28
+ vector-effect:non-scaling-stroke;
19
29
  }
20
30
  .spinner[data-size=s]{
21
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
22
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
31
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
32
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
33
+ }
34
+ .spinner[data-size=s] circle,
35
+ .spinner[data-size=s] path{
36
+ stroke-width:var(--sn-density-icon-strokeWeight-s, var(--sn-platform-comfort-icon-strokeWeight-s, 1.5px));
37
+ vector-effect:non-scaling-stroke;
23
38
  }
24
39
  .spinner[data-size=m]{
25
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
26
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
40
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
41
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
42
+ }
43
+ .spinner[data-size=m] circle,
44
+ .spinner[data-size=m] path{
45
+ stroke-width:var(--sn-density-icon-strokeWeight-m, var(--sn-platform-comfort-icon-strokeWeight-m, 2px));
46
+ vector-effect:non-scaling-stroke;
27
47
  }
28
48
  .spinner[data-size=l]{
29
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
30
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
49
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
50
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
51
+ }
52
+ .spinner[data-size=l] circle,
53
+ .spinner[data-size=l] path{
54
+ stroke-width:var(--sn-density-icon-strokeWeight-l, var(--sn-platform-comfort-icon-strokeWeight-l, 2.5px));
55
+ vector-effect:non-scaling-stroke;
31
56
  }
32
57
  @keyframes spin{
33
58
  to{
package/dist/esm/components/Sun/constants.d.ts CHANGED
@@ -8,11 +8,12 @@ import { SunSize } from '../types.js';
8
8
  *
9
9
  * | размер | иконка | эталон Figma | `strokeWidth` |
10
10
  * |--------|--------|--------------|---------------|
11
- * | `xs` | 16 | 1.25 | 1.875 |
11
+ * | `xs` | 16 | 1 | 1.5 |
12
12
  * | `s` | 24 | 1.5 | 1.5 |
13
13
  * | `m` | 32 | 2 | 1.5 |
14
14
  * | `l` | 40 | 2.5 | 1.5 |
15
15
  *
16
- * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
16
+ * Эталон — токен `density.icon.strokeWeight.<size>` в desktop compact; в других режимах
17
+ * размер иконки и токен растут пропорционально.
17
18
  */
18
19
  export declare const SUN_STROKE_WIDTH: Record<SunSize, number>;
package/dist/esm/components/Sun/constants.js CHANGED
@@ -8,15 +8,16 @@ import { SUN_SIZE } from '../constants.js';
8
8
  *
9
9
  * | размер | иконка | эталон Figma | `strokeWidth` |
10
10
  * |--------|--------|--------------|---------------|
11
- * | `xs` | 16 | 1.25 | 1.875 |
11
+ * | `xs` | 16 | 1 | 1.5 |
12
12
  * | `s` | 24 | 1.5 | 1.5 |
13
13
  * | `m` | 32 | 2 | 1.5 |
14
14
  * | `l` | 40 | 2.5 | 1.5 |
15
15
  *
16
- * Без этой карты толщина выводилась из масштаба и при `xs` давала 1.0 вместо 1.25.
16
+ * Эталон — токен `density.icon.strokeWeight.<size>` в desktop compact; в других режимах
17
+ * размер иконки и токен растут пропорционально.
17
18
  */
18
19
  export const SUN_STROKE_WIDTH = {
19
- [SUN_SIZE.XS]: 1.875,
20
+ [SUN_SIZE.XS]: 1.5,
20
21
  [SUN_SIZE.S]: 1.5,
21
22
  [SUN_SIZE.M]: 1.5,
22
23
  [SUN_SIZE.L]: 1.5,
package/dist/esm/components/Sun/styles.module.css CHANGED
@@ -3,20 +3,20 @@
3
3
  fill:currentcolor;
4
4
  }
5
5
  .sun[data-size=xs]{
6
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
7
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
6
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
7
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
8
8
  }
9
9
  .sun[data-size=s]{
10
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
11
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
10
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
11
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
12
12
  }
13
13
  .sun[data-size=m]{
14
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
15
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
14
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
15
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
16
16
  }
17
17
  .sun[data-size=l]{
18
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
19
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
18
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
19
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
20
20
  }
21
21
  .sun > path{
22
22
  stroke:currentcolor;
package/dist/esm/style.css CHANGED
@@ -10,24 +10,49 @@
10
10
  mask-type:alpha;
11
11
  }
12
12
  .spinner[data-size="2xs"]{
13
- width:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
14
- height:var(--sn-density-size-icon-2xs, var(--sn-primitive-dimension-16, 16px));
13
+ width:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
14
+ height:var(--sn-density-icon-2xs, var(--sn-platform-comfort-icon-2xs, var(--sn-primitive-dimension-16, 16px)));
15
+ }
16
+ .spinner[data-size="2xs"] circle,
17
+ .spinner[data-size="2xs"] path{
18
+ stroke-width:var(--sn-density-icon-strokeWeight-2xs, var(--sn-platform-comfort-icon-strokeWeight-2xs, 0.5px));
19
+ vector-effect:non-scaling-stroke;
15
20
  }
16
21
  .spinner[data-size=xs]{
17
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
18
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
22
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
23
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
24
+ }
25
+ .spinner[data-size=xs] circle,
26
+ .spinner[data-size=xs] path{
27
+ stroke-width:var(--sn-density-icon-strokeWeight-xs, var(--sn-platform-comfort-icon-strokeWeight-xs, 1.5px));
28
+ vector-effect:non-scaling-stroke;
19
29
  }
20
30
  .spinner[data-size=s]{
21
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
22
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
31
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
32
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
33
+ }
34
+ .spinner[data-size=s] circle,
35
+ .spinner[data-size=s] path{
36
+ stroke-width:var(--sn-density-icon-strokeWeight-s, var(--sn-platform-comfort-icon-strokeWeight-s, 1.5px));
37
+ vector-effect:non-scaling-stroke;
23
38
  }
24
39
  .spinner[data-size=m]{
25
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
26
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
40
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
41
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
42
+ }
43
+ .spinner[data-size=m] circle,
44
+ .spinner[data-size=m] path{
45
+ stroke-width:var(--sn-density-icon-strokeWeight-m, var(--sn-platform-comfort-icon-strokeWeight-m, 2px));
46
+ vector-effect:non-scaling-stroke;
27
47
  }
28
48
  .spinner[data-size=l]{
29
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
30
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
49
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
50
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
51
+ }
52
+ .spinner[data-size=l] circle,
53
+ .spinner[data-size=l] path{
54
+ stroke-width:var(--sn-density-icon-strokeWeight-l, var(--sn-platform-comfort-icon-strokeWeight-l, 2.5px));
55
+ vector-effect:non-scaling-stroke;
31
56
  }
32
57
  @keyframes spin{
33
58
  to{
@@ -39,20 +64,20 @@
39
64
  fill:currentcolor;
40
65
  }
41
66
  .sun[data-size=xs]{
42
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
43
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
67
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
68
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
44
69
  }
45
70
  .sun[data-size=s]{
46
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
47
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
71
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
72
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
48
73
  }
49
74
  .sun[data-size=m]{
50
- width:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
51
- height:var(--sn-density-size-icon-m, var(--sn-primitive-dimension-32, 32px));
75
+ width:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
76
+ height:var(--sn-density-icon-m, var(--sn-platform-comfort-icon-m, var(--sn-primitive-dimension-32, 32px)));
52
77
  }
53
78
  .sun[data-size=l]{
54
- width:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
55
- height:var(--sn-density-size-icon-l, var(--sn-primitive-dimension-40, 40px));
79
+ width:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
80
+ height:var(--sn-density-icon-l, var(--sn-platform-comfort-icon-l, var(--sn-primitive-dimension-40, 40px)));
56
81
  }
57
82
  .sun > path{
58
83
  stroke:currentcolor;