@yuuvis/material 2.1.17 → 2.1.19

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 (10) hide show
  1. package/package.json +1 -1
  2. package/scss/elements/_body.scss +1 -1
  3. package/scss/elements/_text-selection.scss +2 -2
  4. package/scss/elements/_text.scss +6 -6
  5. package/scss/themes/yuuvis-standard/theme-color.scss +38 -0
  6. package/scss/themes/yuuvis-standard/theme.scss +112 -70
  7. package/scss/token/_token-typo.tools.scss +5 -0
  8. package/scss/token/_token.scss +113 -48
  9. package/scss/token/_token.tools.scss +1 -0
  10. package/scss/utils/_font.scss +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuuvis/material",
3
- "version": "2.1.17",
3
+ "version": "2.1.19",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.1",
6
6
  "@angular/core": "^19.2.1",
package/scss/elements/_body.scss CHANGED
@@ -6,6 +6,6 @@ body {
6
6
  margin: 0;
7
7
  font: t.use-token(font-body);
8
8
  letter-spacing: t.use-token(font-body-tracking);
9
- background-color: t.use-token(surface-frame);
9
+ background-color: t.use-token(surface-app);
10
10
  color: t.use-token(on-surface);
11
11
  }
package/scss/elements/_text-selection.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use './../token/token.tools' as t;
2
2
 
3
3
  *::selection {
4
- background-color: t.use-token(text-selection-background);
5
- color: t.use-token(text-selection-color);
4
+ background-color: t.use-token(text-selection-container);
5
+ color: t.use-token(on-text-selection-container);
6
6
  }
package/scss/elements/_text.scss CHANGED
@@ -8,16 +8,16 @@
8
8
  color: inherit;
9
9
  }
10
10
  :where(h1) {
11
- font: t.use-token(font-headline-large);
12
- letter-spacing: t.use-token(font-headline-large-tracking);
11
+ font: t.use-token(font-title-large);
12
+ letter-spacing: t.use-token(font-title-large-tracking);
13
13
  }
14
14
 
15
15
  :where(h2) {
16
- font: t.use-token(font-headline-medium);
17
- letter-spacing: t.use-token(font-headline-medium-tracking);
16
+ font: t.use-token(font-title-small);
17
+ letter-spacing: t.use-token(font-title-small-tracking);
18
18
  }
19
19
 
20
20
  :where(h3, h4, h5, h6) {
21
- font: t.use-token(font-headline-small);
22
- letter-spacing: t.use-token(font-headline-small-tracking);
21
+ font: t.use-token(font-title-smallest);
22
+ letter-spacing: t.use-token(font-title-smallest-tracking);
23
23
  }
package/scss/themes/yuuvis-standard/theme-color.scss CHANGED
@@ -123,6 +123,42 @@ $_palettes: (
123
123
  99: #fffbff,
124
124
  100: #ffffff,
125
125
  ),
126
+ success: (
127
+ 0: #000000,
128
+ 10: #002019,
129
+ 20: #00382d,
130
+ 25: #004437,
131
+ 30: #005142,
132
+ 35: #005e4d,
133
+ 40: #006b58,
134
+ 50: #108670,
135
+ 60: #3aa189,
136
+ 70: #58bca3,
137
+ 80: #75d8be,
138
+ 90: #92f5da,
139
+ 95: #b8ffea,
140
+ 98: #e6fff5,
141
+ 99: #f3fff9,
142
+ 100: #ffffff,
143
+ ),
144
+ warning: (
145
+ 0: #000000,
146
+ 10: #221b00,
147
+ 20: #3a3000,
148
+ 25: #473b00,
149
+ 30: #544600,
150
+ 35: #615100,
151
+ 40: #6f5d00,
152
+ 50: #8c7600,
153
+ 60: #a98f00,
154
+ 70: #c8a900,
155
+ 80: #e8c400,
156
+ 90: #ffe169,
157
+ 95: #fff0c1,
158
+ 98: #fff9ee,
159
+ 99: #fffbff,
160
+ 100: #ffffff,
161
+ ),
126
162
  );
127
163
 
