@tedi-design-system/core 3.1.0 → 3.3.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 (8) hide show
  1. package/README.md +2 -0
  2. package/docs/css-utilities.md +444 -0
  3. package/index.css +1 -1
  4. package/package.json +9 -9
  5. package/variables/_dimensional-variables.scss +34 -37
  6. package/variables/themes/default/font-variables__default.scss +8 -6
  7. package/variables/themes/muis/font-variables__muis.scss +4 -3
  8. package/variables/themes/rit/font-variables__rit.scss +4 -3
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@tedi-design-system/core",
3
- "version": "3.1.0",
3
+ "version": "3.3.0",
4
4
  "main": "src/index.scss",
5
5
  "scripts": {
6
6
  "prepare": "husky || true",
7
- "build": "rm -rf dist && mkdir dist && cp -a src/* dist/ && sass src/index.scss dist/index.css --style=compressed --no-source-map && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex && mkdir dist/fonts && cp -a public/fonts/* dist/fonts/ && cp README.md dist/ && cp package.json dist/",
7
+ "build": "rm -rf dist && mkdir dist && cp -a src/* dist/ && sass src/index.scss dist/index.css --style=compressed --no-source-map && replace-in-file //fonts//g \"./fonts/\" dist/index.css --isRegex && mkdir dist/fonts && cp -a public/fonts/* dist/fonts/ && cp -a docs dist/ && cp README.md dist/ && cp package.json dist/",
8
8
  "release": "npx semantic-release",
9
9
  "lint": "npx stylelint \"src/**/*.scss\" --fix",
10
10
  "import-variables": "dotenv -e .env -- npx ts-node scripts/variable-exporter.ts"
@@ -17,26 +17,26 @@
17
17
  "url": "git+https://github.com/TEDI-Design-System/core.git"
18
18
  },
