@alfalab/core-components-vars 9.11.1 → 9.12.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 (73) hide show
  1. package/bundle/click.css +1 -0
  2. package/bundle/corp.css +1 -0
  3. package/bundle/intranet.css +1 -0
  4. package/bundle/mobile.css +1 -0
  5. package/bundle/site.css +1 -0
  6. package/common.css +13 -0
  7. package/cssm/bundle/click.css +41 -28
  8. package/cssm/bundle/corp.css +41 -28
  9. package/cssm/bundle/intranet.css +41 -28
  10. package/cssm/bundle/mobile.css +41 -28
  11. package/cssm/bundle/site.css +41 -28
  12. package/cssm/common.css +13 -0
  13. package/cssm/gaps.css +28 -28
  14. package/cssm/index.css +40 -28
  15. package/cssm/index.d.ts +38 -28
  16. package/cssm/index.js +38 -28
  17. package/esm/index.d.ts +38 -28
  18. package/esm/index.js +38 -28
  19. package/gaps.css +28 -28
  20. package/index.css +1 -0
  21. package/index.d.ts +38 -28
  22. package/index.js +38 -28
  23. package/modern/index.d.ts +38 -28
  24. package/modern/index.js +38 -28
  25. package/moderncssm/border-radius.css +25 -0
  26. package/moderncssm/bundle/click.css +1479 -0
  27. package/moderncssm/bundle/corp.css +1479 -0
  28. package/moderncssm/bundle/intranet.css +1479 -0
  29. package/moderncssm/bundle/mobile.css +1479 -0
  30. package/moderncssm/bundle/site.css +1473 -0
  31. package/moderncssm/colors-addons.css +127 -0
  32. package/moderncssm/colors-bluetint.css +1199 -0
  33. package/moderncssm/colors-bluetint.d.ts +2 -0
  34. package/moderncssm/colors-bluetint.js +6 -0
  35. package/moderncssm/colors-decorative.css +614 -0
  36. package/moderncssm/colors-decorative.d.ts +2 -0
  37. package/moderncssm/colors-decorative.js +6 -0
  38. package/moderncssm/colors-indigo.css +1197 -0
  39. package/moderncssm/colors-indigo.d.ts +2 -0
  40. package/moderncssm/colors-indigo.js +6 -0
  41. package/moderncssm/colors-pfm.css +62 -0
  42. package/moderncssm/colors-pfm.d.ts +2 -0
  43. package/moderncssm/colors-pfm.js +6 -0
  44. package/moderncssm/colors-qualitative.css +130 -0
  45. package/moderncssm/colors-qualitative.d.ts +2 -0
  46. package/moderncssm/colors-qualitative.js +6 -0
  47. package/moderncssm/colors-sequential.css +194 -0
  48. package/moderncssm/colors-sequential.d.ts +2 -0
  49. package/moderncssm/colors-sequential.js +6 -0
  50. package/moderncssm/colors-students.css +4 -0
  51. package/moderncssm/colors-students.d.ts +2 -0
  52. package/moderncssm/colors-students.js +6 -0
  53. package/moderncssm/colors-transparent.css +28 -0
  54. package/moderncssm/colors-x5.css +4 -0
  55. package/moderncssm/colors.css +71 -0
  56. package/moderncssm/common.css +13 -0
  57. package/moderncssm/gaps.css +66 -0
  58. package/moderncssm/index.css +1570 -0
  59. package/moderncssm/index.d.ts +1532 -0
  60. package/moderncssm/index.js +1532 -0
  61. package/moderncssm/mixins.css +1 -0
  62. package/moderncssm/shadows-bluetint.css +43 -0
  63. package/moderncssm/shadows-indigo.css +38 -0
  64. package/moderncssm/typography.css +6 -0
  65. package/package.json +1 -1
  66. package/src/bundle/click.css +1 -0
  67. package/src/bundle/corp.css +1 -0
  68. package/src/bundle/intranet.css +1 -0
  69. package/src/bundle/mobile.css +1 -0
  70. package/src/bundle/site.css +1 -0
  71. package/src/common.css +13 -0
  72. package/src/gaps.css +28 -28
  73. package/src/index.css +1 -0