128
164
  $_rest: (
@@ -134,3 +170,5 @@ $_rest: (
134
170
 
135
171
  $primary-palette: map.merge(map.get($_palettes, primary), $_rest);
136
172
  $tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);
173
+ $success-palette: map.get($_palettes, success);
174
+ $warning-palette: map.get($_palettes, warning);
package/scss/themes/yuuvis-standard/theme.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  @use 'sass:map';
3
3
  @use 'theme-color';
4
4
  @use '../../token/token';
5
- @use '../../token/token.tools' as t;
6
5
 
7
6
  :root {
8
7
  //todo: move to global styles
@@ -31,55 +30,88 @@
31
30
  'outline-variant': light-dark(map.get(theme-color.$primary-palette, 'neutral-variant', 90), map.get(theme-color.$primary-palette, 'neutral', 20)),
32
31
  'surface-variant': var(--mat-sys-surface),
33
32
  'on-surface-variant': var(--mat-sys-on-surface),
33
+ //Headline
34
34
  'headline-small': var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height)
35
35
  var(--mat-sys-headline-small-font),
36
36
  'headline-small-size': token.$ref-font-headline-small-size,
37
37
  'headline-small-line-height': token.$ref-font-headline-line-height,
38
- 'headline-small-weight': token.$ref-font-weight-medium,
38
+ 'headline-small-weight': token.$ref-font-weight-bold,
39
+ 'headline-small-tracking': token.$ref-font-headline-small-tracking,
39
40
 
40
41
  'headline-medium': var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height)
41
42
  var(--mat-sys-headline-medium-font),
42
43
  'headline-medium-size': token.$ref-font-headline-medium-size,
43
44
  'headline-medium-line-height': token.$ref-font-headline-line-height,
44
- 'headline-medium-weight': token.$ref-font-weight-medium,
45
+ 'headline-medium-weight': token.$ref-font-weight-bold,
46
+ 'headline-medium-tracking': token.$ref-font-headline-medium-tracking,
45
47
 
46
48
  'headline-large': var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height)
47
49
  var(--mat-sys-headline-large-font),
48
50
  'headline-large-size': token.$ref-font-headline-large-size,
49
51
  'headline-large-line-height': token.$ref-font-headline-line-height,
50
- 'headline-large-weight': token.$ref-font-weight-medium,
52
+ 'headline-large-weight': token.$ref-font-weight-bold,
53
+ 'headline-large-tracking': token.$ref-font-headline-large-tracking,
51
54
 
55
+ //Title
52
56
  'title-small': var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font),
53
- 'title-small-size': 0.875rem,
54
- 'title-small-weight': token.$ref-font-weight-medium,
55
- 'title-small-line-height': token.$ref-font-headline-line-height,
57
+ 'title-small-size': token.$ref-font-title-small-size,
58
+ 'title-small-weight': token.$ref-font-weight-bold,
59
+ 'title-small-line-height': token.$ref-font-title-line-height,
60
+ 'title-small-tracking': token.$ref-font-title-small-tracking,
56
61
 
57
62
  'title-medium': var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height)
58
63
  var(--mat-sys-title-medium-font),
59
- 'title-medium-size': 1rem,
60
- 'title-medium-weight': token.$ref-font-weight-medium,
61
- 'title-medium-line-height': token.$ref-font-headline-line-height,
64
+ 'title-medium-size': token.$ref-font-title-medium-size,
65
+ 'title-medium-weight': token.$ref-font-weight-bold,
66
+ 'title-medium-line-height': token.$ref-font-title-line-height,
67
+ 'title-medium-tracking': token.$ref-font-title-medium-tracking,
62
68
 
63
69
  'title-large': var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font),
64
- 'title-large-size': 1.125rem,
65
- 'title-large-weight': token.$ref-font-weight-medium,
66
- 'title-large-line-height': token.$ref-font-headline-line-height,
70
+ 'title-large-size': token.$ref-font-title-large-size,
71
+ 'title-large-weight': token.$ref-font-weight-bold,
72
+ 'title-large-line-height': token.$ref-font-title-line-height,
73
+ 'title-large-tracking': token.$ref-font-title-large-tracking,
67
74
 
75
+ //Body
68
76
  'body-small': var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font),
77
+ 'body-small-line-height': token.$ref-font-body-line-height,
78
+ 'body-small-tracking': token.$ref-font-body-small-tracking,
79
+
69
80
  'body-medium': var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font),
70
- 'body-large': var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font),
81
+ 'body-medium-line-height': token.$ref-font-body-line-height,
82
+ 'body-medium-tracking': token.$ref-font-body-medium-tracking,
83
+
84
+ 'body-large': unset,
85
+ 'body-large-font': unset,
86
+ 'body-large-size': unset,
87
+ 'body-large-weight': unset,
88
+ 'body-large-line-height': unset,
89
+ 'body-large-tracking': unset,
71
90
 
91
+ //Label
72
92
  'label-small': var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font),
73
93
  'label-medium': var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height)
74
94
  var(--mat-sys-label-medium-font),
75
95
  'label-large': var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font),