19
19
  "engines": {
20
- "npm": ">=8.0.0",
21
- "node": ">=18.0.0"
20
+ "npm": ">=11.0.0",
21
+ "node": ">=24.0.0"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@commitlint/cli": "^20.3.0",
25
- "@commitlint/config-conventional": "^20.4.0",
25
+ "@commitlint/config-conventional": "^20.4.2",
26
26
  "@semantic-release/changelog": "^6.0.3",
27
27
  "@semantic-release/commit-analyzer": "^13.0.0",
28
28
  "@semantic-release/git": "^10.0.1",
29
- "@semantic-release/npm": "^12.0.1",
29
+ "@semantic-release/npm": "^13.1.5",
30
30
  "dotenv-cli": "^11.0.0",
31
31
  "husky": "^9.0.11",
32
- "lint-staged": "^16.2.7",
32
+ "lint-staged": "^16.3.1",
33
33
  "node-fetch": "^3.3.2",
34
34
  "prettier": "^3.8.1",
35
35
  "replace-in-file": "^8.4.0",
36
36
  "sass": "^1.97.1",
37
- "semantic-release": "^24.2.7",
37
+ "semantic-release": "^25.0.3",
38
38
  "stylelint": "^16.26.1",
39
- "stylelint-config-recess-order": "^7.6.0",
39
+ "stylelint-config-recess-order": "^7.6.1",
40
40
  "stylelint-config-standard-scss": "^16.0.0",
41
41
  "stylelint-declaration-strict-value": "^1.9.2",
42
42
  "ts-node": "^10.9.2",
package/variables/_dimensional-variables.scss CHANGED
@@ -244,8 +244,8 @@
244
244
  --layout-page-spacing-x: 40px;
245
245
  --layout-to-be-deleted-outer-container: 1520px;
246
246
  --link-icon-default: var(--icon-03);
247
- --link-icon-padding-top: var(--dimensions-02);
248
- --link-icon-padding-y: var(--dimensions-03);
247
+ --link-icon-padding-y: 3px;
248
+ --link-icon-padding-y-sm: var(--dimensions-03);
249
249
  --link-icon-responsive: var(--icon-02);
250
250
  --link-icon-small: var(--icon-02);
251
251
  --link-inner-spacing-x: var(--dimensions-03);
@@ -327,10 +327,10 @@
327
327
  --progress-bar-height: var(--form-slider-height);
328
328
  --progress-bar-height-sm: var(--dimensions-03);
329
329
  --progress-bar-radius: var(--form-slider-radius);
330
- --separator-dotted-dot-lg: 15px;
331
- --separator-dotted-dot-md: 9px;
332
- --separator-dotted-dot-sm: var(--dimensions-03);
333
- --separator-dotted-dot-xs: var(--dimensions-02);
330
+ --separator-dot-size-lg: 15px;
331
+ --separator-dot-size-md: 9px;
332
+ --separator-dot-size-sm: var(--dimensions-03);
333
+ --separator-dot-size-xs: var(--dimensions-02);
334
334
  --separator-dotted-line-width: var(--dimensions-01);
335
335
  --separator-spacing-x-01: var(--dimensions-04);
336
336
  --separator-spacing-x-02: var(--dimensions-07);
@@ -339,12 +339,11 @@
339
339
  --separator-spacing-y-02: var(--dimensions-05);
340
340
  --separator-spacing-y-03: var(--dimensions-10);
341
341
  --separator-spacing-y-04: var(--dimensions-13);
342
- --separator-top-spacing-large-dot-lg: 21px;
343
- --separator-top-spacing-large-dot-md: 15.5px;
344
- --separator-top-spacing-large-dot-sm: var(--dimensions-03);
345
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
346
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
347
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
342
+ --separator-thickness-lg: var(--dimensions-02);
343
+ --separator-thickness-md: var(--dimensions-01);
344
+ --separator-thickness-sm: 0.5px;
345
+ --separator-thickness-xs: 0.25px;
346
+ --separator-top-spacing-large-dot-sm: 4px;
348
347
  --status-indicator-inner-spacing: var(--dimensions-05);
349
348
  --status-indicator-lg: var(--dimensions-07);
350
349
  --status-indicator-sm: var(--dimensions-05);
@@ -366,7 +365,7 @@
366
365
  --stepper-item-vertical-padding-y-sm: 2px;
367
366
  --stepper-item-vertical-step-size-lg: 24px;
368
367
  --stepper-item-vertical-step-size-md: 16px;
369
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
368
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
370
369
  --stepper-item-vertical-sub-line-bottom: 9px;
371
370
  --stepper-item-vertical-sub-line-top: 9.5px;
372
371
  --tab-icon: 18px;
@@ -663,8 +662,8 @@
663
662
  --layout-page-spacing-x: 24px;
664
663
  --layout-to-be-deleted-outer-container: 1520px;
665
664
  --link-icon-default: var(--icon-03);
666
- --link-icon-padding-top: var(--dimensions-02);
667
- --link-icon-padding-y: var(--dimensions-03);
665
+ --link-icon-padding-y: 3px;
666
+ --link-icon-padding-y-sm: var(--dimensions-03);
668
667
  --link-icon-responsive: var(--icon-03);
669
668
  --link-icon-small: var(--icon-02);
670
669
  --link-inner-spacing-x: var(--dimensions-03);
@@ -746,10 +745,10 @@
746
745
  --progress-bar-height: var(--form-slider-height);
747
746
  --progress-bar-height-sm: var(--dimensions-03);
748
747
  --progress-bar-radius: var(--form-slider-radius);
749
- --separator-dotted-dot-lg: 15px;
750
- --separator-dotted-dot-md: 9px;
751
- --separator-dotted-dot-sm: var(--dimensions-03);
752
- --separator-dotted-dot-xs: var(--dimensions-02);
748
+ --separator-dot-size-lg: 15px;
749
+ --separator-dot-size-md: 9px;
750
+ --separator-dot-size-sm: var(--dimensions-03);
751
+ --separator-dot-size-xs: var(--dimensions-02);
753
752
  --separator-dotted-line-width: var(--dimensions-01);
754
753
  --separator-spacing-x-01: var(--dimensions-04);
755
754
  --separator-spacing-x-02: var(--dimensions-07);
@@ -758,12 +757,11 @@
758
757
  --separator-spacing-y-02: var(--dimensions-05);
759
758
  --separator-spacing-y-03: var(--dimensions-10);
760
759
  --separator-spacing-y-04: var(--dimensions-13);
761
- --separator-top-spacing-large-dot-lg: 21px;
762
- --separator-top-spacing-large-dot-md: 15.5px;
760
+ --separator-thickness-lg: var(--dimensions-02);
761
+ --separator-thickness-md: var(--dimensions-01);
762
+ --separator-thickness-sm: 0.5px;
763
+ --separator-thickness-xs: 0.25px;
763
764
  --separator-top-spacing-large-dot-sm: var(--dimensions-03);
764
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
765
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
766
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
767
765
  --status-indicator-inner-spacing: var(--dimensions-05);
768
766
  --status-indicator-lg: var(--dimensions-07);
769
767
  --status-indicator-sm: var(--dimensions-05);
@@ -785,7 +783,7 @@
785
783
  --stepper-item-vertical-padding-y-sm: 2px;
786
784
  --stepper-item-vertical-step-size-lg: 24px;
787
785
  --stepper-item-vertical-step-size-md: 16px;
788
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
786
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
789
787
  --stepper-item-vertical-sub-line-bottom: 9px;
790
788
  --stepper-item-vertical-sub-line-top: 9.5px;
791
789
  --tab-icon: 18px;
@@ -1083,8 +1081,8 @@
1083
1081
  --layout-page-spacing-x: 8px;
1084
1082
  --layout-to-be-deleted-outer-container: 1520px;
1085
1083
  --link-icon-default: var(--icon-03);
1086
- --link-icon-padding-top: var(--dimensions-02);
1087
- --link-icon-padding-y: var(--dimensions-03);
1084
+ --link-icon-padding-y: 3px;
1085
+ --link-icon-padding-y-sm: 3px;
1088
1086
  --link-icon-responsive: var(--icon-03);
1089
1087
  --link-icon-small: var(--icon-02);
1090
1088
  --link-inner-spacing-x: var(--dimensions-03);
@@ -1166,10 +1164,10 @@
1166
1164
  --progress-bar-height: var(--form-slider-height);
1167
1165
  --progress-bar-height-sm: var(--dimensions-03);
1168
1166
  --progress-bar-radius: var(--form-slider-radius);
1169
- --separator-dotted-dot-lg: 15px;
1170
- --separator-dotted-dot-md: 9px;
1171
- --separator-dotted-dot-sm: var(--dimensions-03);
1172
- --separator-dotted-dot-xs: var(--dimensions-02);
1167
+ --separator-dot-size-lg: 15px;
1168
+ --separator-dot-size-md: 9px;
1169
+ --separator-dot-size-sm: var(--dimensions-03);
1170
+ --separator-dot-size-xs: var(--dimensions-02);
1173
1171
  --separator-dotted-line-width: var(--dimensions-01);
1174
1172
  --separator-spacing-x-01: var(--dimensions-04);
1175
1173
  --separator-spacing-x-02: var(--dimensions-07);
@@ -1178,12 +1176,11 @@
1178
1176
  --separator-spacing-y-02: var(--dimensions-05);
1179
1177
  --separator-spacing-y-03: var(--dimensions-10);
1180
1178
  --separator-spacing-y-04: var(--dimensions-13);
1181
- --separator-top-spacing-large-dot-lg: 21px;
1182
- --separator-top-spacing-large-dot-md: 15.5px;
1179
+ --separator-thickness-lg: var(--dimensions-02);
1180
+ --separator-thickness-md: var(--dimensions-01);
1181
+ --separator-thickness-sm: 0.5px;
1182
+ --separator-thickness-xs: 0.25px;
1183
1183
  --separator-top-spacing-large-dot-sm: var(--dimensions-03);
1184
- --separator-top-spacing-small-dot-lg: var(--dimensions-13);
1185
- --separator-top-spacing-small-dot-md: var(--dimensions-06);
1186
- --separator-top-spacing-small-dot-sm: var(--dimensions-05);
1187
1184
  --status-indicator-inner-spacing: var(--dimensions-05);
1188
1185
  --status-indicator-lg: var(--dimensions-07);
1189
1186
  --status-indicator-sm: var(--dimensions-05);
@@ -1205,7 +1202,7 @@
1205
1202
  --stepper-item-vertical-padding-y-sm: 2px;
1206
1203
  --stepper-item-vertical-step-size-lg: 24px;
1207
1204
  --stepper-item-vertical-step-size-md: 16px;
1208
- --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
1205
+ --stepper-item-vertical-step-size-sm: var(--separator-dot-size-md);
1209
1206
  --stepper-item-vertical-sub-line-bottom: 9px;
1210
1207
  --stepper-item-vertical-sub-line-top: 9.5px;
1211
1208
  --tab-icon: 18px;
package/variables/themes/default/font-variables__default.scss CHANGED
@@ -44,9 +44,10 @@
44
44
  --body-extra-small-size: var(--tedi-size-00);
45
45
  --body-extra-small-weight: var(--tedi-weight-02);
46
46
  --body-extra-small-line-height: var(--tedi-line-height-00);
47
- --body-link-regular: var(--body-regular-size);
48
- --body-link-small: var(--body-small-regular-size);
49
- --body-link-responsive: var(--body-small-regular-size);
47
+ --body-link-line-height: var(--body-regular-line-height);
48
+ --body-link-size-small: var(--body-small-regular-size);
49
+ --body-link-size-regular: var(--body-regular-size);
50
+ --body-link-size-responsive: var(--body-small-regular-size);
50
51
 
51
52
  @media (width <= 48rem) {
52
53
  --family-default: var(--tedi-family-roboto);
@@ -93,8 +94,9 @@
93
94
  --body-extra-small-size: var(--tedi-size-00);
94
95
  --body-extra-small-weight: var(--tedi-weight-02);
95
96
  --body-extra-small-line-height: var(--tedi-line-height-00);
96
- --body-link-regular: var(--body-regular-size);
97
- --body-link-small: var(--body-small-regular-size);
98
- --body-link-responsive: var(--body-regular-size);
97
+ --body-link-line-height: var(--body-regular-line-height);
98
+ --body-link-size-small: var(--body-small-regular-size);
99
+ --body-link-size-regular: var(--body-regular-size);
100
+ --body-link-size-responsive: var(--body-regular-size);
99
101
  }
100
102
  }
