@alfalab/core-components-vars 9.9.1 → 9.11.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 (23) hide show
  1. package/border-radius.css +20 -7
  2. package/cssm/border-radius.css +20 -7
  3. package/cssm/bundle/click.css +84 -36
  4. package/cssm/bundle/corp.css +84 -36
  5. package/cssm/bundle/intranet.css +84 -36
  6. package/cssm/bundle/mobile.css +84 -36
  7. package/cssm/bundle/site.css +84 -36
  8. package/cssm/gaps.css +64 -29
  9. package/cssm/index.css +84 -36
  10. package/cssm/index.d.ts +44 -0
  11. package/cssm/index.js +44 -0
  12. package/esm/index.d.ts +44 -0
  13. package/esm/index.js +44 -0
  14. package/gaps.css +64 -29
  15. package/index.d.ts +44 -0
  16. package/index.js +44 -0
  17. package/modern/index.d.ts +44 -0
  18. package/modern/index.js +44 -0
  19. package/package.json +1 -1
  20. package/src/border-radius.css +20 -7
  21. package/src/gaps.css +64 -29
  22. package/src/typography.css +24 -0
  23. package/typography.css +24 -0
package/border-radius.css CHANGED
@@ -1,11 +1,24 @@
1
1
  :root {
2
- --border-radius-xs: 2px;
3
- --border-radius-s: 4px;
4
- --border-radius-m: 8px;
5
- --border-radius-l: 12px;
6
- --border-radius-xl: 16px;
7
- --border-radius-xxl: 20px;
8
- --border-radius-3xl: 24px;
2
+ --border-radius-xs: 2px; /* deprecated */
3
+ --border-radius-s: 4px; /* deprecated */
4
+ --border-radius-m: 8px; /* deprecated */
5
+ --border-radius-l: 12px; /* deprecated */
6
+ --border-radius-xl: 16px; /* deprecated */
7
+ --border-radius-xxl: 20px; /* deprecated */
8
+ --border-radius-3xl: 24px; /* deprecated */
9
9
  --border-radius-circle: 50%;
10
10
  --border-radius-pill: 99px;
11
+
12
+ /* новые значения, используйте их */
13
+ --border-radius-0: 0;
14
+ --border-radius-4: 4px;
15
+ --border-radius-6: 6px;
16
+ --border-radius-8: 8px;
17
+ --border-radius-10: 10px;
18
+ --border-radius-12: 12px;
19
+ --border-radius-16: 16px;
20
+ --border-radius-20: 20px;
21
+ --border-radius-24: 24px;
22
+ --border-radius-36: 36px;
23
+ --border-radius-64: 64px;
11
24
  }
package/cssm/border-radius.css CHANGED
@@ -1,11 +1,24 @@
1
1
  :root {
2
- --border-radius-xs: 2px;
3
- --border-radius-s: 4px;
4
- --border-radius-m: 8px;
5
- --border-radius-l: 12px;
6
- --border-radius-xl: 16px;
7
- --border-radius-xxl: 20px;
8
- --border-radius-3xl: 24px;
2
+ --border-radius-xs: 2px; /* deprecated */
3
+ --border-radius-s: 4px; /* deprecated */
4
+ --border-radius-m: 8px; /* deprecated */
5
+ --border-radius-l: 12px; /* deprecated */
6
+ --border-radius-xl: 16px; /* deprecated */
7
+ --border-radius-xxl: 20px; /* deprecated */
8
+ --border-radius-3xl: 24px; /* deprecated */
9
9
  --border-radius-circle: 50%;
10
10
  --border-radius-pill: 99px;
11
+
12
+ /* новые значения, используйте их */
13
+ --border-radius-0: 0;
14
+ --border-radius-4: 4px;
15
+ --border-radius-6: 6px;
16
+ --border-radius-8: 8px;
17
+ --border-radius-10: 10px;
18
+ --border-radius-12: 12px;
19
+ --border-radius-16: 16px;
20
+ --border-radius-20: 20px;
21
+ --border-radius-24: 24px;
22
+ --border-radius-36: 36px;
23
+ --border-radius-64: 64px;
11
24
  }
package/cssm/bundle/click.css CHANGED
@@ -1368,46 +1368,94 @@
1368
1368
  0 -16px 32px rgba(0, 0, 0, 0.16);
