@operato/input 2.0.0-alpha.148 → 2.0.0-alpha.149

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 (34) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/src/ox-buttons-radio.js +10 -10
  3. package/dist/src/ox-buttons-radio.js.map +1 -1
  4. package/dist/src/ox-checkbox.js +4 -4
  5. package/dist/src/ox-checkbox.js.map +1 -1
  6. package/dist/src/ox-input-3axis.js +10 -10
  7. package/dist/src/ox-input-3axis.js.map +1 -1
  8. package/dist/src/ox-input-3dish.js +12 -12
  9. package/dist/src/ox-input-3dish.js.map +1 -1
  10. package/dist/src/ox-input-angle.js +7 -7
  11. package/dist/src/ox-input-angle.js.map +1 -1
  12. package/dist/src/ox-input-barcode.js +1 -1
  13. package/dist/src/ox-input-barcode.js.map +1 -1
  14. package/dist/src/ox-input-crontab.js +19 -19
  15. package/dist/src/ox-input-crontab.js.map +1 -1
  16. package/dist/src/ox-input-data.js +7 -7
  17. package/dist/src/ox-input-data.js.map +1 -1
  18. package/dist/src/ox-input-duration.js +10 -10
  19. package/dist/src/ox-input-duration.js.map +1 -1
  20. package/dist/src/ox-input-file.js +5 -6
  21. package/dist/src/ox-input-file.js.map +1 -1
  22. package/dist/tsconfig.tsbuildinfo +1 -1
  23. package/package.json +4 -4
  24. package/src/ox-buttons-radio.ts +10 -10
  25. package/src/ox-checkbox.ts +4 -4
  26. package/src/ox-input-3axis.ts +10 -10
  27. package/src/ox-input-3dish.ts +12 -12
  28. package/src/ox-input-angle.ts +7 -7
  29. package/src/ox-input-barcode.ts +1 -1
  30. package/src/ox-input-crontab.ts +19 -19
  31. package/src/ox-input-data.ts +7 -7
  32. package/src/ox-input-duration.ts +10 -10
  33. package/src/ox-input-file.ts +5 -6
  34. package/themes/md-typescale-styles.css +15 -15
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@operato/input",
3
3
  "description": "Webcomponents for input following open-wc recommendations",
4
4
  "author": "heartyoh@hatiolab.com",
5
- "version": "2.0.0-alpha.148",
5
+ "version": "2.0.0-alpha.149",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.js",
8
8
  "license": "MIT",
@@ -197,8 +197,8 @@
197
197
  "@material/web": "^1.4.0",
198
198
  "@operato/color-picker": "^2.0.0-alpha.111",
199
199
  "@operato/i18n": "^2.0.0-alpha.148",
200
- "@operato/popup": "^2.0.0-alpha.148",
201
- "@operato/styles": "^2.0.0-alpha.148",
200
+ "@operato/popup": "^2.0.0-alpha.149",
201
+ "@operato/styles": "^2.0.0-alpha.149",
202
202
  "@operato/utils": "^2.0.0-alpha.145",
203
203
  "@polymer/paper-dropdown-menu": "^3.2.0",
204
204
  "@polymer/paper-item": "^3.0.1",
@@ -243,5 +243,5 @@
243
243
  "prettier --write"
244
244
  ]
245
245
  },
246
- "gitHead": "469b2e97392a3766bc7e2bc4807b77406c19c676"
246
+ "gitHead": "ae0a8ae9e4627a09783ea436f2498bd80880a736"
247
247
  }
package/src/ox-buttons-radio.ts CHANGED
@@ -30,19 +30,19 @@ export class OxButtonsRadio extends OxFormField {
30
30
  display: inline-block;
31
31
  background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));
32
32
 
33
- --md-outlined-button-label-text-color:var(--md-sys-color-on-surface-variant);
34
- --md-outlined-button-label-text-size:var(--md-sys-typescale-label-medium-size);
35
- --md-outlined-button-container-height:var(--form-element-height-medium);
36
- --md-outlined-button-container-shape:var(--md-sys-shape-corner-small);
37
- --md-outlined-button-leading-space:var(--spacing-large);
38
- --md-outlined-button-trailing-space:var(--spacing-large);
39
- --md-outlined-button-hover-label-text-color:var(--md-sys-color-primary);
40
- --md-outlined-button-pressed-outline-color:var(--md-sys-color-primary);
41
- --md-outlined-button-pressed-label-text-color:var(--md-sys-color-primary);
33
+ --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);
34
+ --md-outlined-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
35
+ --md-outlined-button-container-height: var(--form-element-height-medium);
36
+ --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
37
+ --md-outlined-button-leading-space: var(--spacing-large);
38
+ --md-outlined-button-trailing-space: var(--spacing-large);
39
+ --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);
40
+ --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);
41
+ --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);
42
42
 
