@tedi-design-system/core 2.4.0 → 3.0.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.
package/_base.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  html,
5
5
  body {
6
6
  height: 100%;
7
- background-color: var(--neutral-300);
7
+ background-color: var(--tedi-neutral-300);
8
8
  }
9
9
 
10
10
  html {
package/_helpers.scss CHANGED
@@ -26,7 +26,7 @@
26
26
  padding: 0;
27
27
  margin: -1px;
28
28
  overflow: hidden;
29
- clip: rect(0, 0, 0, 0);
29
+ clip-path: rect(0, 0, 0, 0);
30
30
  white-space: nowrap;
31
31
  border: 0;
32
32
 
@@ -37,7 +37,7 @@
37
37
  height: auto;
38
38
  margin: 0;
39
39
  overflow: visible;
40
- clip: auto;
40
+ clip-path: auto;
41
41
  white-space: inherit;
42
42
  }
43
43
  }
package/_icons.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  line-height: 1;
31
31
  text-transform: none;
32
32
  letter-spacing: normal;
33
- word-wrap: normal;
33
+ overflow-wrap: normal;
34
34
  white-space: nowrap;
35
35
  direction: ltr;
36
36
  -webkit-font-smoothing: antialiased;
package/_mixins.scss CHANGED
@@ -11,43 +11,8 @@ $breakpoints: (
11
11
  xxl: 1400px,
12
12
  );
13
13
 
14
- @function construct-variables($variable-names, $suffix) {
15
- $result: '';
16
-
17
- @each $name in $variable-names {
18
- $result: #{$result} var(--#{$name}-#{$suffix});
19
- }
20
-
21
- @return $result;
22
- }
23
-
24
- @mixin responsive-styles($property, $names, $exclude: null) {
25
- $variable-names: ();
26
-
27
- @if meta.type-of($names) == 'string' {
28
- $variable-names: (string.slice($names, 1, -1));
29
- } @else {
30
- $variable-names: $names;
31
- }
32
-
33
- & {
34
- #{$property}: #{construct-variables($variable-names, mobile)};
35
- }
36
-
37
- @if $exclude != 'tablet' {
38
- @media (min-width: map.get($breakpoints, sm)) {
39
- #{$property}: #{construct-variables($variable-names, tablet)};
40
- }
41
- }
42
-
43
- @if $exclude != 'desktop' {
44
- @media (min-width: map.get($breakpoints, lg)) {
45
- #{$property}: #{construct-variables($variable-names, desktop)};
46
- }
47
- }
48
- }
49
-
50
14
  @mixin print-grayscale {
15
+ /* stylelint-disable no-invalid-position-declaration */
51
16
  @media print {
52
17
  filter: grayscale(1);
53
18
  }
@@ -59,7 +24,7 @@ $breakpoints: (
59
24
  height: 1px !important;
60
25
  padding: 0 !important;
61
26
  overflow: hidden;
62
- clip: rect(1px, 1px, 1px, 1px);
27
+ clip-path: rect(1px, 1px, 1px, 1px);
63
28
  border: 0 !important;
64
29
  }
65
30
 
package/_print.scss CHANGED
@@ -6,7 +6,7 @@ $breaks: ('auto', 'avoid', 'avoid-column', 'avoid-page', 'avoid-region');
6
6
  }
7
7
 
8
8
  body {
9
- background-color: var(--neutral-100);
9
+ background-color: var(--tedi-neutral-100);
10
10
  -webkit-print-color-adjust: exact;
11
11
  print-color-adjust: exact; // needed for Edge. Isn't added automatically by autoprefixer
12
12
  }
package/_typography.scss CHANGED
@@ -75,6 +75,12 @@ small,
75
75
  line-height: var(--body-small-regular-line-height);
76
76
  }
77
77
 
78
+ .text-extra-small {
79
+ font-size: var(--body-extra-small-size);
80
+ font-weight: var(--body-extra-small-weight);
81
+ line-height: var(--body-extra-small-line-height);
82
+ }
83
+
78
84
  // Text color variants
79
85
  @each $color,
80
86
  $var
@@ -108,7 +114,7 @@ small,
108
114
  }
109
115
 
110
116
  .text-break-word {
111
- word-break: break-word;
117
+ overflow-wrap: break-word;
112
118
  }
113
119
 
114
120
  .text-uppercase {