1369
1369
  }
1370
1370
  :root {
1371
- --border-radius-xs: 2px;
1372
- --border-radius-s: 4px;
1373
- --border-radius-m: 8px;
1374
- --border-radius-l: 12px;
1375
- --border-radius-xl: 16px;
1376
- --border-radius-xxl: 20px;
1377
- --border-radius-3xl: 24px;
1371
+ --border-radius-xs: 2px; /* deprecated */
1372
+ --border-radius-s: 4px; /* deprecated */
1373
+ --border-radius-m: 8px; /* deprecated */
1374
+ --border-radius-l: 12px; /* deprecated */
1375
+ --border-radius-xl: 16px; /* deprecated */
1376
+ --border-radius-xxl: 20px; /* deprecated */
1377
+ --border-radius-3xl: 24px; /* deprecated */
1378
1378
  --border-radius-circle: 50%;
1379
1379
  --border-radius-pill: 99px;
1380
+
1381
+ /* новые значения, используйте их */
1382
+ --border-radius-0: 0;
1383
+ --border-radius-4: 4px;
1384
+ --border-radius-6: 6px;
1385
+ --border-radius-8: 8px;
1386
+ --border-radius-10: 10px;
1387
+ --border-radius-12: 12px;
1388
+ --border-radius-16: 16px;
1389
+ --border-radius-20: 20px;
1390
+ --border-radius-24: 24px;
1391
+ --border-radius-36: 36px;
1392
+ --border-radius-64: 64px;
1380
1393
  }
1381
1394
  :root {
1382
- --gap-3xs: 2px;
1383
- --gap-2xs: 4px;
1384
- --gap-xs: 8px;
1385
- --gap-s: 12px;
1386
- --gap-2s: 14px;
1387
- --gap-m: 16px;
1388
- --gap-l: 20px;
1389
- --gap-xl: 24px;
1390
- --gap-2xl: 32px;
1391
- --gap-3xl: 40px;
1392
- --gap-4xl: 48px;
1393
- --gap-5xl: 64px;
1394
- --gap-6xl: 72px;
1395
- --gap-7xl: 96px;
1396
- --gap-8xl: 128px;
1397
- --gap-3xs-neg: -2px;
1398
- --gap-2xs-neg: -4px;
1399
- --gap-xs-neg: -8px;
1400
- --gap-s-neg: -12px;
1401
- --gap-m-neg: -16px;
1402
- --gap-l-neg: -20px;
1403
- --gap-xl-neg: -24px;
1404
- --gap-2xl-neg: -32px;
1405
- --gap-3xl-neg: -40px;
1406
- --gap-4xl-neg: -48px;
1407
- --gap-5xl-neg: -64px;
1408
- --gap-6xl-neg: -72px;
1409
- --gap-7xl-neg: -96px;
1410
- --gap-8xl-neg: -128px;
1395
+ --gap-3xs: 2px; /* deprecated */
1396
+ --gap-2xs: 4px; /* deprecated */
1397
+ --gap-xs: 8px; /* deprecated */
1398
+ --gap-s: 12px; /* deprecated */
1399
+ --gap-2s: 14px; /* deprecated */
1400
+ --gap-m: 16px; /* deprecated */
1401
+ --gap-l: 20px; /* deprecated */
1402
+ --gap-xl: 24px; /* deprecated */
1403
+ --gap-2xl: 32px; /* deprecated */
1404
+ --gap-3xl: 40px; /* deprecated */
1405
+ --gap-4xl: 48px; /* deprecated */
1406
+ --gap-5xl: 64px; /* deprecated */
1407
+ --gap-6xl: 72px; /* deprecated */
1408
+ --gap-7xl: 96px; /* deprecated */
1409
+ --gap-8xl: 128px; /* deprecated */
1410
+ --gap-3xs-neg: -2px; /* deprecated */
1411
+ --gap-2xs-neg: -4px; /* deprecated */
1412
+ --gap-xs-neg: -8px; /* deprecated */
1413
+ --gap-s-neg: -12px; /* deprecated */
1414
+ --gap-m-neg: -16px; /* deprecated */
1415
+ --gap-l-neg: -20px; /* deprecated */
1416
+ --gap-xl-neg: -24px; /* deprecated */
1417
+ --gap-2xl-neg: -32px; /* deprecated */
1418
+ --gap-3xl-neg: -40px; /* deprecated */
1419
+ --gap-4xl-neg: -48px; /* deprecated */
1420
+ --gap-5xl-neg: -64px; /* deprecated */
1421
+ --gap-6xl-neg: -72px; /* deprecated */
1422
+ --gap-7xl-neg: -96px; /* deprecated */
1423
+ --gap-8xl-neg: -128px; /* deprecated */
1424
+
1425
+ /* новые значения, используйте их */
1426
+ --gap-0: 0;
1427
+ --gap-2: 2px;
1428
+ --gap-4: 4px;
1429
+ --gap-8: 8px;
1430
+ --gap-12: 12px;
1431
+ --gap-16: 16px;
1432
+ --gap-20: 20px;
1433
+ --gap-24: 24px;
1434
+ --gap-32: 32px;
1435
+ --gap-40: 40px;
1436
+ --gap-48: 48px;
1437
+ --gap-56: 56px;
1438
+ --gap-64: 64px;
1439
+ --gap-72: 72px;
1440
+ --gap-80: 80px;
1441
+ --gap-96: 96px;
1442
+ --gap-128: 128px;
1443
+ --gap-2-neg: -2px;
1444
+ --gap-4-neg: -4px;
1445
+ --gap-8-neg: -8px;
1446
+ --gap-12-neg: -12px;
1447
+ --gap-16-neg: -16px;
1448
+ --gap-20-neg: -20px;
1449
+ --gap-24-neg: -24px;
1450
+ --gap-32-neg: -32px;
1451
+ --gap-40-neg: -40px;
1452
+ --gap-48-neg: -48px;
1453
+ --gap-56-neg: -56px;
1454
+ --gap-64-neg: -64px;
1455
+ --gap-72-neg: -72px;
1456
+ --gap-80-neg: -80px;
1457
+ --gap-96-neg: -96px;
1458
+ --gap-128-neg: -128px;
1411
1459
  }