package/bundle/click.css CHANGED
@@ -4,4 +4,5 @@
4
4
  @import '../border-radius.css';
5
5
  @import '../gaps.css';
6
6
  @import '../typography.css';
7
+ @import '../common.css';
7
8
  @import '../mixins.css';
package/bundle/corp.css CHANGED
@@ -4,4 +4,5 @@
4
4
  @import '../border-radius.css';
5
5
  @import '../gaps.css';
6
6
  @import '../typography.css';
7
+ @import '../common.css';
7
8
  @import '../mixins.css';
package/bundle/intranet.css CHANGED
@@ -4,4 +4,5 @@
4
4
  @import '../border-radius.css';
5
5
  @import '../gaps.css';
6
6
  @import '../typography.css';
7
+ @import '../common.css';
7
8
  @import '../mixins.css';
package/bundle/mobile.css CHANGED
@@ -4,4 +4,5 @@
4
4
  @import '../border-radius.css';
5
5
  @import '../gaps.css';
6
6
  @import '../typography.css';
7
+ @import '../common.css';
7
8
  @import '../mixins.css';
package/bundle/site.css CHANGED
@@ -3,4 +3,5 @@
3
3
  @import '../shadows-bluetint.css';
4
4
  @import '../border-radius.css';
5
5
  @import '../gaps.css';
6
+ @import '../common.css';
6
7
  @import '../mixins.css';
package/common.css ADDED
@@ -0,0 +1,13 @@
1
+ :root {
2
+ --focus-color: var(--color-light-status-info);
3
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
4
+ sans-serif;
5
+ --disabled-cursor: not-allowed;
6
+ --arrow-transform: rotate(180deg);
7
+ --size-xxs-height: 32px;
8
+ --size-xs-height: 40px;
9
+ --size-s-height: 48px;
10
+ --size-m-height: 56px;
11
+ --size-l-height: 64px;
12
+ --size-xl-height: 72px;
13
+ }
package/cssm/bundle/click.css CHANGED
@@ -1425,38 +1425,38 @@
1425
1425
 
1426
1426
  /* новые значения, используйте их */
1427
1427
  --gap-0: 0;
1428
- --gap-2: 2px;
1429
- --gap-4: 4px;
1430
- --gap-8: 8px;
1431
- --gap-12: 12px;
1432
- --gap-16: 16px;
1433
- --gap-20: 20px;
1434
- --gap-24: 24px;
1435
- --gap-32: 32px;
1436
- --gap-40: 40px;
1437
- --gap-48: 48px;
1428
+ --gap-2: var(--gap-3xs);
1429
+ --gap-4: var(--gap-2xs);
1430
+ --gap-8: var(--gap-xs);
1431
+ --gap-12: var(--gap-s);
1432
+ --gap-16: var(--gap-m);
1433
+ --gap-20: var(--gap-l);
1434
+ --gap-24: var(--gap-xl);
1435
+ --gap-32: var(--gap-2xl);
1436
+ --gap-40: var(--gap-3xl);
1437
+ --gap-48: var(--gap-4xl);
1438
1438
  --gap-56: 56px;
1439
- --gap-64: 64px;
1440
- --gap-72: 72px;
1439
+ --gap-64: var(--gap-5xl);
1440
+ --gap-72: var(--gap-6xl);
1441
1441
  --gap-80: 80px;
1442
- --gap-96: 96px;
1443
- --gap-128: 128px;
1444
- --gap-2-neg: -2px;
1445
- --gap-4-neg: -4px;
1446
- --gap-8-neg: -8px;
1447
- --gap-12-neg: -12px;
1448
- --gap-16-neg: -16px;
1449
- --gap-20-neg: -20px;
1450
- --gap-24-neg: -24px;
1451
- --gap-32-neg: -32px;
1452
- --gap-40-neg: -40px;
1453
- --gap-48-neg: -48px;
1442
+ --gap-96: var(--gap-7xl);
1443
+ --gap-128: var(--gap-8xl);
1444
+ --gap-2-neg: var(--gap-3xs-neg);
1445
+ --gap-4-neg: var(--gap-2xs-neg);
1446
+ --gap-8-neg: var(--gap-xs-neg);
1447
+ --gap-12-neg: var(--gap-s-neg);
1448
+ --gap-16-neg: var(--gap-m-neg);
1449
+ --gap-20-neg: var(--gap-l-neg);
1450
+ --gap-24-neg: var(--gap-xl-neg);
1451
+ --gap-32-neg: var(--gap-2xl-neg);
1452
+ --gap-40-neg: var(--gap-3xl-neg);
1453
+ --gap-48-neg: var(--gap-4xl-neg);
1454
1454
  --gap-56-neg: -56px;