76
-
77
- 'display-small': var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height)
78
- var(--mat-sys-display-small-font),
79
- 'display-medium': var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height)
80
- var(--mat-sys-display-medium-font),
81
- 'display-large': var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height)
82
- var(--mat-sys-display-large-font)
96
+ //Display
97
+ 'display-small': unset,
98
+ 'display-small-font': unset,
99
+ 'display-small-size': unset,
100
+ 'display-small-weight': unset,
101
+ 'display-small-line-height': unset,
102
+ 'display-small-tracking': unset,
103
+ 'display-medium': unset,
104
+ 'display-medium-font': unset,
105
+ 'display-medium-size': unset,
106
+ 'display-medium-weight': unset,
107
+ 'display-medium-line-height': unset,
108
+ 'display-medium-tracking': unset,
109
+ 'display-large': unset,
110
+ 'display-large-font': unset,
111
+ 'display-large-size': unset,
112
+ 'display-large-weight': unset,
113
+ 'display-largeline-height': unset,
114
+ 'display-large-tracking': unset
83
115
  );
84
116
 
85
117
  @include mat.theme($theme, $overrides);
@@ -90,33 +122,37 @@
90
122
 
91
123
  /* Core */
92
124
  @include mat.core-overrides(
93
- (
94
- option-label-text-font: token.$font-body-font,
95
- option-label-text-line-height: token.$font-body-line-height,
96
- option-label-text-size: token.$font-body-size,
97
- option-label-text-tracking: token.$font-body-tracking,
98
- option-label-text-weight: token.$font-body-weight,
99
- optgroup-label-text-font: token.$font-body-font,
100
- optgroup-label-text-line-height: token.$font-body-line-height,
101
- optgroup-label-text-size: token.$font-body-size,
102
- optgroup-label-text-tracking: token.$font-body-tracking,
103
- optgroup-label-text-weight: token.$font-body-weight,
104
- )
125
+ (
126
+ option-label-text-font: token.$font-body-font,
127
+ option-label-text-line-height: token.$font-body-line-height,
128
+ option-label-text-size: token.$font-body-size,
129
+ option-label-text-tracking: token.$font-body-tracking,
130
+ option-label-text-weight: token.$font-body-weight,
131
+ optgroup-label-text-font: token.$font-body-font,
132
+ optgroup-label-text-line-height: token.$font-body-line-height,
133
+ optgroup-label-text-size: token.$font-body-size,
134
+ optgroup-label-text-tracking: token.$font-body-tracking,
135
+ optgroup-label-text-weight: token.$font-body-weight
136
+ )
105
137
  );
106
138
 
107
139
  /* Loading Indicator/Progress-Bar/-Spinner */
108
- @include mat.progress-bar-overrides((
109
- active-indicator-height: token.$progress-bar-height,
110
- track-height: token.$progress-bar-height,
111
- //track-shape: none,
112
- active-indicator-color: var(--mat-sys-primary),
113
- track-color: rgb(from var(--mat-sys-primary) r g b / 0.2),
114
- ));
115
- @include mat.progress-spinner-overrides((
116
- active-indicator-color: var(--mat-sys-primary),
117
- // "active-indicator-width" does not work!
118
- // "size" does not work!
119
- ));
140
+ @include mat.progress-bar-overrides(
141
+ (
142
+ active-indicator-height: token.$progress-bar-height,
143
+ track-height: token.$progress-bar-height,
144
+ //track-shape: none,
145
+ active-indicator-color: var(--mat-sys-primary),
146
+ track-color: rgb(from var(--mat-sys-primary) r g b / 0.2)
147
+ )
148
+ );
149
+ @include mat.progress-spinner-overrides(
150
+ (
151
+ active-indicator-color: var(--mat-sys-primary),
152
+ // "active-indicator-width" does not work!
153
+ // "size" does not work!
154
+ )
155
+ );
120
156
  /* Buttons */
121
157
  @include mat.button-overrides(());
122
158
  /*Icon Button*/
@@ -128,7 +164,7 @@
128
164
  touch-target-display: none,
129
165
  state-layer-color: var(--mat-sys-on-surface),
130
166
  state-layer-size: token.$sizing-2xl,
131
- icon-size: token.$sizing-m,
167
+ icon-size: token.$sizing-m
132
168
  )
133
169
  );
134
170
 
@@ -189,22 +225,22 @@
189
225
  trigger-text-tracking: var(--mat-sys-body-medium-tracking),
190
226
  trigger-text-weight: var(--mat-sys-body-medium-weight),
191
227
  container-elevation-shadow: none,
192
- panel-background-color: var(--mat-sys-surface-container-low),
228
+ panel-background-color: var(--mat-sys-surface-container-low)
193
229
  )
194
230
  );
195
231
 
196
232
  /*Menu*/