1412
1460
  :root {
1413
1461
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
package/cssm/bundle/corp.css CHANGED
@@ -1368,46 +1368,94 @@
1368
1368
  0 -16px 32px rgba(0, 0, 0, 0.16);
1369
1369
  }
1370
1370
  :root {
1371
- --border-radius-xs: 2px;
1372
- --border-radius-s: 4px;
1373
- --border-radius-m: 8px;
1374
- --border-radius-l: 12px;
1375
- --border-radius-xl: 16px;
1376
- --border-radius-xxl: 20px;
1377
- --border-radius-3xl: 24px;
1371
+ --border-radius-xs: 2px; /* deprecated */
1372
+ --border-radius-s: 4px; /* deprecated */
1373
+ --border-radius-m: 8px; /* deprecated */
1374
+ --border-radius-l: 12px; /* deprecated */
1375
+ --border-radius-xl: 16px; /* deprecated */
1376
+ --border-radius-xxl: 20px; /* deprecated */
1377
+ --border-radius-3xl: 24px; /* deprecated */
1378
1378
  --border-radius-circle: 50%;
1379
1379
  --border-radius-pill: 99px;
1380
+
1381
+ /* новые значения, используйте их */
1382
+ --border-radius-0: 0;
1383
+ --border-radius-4: 4px;
1384
+ --border-radius-6: 6px;
1385
+ --border-radius-8: 8px;
1386
+ --border-radius-10: 10px;
1387
+ --border-radius-12: 12px;
1388
+ --border-radius-16: 16px;
1389
+ --border-radius-20: 20px;
1390
+ --border-radius-24: 24px;
1391
+ --border-radius-36: 36px;
1392
+ --border-radius-64: 64px;
1380
1393
  }