1455
- --gap-64-neg: -64px;
1456
- --gap-72-neg: -72px;
1455
+ --gap-64-neg: var(--gap-5xl-neg);
1456
+ --gap-72-neg: var(--gap-6xl-neg);
1457
1457
  --gap-80-neg: -80px;
1458
- --gap-96-neg: -96px;
1459
- --gap-128-neg: -128px;
1458
+ --gap-96-neg: var(--gap-7xl-neg);
1459
+ --gap-128-neg: var(--gap-8xl-neg);
1460
1460
  }
1461
1461
  :root {
1462
1462
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -1464,3 +1464,16 @@
1464
1464
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
1465
1465
  'Helvetica Neue', Helvetica, sans-serif;
1466
1466
  }
1467
+ :root {
1468
+ --focus-color: var(--color-light-status-info);
1469
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1470
+ sans-serif;
1471
+ --disabled-cursor: not-allowed;
1472
+ --arrow-transform: rotate(180deg);
1473
+ --size-xxs-height: 32px;
1474
+ --size-xs-height: 40px;
1475
+ --size-s-height: 48px;
1476
+ --size-m-height: 56px;
1477
+ --size-l-height: 64px;
1478
+ --size-xl-height: 72px;
1479
+ }
package/cssm/bundle/corp.css CHANGED
@@ -1425,38 +1425,38 @@
1425
1425
 
1426
1426
  /* новые значения, используйте их */
1427
1427
  --gap-0: 0;
1428
- --gap-2: 2px;
1429
- --gap-4: 4px;
1430
- --gap-8: 8px;
1431
- --gap-12: 12px;
1432
- --gap-16: 16px;
1433
- --gap-20: 20px;
1434
- --gap-24: 24px;
1435
- --gap-32: 32px;
1436
- --gap-40: 40px;
1437
- --gap-48: 48px;
1428
+ --gap-2: var(--gap-3xs);
1429
+ --gap-4: var(--gap-2xs);
1430
+ --gap-8: var(--gap-xs);
1431
+ --gap-12: var(--gap-s);
1432
+ --gap-16: var(--gap-m);
1433
+ --gap-20: var(--gap-l);
1434
+ --gap-24: var(--gap-xl);
1435
+ --gap-32: var(--gap-2xl);
1436
+ --gap-40: var(--gap-3xl);
1437
+ --gap-48: var(--gap-4xl);
1438
1438
  --gap-56: 56px;
1439
- --gap-64: 64px;
1440
- --gap-72: 72px;
1439
+ --gap-64: var(--gap-5xl);
1440
+ --gap-72: var(--gap-6xl);
1441
1441
  --gap-80: 80px;
1442
- --gap-96: 96px;
1443
- --gap-128: 128px;
1444
- --gap-2-neg: -2px;
1445
- --gap-4-neg: -4px;
1446
- --gap-8-neg: -8px;
1447
- --gap-12-neg: -12px;
1448
- --gap-16-neg: -16px;
1449
- --gap-20-neg: -20px;
1450
- --gap-24-neg: -24px;
1451
- --gap-32-neg: -32px;
1452
- --gap-40-neg: -40px;
1453
- --gap-48-neg: -48px;
1442
+ --gap-96: var(--gap-7xl);
1443
+ --gap-128: var(--gap-8xl);
1444
+ --gap-2-neg: var(--gap-3xs-neg);
1445
+ --gap-4-neg: var(--gap-2xs-neg);
1446
+ --gap-8-neg: var(--gap-xs-neg);
1447
+ --gap-12-neg: var(--gap-s-neg);
1448
+ --gap-16-neg: var(--gap-m-neg);
1449
+ --gap-20-neg: var(--gap-l-neg);
1450
+ --gap-24-neg: var(--gap-xl-neg);
1451
+ --gap-32-neg: var(--gap-2xl-neg);
1452
+ --gap-40-neg: var(--gap-3xl-neg);
1453
+ --gap-48-neg: var(--gap-4xl-neg);
1454
1454
  --gap-56-neg: -56px;