197
233
  @include mat.menu-overrides(
198
- (
199
- container-elevation-shadow: none,
200
- container-shape: var(--mat-sys-corner-medium),
201
- container-color: var(--mat-sys-surface-container-low),
202
- item-label-text-font: token.$font-body-font,
203
- item-label-text-line-height: token.$font-body-line-height,
204
- item-label-text-size: token.$font-body-size,
205
- item-label-text-tracking: token.$font-body-tracking,
206
- item-label-text-weight: token.$font-body-weight,
207
- )
234
+ (
235
+ container-elevation-shadow: none,
236
+ container-shape: var(--mat-sys-corner-medium),
237
+ container-color: var(--mat-sys-surface-container-low),
238
+ item-label-text-font: token.$font-body-font,
239
+ item-label-text-line-height: token.$font-body-line-height,
240
+ item-label-text-size: token.$font-body-size,
241
+ item-label-text-tracking: token.$font-body-tracking,
242
+ item-label-text-weight: token.$font-body-weight
243
+ )
208
244
  );
209
245
 
210
246
  /*Dialog*/
@@ -218,25 +254,31 @@
218
254
  subhead-size: var(--mat-sys-title-large-size),
219
255
  subhead-weight: var(--mat-sys-title-large-weight),
220
256
  subhead-tracking: var(--mat-sys-title-large-tracking),
221
- with-actions-content-padding: none,
257
+ with-actions-content-padding: none
222
258
  )
223
259
  );
224
260
 
225
261
  /*Tree*/
226
- @include mat.tree-overrides((
227
- node-text-font: var(--mat-sys-body-medium-font),
228
- node-text-size: var(--mat-sys-body-medium-size),
229
- node-text-weight: var(--mat-sys-body-medium-weight),
230
- node-min-height: token.$sizing-l
231
- ));
262
+ @include mat.tree-overrides(
263
+ (
264
+ node-text-font: var(--mat-sys-body-medium-font),
265
+ node-text-size: var(--mat-sys-body-medium-size),
266
+ node-text-weight: var(--mat-sys-body-medium-weight),
267
+ node-min-height: token.$sizing-l
268
+ )
269
+ );
232
270
 
233
271
  /*Tabs*/
234
- @include mat.tabs-overrides((
235
- divider-color: var(--mat-sys-outline-variant)
236
- ));
272
+ @include mat.tabs-overrides(
273
+ (
274
+ divider-color: var(--mat-sys-outline-variant)
275
+ )
276
+ );
237
277
 
238
278
  /*Tooltip*/
239
- @include mat.tooltip-overrides((
240
- container-color: light-dark(rgb(from var(--mat-sys-inverse-surface) r g b / 0.9), rgb(from var(--mat-sys-inverse-surface) r g b / 0.95)),
241
- ));
279
+ @include mat.tooltip-overrides(
280
+ (
281
+ container-color: light-dark(rgb(from var(--mat-sys-inverse-surface) r g b / 0.9), rgb(from var(--mat-sys-inverse-surface) r g b / 0.95))
282
+ )
283
+ );
242
284
  }
package/scss/token/_token-typo.tools.scss ADDED
@@ -0,0 +1,5 @@
1
+ @use 'sass:math';
2
+
3
+ @function rem($px, $root-px: 16px){
4
+ @return math.div($px, $root-px) * 1rem
5
+ }
package/scss/token/_token.scss CHANGED
@@ -1,5 +1,7 @@
1
1
  @use 'sass:map';
2
+ @use 'sass:math';
2
3
  @use '../themes/yuuvis-standard/theme-color';
4
+ @use './token-typo.tools' as t;
3
5
 