1381
1394
  :root {
1382
- --gap-3xs: 2px;
1383
- --gap-2xs: 4px;
1384
- --gap-xs: 8px;
1385
- --gap-s: 12px;
1386
- --gap-2s: 14px;
1387
- --gap-m: 16px;
1388
- --gap-l: 20px;
1389
- --gap-xl: 24px;
1390
- --gap-2xl: 32px;
1391
- --gap-3xl: 40px;
1392
- --gap-4xl: 48px;
1393
- --gap-5xl: 64px;
1394
- --gap-6xl: 72px;
1395
- --gap-7xl: 96px;
1396
- --gap-8xl: 128px;
1397
- --gap-3xs-neg: -2px;
1398
- --gap-2xs-neg: -4px;
1399
- --gap-xs-neg: -8px;
1400
- --gap-s-neg: -12px;
1401
- --gap-m-neg: -16px;
1402
- --gap-l-neg: -20px;
1403
- --gap-xl-neg: -24px;
1404
- --gap-2xl-neg: -32px;
1405
- --gap-3xl-neg: -40px;
1406
- --gap-4xl-neg: -48px;
1407
- --gap-5xl-neg: -64px;
1408
- --gap-6xl-neg: -72px;
1409
- --gap-7xl-neg: -96px;
1410
- --gap-8xl-neg: -128px;
1395
+ --gap-3xs: 2px; /* deprecated */
1396
+ --gap-2xs: 4px; /* deprecated */
1397
+ --gap-xs: 8px; /* deprecated */
1398
+ --gap-s: 12px; /* deprecated */
1399
+ --gap-2s: 14px; /* deprecated */
1400
+ --gap-m: 16px; /* deprecated */
1401
+ --gap-l: 20px; /* deprecated */
1402
+ --gap-xl: 24px; /* deprecated */
1403
+ --gap-2xl: 32px; /* deprecated */
1404
+ --gap-3xl: 40px; /* deprecated */
1405
+ --gap-4xl: 48px; /* deprecated */
1406
+ --gap-5xl: 64px; /* deprecated */
1407
+ --gap-6xl: 72px; /* deprecated */
1408
+ --gap-7xl: 96px; /* deprecated */
1409
+ --gap-8xl: 128px; /* deprecated */
1410
+ --gap-3xs-neg: -2px; /* deprecated */
1411
+ --gap-2xs-neg: -4px; /* deprecated */
1412
+ --gap-xs-neg: -8px; /* deprecated */
1413
+ --gap-s-neg: -12px; /* deprecated */
1414
+ --gap-m-neg: -16px; /* deprecated */
1415
+ --gap-l-neg: -20px; /* deprecated */
1416
+ --gap-xl-neg: -24px; /* deprecated */
1417
+ --gap-2xl-neg: -32px; /* deprecated */
1418
+ --gap-3xl-neg: -40px; /* deprecated */
1419
+ --gap-4xl-neg: -48px; /* deprecated */
1420
+ --gap-5xl-neg: -64px; /* deprecated */
1421
+ --gap-6xl-neg: -72px; /* deprecated */
1422
+ --gap-7xl-neg: -96px; /* deprecated */
1423
+ --gap-8xl-neg: -128px; /* deprecated */
1424
+
1425
+ /* новые значения, используйте их */
1426
+ --gap-0: 0;
1427
+ --gap-2: 2px;
1428
+ --gap-4: 4px;
1429
+ --gap-8: 8px;
1430
+ --gap-12: 12px;
1431
+ --gap-16: 16px;
1432
+ --gap-20: 20px;
1433
+ --gap-24: 24px;
1434
+ --gap-32: 32px;
1435
+ --gap-40: 40px;
1436
+ --gap-48: 48px;
1437
+ --gap-56: 56px;
1438
+ --gap-64: 64px;
1439
+ --gap-72: 72px;
1440
+ --gap-80: 80px;
1441
+ --gap-96: 96px;
1442
+ --gap-128: 128px;
1443
+ --gap-2-neg: -2px;
1444
+ --gap-4-neg: -4px;
1445
+ --gap-8-neg: -8px;
1446
+ --gap-12-neg: -12px;
1447
+ --gap-16-neg: -16px;
1448
+ --gap-20-neg: -20px;
1449
+ --gap-24-neg: -24px;
1450
+ --gap-32-neg: -32px;
1451
+ --gap-40-neg: -40px;
1452
+ --gap-48-neg: -48px;
1453
+ --gap-56-neg: -56px;
1454
+ --gap-64-neg: -64px;
1455
+ --gap-72-neg: -72px;
1456
+ --gap-80-neg: -80px;
1457
+ --gap-96-neg: -96px;
1458
+ --gap-128-neg: -128px;
1411
1459
  }
1412
1460
  :root {
1413
1461
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
package/cssm/bundle/intranet.css CHANGED
@@ -1368,46 +1368,94 @@
1368
1368
  0 -16px 32px rgba(0, 0, 0, 0.16);
1369
1369
  }