1455
- --gap-64-neg: -64px;
1456
- --gap-72-neg: -72px;
1455
+ --gap-64-neg: var(--gap-5xl-neg);
1456
+ --gap-72-neg: var(--gap-6xl-neg);
1457
1457
  --gap-80-neg: -80px;
1458
- --gap-96-neg: -96px;
1459
- --gap-128-neg: -128px;
1458
+ --gap-96-neg: var(--gap-7xl-neg);
1459
+ --gap-128-neg: var(--gap-8xl-neg);
1460
1460
  }
1461
1461
  :root {
1462
1462
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -1464,3 +1464,16 @@
1464
1464
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
1465
1465
  'Helvetica Neue', Helvetica, sans-serif;
1466
1466
  }
1467
+ :root {
1468
+ --focus-color: var(--color-light-status-info);
1469
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1470
+ sans-serif;
1471
+ --disabled-cursor: not-allowed;
1472
+ --arrow-transform: rotate(180deg);
1473
+ --size-xxs-height: 32px;
1474
+ --size-xs-height: 40px;
1475
+ --size-s-height: 48px;
1476
+ --size-m-height: 56px;
1477
+ --size-l-height: 64px;
1478
+ --size-xl-height: 72px;
1479
+ }
package/cssm/bundle/intranet.css CHANGED
@@ -1425,38 +1425,38 @@
1425
1425
 
1426
1426
  /* новые значения, используйте их */
1427
1427
  --gap-0: 0;
1428
- --gap-2: 2px;
1429
- --gap-4: 4px;
1430
- --gap-8: 8px;
1431
- --gap-12: 12px;
1432
- --gap-16: 16px;
1433
- --gap-20: 20px;
1434
- --gap-24: 24px;
1435
- --gap-32: 32px;
1436
- --gap-40: 40px;
1437
- --gap-48: 48px;
1428
+ --gap-2: var(--gap-3xs);
1429
+ --gap-4: var(--gap-2xs);
1430
+ --gap-8: var(--gap-xs);
1431
+ --gap-12: var(--gap-s);
1432
+ --gap-16: var(--gap-m);
1433
+ --gap-20: var(--gap-l);
1434
+ --gap-24: var(--gap-xl);
1435
+ --gap-32: var(--gap-2xl);
1436
+ --gap-40: var(--gap-3xl);
1437
+ --gap-48: var(--gap-4xl);
1438
1438
  --gap-56: 56px;
1439
- --gap-64: 64px;
1440
- --gap-72: 72px;
1439
+ --gap-64: var(--gap-5xl);
1440
+ --gap-72: var(--gap-6xl);
1441
1441
  --gap-80: 80px;
1442
- --gap-96: 96px;
1443
- --gap-128: 128px;
1444
- --gap-2-neg: -2px;
1445
- --gap-4-neg: -4px;
1446
- --gap-8-neg: -8px;
1447
- --gap-12-neg: -12px;
1448
- --gap-16-neg: -16px;
1449
- --gap-20-neg: -20px;
1450
- --gap-24-neg: -24px;
1451
- --gap-32-neg: -32px;
1452
- --gap-40-neg: -40px;
1453
- --gap-48-neg: -48px;
1442
+ --gap-96: var(--gap-7xl);
1443
+ --gap-128: var(--gap-8xl);
1444
+ --gap-2-neg: var(--gap-3xs-neg);
1445
+ --gap-4-neg: var(--gap-2xs-neg);
1446
+ --gap-8-neg: var(--gap-xs-neg);
1447
+ --gap-12-neg: var(--gap-s-neg);
1448
+ --gap-16-neg: var(--gap-m-neg);
1449
+ --gap-20-neg: var(--gap-l-neg);
1450
+ --gap-24-neg: var(--gap-xl-neg);
1451
+ --gap-32-neg: var(--gap-2xl-neg);
1452
+ --gap-40-neg: var(--gap-3xl-neg);
1453
+ --gap-48-neg: var(--gap-4xl-neg);
1454
1454
  --gap-56-neg: -56px;