4
6
  /*
5
7
 
@@ -9,11 +11,14 @@
9
11
 
10
12
  //Base
11
13
  $ref-font-family: 'Mulish', sans-serif;
12
- $ref-font-weight-bold: 900;
14
+ $ref-font-weight-bold: 800;
13
15
  $ref-font-weight-medium: 700;
14
16
  $ref-font-weight-regular: 500;
15
17
 
16
18
  //Body
19
+ $ref-font-body-line-height: 1.6;
20
+
21
+ $ref-font-body-medium-tracking: 0.005rem;
17
22
  $font-body: var(--mat-sys-body-medium);
18
23
  $font-body-font: var(--mat-sys-body-medium-font);
19
24
  $font-body-line-height: var(--mat-sys-body-medium-line-height);
@@ -21,6 +26,7 @@ $font-body-size: var(--mat-sys-body-medium-size);
21
26
  $font-body-tracking: var(--mat-sys-body-medium-tracking);
22
27
  $font-body-weight: var(--mat-sys-body-medium-weight);
23
28
 
29
+ $ref-font-body-small-tracking: 0.005rem;
24
30
  $font-body-subtle: var(--mat-sys-body-small);
25
31
  $font-body-subtle-font: var(--mat-sys-body-small-font);
26
32
  $font-body-subtle-line-height: var(--mat-sys-body-small-line-height);
@@ -31,7 +37,8 @@ $font-body-subtle-weight: var(--mat-sys-body-small-weight);
31
37
  //Headlines
32
38
  $ref-font-headline-line-height: 1.4;
33
39
 
34
- $ref-font-headline-small-size: 1rem; //16px
40
+ $ref-font-headline-small-size: t.rem(16px);
41
+ $ref-font-headline-small-tracking: 0;
35
42
  $font-headline-small: var(--mat-sys-headline-small);
36
43
  $font-headline-small-font: var(--mat-sys-headline-small-font);
37
44
  $font-headline-small-line-height: var(--mat-sys-headline-small-line-height);
@@ -39,7 +46,8 @@ $font-headline-small-size: var(--mat-sys-headline-small-size);
39
46
  $font-headline-small-tracking: var(--mat-sys-headline-small-tracking);
40
47
  $font-headline-small-weight: var(--mat-sys-headline-small-weight);
41
48
 
42
- $ref-font-headline-medium-size: 1.125rem; //18px
49
+ $ref-font-headline-medium-size: t.rem(20px);
50
+ $ref-font-headline-medium-tracking: 0;
43
51
  $font-headline-medium: var(--mat-sys-headline-medium);
44
52
  $font-headline-medium-font: var(--mat-sys-headline-medium-font);
45
53
  $font-headline-medium-line-height: var(--mat-sys-headline-medium-line-height);
@@ -47,7 +55,8 @@ $font-headline-medium-size: var(--mat-sys-headline-medium-size);
47
55
  $font-headline-medium-tracking: var(--mat-sys-headline-medium-tracking);
48
56
  $font-headline-medium-weight: var(--mat-sys-headline-medium-weight);
49
57
 
50
- $ref-font-headline-large-size: 1.438rem; //23px
58
+ $ref-font-headline-large-size: t.rem(25px);
59
+ $ref-font-headline-large-tracking: 0;
51
60
  $font-headline-large: var(--mat-sys-headline-large);
52
61
  $font-headline-large-font: var(--mat-sys-headline-large-font);
53
62
  $font-headline-large-line-height: var(--mat-sys-headline-large-line-height);
@@ -56,7 +65,20 @@ $font-headline-large-tracking: var(--mat-sys-headline-large-tracking);
56
65
  $font-headline-large-weight: var(--mat-sys-headline-large-weight);
57
66
 
58
67
  //Title
59
- $ref-font-title-small-size: 0.875rem; //14px
68
+ $ref-font-title-line-height: 1.4;
69
+
70
+ // Todo: Check
71
+ $ref-font-title-smallest-size: t.rem(14px);
72
+ $ref-font-title-smallest-tracking: 0.006rem;
73
+ $font-title-smallest: var(--mat-sys-title-small);
74
+ $font-title-smallest-font: var(--mat-sys-title-small-font);
75
+ $font-title-smallest-line-height: var(--mat-sys-title-small-line-height);
76
+ $font-title-smallest-size: var(--mat-sys-title-small-size);
77
+ $font-title-smallest-tracking: var(--mat-sys-title-small-tracking);
78
+ $font-title-smallest-weight: var(--mat-sys-title-small-weight);
79
+
80
+ $ref-font-title-small-size: t.rem(16px);
81
+ $ref-font-title-small-tracking: 0.006rem;
60
82
  $font-title-small: var(--mat-sys-title-small);
61
83
  $font-title-small-font: var(--mat-sys-title-small-font);
62
84
  $font-title-small-line-height: var(--mat-sys-title-small-line-height);
@@ -64,7 +86,8 @@ $font-title-small-size: var(--mat-sys-title-small-size);
64
86
  $font-title-small-tracking: var(--mat-sys-title-small-tracking);
65
87
  $font-title-small-weight: var(--mat-sys-title-small-weight);
66
88
 
67
- $ref-font-title-medium-size: 1rem; //16px
89
+ $ref-font-title-medium-size: t.rem(18px);
90
+ $ref-font-title-medium-tracking: 0.009rem;
68
91
  $font-title-medium: var(--mat-sys-title-medium);
69
92
  $font-title-medium-font: var(--mat-sys-title-medium-font);
70
93
  $font-title-medium-line-height: var(--mat-sys-title-medium-line-height);
@@ -72,7 +95,8 @@ $font-title-medium-size: var(--mat-sys-title-medium-size);
72
95
  $font-title-medium-tracking: var(--mat-sys-title-medium-tracking);
73
96
  $font-title-medium-weight: var(--mat-sys-title-medium-weight);
74
97
 
75
- $ref-font-title-large-size: 1.125rem; //18px
98
+ $ref-font-title-large-size: t.rem(20px);
99
+ $ref-font-title-large-tracking: 0;
76
100
  $font-title-large: var(--mat-sys-title-large);
77
101
  $font-title-large-font: var(--mat-sys-title-large-font);
78
102
  $font-title-large-line-height: var(--mat-sys-title-large-line-height);
@@ -80,13 +104,21 @@ $font-title-large-size: var(--mat-sys-title-large-size);
80
104
  $font-title-large-tracking: var(--mat-sys-title-large-tracking);
81
105
  $font-title-large-weight: var(--mat-sys-title-large-weight);
82
106
 
83
- //Other
84
- $font-subhead: var(--mat-sys-title-small);
85
- $font-subhead-font: var(--mat-sys-title-small-font);
86
- $font-subhead-line-height: var(--mat-sys-title-small-line-height);
87
- $font-subhead-size: var(--mat-sys-title-small-size);
88
- $font-subhead-tracking: var(--mat-sys-title-small-tracking);
89
- $font-subhead-weight: var(--mat-sys-title-small-weight);
107
+ //Additional Font Token (TypeScale Major Second | Scale Factor: 1.125 | Design Pixel Base: 14px)
108
+ //todo remove this format
109
+ $font-subhead: var(--ymt-font-subhead-weight) var(--ymt-font-subhead-size) / var(--ymt-font-subhead-line-height) var(--ymt-font-subhead-font);
110
+ $font-subhead-font: $ref-font-family;
111
+ $font-subhead-line-height: $ref-font-headline-line-height;
112
+ $font-subhead-size: t.rem(14px);
113
+ $font-subhead-tracking: 0;
114
+ $font-subhead-weight: $ref-font-weight-medium;
115
+
116
+ $font-app-name: var(--ymt-font-app-name-weight) var(--ymt-font-app-name-size) / var(--ymt-font-app-name-line-height) var(--ymt-font-app-name-font);
117
+ $font-app-name-font: $ref-font-family;
118
+ $font-app-name-line-height: 1.6;
119
+ $font-app-name-size: t.rem(16px);
120
+ $font-app-name-tracking: 0;
121
+ $font-app-name-weight: $ref-font-weight-bold;
90
122
 
91
123
 
92
124
  /*
@@ -98,6 +130,7 @@ $font-subhead-weight: var(--mat-sys-title-small-weight);
98
130
  $outline-width: 1px;
99
131
  $outline: var(--mat-sys-outline);
100
132
  $outline-variant: var(--mat-sys-outline-variant);
133
+ $outline-variant-emphasized: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 80)}, #{map.get(theme-color.$primary-palette, 'neutral', 80)});
101
134
 
102
135
  //Level (Could be used for text-color, surfaces, outlines)
103
136
 
@@ -116,56 +149,85 @@ $on-brand: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 90)}, #
116
149
 
117
150
  //Status
118
151
  // Color for status success, could be used for text-color, surfaces, outlines
119
- $success: light-dark(#006B54, #9EE3B5); //(Could be used for text-color, outlines)
120
- // Background color for status success containers
121
- $success-container: #9EE3B5;
152
+ $success: light-dark(#{map.get(theme-color.$success-palette, 30)}, #{map.get(theme-color.$success-palette, 95)}); //(Could be used for text-color, outlines, surfaces)
153
+ $on-success: map.get(theme-color.$success-palette, 100);
154
+ // Surface color for status success containers
155
+ $success-container: map.get(theme-color.$success-palette, 95);
122
156
  // Color of the text put on a success color container background
123
- $on-success-container: #295C4C;
157
+ $on-success-container: map.get(theme-color.$success-palette, 30);
124
158
 
125
159
  // Color for status danger, could be used for text-color, surfaces, outlines
126
- $danger: var(--mat-sys-error); //(Could be used for text-color, outlines)
127
- // Background color for status danger containers
160
+ $danger: var(--mat-sys-error); //(Could be used for text-color, outlines, surfaces)
161
+ $on-danger: var(--mat-sys-on-error);
162
+ // Surface color for status danger containers
128
163
  $danger-container: var(--mat-sys-error-container);
129
164
  // Color of the text put on a danger color container background
130
165
  $on-danger-container: var(--mat-sys-on-error-container);
131
166
 
132
167
  // Color for status warning, could be used for text-color, surfaces, outlines
133
- $warning: light-dark(#615106,#FDF2BA); //(Could be used for text-color, outlines)
134
- // Background color for status warning containers
135
- $warning-container: #FDF2BA;
168
+ $warning: light-dark(#{map.get(theme-color.$warning-palette, 30)}, #{map.get(theme-color.$warning-palette, 95)}); //(Could be used for text-color, outlines, surfaces)
169
+ $on-warning: map.get(theme-color.$warning-palette, 100);
170
+ // Surface color for status warning containers
171
+ $warning-container: map.get(theme-color.$warning-palette, 95);
136
172
  // Color of the text put on a warning color container background
137
- $on-warning-container: #615106;
173
+ $on-warning-container: map.get(theme-color.$warning-palette, 30);
174
+
175
+ //Inverse
176
+ $inverse-surface: var(--mat-sys-inverse-surface);
177
+ $inverse-surface-90: rgb(from var(--mat-sys-inverse-surface) r g b / 0.9);
178
+ $on-inverse-surface: var(--mat-sys-on-inverse-surface);
138
179
 
139
180
  //Surfaces
140
181
 
141
182
 
142
183
  $surface: var(--mat-sys-surface);
143
- $surface-container-low: var(--mat-sys-surface-container);
144
- $surface-container: var(--mat-sys-surface-container-high);
145
- $surface-container-high: var(--mat-sys-surface-container-highest);
184
+ $surface-container-lowest: var(--mat-sys-surface-container-lowest);
185
+ $surface-container-low: var(--mat-sys-surface-container-low);
186
+ $surface-container: var(--mat-sys-surface-container);
187
+ $surface-container-high: var(--mat-sys-surface-container-high);
188
+ $surface-container-highest: var(--mat-sys-surface-container-highest);
146
189
 
147
190
  //Surfaces - Alias Token (More Semantic)
148
191
  //Custom Surface Alias Token should only reference one of Materials surface-* token
149
192
  //to ensure that the combination with $on-surface-* is accessible
150
193
  //If you are using a custom color instead of make sure that this color is accessible with all on-surface-* token
151
194
  $surface-panel: $surface-container-low;
152
- $surface-frame: $surface-container-low;
195
+ $surface-app: $surface-container-low;
196
+
197
+ $inverse-surface: var(--mat-sys-inverse-surface);
198
+ $inverse-surface-90: rgb(from #{$inverse-surface} r g b / .9);
199
+ $on-inverse-surface: var(--mat-sys-inverse-on-surface);
200
+
201
+ $scrim: var(--mat-sys-scrim);
202
+ $scrim-opacity: 30;
153
203
 
154
204
  //Surfaces - Foreground Color
155
205
  //All on-surface-* token are accessible in combination with all surface-* token
156
206
  $on-surface: var(--mat-sys-on-surface);
157
- //"-variant" refers to a variant of the foreground color. (not to a variant of the surface itself)
158
- $on-surface-subtle-variant: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 40)}, #{map.get(theme-color.$primary-palette, 'neutral', 70)});
159
- $on-surface-primary-variant: $primary;
207
+ $on-surface-type-subtle: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 40)}, #{map.get(theme-color.$primary-palette, 'neutral', 70)});
160
208
 
161
209
  //Text (Alias for Surfaces - Foreground Color Token)
162
210
  $text-color: $on-surface;
163
- $text-color-subtle: $on-surface-subtle-variant;
164
- $text-color-primary: $on-surface-primary-variant;
211
+ $text-color-subtle: $on-surface-type-subtle;
212
+ $text-color-primary: $on-primary;
165
213
 
166
214
  //Text Selection
167
- $text-selection-background: var(--mat-sys-primary-container);
168
- $text-selection-color: var(--mat-sys-on-primary-container);
215
+ $text-selection-container: var(--mat-sys-primary-container);
216
+ $on-text-selection-container: var(--mat-sys-on-primary-container);
217
+
218
+ // PANES
219
+ $pane-surface: $surface;
220
+ $pane-drag-handle: light-dark(#{map.get(theme-color.$primary-palette, 'neutral', 80)}, #{map.get(theme-color.$primary-palette, 'neutral', 80)});
221
+ $pane-surface-blank: rgb(from #FFFFFF r g b / 0);
222
+ $pane-surface-floating: $surface;
223
+ $on-pane-surface: $on-surface;
224
+ $pane-surface-floating-inverse: $inverse-surface-90;
225
+ $on-pane-surface-floating-inverse: $on-inverse-surface;
226
+
227
+ // BARS
228
+ $bar-surface: $surface;
229
+ $on-bar-surface: $on-surface;
230
+ $bar-surface-blank: transparent;
169
231
 
170
232
 
171
233
  /*
@@ -180,13 +242,14 @@ $corner-m: $corner;
180
242
  $corner-s: var(--mat-sys-corner-small);
181
243
  $corner-xs: var(--mat-sys-corner-extra-small);
182
244
 
183
-
184
245
  /*
185
246
  Sizing
186
247
  */