1370
1370
  :root {
1371
- --border-radius-xs: 2px;
1372
- --border-radius-s: 4px;
1373
- --border-radius-m: 8px;
1374
- --border-radius-l: 12px;
1375
- --border-radius-xl: 16px;
1376
- --border-radius-xxl: 20px;
1377
- --border-radius-3xl: 24px;
1371
+ --border-radius-xs: 2px; /* deprecated */
1372
+ --border-radius-s: 4px; /* deprecated */
1373
+ --border-radius-m: 8px; /* deprecated */
1374
+ --border-radius-l: 12px; /* deprecated */
1375
+ --border-radius-xl: 16px; /* deprecated */
1376
+ --border-radius-xxl: 20px; /* deprecated */
1377
+ --border-radius-3xl: 24px; /* deprecated */
1378
1378
  --border-radius-circle: 50%;
1379
1379
  --border-radius-pill: 99px;
1380
+
1381
+ /* новые значения, используйте их */
1382
+ --border-radius-0: 0;
1383
+ --border-radius-4: 4px;
1384
+ --border-radius-6: 6px;
1385
+ --border-radius-8: 8px;
1386
+ --border-radius-10: 10px;
1387
+ --border-radius-12: 12px;
1388
+ --border-radius-16: 16px;
1389
+ --border-radius-20: 20px;
1390
+ --border-radius-24: 24px;
1391
+ --border-radius-36: 36px;
1392
+ --border-radius-64: 64px;
1380
1393
  }
1381
1394
  :root {
1382
- --gap-3xs: 2px;
1383
- --gap-2xs: 4px;
1384
- --gap-xs: 8px;
1385
- --gap-s: 12px;
1386
- --gap-2s: 14px;
1387
- --gap-m: 16px;
1388
- --gap-l: 20px;
1389
- --gap-xl: 24px;
1390
- --gap-2xl: 32px;
1391
- --gap-3xl: 40px;
1392
- --gap-4xl: 48px;
1393
- --gap-5xl: 64px;
1394
- --gap-6xl: 72px;
1395
- --gap-7xl: 96px;
1396
- --gap-8xl: 128px;
1397
- --gap-3xs-neg: -2px;
1398
- --gap-2xs-neg: -4px;
1399
- --gap-xs-neg: -8px;
1400
- --gap-s-neg: -12px;
1401
- --gap-m-neg: -16px;
1402
- --gap-l-neg: -20px;
1403
- --gap-xl-neg: -24px;
1404
- --gap-2xl-neg: -32px;
1405
- --gap-3xl-neg: -40px;
1406
- --gap-4xl-neg: -48px;
1407
- --gap-5xl-neg: -64px;
1408
- --gap-6xl-neg: -72px;
1409
- --gap-7xl-neg: -96px;
1410
- --gap-8xl-neg: -128px;
1395
+ --gap-3xs: 2px; /* deprecated */
1396
+ --gap-2xs: 4px; /* deprecated */
1397
+ --gap-xs: 8px; /* deprecated */
1398
+ --gap-s: 12px; /* deprecated */
1399
+ --gap-2s: 14px; /* deprecated */
1400
+ --gap-m: 16px; /* deprecated */
1401
+ --gap-l: 20px; /* deprecated */
1402
+ --gap-xl: 24px; /* deprecated */
1403
+ --gap-2xl: 32px; /* deprecated */
1404
+ --gap-3xl: 40px; /* deprecated */
1405
+ --gap-4xl: 48px; /* deprecated */
1406
+ --gap-5xl: 64px; /* deprecated */
1407
+ --gap-6xl: 72px; /* deprecated */
1408
+ --gap-7xl: 96px; /* deprecated */
1409
+ --gap-8xl: 128px; /* deprecated */
1410
+ --gap-3xs-neg: -2px; /* deprecated */
1411
+ --gap-2xs-neg: -4px; /* deprecated */
1412
+ --gap-xs-neg: -8px; /* deprecated */
1413
+ --gap-s-neg: -12px; /* deprecated */
1414
+ --gap-m-neg: -16px; /* deprecated */
1415
+ --gap-l-neg: -20px; /* deprecated */
1416
+ --gap-xl-neg: -24px; /* deprecated */
1417
+ --gap-2xl-neg: -32px; /* deprecated */
1418
+ --gap-3xl-neg: -40px; /* deprecated */
1419
+ --gap-4xl-neg: -48px; /* deprecated */
1420
+ --gap-5xl-neg: -64px; /* deprecated */
1421
+ --gap-6xl-neg: -72px; /* deprecated */
1422
+ --gap-7xl-neg: -96px; /* deprecated */
1423
+ --gap-8xl-neg: -128px; /* deprecated */
1424
+
1425
+ /* новые значения, используйте их */
1426
+ --gap-0: 0;
1427
+ --gap-2: 2px;
1428
+ --gap-4: 4px;
1429
+ --gap-8: 8px;
1430
+ --gap-12: 12px;
1431
+ --gap-16: 16px;
1432
+ --gap-20: 20px;
1433
+ --gap-24: 24px;
1434
+ --gap-32: 32px;
1435
+ --gap-40: 40px;
1436
+ --gap-48: 48px;
1437
+ --gap-56: 56px;
1438
+ --gap-64: 64px;
1439
+ --gap-72: 72px;
1440
+ --gap-80: 80px;
1441
+ --gap-96: 96px;
1442
+ --gap-128: 128px;
1443
+ --gap-2-neg: -2px;
1444
+ --gap-4-neg: -4px;
1445
+ --gap-8-neg: -8px;
1446
+ --gap-12-neg: -12px;
1447
+ --gap-16-neg: -16px;
1448
+ --gap-20-neg: -20px;
1449
+ --gap-24-neg: -24px;
1450
+ --gap-32-neg: -32px;
1451
+ --gap-40-neg: -40px;
1452
+ --gap-48-neg: -48px;
1453
+ --gap-56-neg: -56px;
1454
+ --gap-64-neg: -64px;
1455
+ --gap-72-neg: -72px;
1456
+ --gap-80-neg: -80px;
1457
+ --gap-96-neg: -96px;
1458
+ --gap-128-neg: -128px;
1411
1459
  }