1455
- --gap-64-neg: -64px;
1456
- --gap-72-neg: -72px;
1455
+ --gap-64-neg: var(--gap-5xl-neg);
1456
+ --gap-72-neg: var(--gap-6xl-neg);
1457
1457
  --gap-80-neg: -80px;
1458
- --gap-96-neg: -96px;
1459
- --gap-128-neg: -128px;
1458
+ --gap-96-neg: var(--gap-7xl-neg);
1459
+ --gap-128-neg: var(--gap-8xl-neg);
1460
1460
  }
1461
1461
  :root {
1462
1462
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -1464,3 +1464,16 @@
1464
1464
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
1465
1465
  'Helvetica Neue', Helvetica, sans-serif;
1466
1466
  }
1467
+ :root {
1468
+ --focus-color: var(--color-light-status-info);
1469
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1470
+ sans-serif;
1471
+ --disabled-cursor: not-allowed;
1472
+ --arrow-transform: rotate(180deg);
1473
+ --size-xxs-height: 32px;
1474
+ --size-xs-height: 40px;
1475
+ --size-s-height: 48px;
1476
+ --size-m-height: 56px;
1477
+ --size-l-height: 64px;
1478
+ --size-xl-height: 72px;
1479
+ }
package/cssm/bundle/mobile.css CHANGED
@@ -1425,38 +1425,38 @@
1425
1425
 
1426
1426
  /* новые значения, используйте их */
1427
1427
  --gap-0: 0;
1428
- --gap-2: 2px;
1429
- --gap-4: 4px;
1430
- --gap-8: 8px;
1431
- --gap-12: 12px;
1432
- --gap-16: 16px;
1433
- --gap-20: 20px;
1434
- --gap-24: 24px;
1435
- --gap-32: 32px;
1436
- --gap-40: 40px;
1437
- --gap-48: 48px;
1428
+ --gap-2: var(--gap-3xs);
1429
+ --gap-4: var(--gap-2xs);
1430
+ --gap-8: var(--gap-xs);
1431
+ --gap-12: var(--gap-s);
1432
+ --gap-16: var(--gap-m);
1433
+ --gap-20: var(--gap-l);
1434
+ --gap-24: var(--gap-xl);
1435
+ --gap-32: var(--gap-2xl);
1436
+ --gap-40: var(--gap-3xl);
1437
+ --gap-48: var(--gap-4xl);
1438
1438
  --gap-56: 56px;
1439
- --gap-64: 64px;
1440
- --gap-72: 72px;
1439
+ --gap-64: var(--gap-5xl);
1440
+ --gap-72: var(--gap-6xl);
1441
1441
  --gap-80: 80px;
1442
- --gap-96: 96px;
1443
- --gap-128: 128px;
1444
- --gap-2-neg: -2px;
1445
- --gap-4-neg: -4px;
1446
- --gap-8-neg: -8px;
1447
- --gap-12-neg: -12px;
1448
- --gap-16-neg: -16px;
1449
- --gap-20-neg: -20px;
1450
- --gap-24-neg: -24px;
1451
- --gap-32-neg: -32px;
1452
- --gap-40-neg: -40px;
1453
- --gap-48-neg: -48px;
1442
+ --gap-96: var(--gap-7xl);
1443
+ --gap-128: var(--gap-8xl);
1444
+ --gap-2-neg: var(--gap-3xs-neg);
1445
+ --gap-4-neg: var(--gap-2xs-neg);
1446
+ --gap-8-neg: var(--gap-xs-neg);
1447
+ --gap-12-neg: var(--gap-s-neg);
1448
+ --gap-16-neg: var(--gap-m-neg);
1449
+ --gap-20-neg: var(--gap-l-neg);
1450
+ --gap-24-neg: var(--gap-xl-neg);
1451
+ --gap-32-neg: var(--gap-2xl-neg);
1452
+ --gap-40-neg: var(--gap-3xl-neg);
1453
+ --gap-48-neg: var(--gap-4xl-neg);
1454
1454
  --gap-56-neg: -56px;