187
248
 
188
- $_sizing-base: 1rem; // 16px
249
+ $_sizing-base: t.rem(16px);
189
250
 
251
+ $sizing-3xs: $_sizing-base * 0.25; // 4px
252
+ $sizing-2xs: $_sizing-base * 0.5; // 8px
190
253
  $sizing-xs: $_sizing-base * 1; // 16px
191
254
  $sizing-s: $_sizing-base * 1.25; // 20px
192
255
  $sizing-m: $_sizing-base * 1.5; // 24px
@@ -195,22 +258,22 @@ $sizing-xl: $_sizing-base * 2; // 32px;
195
258
  $sizing-2xl: $_sizing-base * 2.25; // 36px;
196
259
  $sizing-3xl: $_sizing-base * 2.5; // 40px;
197
260
  $sizing-4xl: $_sizing-base * 3; // 48px;
198
- $sizing-5xl: $_sizing-base * 4; // 64px;
199
- $sizing-6xl: $_sizing-base * 7.5; // 120px;
200
-
261
+ $sizing-5xl: $_sizing-base * 3.25; // 52px;
262
+ $sizing-6xl: $_sizing-base * 4; // 64px;
263
+ $sizing-7xl: $_sizing-base * 7.5; // 120px;
201
264
 
202
265
  /*
203
266
  Spacing
204
267
  */