1412
1460
  :root {
1413
1461
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
package/cssm/bundle/mobile.css CHANGED
@@ -1368,46 +1368,94 @@
1368
1368
  0 -16px 32px rgba(0, 0, 0, 0.16);
1369
1369
  }
1370
1370
  :root {
1371
- --border-radius-xs: 2px;
1372
- --border-radius-s: 4px;
1373
- --border-radius-m: 8px;
1374
- --border-radius-l: 12px;
1375
- --border-radius-xl: 16px;
1376
- --border-radius-xxl: 20px;
1377
- --border-radius-3xl: 24px;
1371
+ --border-radius-xs: 2px; /* deprecated */
1372
+ --border-radius-s: 4px; /* deprecated */
1373
+ --border-radius-m: 8px; /* deprecated */
1374
+ --border-radius-l: 12px; /* deprecated */
1375
+ --border-radius-xl: 16px; /* deprecated */
1376
+ --border-radius-xxl: 20px; /* deprecated */
1377
+ --border-radius-3xl: 24px; /* deprecated */
1378
1378
  --border-radius-circle: 50%;
1379
1379
  --border-radius-pill: 99px;
1380
+
1381
+ /* новые значения, используйте их */
1382
+ --border-radius-0: 0;
1383
+ --border-radius-4: 4px;
1384
+ --border-radius-6: 6px;
1385
+ --border-radius-8: 8px;
1386
+ --border-radius-10: 10px;
1387
+ --border-radius-12: 12px;
1388
+ --border-radius-16: 16px;
1389
+ --border-radius-20: 20px;
1390
+ --border-radius-24: 24px;
1391
+ --border-radius-36: 36px;
1392
+ --border-radius-64: 64px;
1380
1393
  }