1455
- --gap-64-neg: -64px;
1456
- --gap-72-neg: -72px;
1455
+ --gap-64-neg: var(--gap-5xl-neg);
1456
+ --gap-72-neg: var(--gap-6xl-neg);
1457
1457
  --gap-80-neg: -80px;
1458
- --gap-96-neg: -96px;
1459
- --gap-128-neg: -128px;
1458
+ --gap-96-neg: var(--gap-7xl-neg);
1459
+ --gap-128-neg: var(--gap-8xl-neg);
1460
1460
  }
1461
1461
  :root {
1462
1462
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
@@ -1464,3 +1464,16 @@
1464
1464
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
1465
1465
  'Helvetica Neue', Helvetica, sans-serif;
1466
1466
  }
1467
+ :root {
1468
+ --focus-color: var(--color-light-status-info);
1469
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1470
+ sans-serif;
1471
+ --disabled-cursor: not-allowed;
1472
+ --arrow-transform: rotate(180deg);
1473
+ --size-xxs-height: 32px;
1474
+ --size-xs-height: 40px;
1475
+ --size-s-height: 48px;
1476
+ --size-m-height: 56px;
1477
+ --size-l-height: 64px;
1478
+ --size-xl-height: 72px;
1479
+ }
package/cssm/bundle/site.css CHANGED
@@ -1425,36 +1425,49 @@
1425
1425
 
1426
1426
  /* новые значения, используйте их */
1427
1427
  --gap-0: 0;
1428
- --gap-2: 2px;
1429
- --gap-4: 4px;
1430
- --gap-8: 8px;
1431
- --gap-12: 12px;
1432
- --gap-16: 16px;
1433
- --gap-20: 20px;
1434
- --gap-24: 24px;
1435
- --gap-32: 32px;
1436
- --gap-40: 40px;
1437
- --gap-48: 48px;
1428
+ --gap-2: var(--gap-3xs);
1429
+ --gap-4: var(--gap-2xs);
1430
+ --gap-8: var(--gap-xs);
1431
+ --gap-12: var(--gap-s);
1432
+ --gap-16: var(--gap-m);
1433
+ --gap-20: var(--gap-l);
1434
+ --gap-24: var(--gap-xl);
1435
+ --gap-32: var(--gap-2xl);
1436
+ --gap-40: var(--gap-3xl);
1437
+ --gap-48: var(--gap-4xl);
1438
1438
  --gap-56: 56px;
1439
- --gap-64: 64px;
1440
- --gap-72: 72px;
1439
+ --gap-64: var(--gap-5xl);
1440
+ --gap-72: var(--gap-6xl);
1441
1441
  --gap-80: 80px;
1442
- --gap-96: 96px;
1443
- --gap-128: 128px;
1444
- --gap-2-neg: -2px;
1445
- --gap-4-neg: -4px;
1446
- --gap-8-neg: -8px;
1447
- --gap-12-neg: -12px;
1448
- --gap-16-neg: -16px;
1449
- --gap-20-neg: -20px;
1450
- --gap-24-neg: -24px;
1451
- --gap-32-neg: -32px;
1452
- --gap-40-neg: -40px;
1453
- --gap-48-neg: -48px;
1442
+ --gap-96: var(--gap-7xl);
1443
+ --gap-128: var(--gap-8xl);
1444
+ --gap-2-neg: var(--gap-3xs-neg);
1445
+ --gap-4-neg: var(--gap-2xs-neg);
1446
+ --gap-8-neg: var(--gap-xs-neg);
1447
+ --gap-12-neg: var(--gap-s-neg);
1448
+ --gap-16-neg: var(--gap-m-neg);
1449
+ --gap-20-neg: var(--gap-l-neg);
1450
+ --gap-24-neg: var(--gap-xl-neg);
1451
+ --gap-32-neg: var(--gap-2xl-neg);
1452
+ --gap-40-neg: var(--gap-3xl-neg);
1453
+ --gap-48-neg: var(--gap-4xl-neg);
1454
1454
  --gap-56-neg: -56px;
1455
- --gap-64-neg: -64px;
1456
- --gap-72-neg: -72px;
1455
+ --gap-64-neg: var(--gap-5xl-neg);
1456
+ --gap-72-neg: var(--gap-6xl-neg);
1457
1457
  --gap-80-neg: -80px;