package/variables/themes/muis/font-variables__muis.scss CHANGED
@@ -8,9 +8,10 @@
8
8
  --body-extra-small-line-height: var(--tedi-line-height-00);
9
9
  --body-extra-small-size: var(--tedi-size-00);
10
10
  --body-extra-small-weight: var(--tedi-weight-02);
11
- --body-link-regular: var(--body-regular-size);
12
- --body-link-responsive: var(--body-small-regular-size);
13
- --body-link-small: var(--body-small-regular-size);
11
+ --body-link-line-height: var(--body-regular-line-height);
12
+ --body-link-size-regular: var(--body-regular-size);
13
+ --body-link-size-responsive: var(--body-small-regular-size);
14
+ --body-link-size-small: var(--body-small-regular-size);
14
15
  --body-regular-line-height: var(--tedi-line-height-03);
15
16
  --body-regular-size: var(--tedi-size-02);
16
17
  --body-regular-weight: var(--tedi-weight-02);
package/variables/themes/rit/font-variables__rit.scss CHANGED
@@ -8,9 +8,10 @@
8
8
  --body-extra-small-line-height: var(--tedi-line-height-00);
9
9
  --body-extra-small-size: var(--tedi-size-00);
10
10
  --body-extra-small-weight: var(--tedi-weight-02);
11
- --body-link-regular: var(--body-regular-size);
12
- --body-link-responsive: var(--body-small-regular-size);
13
- --body-link-small: var(--body-small-regular-size);
11
+ --body-link-line-height: var(--body-regular-line-height);
12
+ --body-link-size-regular: var(--body-regular-size);
13
+ --body-link-size-responsive: var(--body-small-regular-size);
14
+ --body-link-size-small: var(--body-small-regular-size);
14
15
  --body-regular-line-height: var(--tedi-line-height-03);
15
16
  --body-regular-size: var(--tedi-size-02);
16
17
  --body-regular-weight: var(--tedi-weight-02);