@api-client/ui 0.3.1 → 0.3.3

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 (59) hide show
  1. package/build/src/elements/environment/EnvironmentEditor.d.ts.map +1 -1
  2. package/build/src/elements/environment/EnvironmentEditor.js +8 -6
  3. package/build/src/elements/environment/EnvironmentEditor.js.map +1 -1
  4. package/build/src/elements/har/HarViewer.d.ts.map +1 -1
  5. package/build/src/elements/har/HarViewer.js +13 -15
  6. package/build/src/elements/har/HarViewer.js.map +1 -1
  7. package/build/src/elements/http/RequestEditor.d.ts +2 -1
  8. package/build/src/elements/http/RequestEditor.d.ts.map +1 -1
  9. package/build/src/elements/http/RequestEditor.js +17 -12
  10. package/build/src/elements/http/RequestEditor.js.map +1 -1
  11. package/build/src/elements/http/RequestLog.d.ts.map +1 -1
  12. package/build/src/elements/http/RequestLog.js +34 -8
  13. package/build/src/elements/http/RequestLog.js.map +1 -1
  14. package/build/src/md/button/internals/button.styles.js +4 -4
  15. package/build/src/md/button/internals/button.styles.js.map +1 -1
  16. package/build/src/md/motion/animation.d.ts +5 -3
  17. package/build/src/md/motion/animation.d.ts.map +1 -1
  18. package/build/src/md/motion/animation.js +4 -2
  19. package/build/src/md/motion/animation.js.map +1 -1
  20. package/build/src/md/ripple/internals/ripple.styles.d.ts.map +1 -1
  21. package/build/src/md/ripple/internals/ripple.styles.js +20 -8
  22. package/build/src/md/ripple/internals/ripple.styles.js.map +1 -1
  23. package/build/src/md/tabs/internals/Tab.d.ts +25 -9
  24. package/build/src/md/tabs/internals/Tab.d.ts.map +1 -1
  25. package/build/src/md/tabs/internals/Tab.js +122 -53
  26. package/build/src/md/tabs/internals/Tab.js.map +1 -1
  27. package/build/src/md/tabs/internals/Tab.styles.d.ts.map +1 -1
  28. package/build/src/md/tabs/internals/Tab.styles.js +69 -64
  29. package/build/src/md/tabs/internals/Tab.styles.js.map +1 -1
  30. package/build/src/md/tabs/internals/Tabs.d.ts +52 -54
  31. package/build/src/md/tabs/internals/Tabs.d.ts.map +1 -1
  32. package/build/src/md/tabs/internals/Tabs.js +270 -330
  33. package/build/src/md/tabs/internals/Tabs.js.map +1 -1
  34. package/build/src/md/tabs/internals/Tabs.styles.d.ts.map +1 -1
  35. package/build/src/md/tabs/internals/Tabs.styles.js +13 -17
  36. package/build/src/md/tabs/internals/Tabs.styles.js.map +1 -1
  37. package/build/src/md/text-field/internals/common.styles.d.ts.map +1 -1
  38. package/build/src/md/text-field/internals/common.styles.js +0 -3
  39. package/build/src/md/text-field/internals/common.styles.js.map +1 -1
  40. package/build/src/styles/m3/native.css +270 -0
  41. package/build/src/styles/m3/theme.css +155 -0
  42. package/build/src/styles/m3/tokens.css +512 -0
  43. package/demo/md/tabs/tabs.html +19 -0
  44. package/demo/md/tabs/tabs.ts +133 -83
  45. package/package.json +20 -4
  46. package/scripts/copy-assets.js +21 -0
  47. package/src/elements/environment/EnvironmentEditor.ts +8 -6
  48. package/src/elements/har/HarViewer.ts +13 -15
  49. package/src/elements/http/RequestEditor.ts +18 -13
  50. package/src/elements/http/RequestLog.ts +34 -8
  51. package/src/md/button/internals/button.styles.ts +4 -4
  52. package/src/md/motion/animation.ts +4 -2
  53. package/src/md/ripple/internals/ripple.styles.ts +20 -8
  54. package/src/md/tabs/internals/Tab.styles.ts +69 -64
  55. package/src/md/tabs/internals/Tab.ts +126 -43
  56. package/src/md/tabs/internals/Tabs.styles.ts +13 -17
  57. package/src/md/tabs/internals/Tabs.ts +259 -305
  58. package/src/md/text-field/internals/common.styles.ts +0 -3
  59. package/test/elements/har/HarViewerElement.test.ts +1 -55