1458
- --gap-96-neg: -96px;
1459
- --gap-128-neg: -128px;
1458
+ --gap-96-neg: var(--gap-7xl-neg);
1459
+ --gap-128-neg: var(--gap-8xl-neg);
1460
+ }
1461
+ :root {
1462
+ --focus-color: var(--color-light-status-info);
1463
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1464
+ sans-serif;
1465
+ --disabled-cursor: not-allowed;
1466
+ --arrow-transform: rotate(180deg);
1467
+ --size-xxs-height: 32px;
1468
+ --size-xs-height: 40px;
1469
+ --size-s-height: 48px;
1470
+ --size-m-height: 56px;
1471
+ --size-l-height: 64px;
1472
+ --size-xl-height: 72px;
1460
1473
  }
package/cssm/common.css ADDED
@@ -0,0 +1,13 @@
1
+ :root {
2
+ --focus-color: var(--color-light-status-info);
3
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
4
+ sans-serif;
5
+ --disabled-cursor: not-allowed;
6
+ --arrow-transform: rotate(180deg);
7
+ --size-xxs-height: 32px;
8
+ --size-xs-height: 40px;
9
+ --size-s-height: 48px;
10
+ --size-m-height: 56px;
11
+ --size-l-height: 64px;
12
+ --size-xl-height: 72px;
13
+ }
package/cssm/gaps.css CHANGED
@@ -31,36 +31,36 @@
31
31
 
32
32
  /* новые значения, используйте их */
33
33
  --gap-0: 0;
34
- --gap-2: 2px;
35
- --gap-4: 4px;
36
- --gap-8: 8px;
37
- --gap-12: 12px;
38
- --gap-16: 16px;
39
- --gap-20: 20px;
40
- --gap-24: 24px;
41
- --gap-32: 32px;
42
- --gap-40: 40px;
43
- --gap-48: 48px;
34
+ --gap-2: var(--gap-3xs);
35
+ --gap-4: var(--gap-2xs);
36
+ --gap-8: var(--gap-xs);
37
+ --gap-12: var(--gap-s);
38
+ --gap-16: var(--gap-m);
39
+ --gap-20: var(--gap-l);
40
+ --gap-24: var(--gap-xl);
41
+ --gap-32: var(--gap-2xl);
42
+ --gap-40: var(--gap-3xl);
43
+ --gap-48: var(--gap-4xl);
44
44
  --gap-56: 56px;
45
- --gap-64: 64px;
46
- --gap-72: 72px;
45
+ --gap-64: var(--gap-5xl);
46
+ --gap-72: var(--gap-6xl);
47
47
  --gap-80: 80px;
48
- --gap-96: 96px;
49
- --gap-128: 128px;
50
- --gap-2-neg: -2px;
51
- --gap-4-neg: -4px;
52
- --gap-8-neg: -8px;
53
- --gap-12-neg: -12px;
54
- --gap-16-neg: -16px;
55
- --gap-20-neg: -20px;
56
- --gap-24-neg: -24px;
57
- --gap-32-neg: -32px;
58
- --gap-40-neg: -40px;
59
- --gap-48-neg: -48px;
48
+ --gap-96: var(--gap-7xl);
49
+ --gap-128: var(--gap-8xl);
50
+ --gap-2-neg: var(--gap-3xs-neg);
51
+ --gap-4-neg: var(--gap-2xs-neg);
52
+ --gap-8-neg: var(--gap-xs-neg);
53
+ --gap-12-neg: var(--gap-s-neg);
54
+ --gap-16-neg: var(--gap-m-neg);
55
+ --gap-20-neg: var(--gap-l-neg);
56
+ --gap-24-neg: var(--gap-xl-neg);
57
+ --gap-32-neg: var(--gap-2xl-neg);
58
+ --gap-40-neg: var(--gap-3xl-neg);
59
+ --gap-48-neg: var(--gap-4xl-neg);
60
60
  --gap-56-neg: -56px;
61
- --gap-64-neg: -64px;
62
- --gap-72-neg: -72px;
61
+ --gap-64-neg: var(--gap-5xl-neg);
62
+ --gap-72-neg: var(--gap-6xl-neg);
63
63
  --gap-80-neg: -80px;