205
268
 
206
- $_spacing-base: 1rem; // 16px
269
+ $_spacing-base: t.rem(16px);
207
270
 
208
271
  $spacing-0: 0; // 0px
209
- $spacing-4xs: $_spacing-base * .0625; // 1px
210
- $spacing-3xs: $_spacing-base * .125; // 2px
211
- $spacing-2xs: $_spacing-base * .25; // 4px
212
- $spacing-xs: $_spacing-base * .5; // 8px
213
- $spacing-s: $_spacing-base * .75; // 12px
272
+ $spacing-4xs: $_spacing-base * 0.0625; // 1px
273
+ $spacing-3xs: $_spacing-base * 0.125; // 2px
274
+ $spacing-2xs: $_spacing-base * 0.25; // 4px
275
+ $spacing-xs: $_spacing-base * 0.5; // 8px
276
+ $spacing-s: $_spacing-base * 0.75; // 12px
214
277
  $spacing-m: $_spacing-base; // 16px (base: browserDefault)
215
278
  $spacing-l: $_spacing-base * 1.25; // 20px
216
279
  $spacing-xl: $_spacing-base * 1.5; // 24px
@@ -218,7 +281,6 @@ $spacing-2xl: $_spacing-base * 1.75; // 28px
218
281
  $spacing-3xl: $_spacing-base * 2; // 32px