1381
1394
  :root {
1382
- --gap-3xs: 2px;
1383
- --gap-2xs: 4px;
1384
- --gap-xs: 8px;
1385
- --gap-s: 12px;
1386
- --gap-2s: 14px;
1387
- --gap-m: 16px;
1388
- --gap-l: 20px;
1389
- --gap-xl: 24px;
1390
- --gap-2xl: 32px;
1391
- --gap-3xl: 40px;
1392
- --gap-4xl: 48px;
1393
- --gap-5xl: 64px;
1394
- --gap-6xl: 72px;
1395
- --gap-7xl: 96px;
1396
- --gap-8xl: 128px;
1397
- --gap-3xs-neg: -2px;
1398
- --gap-2xs-neg: -4px;
1399
- --gap-xs-neg: -8px;
1400
- --gap-s-neg: -12px;
1401
- --gap-m-neg: -16px;
1402
- --gap-l-neg: -20px;
1403
- --gap-xl-neg: -24px;
1404
- --gap-2xl-neg: -32px;
1405
- --gap-3xl-neg: -40px;
1406
- --gap-4xl-neg: -48px;
1407
- --gap-5xl-neg: -64px;
1408
- --gap-6xl-neg: -72px;
1409
- --gap-7xl-neg: -96px;
1410
- --gap-8xl-neg: -128px;
1395
+ --gap-3xs: 2px; /* deprecated */
1396
+ --gap-2xs: 4px; /* deprecated */
1397
+ --gap-xs: 8px; /* deprecated */
1398
+ --gap-s: 12px; /* deprecated */
1399
+ --gap-2s: 14px; /* deprecated */
1400
+ --gap-m: 16px; /* deprecated */
1401
+ --gap-l: 20px; /* deprecated */
1402
+ --gap-xl: 24px; /* deprecated */
1403
+ --gap-2xl: 32px; /* deprecated */
1404
+ --gap-3xl: 40px; /* deprecated */
1405
+ --gap-4xl: 48px; /* deprecated */
1406
+ --gap-5xl: 64px; /* deprecated */
1407
+ --gap-6xl: 72px; /* deprecated */
1408
+ --gap-7xl: 96px; /* deprecated */
1409
+ --gap-8xl: 128px; /* deprecated */
1410
+ --gap-3xs-neg: -2px; /* deprecated */
1411
+ --gap-2xs-neg: -4px; /* deprecated */
1412
+ --gap-xs-neg: -8px; /* deprecated */
1413
+ --gap-s-neg: -12px; /* deprecated */
1414
+ --gap-m-neg: -16px; /* deprecated */
1415
+ --gap-l-neg: -20px; /* deprecated */
1416
+ --gap-xl-neg: -24px; /* deprecated */
1417
+ --gap-2xl-neg: -32px; /* deprecated */
1418
+ --gap-3xl-neg: -40px; /* deprecated */
1419
+ --gap-4xl-neg: -48px; /* deprecated */
1420
+ --gap-5xl-neg: -64px; /* deprecated */
1421
+ --gap-6xl-neg: -72px; /* deprecated */
1422
+ --gap-7xl-neg: -96px; /* deprecated */
1423
+ --gap-8xl-neg: -128px; /* deprecated */
1424
+
1425
+ /* новые значения, используйте их */
1426
+ --gap-0: 0;
1427
+ --gap-2: 2px;
1428
+ --gap-4: 4px;
1429
+ --gap-8: 8px;
1430
+ --gap-12: 12px;
1431
+ --gap-16: 16px;
1432
+ --gap-20: 20px;
1433
+ --gap-24: 24px;
1434
+ --gap-32: 32px;
1435
+ --gap-40: 40px;
1436
+ --gap-48: 48px;
1437
+ --gap-56: 56px;
1438
+ --gap-64: 64px;
1439
+ --gap-72: 72px;
1440
+ --gap-80: 80px;
1441
+ --gap-96: 96px;
1442
+ --gap-128: 128px;
1443
+ --gap-2-neg: -2px;
1444
+ --gap-4-neg: -4px;
1445
+ --gap-8-neg: -8px;
1446
+ --gap-12-neg: -12px;
1447
+ --gap-16-neg: -16px;
1448
+ --gap-20-neg: -20px;
1449
+ --gap-24-neg: -24px;
1450
+ --gap-32-neg: -32px;
1451
+ --gap-40-neg: -40px;
1452
+ --gap-48-neg: -48px;
1453
+ --gap-56-neg: -56px;
1454
+ --gap-64-neg: -64px;
1455
+ --gap-72-neg: -72px;
1456
+ --gap-80-neg: -80px;
1457
+ --gap-96-neg: -96px;
1458
+ --gap-128-neg: -128px;
1411
1459
  }
1412
1460
  :root {
1413
1461
  --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,