64
- --gap-96-neg: -96px;
65
- --gap-128-neg: -128px;
64
+ --gap-96-neg: var(--gap-7xl-neg);
65
+ --gap-128-neg: var(--gap-8xl-neg);
66
66
  }
package/cssm/index.css CHANGED
@@ -1518,41 +1518,53 @@
1518
1518
 
1519
1519
  /* новые значения, используйте их */
1520
1520
  --gap-0: 0;
1521
- --gap-2: 2px;
1522
- --gap-4: 4px;
1523
- --gap-8: 8px;
1524
- --gap-12: 12px;
1525
- --gap-16: 16px;
1526
- --gap-20: 20px;
1527
- --gap-24: 24px;
1528
- --gap-32: 32px;
1529
- --gap-40: 40px;
1530
- --gap-48: 48px;
1521
+ --gap-2: var(--gap-3xs);
1522
+ --gap-4: var(--gap-2xs);
1523
+ --gap-8: var(--gap-xs);
1524
+ --gap-12: var(--gap-s);
1525
+ --gap-16: var(--gap-m);
1526
+ --gap-20: var(--gap-l);
1527
+ --gap-24: var(--gap-xl);
1528
+ --gap-32: var(--gap-2xl);
1529
+ --gap-40: var(--gap-3xl);
1530
+ --gap-48: var(--gap-4xl);
1531
1531
  --gap-56: 56px;
1532
- --gap-64: 64px;
1533
- --gap-72: 72px;
1532
+ --gap-64: var(--gap-5xl);
1533
+ --gap-72: var(--gap-6xl);
1534
1534
  --gap-80: 80px;
1535
- --gap-96: 96px;
1536
- --gap-128: 128px;
1537
- --gap-2-neg: -2px;
1538
- --gap-4-neg: -4px;
1539
- --gap-8-neg: -8px;
1540
- --gap-12-neg: -12px;
1541
- --gap-16-neg: -16px;
1542
- --gap-20-neg: -20px;
1543
- --gap-24-neg: -24px;
1544
- --gap-32-neg: -32px;
1545
- --gap-40-neg: -40px;
1546
- --gap-48-neg: -48px;
1535
+ --gap-96: var(--gap-7xl);
1536
+ --gap-128: var(--gap-8xl);
1537
+ --gap-2-neg: var(--gap-3xs-neg);
1538
+ --gap-4-neg: var(--gap-2xs-neg);
1539
+ --gap-8-neg: var(--gap-xs-neg);
1540
+ --gap-12-neg: var(--gap-s-neg);
1541
+ --gap-16-neg: var(--gap-m-neg);
1542
+ --gap-20-neg: var(--gap-l-neg);
1543
+ --gap-24-neg: var(--gap-xl-neg);
1544
+ --gap-32-neg: var(--gap-2xl-neg);
1545
+ --gap-40-neg: var(--gap-3xl-neg);
1546
+ --gap-48-neg: var(--gap-4xl-neg);
1547
1547
  --gap-56-neg: -56px;
1548
- --gap-64-neg: -64px;
1549
- --gap-72-neg: -72px;
1548
+ --gap-64-neg: var(--gap-5xl-neg);
1549
+ --gap-72-neg: var(--gap-6xl-neg);
1550
1550
  --gap-80-neg: -80px;
1551
- --gap-96-neg: -96px;
1552
- --gap-128-neg: -128px;
1551
+ --gap-96-neg: var(--gap-7xl-neg);
1552
+ --gap-128-neg: var(--gap-8xl-neg);
1553
1553
  } :root {
1554
1554
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1555
1555
  sans-serif;
1556
1556
  --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
1557
1557
  'Helvetica Neue', Helvetica, sans-serif;
1558
+ } :root {
1559
+ --focus-color: var(--color-light-status-info);
1560
+ --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
1561
+ sans-serif;
1562
+ --disabled-cursor: not-allowed;
1563
+ --arrow-transform: rotate(180deg);
1564
+ --size-xxs-height: 32px;
1565
+ --size-xs-height: 40px;
1566
+ --size-s-height: 48px;
1567
+ --size-m-height: 56px;
1568
+ --size-l-height: 64px;
1569
+ --size-xl-height: 72px;
1558
1570
  }