package/build/src/styles/m3/theme.css ADDED
@@ -0,0 +1,155 @@
1
+ html.theme-light {
2
+ --md-sys-color-primary-05a: var(--md-sys-color-primary-light-05a);
3
+ --md-sys-color-primary-08a: var(--md-sys-color-primary-light-08a);
4
+ --md-sys-color-primary-11a: var(--md-sys-color-primary-light-11a);
5
+ --md-sys-color-primary-12a: var(--md-sys-color-primary-light-12a);
6
+ --md-sys-color-primary-13a: var(--md-sys-color-primary-light-13a);
7
+ --md-sys-color-primary: var(--md-sys-color-primary-light);
8
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
9
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
10
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
11
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
12
+ --md-sys-color-secondary: var(--md-sys-color-secondary-light);
13
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
14
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
15
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
16
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
17
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
18
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
19
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
20
+ --md-sys-color-error: var(--md-sys-color-error-light);
21
+ --md-sys-color-on-error: var(--md-sys-color-on-error-light);
22
+ --md-sys-color-error-container: var(--md-sys-color-error-container-light);
23
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
24
+ --md-sys-color-background: var(--md-sys-color-background-light);
25
+ --md-sys-color-on-background: var(--md-sys-color-on-background-light);
26
+ --md-sys-color-surface: var(--md-sys-color-surface-light);
27
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
28
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
29
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
30
+ --md-sys-color-outline: var(--md-sys-color-outline-light);
31
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
32
+ --md-sys-color-shadow: var(--md-sys-color-shadow-light);
33
+ --md-sys-color-scrim: var(--md-sys-color-scrim-light);
34
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
35
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
36
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
37
+ --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-light);
38
+ --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-light);
39
+ --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-light);
40
+ --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-light);
41
+ --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-light);
42
+ --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-light);
43
+ --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-light);
44
+ --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-light);
45
+ --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-light);
46
+ --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-light);
47
+ --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-light);
48
+ --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-light);
49
+ --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-light);
50
+ --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-light);
51
+ --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-light);
52
+ --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-light);
53
+ --md-sys-color-surface-container: var(--md-sys-color-surface-container-light);
54
+ --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-light);
55
+ --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-light);
56
+
57
+ /* CUSTOM */
58
+ --md-sys-elevation-0: none;
59
+ --md-sys-elevation-1: var(--md-sys-elevation-1-light);
60
+ --md-sys-elevation-2: var(--md-sys-elevation-2-light);
61
+ --md-sys-elevation-3: var(--md-sys-elevation-3-light);
62
+ --md-sys-elevation-4: var(--md-sys-elevation-4-light);
63
+ --md-sys-elevation-5: var(--md-sys-elevation-5-light);
64
+
65
+ /* Prism */
66
+ --code-operator-value-color: #a67f59;
67
+ --code-operator-value-background-color: hsla(0, 0%, 100%, 0.5);
68
+ --code-keyword-value-color: #07a;
69
+ --code-function-value-color: #dd4a68;
70
+ --code-variable-value-color: #e90;
71
+ --code-type-text-value-color: #690;
72
+ --code-type-boolean-value-color: #905;
73
+ --code-type-number-value-color: #905;
74
+ --code-property-value-color: #905;
75
+ --code-punctuation-value-color: #999;
76
+ --code-token-comment-value-color: slategray;
77
+ }
78
+
79
+ html.theme-dark {
80
+ --md-sys-color-primary-05a: var(--md-sys-color-primary-dark-05a);
81
+ --md-sys-color-primary-08a: var(--md-sys-color-primary-dark-08a);
82
+ --md-sys-color-primary-11a: var(--md-sys-color-primary-dark-11a);
83
+ --md-sys-color-primary-12a: var(--md-sys-color-primary-dark-12a);
84
+ --md-sys-color-primary-13a: var(--md-sys-color-primary-dark-13a);
85
+ --md-sys-color-primary: var(--md-sys-color-primary-dark);
86
+ --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
87
+ --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
88
+ --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
89
+ --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
90
+ --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
91
+ --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
92
+ --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
93
+ --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
94
+ --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
95
+ --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
96
+ --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
97
+ --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
98
+ --md-sys-color-error: var(--md-sys-color-error-dark);
99
+ --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
100
+ --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
101
+ --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
102
+ --md-sys-color-background: var(--md-sys-color-background-dark);
103
+ --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
104
+ --md-sys-color-surface: var(--md-sys-color-surface-dark);
105
+ --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
106
+ --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
107
+ --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
108
+ --md-sys-color-outline: var(--md-sys-color-outline-dark);
109
+ --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
110
+ --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
111
+ --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
112
+ --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
113
+ --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
114
+ --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
115
+ --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark);
116
+ --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark);
117
+ --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark);
118
+ --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-dark);
119
+ --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark);
120
+ --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-dark);
121
+ --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-dark);
122
+ --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-dark);
123
+ --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark);
124
+ --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark);
125
+ --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-dark);
126
+ --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-dark);
127
+ --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark);
128
+ --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark);
129
+ --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark);
130
+ --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-dark);
131
+ --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark);
132
+ --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-dark);
133
+ --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-dark);
134
+
135
+ /* CUSTOM */
136
+ --md-sys-elevation-0: none;
137
+ --md-sys-elevation-1: var(--md-sys-elevation-1-dark);
138
+ --md-sys-elevation-2: var(--md-sys-elevation-2-dark);
139
+ --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
140
+ --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
141
+ --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
142
+
143
+ /* Prism */
144
+ --code-operator-value-color: #ffc185;
145
+ --code-operator-value-background-color: transparent;
146
+ --code-keyword-value-color: #00b2ff;
147
+ --code-function-value-color: #ff7d97;
148
+ --code-variable-value-color: #e90;
149
+ --code-type-text-value-color: #aaff00;
150
+ --code-type-boolean-value-color: #f882c4;
151
+ --code-type-number-value-color: #f882c4;
152
+ --code-property-value-color: #ff9bd3;
153
+ --code-punctuation-value-color: #aaa;
154
+ --code-token-comment-value-color: #93a9bf;
155
+ }
package/build/src/styles/m3/tokens.css ADDED
@@ -0,0 +1,512 @@
1
+ html {
2
+ /* light */
3
+ /* Custom */
4
+ --md-sys-color-primary-light-05a: rgba(0 104 116, 0.05);
5
+ --md-sys-color-primary-light-08a: rgba(0 104 116, 0.08);
6
+ --md-sys-color-primary-light-11a: rgba(0 104 116, 0.11);
7
+ --md-sys-color-primary-light-12a: rgba(0 104 116, 0.12);
8
+ --md-sys-color-primary-light-13a: rgba(0 104 116, 0.13);
9
+ /* M3 Generated */
10
+ --md-sys-color-primary-light: rgb(0 104 116);
11
+ --md-sys-color-surface-tint-light: rgb(0 104 116);
12
+ --md-sys-color-on-primary-light: rgb(255 255 255);
13
+ --md-sys-color-primary-container-light: rgb(158 239 254);
14
+ --md-sys-color-on-primary-container-light: rgb(0 79 88);
15
+ --md-sys-color-secondary-light: rgb(0 104 116);
16
+ --md-sys-color-on-secondary-light: rgb(255 255 255);
17
+ --md-sys-color-secondary-container-light: rgb(158 239 253);
18
+ --md-sys-color-on-secondary-container-light: rgb(0 79 87);
19
+ --md-sys-color-tertiary-light: rgb(83 94 125);
20
+ --md-sys-color-on-tertiary-light: rgb(255 255 255);
21
+ --md-sys-color-tertiary-container-light: rgb(218 226 255);
22
+ --md-sys-color-on-tertiary-container-light: rgb(59 70 101);
23
+ --md-sys-color-error-light: rgb(186 26 26);
24
+ --md-sys-color-on-error-light: rgb(255 255 255);
25
+ --md-sys-color-error-container-light: rgb(255 218 214);
26
+ --md-sys-color-on-error-container-light: rgb(147 0 10);
27
+ --md-sys-color-background-light: rgb(245 250 251);
28
+ --md-sys-color-on-background-light: rgb(23 29 30);
29
+ --md-sys-color-surface-light: rgb(245 250 251);
30
+ --md-sys-color-on-surface-light: rgb(23 29 30);
31
+ --md-sys-color-surface-variant-light: rgb(219 228 230);
32
+ --md-sys-color-on-surface-variant-light: rgb(63 72 74);
33
+ --md-sys-color-outline-light: rgb(111 121 123);
34
+ --md-sys-color-outline-variant-light: rgb(191 200 202);
35
+ --md-sys-color-shadow-light: rgb(0 0 0);
36
+ --md-sys-color-scrim-light: rgb(0 0 0);
37
+ --md-sys-color-inverse-surface-light: rgb(43 49 51);
38
+ --md-sys-color-inverse-on-surface-light: rgb(236 242 243);
39
+ --md-sys-color-inverse-primary-light: rgb(130 211 225);
40
+ --md-sys-color-primary-fixed-light: rgb(158 239 254);
41
+ --md-sys-color-on-primary-fixed-light: rgb(0 31 36);
42
+ --md-sys-color-primary-fixed-dim-light: rgb(130 211 225);
43
+ --md-sys-color-on-primary-fixed-variant-light: rgb(0 79 88);
44
+ --md-sys-color-secondary-fixed-light: rgb(158 239 253);
45
+ --md-sys-color-on-secondary-fixed-light: rgb(0 31 36);
46
+ --md-sys-color-secondary-fixed-dim-light: rgb(129 211 224);
47
+ --md-sys-color-on-secondary-fixed-variant-light: rgb(0 79 87);
48
+ --md-sys-color-tertiary-fixed-light: rgb(218 226 255);
49
+ --md-sys-color-on-tertiary-fixed-light: rgb(15 26 55);
50
+ --md-sys-color-tertiary-fixed-dim-light: rgb(187 198 234);
51
+ --md-sys-color-on-tertiary-fixed-variant-light: rgb(59 70 101);
52
+ --md-sys-color-surface-dim-light: rgb(213 219 220);
53
+ --md-sys-color-surface-bright-light: rgb(245 250 251);
54
+ --md-sys-color-surface-container-lowest-light: rgb(255 255 255);
55
+ --md-sys-color-surface-container-low-light: rgb(239 245 246);
56
+ --md-sys-color-surface-container-light: rgb(233 239 240);
57
+ --md-sys-color-surface-container-high-light: rgb(227 233 234);
58
+ --md-sys-color-surface-container-highest-light: rgb(222 227 229);
59
+
60
+ /* light high contrast */
61
+ /* Custom */
62
+ --md-sys-color-primary-light-hc-05a: rgba(0 49 56, 0.05);
63
+ --md-sys-color-primary-light-hc-08a: rgba(0 49 56, 0.08);
64
+ --md-sys-color-primary-light-hc-11a: rgba(0 49 56, 0.11);
65
+ --md-sys-color-primary-light-hc-12a: rgba(0 49 56, 0.12);
66
+ --md-sys-color-primary-light-hc-13a: rgba(0 49 56, 0.13);
67
+ /* M3 Generated */
68
+ --md-sys-color-primary-light-hc: rgb(0 49 56);
69
+ --md-sys-color-surface-tint-light-hc: rgb(0 104 116);
70
+ --md-sys-color-on-primary-light-hc: rgb(255 255 255);
71
+ --md-sys-color-primary-container-light-hc: rgb(0 81 91);
72
+ --md-sys-color-on-primary-container-light-hc: rgb(255 255 255);
73
+ --md-sys-color-secondary-light-hc: rgb(0 50 55);
74
+ --md-sys-color-on-secondary-light-hc: rgb(255 255 255);
75
+ --md-sys-color-secondary-container-light-hc: rgb(0 81 90);
76
+ --md-sys-color-on-secondary-container-light-hc: rgb(255 255 255);
77
+ --md-sys-color-tertiary-light-hc: rgb(32 43 72);
78
+ --md-sys-color-on-tertiary-light-hc: rgb(255 255 255);
79
+ --md-sys-color-tertiary-container-light-hc: rgb(61 72 103);
80
+ --md-sys-color-on-tertiary-container-light-hc: rgb(255 255 255);
81
+ --md-sys-color-error-light-hc: rgb(96 0 4);
82
+ --md-sys-color-on-error-light-hc: rgb(255 255 255);
83
+ --md-sys-color-error-container-light-hc: rgb(152 0 10);
84
+ --md-sys-color-on-error-container-light-hc: rgb(255 255 255);
85
+ --md-sys-color-background-light-hc: rgb(245 250 251);
86
+ --md-sys-color-on-background-light-hc: rgb(23 29 30);
87
+ --md-sys-color-surface-light-hc: rgb(245 250 251);
88
+ --md-sys-color-on-surface-light-hc: rgb(0 0 0);
89
+ --md-sys-color-surface-variant-light-hc: rgb(219 228 230);
90
+ --md-sys-color-on-surface-variant-light-hc: rgb(0 0 0);
91
+ --md-sys-color-outline-light-hc: rgb(37 46 47);
92
+ --md-sys-color-outline-variant-light-hc: rgb(66 75 77);
93
+ --md-sys-color-shadow-light-hc: rgb(0 0 0);
94
+ --md-sys-color-scrim-light-hc: rgb(0 0 0);
95
+ --md-sys-color-inverse-surface-light-hc: rgb(43 49 51);
96
+ --md-sys-color-inverse-on-surface-light-hc: rgb(255 255 255);
97
+ --md-sys-color-inverse-primary-light-hc: rgb(130 211 225);
98
+ --md-sys-color-primary-fixed-light-hc: rgb(0 81 91);
99
+ --md-sys-color-on-primary-fixed-light-hc: rgb(255 255 255);
100
+ --md-sys-color-primary-fixed-dim-light-hc: rgb(0 57 64);
101
+ --md-sys-color-on-primary-fixed-variant-light-hc: rgb(255 255 255);
102
+ --md-sys-color-secondary-fixed-light-hc: rgb(0 81 90);
103
+ --md-sys-color-on-secondary-fixed-light-hc: rgb(255 255 255);
104
+ --md-sys-color-secondary-fixed-dim-light-hc: rgb(0 57 63);
105
+ --md-sys-color-on-secondary-fixed-variant-light-hc: rgb(255 255 255);
106
+ --md-sys-color-tertiary-fixed-light-hc: rgb(61 72 103);
107
+ --md-sys-color-on-tertiary-fixed-light-hc: rgb(255 255 255);
108
+ --md-sys-color-tertiary-fixed-dim-light-hc: rgb(39 50 79);
109
+ --md-sys-color-on-tertiary-fixed-variant-light-hc: rgb(255 255 255);
110
+ --md-sys-color-surface-dim-light-hc: rgb(180 186 187);
111
+ --md-sys-color-surface-bright-light-hc: rgb(245 250 251);
112
+ --md-sys-color-surface-container-lowest-light-hc: rgb(255 255 255);
113
+ --md-sys-color-surface-container-low-light-hc: rgb(236 242 243);
114
+ --md-sys-color-surface-container-light-hc: rgb(222 227 229);
115
+ --md-sys-color-surface-container-high-light-hc: rgb(208 213 215);
116
+ --md-sys-color-surface-container-highest-light-hc: rgb(194 199 201);
117
+ /* light medium contrast */
118
+ /* Custom */
119
+ --md-sys-color-primary-light-mc-05a: rgba(0 60 68, 0.05);
120
+ --md-sys-color-primary-light-mc-08a: rgba(0 60 68, 0.08);
121
+ --md-sys-color-primary-light-mc-11a: rgba(0 60 68, 0.11);
122
+ --md-sys-color-primary-light-mc-12a: rgba(0 60 68, 0.12);
123
+ --md-sys-color-primary-light-mc-13a: rgba(0 60 68, 0.13);
124
+ /* M3 Generated */
125
+ --md-sys-color-primary-light-mc: rgb(0 60 68);
126
+ --md-sys-color-surface-tint-light-mc: rgb(0 104 116);
127
+ --md-sys-color-on-primary-light-mc: rgb(255 255 255);
128
+ --md-sys-color-primary-container-light-mc: rgb(25 120 133);
129
+ --md-sys-color-on-primary-container-light-mc: rgb(255 255 255);
130
+ --md-sys-color-secondary-light-mc: rgb(0 61 68);
131
+ --md-sys-color-on-secondary-light-mc: rgb(255 255 255);
132
+ --md-sys-color-secondary-container-light-mc: rgb(24 120 132);
133
+ --md-sys-color-on-secondary-container-light-mc: rgb(255 255 255);
134
+ --md-sys-color-tertiary-light-mc: rgb(42 53 83);
135
+ --md-sys-color-on-tertiary-light-mc: rgb(255 255 255);
136
+ --md-sys-color-tertiary-container-light-mc: rgb(97 108 141);
137
+ --md-sys-color-on-tertiary-container-light-mc: rgb(255 255 255);
138
+ --md-sys-color-error-light-mc: rgb(116 0 6);
139
+ --md-sys-color-on-error-light-mc: rgb(255 255 255);
140
+ --md-sys-color-error-container-light-mc: rgb(207 44 39);
141
+ --md-sys-color-on-error-container-light-mc: rgb(255 255 255);
142
+ --md-sys-color-background-light-mc: rgb(245 250 251);
143
+ --md-sys-color-on-background-light-mc: rgb(23 29 30);
144
+ --md-sys-color-surface-light-mc: rgb(245 250 251);
145
+ --md-sys-color-on-surface-light-mc: rgb(12 18 19);
146
+ --md-sys-color-surface-variant-light-mc: rgb(219 228 230);
147
+ --md-sys-color-on-surface-variant-light-mc: rgb(47 56 57);
148
+ --md-sys-color-outline-light-mc: rgb(75 84 86);
149
+ --md-sys-color-outline-variant-light-mc: rgb(101 111 113);
150
+ --md-sys-color-shadow-light-mc: rgb(0 0 0);
151
+ --md-sys-color-scrim-light-mc: rgb(0 0 0);
152
+ --md-sys-color-inverse-surface-light-mc: rgb(43 49 51);
153
+ --md-sys-color-inverse-on-surface-light-mc: rgb(236 242 243);
154
+ --md-sys-color-inverse-primary-light-mc: rgb(130 211 225);
155
+ --md-sys-color-primary-fixed-light-mc: rgb(25 120 133);
156
+ --md-sys-color-on-primary-fixed-light-mc: rgb(255 255 255);
157
+ --md-sys-color-primary-fixed-dim-light-mc: rgb(0 94 105);
158
+ --md-sys-color-on-primary-fixed-variant-light-mc: rgb(255 255 255);
159
+ --md-sys-color-secondary-fixed-light-mc: rgb(24 120 132);
160
+ --md-sys-color-on-secondary-fixed-light-mc: rgb(255 255 255);
161
+ --md-sys-color-secondary-fixed-dim-light-mc: rgb(0 94 104);
162
+ --md-sys-color-on-secondary-fixed-variant-light-mc: rgb(255 255 255);
163
+ --md-sys-color-tertiary-fixed-light-mc: rgb(97 108 141);
164
+ --md-sys-color-on-tertiary-fixed-light-mc: rgb(255 255 255);
165
+ --md-sys-color-tertiary-fixed-dim-light-mc: rgb(73 84 115);
166
+ --md-sys-color-on-tertiary-fixed-variant-light-mc: rgb(255 255 255);
167
+ --md-sys-color-surface-dim-light-mc: rgb(194 199 201);
168
+ --md-sys-color-surface-bright-light-mc: rgb(245 250 251);
169
+ --md-sys-color-surface-container-lowest-light-mc: rgb(255 255 255);
170
+ --md-sys-color-surface-container-low-light-mc: rgb(239 245 246);
171
+ --md-sys-color-surface-container-light-mc: rgb(227 233 234);
172
+ --md-sys-color-surface-container-high-light-mc: rgb(216 222 223);
173
+ --md-sys-color-surface-container-highest-light-mc: rgb(205 211 212);
174
+
175
+ /* dark */
176
+ /* Custom */
177
+ --md-sys-color-primary-dark-05a: rgba(130 211 225, 0.05);
178
+ --md-sys-color-primary-dark-08a: rgba(130 211 225, 0.08);
179
+ --md-sys-color-primary-dark-11a: rgba(130 211 225, 0.11);
180
+ --md-sys-color-primary-dark-12a: rgba(130 211 225, 0.12);
181
+ --md-sys-color-primary-dark-13a: rgba(130 211 225, 0.13);
182
+
183
+ /* M3 Generated */
184
+ --md-sys-color-primary-dark: rgb(130 211 225);
185
+ --md-sys-color-surface-tint-dark: rgb(130 211 225);
186
+ --md-sys-color-on-primary-dark: rgb(0 54 61);
187
+ --md-sys-color-primary-container-dark: rgb(0 79 88);
188
+ --md-sys-color-on-primary-container-dark: rgb(158 239 254);
189
+ --md-sys-color-secondary-dark: rgb(129 211 224);
190
+ --md-sys-color-on-secondary-dark: rgb(0 54 61);
191
+ --md-sys-color-secondary-container-dark: rgb(0 79 87);
192
+ --md-sys-color-on-secondary-container-dark: rgb(158 239 253);
193
+ --md-sys-color-tertiary-dark: rgb(187 198 234);
194
+ --md-sys-color-on-tertiary-dark: rgb(36 48 77);
195
+ --md-sys-color-tertiary-container-dark: rgb(59 70 101);
196
+ --md-sys-color-on-tertiary-container-dark: rgb(218 226 255);
197
+ --md-sys-color-error-dark: rgb(255 180 171);
198
+ --md-sys-color-on-error-dark: rgb(105 0 5);
199
+ --md-sys-color-error-container-dark: rgb(147 0 10);
200
+ --md-sys-color-on-error-container-dark: rgb(255 218 214);
201
+ --md-sys-color-background-dark: rgb(14 20 21);
202
+ --md-sys-color-on-background-dark: rgb(222 227 229);
203
+ --md-sys-color-surface-dark: rgb(14 20 21);
204
+ --md-sys-color-on-surface-dark: rgb(222 227 229);
205
+ --md-sys-color-surface-variant-dark: rgb(63 72 74);
206
+ --md-sys-color-on-surface-variant-dark: rgb(191 200 202);
207
+ --md-sys-color-outline-dark: rgb(137 146 148);
208
+ --md-sys-color-outline-variant-dark: rgb(63 72 74);
209
+ --md-sys-color-shadow-dark: rgb(0 0 0);
210
+ --md-sys-color-scrim-dark: rgb(0 0 0);
211
+ --md-sys-color-inverse-surface-dark: rgb(222 227 229);
212
+ --md-sys-color-inverse-on-surface-dark: rgb(43 49 51);
213
+ --md-sys-color-inverse-primary-dark: rgb(0 104 116);
214
+ --md-sys-color-primary-fixed-dark: rgb(158 239 254);
215
+ --md-sys-color-on-primary-fixed-dark: rgb(0 31 36);
216
+ --md-sys-color-primary-fixed-dim-dark: rgb(130 211 225);
217
+ --md-sys-color-on-primary-fixed-variant-dark: rgb(0 79 88);
218
+ --md-sys-color-secondary-fixed-dark: rgb(158 239 253);
219
+ --md-sys-color-on-secondary-fixed-dark: rgb(0 31 36);
220
+ --md-sys-color-secondary-fixed-dim-dark: rgb(129 211 224);
221
+ --md-sys-color-on-secondary-fixed-variant-dark: rgb(0 79 87);
222
+ --md-sys-color-tertiary-fixed-dark: rgb(218 226 255);
223
+ --md-sys-color-on-tertiary-fixed-dark: rgb(15 26 55);
224
+ --md-sys-color-tertiary-fixed-dim-dark: rgb(187 198 234);
225
+ --md-sys-color-on-tertiary-fixed-variant-dark: rgb(59 70 101);
226
+ --md-sys-color-surface-dim-dark: rgb(14 20 21);
227
+ --md-sys-color-surface-bright-dark: rgb(52 58 59);
228
+ --md-sys-color-surface-container-lowest-dark: rgb(9 15 16);
229
+ --md-sys-color-surface-container-low-dark: rgb(23 29 30);
230
+ --md-sys-color-surface-container-dark: rgb(27 33 34);
231
+ --md-sys-color-surface-container-high-dark: rgb(37 43 44);
232
+ --md-sys-color-surface-container-highest-dark: rgb(48 54 55);
233
+
234
+ /* dark high contrast */
235
+ /* Custom */
236
+ --md-sys-color-primary-dark-hc-05a: rgba(206 247 255, 0.05);
237
+ --md-sys-color-primary-dark-hc-08a: rgba(206 247 255, 0.08);
238
+ --md-sys-color-primary-dark-hc-11a: rgba(206 247 255, 0.11);
239
+ --md-sys-color-primary-dark-hc-12a: rgba(206 247 255, 0.12);
240
+ --md-sys-color-primary-dark-hc-13a: rgba(206 247 255, 0.13);
241
+ /* M3 Generated */
242
+ --md-sys-color-primary-dark-hc: rgb(206 247 255);
243
+ --md-sys-color-surface-tint-dark-hc: rgb(130 211 225);
244
+ --md-sys-color-on-primary-dark-hc: rgb(0 0 0);
245
+ --md-sys-color-primary-container-dark-hc: rgb(126 207 221);
246
+ --md-sys-color-on-primary-container-dark-hc: rgb(0 14 16);
247
+ --md-sys-color-secondary-dark-hc: rgb(205 248 255);
248
+ --md-sys-color-on-secondary-dark-hc: rgb(0 0 0);
249
+ --md-sys-color-secondary-container-dark-hc: rgb(126 207 220);
250
+ --md-sys-color-on-secondary-container-dark-hc: rgb(0 14 16);
251
+ --md-sys-color-tertiary-dark-hc: rgb(237 239 255);
252
+ --md-sys-color-on-tertiary-dark-hc: rgb(0 0 0);
253
+ --md-sys-color-tertiary-container-dark-hc: rgb(183 194 230);
254
+ --md-sys-color-on-tertiary-container-dark-hc: rgb(0 9 38);
255
+ --md-sys-color-error-dark-hc: rgb(255 236 233);
256
+ --md-sys-color-on-error-dark-hc: rgb(0 0 0);
257
+ --md-sys-color-error-container-dark-hc: rgb(255 174 164);
258
+ --md-sys-color-on-error-container-dark-hc: rgb(34 0 1);
259
+ --md-sys-color-background-dark-hc: rgb(14 20 21);
260
+ --md-sys-color-on-background-dark-hc: rgb(222 227 229);
261
+ --md-sys-color-surface-dark-hc: rgb(14 20 21);
262
+ --md-sys-color-on-surface-dark-hc: rgb(255 255 255);
263
+ --md-sys-color-surface-variant-dark-hc: rgb(63 72 74);
264
+ --md-sys-color-on-surface-variant-dark-hc: rgb(255 255 255);
265
+ --md-sys-color-outline-dark-hc: rgb(232 242 244);
266
+ --md-sys-color-outline-variant-dark-hc: rgb(187 196 198);
267
+ --md-sys-color-shadow-dark-hc: rgb(0 0 0);
268
+ --md-sys-color-scrim-dark-hc: rgb(0 0 0);
269
+ --md-sys-color-inverse-surface-dark-hc: rgb(222 227 229);
270
+ --md-sys-color-inverse-on-surface-dark-hc: rgb(0 0 0);
271
+ --md-sys-color-inverse-primary-dark-hc: rgb(0 80 89);
272
+ --md-sys-color-primary-fixed-dark-hc: rgb(158 239 254);
273
+ --md-sys-color-on-primary-fixed-dark-hc: rgb(0 0 0);
274
+ --md-sys-color-primary-fixed-dim-dark-hc: rgb(130 211 225);
275
+ --md-sys-color-on-primary-fixed-variant-dark-hc: rgb(0 20 23);
276
+ --md-sys-color-secondary-fixed-dark-hc: rgb(158 239 253);
277
+ --md-sys-color-on-secondary-fixed-dark-hc: rgb(0 0 0);
278
+ --md-sys-color-secondary-fixed-dim-dark-hc: rgb(129 211 224);
279
+ --md-sys-color-on-secondary-fixed-variant-dark-hc: rgb(0 20 23);
280
+ --md-sys-color-tertiary-fixed-dark-hc: rgb(218 226 255);
281
+ --md-sys-color-on-tertiary-fixed-dark-hc: rgb(0 0 0);
282
+ --md-sys-color-tertiary-fixed-dim-dark-hc: rgb(187 198 234);
283
+ --md-sys-color-on-tertiary-fixed-variant-dark-hc: rgb(4 16 44);
284
+ --md-sys-color-surface-dim-dark-hc: rgb(14 20 21);
285
+ --md-sys-color-surface-bright-dark-hc: rgb(75 81 82);
286
+ --md-sys-color-surface-container-lowest-dark-hc: rgb(0 0 0);
287
+ --md-sys-color-surface-container-low-dark-hc: rgb(27 33 34);
288
+ --md-sys-color-surface-container-dark-hc: rgb(43 49 51);
289
+ --md-sys-color-surface-container-high-dark-hc: rgb(54 60 62);
290
+ --md-sys-color-surface-container-highest-dark-hc: rgb(66 72 73);
291
+
292
+ /* dark medium contrast */
293
+ /* Custom */
294
+ --md-sys-color-primary-dark-mc-05a: rgba(134 215 229, 0.05);
295
+ --md-sys-color-primary-dark-mc-08a: rgba(134 215 229, 0.08);
296
+ --md-sys-color-primary-dark-mc-11a: rgba(134 215 229, 0.11);
297
+ --md-sys-color-primary-dark-mc-12a: rgba(134 215 229, 0.12);
298
+ --md-sys-color-primary-dark-mc-13a: rgba(134 215 229, 0.13);
299
+ /* M3 Generated */
300
+ --md-sys-color-primary-dark-mc: rgb(152 233 247);
301
+ --md-sys-color-surface-tint-dark-mc: rgb(130 211 225);
302
+ --md-sys-color-on-primary-dark-mc: rgb(0 42 48);
303
+ --md-sys-color-primary-container-dark-mc: rgb(73 156 169);
304
+ --md-sys-color-on-primary-container-dark-mc: rgb(0 0 0);
305
+ --md-sys-color-secondary-dark-mc: rgb(152 233 246);
306
+ --md-sys-color-on-secondary-dark-mc: rgb(0 42 48);
307
+ --md-sys-color-secondary-container-dark-mc: rgb(72 156 169);
308
+ --md-sys-color-on-secondary-container-dark-mc: rgb(0 0 0);
309
+ --md-sys-color-tertiary-dark-mc: rgb(209 219 255);
310
+ --md-sys-color-on-tertiary-dark-mc: rgb(25 37 65);
311
+ --md-sys-color-tertiary-container-dark-mc: rgb(133 144 178);
312
+ --md-sys-color-on-tertiary-container-dark-mc: rgb(0 0 0);
313
+ --md-sys-color-error-dark-mc: rgb(255 210 204);
314
+ --md-sys-color-on-error-dark-mc: rgb(84 0 3);
315
+ --md-sys-color-error-container-dark-mc: rgb(255 84 73);
316
+ --md-sys-color-on-error-container-dark-mc: rgb(0 0 0);
317
+ --md-sys-color-background-dark-mc: rgb(14 20 21);
318
+ --md-sys-color-on-background-dark-mc: rgb(222 227 229);
319
+ --md-sys-color-surface-dark-mc: rgb(14 20 21);
320
+ --md-sys-color-on-surface-dark-mc: rgb(255 255 255);
321
+ --md-sys-color-surface-variant-dark-mc: rgb(63 72 74);
322
+ --md-sys-color-on-surface-variant-dark-mc: rgb(212 222 224);
323
+ --md-sys-color-outline-dark-mc: rgb(170 180 181);
324
+ --md-sys-color-outline-variant-dark-mc: rgb(136 146 148);
325
+ --md-sys-color-shadow-dark-mc: rgb(0 0 0);
326
+ --md-sys-color-scrim-dark-mc: rgb(0 0 0);
327
+ --md-sys-color-inverse-surface-dark-mc: rgb(222 227 229);
328
+ --md-sys-color-inverse-on-surface-dark-mc: rgb(37 43 44);
329
+ --md-sys-color-inverse-primary-dark-mc: rgb(0 80 89);
330
+ --md-sys-color-primary-fixed-dark-mc: rgb(158 239 254);
331
+ --md-sys-color-on-primary-fixed-dark-mc: rgb(0 20 23);
332
+ --md-sys-color-primary-fixed-dim-dark-mc: rgb(130 211 225);
333
+ --md-sys-color-on-primary-fixed-variant-dark-mc: rgb(0 60 68);
334
+ --md-sys-color-secondary-fixed-dark-mc: rgb(158 239 253);
335
+ --md-sys-color-on-secondary-fixed-dark-mc: rgb(0 20 23);
336
+ --md-sys-color-secondary-fixed-dim-dark-mc: rgb(129 211 224);
337
+ --md-sys-color-on-secondary-fixed-variant-dark-mc: rgb(0 61 68);
338
+ --md-sys-color-tertiary-fixed-dark-mc: rgb(218 226 255);
339
+ --md-sys-color-on-tertiary-fixed-dark-mc: rgb(4 16 44);
340
+ --md-sys-color-tertiary-fixed-dim-dark-mc: rgb(187 198 234);
341
+ --md-sys-color-on-tertiary-fixed-variant-dark-mc: rgb(42 53 83);
342
+ --md-sys-color-surface-dim-dark-mc: rgb(14 20 21);
343
+ --md-sys-color-surface-bright-dark-mc: rgb(63 70 71);
344
+ --md-sys-color-surface-container-lowest-dark-mc: rgb(4 8 9);
345
+ --md-sys-color-surface-container-low-dark-mc: rgb(25 31 32);
346
+ --md-sys-color-surface-container-dark-mc: rgb(35 41 42);
347
+ --md-sys-color-surface-container-high-dark-mc: rgb(45 52 53);
348
+ --md-sys-color-surface-container-highest-dark-mc: rgb(57 63 64);
349
+
350
+ /* Typeface */
351
+ --md-ref-typeface-brand: Roboto, system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, 'Noto Sans', sans-serif;
352
+
353
+ --md-ref-typeface-weight-regular: 400;
354
+ --md-ref-typeface-weight-medium: 500;
355
+ --md-ref-typeface-weight-bold: 700;
356
+
357
+ /* display - large */
358
+ --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
359
+ --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);
360
+ --md-sys-typescale-display-large-size: 3.5625rem; /* 57pt */
361
+ --md-sys-typescale-display-large-height: 4rem; /* 64pt */
362
+ --md-sys-typescale-display-large-tracking: -0.25px;
363
+ /* display - medium */
364
+ --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
365
+ --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);
366
+ --md-sys-typescale-display-medium-size: 2.8125rem; /* 45pt */
367
+ --md-sys-typescale-display-medium-height: 3.25rem; /* 52pt */
368
+ --md-sys-typescale-display-medium-tracking: 0px;
369
+ /* display - small */
370
+ --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
371
+ --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);
372
+ --md-sys-typescale-display-small-size: 2.25rem; /* 36pt */
373
+ --md-sys-typescale-display-small-height: 2.75rem; /* 44pt */
374
+ --md-sys-typescale-display-small-tracking: 0px;
375
+ /* headline - large */
376
+ --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
377
+ --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);
378
+ --md-sys-typescale-headline-large-size: 2rem; /* 32pt */
379
+ --md-sys-typescale-headline-large-height: 2.5rem; /* 40pt */
380
+ --md-sys-typescale-headline-large-tracking: 0px;
381
+ /* headline - medium */
382
+ --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
383
+ --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);
384
+ --md-sys-typescale-headline-medium-size: 1.75rem; /* 28pt */
385
+ --md-sys-typescale-headline-medium-height: 2.25rem; /* 36pt */
386
+ --md-sys-typescale-headline-medium-tracking: 0px;
387
+ /* headline - small */
388
+ --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
389
+ --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);
390
+ --md-sys-typescale-headline-small-size: 1.5rem; /* 24pt */
391
+ --md-sys-typescale-headline-small-height: 2rem; /* 32pt */
392
+ --md-sys-typescale-headline-small-tracking: 0px;
393
+ /* title - large */
394
+ --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
395
+ --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);
396
+ --md-sys-typescale-title-large-size: 1.375rem; /* 22pt */
397
+ --md-sys-typescale-title-large-height: 1.75rem; /* 28pt */
398
+ --md-sys-typescale-title-large-tracking: 0px;
399
+ /* title - medium */
400
+ --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);
401
+ --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);
402
+ --md-sys-typescale-title-medium-size: 1rem; /* 16pt */
403
+ --md-sys-typescale-title-medium-height: 1.5rem; /* 24pt */
404
+ --md-sys-typescale-title-medium-tracking: 0.15px;
405
+ /* title - small */
406
+ --md-sys-typescale-title-small-font: var(--md-ref-typeface-brand);
407
+ --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);
408
+ --md-sys-typescale-title-small-size: 0.875rem; /* 14pt */
409
+ --md-sys-typescale-title-small-height: 1.25rem; /* 20pt */
410
+ --md-sys-typescale-title-small-tracking: 0.1px;
411
+ /* body - large */
412
+ --md-sys-typescale-body-large-font: var(--md-ref-typeface-brand);
413
+ --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
414
+ --md-sys-typescale-body-large-size: 1rem; /* 16pt */
415
+ --md-sys-typescale-body-large-height: 1.5rem; /* 24pt */
416
+ --md-sys-typescale-body-large-tracking: 0.5px;
417
+ /* body - medium */
418
+ --md-sys-typescale-body-medium-font: var(--md-ref-typeface-brand);
419
+ --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
420
+ --md-sys-typescale-body-medium-size: 0.875rem; /* 14pt */
421
+ --md-sys-typescale-body-medium-height: 1.25rem; /* 20pt */
422
+ --md-sys-typescale-body-medium-tracking: 0.25px;
423
+ /* body - small */
424
+ --md-sys-typescale-body-small-font: var(--md-ref-typeface-brand);
425
+ --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
426
+ --md-sys-typescale-body-small-size: 0.75rem; /* 12pt */
427
+ --md-sys-typescale-body-small-height: 1rem; /* 16pt */
428
+ --md-sys-typescale-body-small-tracking: 0.4px;
429
+ /* label - large */
430
+ --md-sys-typescale-label-large-font: var(--md-ref-typeface-brand);
431
+ --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);
432
+ --md-sys-typescale-label-large-weight-prominent: var(--md-ref-typeface-weight-bold);
433
+ --md-sys-typescale-label-large-size: 0.875rem; /* 14pt */
434
+ --md-sys-typescale-label-large-height: 1.25rem; /* 20pt */
435
+ --md-sys-typescale-label-large-tracking: 0.1px;
436
+ /* label - medium */
437
+ --md-sys-typescale-label-medium-font: var(--md-ref-typeface-brand);
438
+ --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);
439
+ --md-sys-typescale-label-medium-weight-prominent: var(--md-ref-typeface-weight-bold);
440
+ --md-sys-typescale-label-medium-size: 0.75rem; /* 12pt */
441
+ --md-sys-typescale-label-medium-height: 1rem; /* 16pt */
442
+ --md-sys-typescale-label-medium-tracking: 0.5px;
443
+ /* label - small */
444
+ --md-sys-typescale-label-small-font: var(--md-ref-typeface-brand);
445
+ --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);
446
+ --md-sys-typescale-label-small-size: 0.6875rem; /* 11pt */
447
+ --md-sys-typescale-label-small-height: 1rem; /* 16pt */
448
+ --md-sys-typescale-label-small-tracking: 0.5px;
449
+
450
+ /* CUSTOM!!! */
451
+
452
+ /* Elevation light */
453
+ --md-sys-elevation-1-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
454
+ --md-sys-elevation-2-light: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
455
+ --md-sys-elevation-3-light: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
456
+ --md-sys-elevation-4-light: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
457
+ --md-sys-elevation-5-light: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
458
+ /* Elevation dark */
459
+ --md-sys-elevation-1-dark: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
460
+ --md-sys-elevation-2-dark: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
461
+ --md-sys-elevation-3-dark: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
462
+ --md-sys-elevation-4-dark: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
463
+ --md-sys-elevation-5-dark: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
464
+ /* State layer */
465
+ --md-sys-state-hover-state-layer-opacity: 0.08;
466
+ --md-sys-state-focus-state-layer-opacity: 0.1;
467
+ --md-sys-state-pressed-state-layer-opacity: 0.1;
468
+ --md-sys-state-dragged-state-layer-opacity: 0.16;
469
+ /* Rounding */
470
+ --md-sys-shape-corner-none: 0;
471
+ --md-sys-shape-corner-extra-small: 4px;
472
+ --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
473
+ --md-sys-shape-corner-small: 8px;
474
+ --md-sys-shape-corner-small-top: 8px 8px 0 0;
475
+ --md-sys-shape-corner-small-bottom: 0 0 8px 8px;
476
+ --md-sys-shape-corner-medium: 12px;
477
+ --md-sys-shape-corner-medium-top: 12px 12px 0 0;
478
+ --md-sys-shape-corner-large: 16px;
479
+ --md-sys-shape-corner-large-end: 0px 16px 16px 0px;
480
+ --md-sys-shape-corner-large-top: 16px 16px 0px 0px;
481
+ --md-sys-shape-corner-extra-large: 28px;
482
+ --md-sys-shape-corner-extra-large-top: 28px 28px 0 0;
483
+ --md-sys-shape-corner-full: 9999px;
484
+
485
+ --md-sys-animation-easing-standard: cubic-bezier(0.2, 0, 0, 1);
486
+ --md-sys-animation-easing-acceleration: cubic-bezier(0.4, 0, 1, 1);
487
+ --md-sys-animation-easing-deceleration: cubic-bezier(0, 0, 0.2, 1);
488
+ --md-sys-animation-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
489
+
490
+ /* Motion */
491
+ --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
492
+ --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
493
+ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
494
+ --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
495
+ --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
496
+ --md-sys-motion-duration-short1: 50ms;
497
+ --md-sys-motion-duration-short2: 100ms;
498
+ --md-sys-motion-duration-short3: 150ms;
499
+ --md-sys-motion-duration-short4: 200ms;
500
+ --md-sys-motion-duration-medium1: 250ms;
501
+ --md-sys-motion-duration-medium2: 300ms;
502
+ --md-sys-motion-duration-medium3: 350ms;
503
+ --md-sys-motion-duration-medium4: 400ms;
504
+ --md-sys-motion-duration-long1: 450ms;
505
+ --md-sys-motion-duration-long2: 500ms;
506
+ --md-sys-motion-duration-long3: 550ms;
507
+ --md-sys-motion-duration-long4: 600ms;
508
+ --md-sys-motion-duration-extra-long1: 700ms;
509
+ --md-sys-motion-duration-extra-long2: 800ms;
510
+ --md-sys-motion-duration-extra-long3: 900ms;
511
+ --md-sys-motion-duration-extra-long4: 1000ms;
512
+ }