43
43
  --md-filled-button-container-color: var(--md-sys-color-primary);
44
44
  --md-filled-button-label-text-color: var(--md-sys-color-primary-container);
45
- --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size);
45
+ --md-filled-button-label-text-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
46
46
  --md-filled-button-container-height: var(--form-element-height-medium);
47
47
  --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
48
48
  --md-filled-button-leading-space: var(--spacing-large);
package/src/ox-checkbox.ts CHANGED
@@ -67,11 +67,11 @@ export class OxCheckbox extends OxFormField {
67
67
 
68
68
  .label {
69
69
  color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface-variant));
70
- font-size:var(--md-sys-typescale-label-medium-size);
71
- line-height:var(--md-sys-typescale-label-medium-line-height);
70
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
71
+ line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
72
72
  }
73
- :host([checked]) .label{
74
- font-weight:700;
73
+ :host([checked]) .label {
74
+ font-weight: 700;
75
75
  }
76
76
  `
77
77
  ]
package/src/ox-input-3axis.ts CHANGED
@@ -18,14 +18,14 @@ export class OxInput3Axis extends OxFormField {
18
18
  display: flex;
19
19
  }
20
20
 
21
- input{
22
- box-sizing:border-box;
23
- padding:0 var(--spacing-small);
24
- height:var(--form-element-height-medium);
25
- border:1px solid var(--md-sys-color-outline);
26
- border-radius:var(--md-sys-shape-corner-small);
27
- background-color:var(--md-sys-color-on-primary);
28
- font-size:var(--md-sys-typescale-label-medium-size);
21
+ input {
22
+ box-sizing: border-box;
23
+ padding: 0 var(--spacing-small);
24
+ height: var(--form-element-height-medium);
25
+ border: 1px solid var(--md-sys-color-outline);
26
+ border-radius: var(--md-sys-shape-corner-small);
27
+ background-color: var(--md-sys-color-on-primary);
28
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
29
29
  color: var(--md-sys-color-on-primary-container);
30
30
  }
31
31
 
@@ -34,8 +34,8 @@ export class OxInput3Axis extends OxFormField {
34
34
  }
35
35
 
36
36
  input:focus {
37
- outline:none;
38
- border-color:var(--md-sys-color-secondary-fixed-dim)
37
+ outline: none;
38
+ border-color: var(--md-sys-color-secondary-fixed-dim);
39
39
  }
40
40
  `
41
41
  ]