219
282
  $spacing-4xl: $_spacing-base * 3; // 48px
220
283
 
221
-
222
284
  /*
223
285
  State Layer Opacity
224
286
  */
@@ -264,7 +326,10 @@ $focus-indicator-outer: light-dark(#{map.get(theme-color.$primary-palette, 'neut
264
326
  $dialog-content-display: contents;
265
327
 
266
328
  //Overlay
267
- $overlay-backdrop-color: light-dark(rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / .3), rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / .8));
329
+ $overlay-backdrop-color: light-dark(
330
+ rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / 0.3),
331
+ rgb(from #{map.get(theme-color.$primary-palette, 'neutral', 0)} r g b / 0.8)
332
+ );
268
333
 
269
334
  /* Progress-Bar */
270
335
  $progress-bar-height: 4px;
package/scss/token/_token.tools.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use 'sass:meta';
2
2
  @use 'sass:map';
3
+ @use 'sass:math';
3
4
  @use './token.config' as token-config;
4
5
  @use './token';
5
6
 
package/scss/utils/_font.scss CHANGED
@@ -22,6 +22,11 @@
22
22
  letter-spacing: t.use-token(font-headline-large-tracking);
23
23
  }
24
24
 
25
+ .ymt-font-title-smallest {
26
+ font: t.use-token(font-title-smallest);
27
+ letter-spacing: t.use-token(font-title-smallest-tracking);
28
+ }
29
+
25
30
  .ymt-font-title-small {
26
31
  font: t.use-token(font-title-small);
27
32
  letter-spacing: t.use-token(font-title-small-tracking);