package/src/ox-input-3dish.ts CHANGED
@@ -26,7 +26,7 @@ export class OxInput3Dish extends OxFormField {
26
26
  label {
27
27
  text-align: right;
28
28
  align-self: center;
29
- font-size:var(--md-sys-typescale-label-medium-size);
29
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
30
30
  color: var(--md-sys-color-on-primary-container);
31
31
  text-transform: var(--label-text-transform);
32
32
  grid-column: span 1;
@@ -35,22 +35,22 @@ export class OxInput3Dish extends OxFormField {
35
35
  span {
36
36
  grid-column: span 2;
37
37
  text-align: center;
38
- font-size:var(--md-sys-typescale-label-medium-size);
38
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
39
39
  color: var(--md-sys-color-surface-tint);
40
- font-weight:var(--md-sys-typescale-label-medium-weight)
40
+ font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
41
41
  }
42
42
 
43
43
  input,
44
44
  ox-input-angle {
45
45
  grid-column: span 2;
46
- box-sizing:border-box;
47
- padding:0 var(--spacing-small);
48
- height:var(--form-element-height-medium);
49
- border:1px solid var(--md-sys-color-outline);
50
- border-radius:var(--md-sys-shape-corner-small);
51
- overflow:hidden;
52
- background-color:var(--md-sys-color-on-primary);
53
- font-size:var(--md-sys-typescale-label-medium-size);
46
+ box-sizing: border-box;
47
+ padding: 0 var(--spacing-small);
48
+ height: var(--form-element-height-medium);
49
+ border: 1px solid var(--md-sys-color-outline);
50
+ border-radius: var(--md-sys-shape-corner-small);
51
+ overflow: hidden;
52
+ background-color: var(--md-sys-color-on-primary);
53
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
54
54
  color: var(--md-sys-color-on-primary-container);
55
55
  }
56
56
 
@@ -60,7 +60,7 @@ export class OxInput3Dish extends OxFormField {
60
60
 
61
61
  input:focus {
62
62
  outline: none;
63
- border-color:var(--md-sys-color-secondary-fixed-dim)
63
+ border-color: var(--md-sys-color-secondary-fixed-dim);
64
64
  }
65
65
  `
66
66
  ]
package/src/ox-input-angle.ts CHANGED
@@ -17,20 +17,20 @@ export class OxInputAngle extends OxFormField {
17
17
 
18
18
  input {
19
19
  width: 100%;
20
- height:100%;
21
- min-height:var(--form-element-height-medium);
22
- padding:0 var(--spacing-small);
20
+ height: 100%;
21
+ min-height: var(--form-element-height-medium);
22
+ padding: 0 var(--spacing-small);
23
23
  box-sizing: border-box;
24
24
  border: var(--input-border, 1px solid var(--md-sys-color-outline));
25
- border-radius:var(--md-sys-shape-corner-small);
26
- background-color:var(--md-sys-color-on-primary);
27
- font-size:var(--md-sys-typescale-label-medium-size);
25
+ border-radius: var(--md-sys-shape-corner-small);
26
+ background-color: var(--md-sys-color-on-primary);
27
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
28
28
  color: var(--md-sys-color-on-primary-container);
29
29
  }
30
30
 
31
31
  input:focus {
32
32
  outline: var(--input-focus-outline, inherit);
33
- border-color:var(--md-sys-color-secondary-fixed-dim)
33
+ border-color: var(--md-sys-color-secondary-fixed-dim);
34
34
  }
35
35
  `
36
36
  ]
package/src/ox-input-barcode.ts CHANGED
@@ -69,7 +69,7 @@ export class OxInputBarcode extends OxFormField {
69
69
  border-radius: var(--md-sys-shape-corner-small);
70
70
 
71
71
  background-color: var(--md-sys-color-on-primary);
72
- font-size: var(--md-sys-typescale-label-medium-size);
72
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
73
73
  color: var(--md-sys-color-on-primary-container);
74
74
  }
75
75
  input:focus {
package/src/ox-input-crontab.ts CHANGED
@@ -110,7 +110,7 @@ export class OxInputCrontab extends OxFormField {
110
110
  label[for='example'] {
111
111
  text-align: right;
112
112
  grid-column: 3;
113
- font-size:var(--md-sys-typescale-label-medium-size);
113
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
114
114
  color: var(--md-sys-color-on-primary-container);
115
115
  text-transform: capitalize;
116
116
  }
@@ -118,41 +118,41 @@ export class OxInputCrontab extends OxFormField {
118
118
  #example {
119
119
  grid-column: 4 / span 3;
120
120
  width: 100%;
121
- box-sizing:border-box;
122
- padding:0 var(--spacing-small);
123
- height:var(--form-element-height-medium);
124
- border:1px solid var(--md-sys-color-outline);
125
- border-radius:var(--md-sys-shape-corner-small);
126
- background-color:var(--md-sys-color-on-primary);
121
+ box-sizing: border-box;
122
+ padding: 0 var(--spacing-small);
123
+ height: var(--form-element-height-medium);
124
+ border: 1px solid var(--md-sys-color-outline);
125
+ border-radius: var(--md-sys-shape-corner-small);
126
+ background-color: var(--md-sys-color-on-primary);
127
127
  text-transform: capitalize;
128
- font-size:var(--md-sys-typescale-label-medium-size);
128
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
129
129
  color: var(--md-sys-color-on-primary-container);
130
130
  }
131
131
 
132
132
  input {
133
133
  width: 100%;
134
- box-sizing:border-box;
135
- padding:0 var(--spacing-small);
136
- height:var(--form-element-height-medium);
137
- border:1px solid var(--md-sys-color-outline);
138
- border-radius:var(--md-sys-shape-corner-small);
139
- background-color:var(--md-sys-color-on-primary);
140
- font-size:var(--md-sys-typescale-label-medium-size);
134
+ box-sizing: border-box;
135
+ padding: 0 var(--spacing-small);
136
+ height: var(--form-element-height-medium);
137
+ border: 1px solid var(--md-sys-color-outline);
138
+ border-radius: var(--md-sys-shape-corner-small);
139
+ background-color: var(--md-sys-color-on-primary);
140
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
141
141
  color: var(--md-sys-color-on-primary-container);
142
142
  }
143
143
  input:focus {
144
144
  outline: none;
145
- border-color:var(--md-sys-color-secondary-fixed-dim)
145
+ border-color: var(--md-sys-color-secondary-fixed-dim);
146
146
  }
147
147
 
148
148
  input:invalid {
149
- border-color:var(--md-sys-color-error);
149
+ border-color: var(--md-sys-color-error);
150
150
  color: var(--status-danger-color);
151
151
  }
152
152
 
153
153
  label {
154
154
  width: 100%;
155
- font-size:var(--md-sys-typescale-label-medium-size);
155
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
156
156
  color: var(--md-sys-color-on-primary-container);
157
157
  }
158
158
 
@@ -191,7 +191,7 @@ export class OxInputCrontab extends OxFormField {
191
191
  #tooltip > div {
192
192
  padding: 0.25rem 0.5rem;
193
193
  border-bottom: var(--md-sys-color-on-surface-variant) 1px dashed;
194
- font-size:var(--md-sys-typescale-label-medium-size);
194
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
195
195
  color: var(--md-sys-color-on-primary-container);
196
196
  }
197
197
 
package/src/ox-input-data.ts CHANGED
@@ -36,19 +36,19 @@ export class OxInputData extends OxFormField {
36
36
  margin-bottom: var(--spacing-small);
37
37
  padding: var(--spacing-small);
38
38
  background-color: var(--md-sys-color-primary-container);
39
- border:1px solid var(--md-sys-color-primary-fixed-dim);
40
- border-radius:var(--md-sys-shape-corner-small);
41
- font-size: var(--md-sys-typescale-label-medium-size);
39
+ border: 1px solid var(--md-sys-color-primary-fixed-dim);
40
+ border-radius: var(--md-sys-shape-corner-small);
41
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
42
42
  color: var(--md-sys-color-on-primary-container);
43
43
  }
44
44
 
45
45
  div.datatype md-icon {
46
46
  margin-left: auto;
47
- color:var(--md-sys-color-primary);
48
- cursor:pointer
47
+ color: var(--md-sys-color-primary);
48
+ cursor: pointer;
49
49
  }
50
- div.datatype label{
51
- margin-right:var(--spacing-small)
50
+ div.datatype label {
51
+ margin-right: var(--spacing-small);
52
52
  }
53
53
 
54
54
  ox-input-code {
package/src/ox-input-duration.ts CHANGED
@@ -15,8 +15,8 @@ export class OxInputDuration extends OxFormField {
15
15
  :host {
16
16
  text-align: center;
17
17
  padding: 10px;
18
- --md-filled-icon-button-container-height:var(--form-element-height-medium);
19
- --md-filled-icon-button-container-shape:var(--md-sys-shape-corner-small);
18
+ --md-filled-icon-button-container-height: var(--form-element-height-medium);
19
+ --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);
20
20
  }
21
21
 
22
22
  :host * {
@@ -39,20 +39,20 @@ export class OxInputDuration extends OxFormField {
39
39
  }
40
40
 
41
41
  input {
42
- box-sizing:border-box;
43
- padding:0 var(--spacing-small);
44
- height:var(--form-element-height-medium);
45
- border:1px solid var(--md-sys-color-outline);
46
- border-radius:var(--md-sys-shape-corner-small);
42
+ box-sizing: border-box;
43
+ padding: 0 var(--spacing-small);
44
+ height: var(--form-element-height-medium);
45
+ border: 1px solid var(--md-sys-color-outline);
46
+ border-radius: var(--md-sys-shape-corner-small);
47
47
  max-width: 70px;
48
- font-size:var(--md-sys-typescale-label-medium-size);
48
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
49
49
  color: var(--md-sys-color-on-primary-container);
50
50
  text-align: right;
51
51
  }
52
52
 
53
53
  input:focus {
54
54
  outline: none;
55
- border-color:var(--md-sys-color-secondary-fixed-dim)
55
+ border-color: var(--md-sys-color-secondary-fixed-dim);
56
56
  }
57
57
 
58
58
  input:invalid {
@@ -63,7 +63,7 @@ export class OxInputDuration extends OxFormField {
63
63
  label {
64
64
  width: 100%;
65
65
  margin-right: var(--spacing-medium);
66
- font-size:var(--md-sys-typescale-label-medium-size);
66
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
67
67
  color: var(--md-sys-color-on-primary-container);
68
68
  }
69
69
  `
package/src/ox-input-file.ts CHANGED
@@ -29,12 +29,11 @@ export class OxInputFile extends OxFormField {
29
29
 
30
30
  border: 1px dashed var(--md-sys-color-outline-variant);
31
31
  background-color: var(--md-sys-color-surface);
32
- font-size:var(--md-sys-typescale-label-medium-size);
33
-
32
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
34
33
  }
35
- :host > span{
34
+ :host > span {
36
35
  color: var(--md-sys-color-primary);
37
- font-weight:var(--md-sys-typescale-label-medium-weight);
36
+ font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));
38
37
  }
39
38
 
40
39
  :host > md-icon {
@@ -59,7 +58,7 @@ export class OxInputFile extends OxFormField {
59
58
 
60
59
  padding: var(--file-uploader-label-padding);
61
60
  border-radius: var(--file-uploader-label-border-radius);
62
- font-size:var(--md-sys-typescale-label-medium-size);
61
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
63
62
  color: var(--md-sys-color-on-surface-variant);
64
63
  }
65
64
 
@@ -78,7 +77,7 @@ export class OxInputFile extends OxFormField {
78
77
 
79
78
  padding: 3px 5px 2px 5px;
80
79
  border-bottom: var(--file-uploader-li-border-bottom);
81
- font-size:var(--md-sys-typescale-label-medium-size);
80
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
82
81
  color: var(--md-sys-color-on-primary-container);
83
82
  }
84
83
  li md-icon {
package/themes/md-typescale-styles.css CHANGED
@@ -3,87 +3,87 @@
3
3
  .md-typescale-display-small-prominent {
4
4
  font: var(--md-sys-typescale-display-small-weight, var(--md-ref-typeface-weight-regular, 400))
5
5
  var(--md-sys-typescale-display-small-size, 2.25rem) / var(--md-sys-typescale-display-small-line-height, 2.75rem)
6
- var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, 'Noto'));
6
+ var(--md-sys-typescale-display-small-font, var(--md-ref-typeface-brand, 'Roboto'));
7
7
  }
8
8
  .md-typescale-display-medium,
9
9
  .md-typescale-display-medium-prominent {
10
10
  font: var(--md-sys-typescale-display-medium-weight, var(--md-ref-typeface-weight-regular, 400))
11
11
  var(--md-sys-typescale-display-medium-size, 2.8125rem) /
12
12
  var(--md-sys-typescale-display-medium-line-height, 3.25rem)
13
- var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, 'Noto'));
13
+ var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
14
14
  }
15
15
  .md-typescale-display-large,
16
16
  .md-typescale-display-large-prominent {
17
17
  font: var(--md-sys-typescale-display-large-weight, var(--md-ref-typeface-weight-regular, 400))
18
18
  var(--md-sys-typescale-display-large-size, 3.5625rem) / var(--md-sys-typescale-display-large-line-height, 4rem)
19
- var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, 'Noto'));
19
+ var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, 'Roboto'));
20
20
  }
21
21
  .md-typescale-headline-small,
22
22
  .md-typescale-headline-small-prominent {
23
23
  font: var(--md-sys-typescale-headline-small-weight, var(--md-ref-typeface-weight-regular, 400))
24
24
  var(--md-sys-typescale-headline-small-size, 1.5rem) / var(--md-sys-typescale-headline-small-line-height, 2rem)
25
- var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, 'Noto'));
25
+ var(--md-sys-typescale-headline-small-font, var(--md-ref-typeface-brand, 'Roboto'));
26
26
  }
27
27
  .md-typescale-headline-medium,
28
28
  .md-typescale-headline-medium-prominent {
29
29
  font: var(--md-sys-typescale-headline-medium-weight, var(--md-ref-typeface-weight-regular, 400))
30
30
  var(--md-sys-typescale-headline-medium-size, 1.75rem) /
31
31
  var(--md-sys-typescale-headline-medium-line-height, 2.25rem)
32
- var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, 'Noto'));
32
+ var(--md-sys-typescale-headline-medium-font, var(--md-ref-typeface-brand, 'Roboto'));
33
33
  }
34
34
  .md-typescale-headline-large,
35
35
  .md-typescale-headline-large-prominent {
36
36
  font: var(--md-sys-typescale-headline-large-weight, var(--md-ref-typeface-weight-regular, 400))
37
37
  var(--md-sys-typescale-headline-large-size, 2rem) / var(--md-sys-typescale-headline-large-line-height, 2.5rem)
38
- var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, 'Noto'));
38
+ var(--md-sys-typescale-headline-large-font, var(--md-ref-typeface-brand, 'Roboto'));
39
39
  }
40
40
  .md-typescale-title-small,
41
41
  .md-typescale-title-small-prominent {
42
42
  font: var(--md-sys-typescale-title-small-weight, var(--md-ref-typeface-weight-medium, 500))
43
43
  var(--md-sys-typescale-title-small-size, 0.875rem) / var(--md-sys-typescale-title-small-line-height, 1.25rem)
44
- var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, 'Noto'));
44
+ var(--md-sys-typescale-title-small-font, var(--md-ref-typeface-plain, 'Roboto'));
45
45
  }
46
46
  .md-typescale-title-medium,
47
47
  .md-typescale-title-medium-prominent {
48
48
  font: var(--md-sys-typescale-title-medium-weight, var(--md-ref-typeface-weight-medium, 500))
49
49
  var(--md-sys-typescale-title-medium-size, 1rem) / var(--md-sys-typescale-title-medium-line-height, 1.5rem)
50
- var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, 'Noto'));
50
+ var(--md-sys-typescale-title-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
51
51
  }
52
52
  .md-typescale-title-large,
53
53
  .md-typescale-title-large-prominent {
54
54
  font: var(--md-sys-typescale-title-large-weight, var(--md-ref-typeface-weight-regular, 400))
55
55
  var(--md-sys-typescale-title-large-size, 1.375rem) / var(--md-sys-typescale-title-large-line-height, 1.75rem)
56
- var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, 'Noto'));
56
+ var(--md-sys-typescale-title-large-font, var(--md-ref-typeface-brand, 'Roboto'));
57
57
  }
58
58
  .md-typescale-body-small,
59
59
  .md-typescale-body-small-prominent {
60
60
  font: var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
61
61
  var(--md-sys-typescale-body-small-size, 0.75rem) / var(--md-sys-typescale-body-small-line-height, 1rem)
62
- var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, 'Noto'));
62
+ var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, 'Roboto'));
63
63
  }
64
64
  .md-typescale-body-medium,
65
65
  .md-typescale-body-medium-prominent {
66
66
  font: var(--md-sys-typescale-body-medium-weight, var(--md-ref-typeface-weight-regular, 400))
67
67
  var(--md-sys-typescale-body-medium-size, 0.875rem) / var(--md-sys-typescale-body-medium-line-height, 1.25rem)
68
- var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, 'Noto'));
68
+ var(--md-sys-typescale-body-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
69
69
  }
70
70
  .md-typescale-body-large,
71
71
  .md-typescale-body-large-prominent {
72
72
  font: var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400))
73
73
  var(--md-sys-typescale-body-large-size, 1rem) / var(--md-sys-typescale-body-large-line-height, 1.5rem)
74
- var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, 'Noto'));
74
+ var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, 'Roboto'));
75
75
  }
76
76
  .md-typescale-label-small,
77
77
  .md-typescale-label-small-prominent {
78
78
  font: var(--md-sys-typescale-label-small-weight, var(--md-ref-typeface-weight-medium, 500))
79
79
  var(--md-sys-typescale-label-small-size, 0.6875rem) / var(--md-sys-typescale-label-small-line-height, 1rem)
80
- var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, 'Noto'));
80
+ var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, 'Roboto'));
81
81
  }
82
82
  .md-typescale-label-medium,
83
83
  .md-typescale-label-medium-prominent {
84
84
  font: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500))
85
85
  var(--md-sys-typescale-label-medium-size, 0.75rem) / var(--md-sys-typescale-label-medium-line-height, 1rem)
86
- var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, 'Noto'));
86
+ var(--md-sys-typescale-label-medium-font, var(--md-ref-typeface-plain, 'Roboto'));
87
87
  }
88
88
  .md-typescale-label-medium-prominent {
89
89
  font-weight: var(--md-sys-typescale-label-medium-weight-prominent, var(--md-ref-typeface-weight-bold, 700));
@@ -92,7 +92,7 @@
92
92
  .md-typescale-label-large-prominent {
93
93
  font: var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500))
94
94
  var(--md-sys-typescale-label-large-size, 0.875rem) / var(--md-sys-typescale-label-large-line-height, 1.25rem)
95
- var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, 'Noto'));
95
+ var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, 'Roboto'));
96
96
  }
97
97
  .md-typescale-label-large-prominent {
98
98
  font-weight: var(--md-sys-typescale-label-large-weight-prominent, var(--md-ref-typeface-weight-bold, 700));