@inchurch/matcha-theme 20.277.0 → 21.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/abstracts/_colors.scss +86 -265
  2. package/abstracts/_elevation.scss +8 -8
  3. package/abstracts/_functions.scss +9 -911
  4. package/base/_reset.scss +40 -46
  5. package/components/matcha-button-toggle.scss +22 -46
  6. package/components/matcha-chip.scss +18 -23
  7. package/components/matcha-file-uploader.scss +21 -13
  8. package/components/matcha-page-builder.scss +13 -2
  9. package/components/matcha-progress-bar.scss +2 -2
  10. package/components/matcha-select-multiple.scss +2 -2
  11. package/components/matcha-slide-toggle.scss +1 -1
  12. package/components/matcha-slider.scss +1 -1
  13. package/components/matcha-spinner.scss +1 -1
  14. package/components/matcha-table.scss +2 -2
  15. package/components/matcha-tabs.scss +19 -42
  16. package/components/matcha-tree-view.scss +23 -0
  17. package/layout/matcha-page-layout.scss +6 -6
  18. package/main.scss +25 -23
  19. package/package.json +1 -1
  20. package/tokens/_color-tokens.scss +257 -1147
  21. package/tokens/_emit-tokens.scss +334 -0
  22. package/tokens/_material-palette.scss +1150 -0
  23. package/tokens/_primitives.scss +16 -0
  24. package/tokens/_static-tokens.scss +137 -0
  25. package/vendors/charts.scss +6 -9
  26. package/tokens/_css-custom-properties.scss +0 -704
  27. package/vendors/angular-editor.scss +0 -56
  28. package/vendors/angular-material-fixes.scss +0 -297
  29. package/vendors/calendar.scss +0 -2880
  30. package/vendors/ng5-slider.scss +0 -56
  31. package/vendors/ngx-material-timepicker.scss +0 -50
package/vendors/angular-editor.scss DELETED
@@ -1,56 +0,0 @@
1
- @mixin vendor-angular-editor($theme) {
2
- $is-dark-theme: map-get($theme, is-dark);
3
- $primary: map-get($theme, primary);
4
- $accent: map-get($theme, accent);
5
- $warn: map-get($theme, warn);
6
- $background: map-get($theme, background);
7
- $foreground: map-get($theme, foreground);
8
-
9
- .angular-editor {
10
- .angular-editor-toolbar {
11
- font: 100 0.8rem/15px Roboto, Arial, sans-serif !important;
12
- background-color: map-get($background, disabled) !important;
13
- padding: 8px !important;
14
- // height: 56px;
15
- border: 0px !important;
16
-
17
- .angular-editor-toolbar-set {
18
- .angular-editor-button {
19
- background-color: transparent !important;
20
- vertical-align: middle !important;
21
- border: 0 !important;
22
- padding: 8px !important;
23
- float: left !important;
24
- border-radius: 50px;
25
-
26
- &:hover {
27
- background: map-get($background, card-alpha) !important;
28
- }
29
-
30
- &.active {
31
- background: map-get($background, card) !important;
32
- }
33
-
34
- i {
35
- color: map-get($foreground, foreground);
36
- height: 24px !important;
37
- width: 24px !important;
38
- font-size: 16px !important;
39
- line-height: 24px !important;
40
- }
41
- }
42
- }
43
- }
44
-
45
- .angular-editor-textarea {
46
- min-height: 100px !important;
47
- height: 30vh !important;
48
- padding: 16px !important;
49
- border: 0px !important;
50
- background-color: transparent !important;
51
- overflow-x: hidden !important;
52
- overflow-y: auto !important;
53
- position: relative !important;
54
- }
55
- }
56
- }
package/vendors/angular-material-fixes.scss DELETED
@@ -1,297 +0,0 @@
1
- @mixin vendor-angular-material-fixes($theme) {
2
- $primary: map-get($theme, primary);
3
- $accent: map-get($theme, accent);
4
- $warn: map-get($theme, warn);
5
- $background: map-get($theme, background);
6
- $foreground: map-get($theme, foreground);
7
-
8
- // -------------------------------------------------------------------------------------------------------------------
9
- // @ ANGULAR MATERIAL - To attempt to fix some of the issues with the Angular Material components we have to override
10
- // -------------------------------------------------------------------------------------------------------------------
11
- --mdc-typography-button-letter-spacing: 0;
12
- .mat-mdc-unelevated-button,
13
- .mat-mdc-raised-button,
14
- .mat-mdc-fab,
15
- .mat-mdc-mini-fab {
16
- --mdc-filled-button-container-shape: 8px;
17
- &:not([disabled="true"]) {
18
- &.mat-primary {
19
- color: map-get($primary, "default-contrast");
20
- }
21
- &.mat-accent {
22
- color: map-get($accent, "default-contrast");
23
- }
24
- &.mat-warn {
25
- color: map-get($warn, "default-contrast");
26
- }
27
- }
28
- }
29
- .mat-mdc-outlined-button {
30
- --mdc-outlined-button-container-shape: 8px;
31
- --mdc-outlined-button-outline-color: currentColor;
32
- --mdc-outlined-button-outline-width: 0;
33
- box-shadow: 0px 0px 0px 2px currentColor inset;
34
- }
35
- .mat-mdc-raised-button {
36
- --mdc-protected-button-container-height: 36px;
37
- --mdc-protected-button-container-shape: 8px;
38
- --mdc-protected-button-container-elevation: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
39
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
40
- }
41
- .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
42
- .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
43
- .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
44
- --mdc-outlined-text-field-outline-width: 2px;
45
- }
46
- .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__leading,
47
- .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__notch,
48
- .mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline .mdc-notched-outline__trailing {
49
- --mdc-outlined-text-field-outline-width: 2px;
50
- }
51
- .mdc-notched-outline__trailing {
52
- border-left: none;
53
- border-right: 2px solid;
54
- }
55
- .mdc-notched-outline__leading {
56
- border-left: 2px solid;
57
- border-right: none;
58
- width: 12px;
59
- }
60
- .mdc-notched-outline__notch {
61
- border-left: 2px solid transparent;
62
- }
63
- .mdc-notched-outline__leading,
64
- .mdc-notched-outline__notch,
65
- .mdc-notched-outline__trailing {
66
- border-top: 2px solid;
67
- border-bottom: 2px solid;
68
- }
69
- .mdc-text-field--outlined {
70
- --mdc-outlined-text-field-container-shape: 8px;
71
- }
72
- .mat-mdc-text-field-wrapper.mdc-text-field--outlined
73
- .mdc-notched-outline--upgraded
74
- .mdc-floating-label--float-above {
75
- --mat-mdc-form-field-label-transform: translateY(-29.75px)
76
- scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
77
- }
78
-
79
- /* reduce the input height fom 56px to 48px */
80
- .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
81
- top: 22px;
82
- }
83
- .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
84
- padding-top: 12px;
85
- padding-bottom: 12px;
86
- }
87
- .mat-mdc-form-field-infix {
88
- min-height: 48px;
89
- }
90
-
91
- /* align icons inside of buttons */
92
- .mat-mdc-icon-button.mat-mdc-button-base {
93
- padding: 0;
94
- }
95
- .mat-mdc-icon-button.mat-mdc-button-base {
96
- display: flex;
97
- align-content: center;
98
- justify-content: center;
99
- flex-wrap: wrap;
100
- }
101
- .mat-stepper-vertical,
102
- .mat-stepper-horizontal {
103
- --mat-stepper-container-color: map-get($background, surface);
104
- }
105
- .mat-stepper-horizontal {
106
- &.bullet-stepper-header-labeled {
107
- .mat-horizontal-stepper-header-container {
108
- justify-content: end;
109
- margin-bottom: 0;
110
- margin-top: 0;
111
- margin-right: 0;
112
- padding-right: 24px;
113
- height: 0;
114
- }
115
- }
116
-
117
- &.bullet-stepper-header-labeled,
118
- &.bullet-stepper-header {
119
- position: relative;
120
-
121
- .mat-horizontal-stepper-header-container {
122
- .mat-stepper-horizontal-line {
123
- display: none;
124
- }
125
-
126
- .mat-step-header-ripple {
127
- display: none;
128
- }
129
-
130
- .mat-horizontal-stepper-header {
131
- height: initial;
132
- overflow: initial;
133
-
134
- &.mat-step-header {
135
- padding: 0;
136
- border-radius: 0;
137
- flex-direction: column;
138
- position: inherit;
139
- width: 40px;
140
-
141
- &.cdk-keyboard-focused,
142
- &.cdk-program-focused,
143
- &:hover {
144
- background-color: transparent;
145
- }
146
-
147
- .mat-step-icon {
148
- margin: -32px 0 0 8px;
149
- border-radius: 8px;
150
- height: 8px;
151
- width: 32px;
152
- flex-shrink: 0;
153
- position: absolute;
154
- }
155
- }
156
-
157
- .mat-step-label {
158
- position: absolute;
159
- display: none;
160
- right: 0;
161
- margin-top: -52px;
162
- margin-right: 24px;
163
- font-family: var(--matcha-font-family, 'Manrope', sans-serif);
164
- font-weight: var(--matcha-weight-bold, 700);
165
- color: map-get($foreground, label);
166
- }
167
-
168
- .mat-step-label.mat-step-label-active {
169
- display: none;
170
- }
171
-
172
- .mat-step-label.mat-step-label-active.mat-step-label-selected {
173
- display: flex;
174
- justify-content: flex-end;
175
- }
176
-
177
- .mat-step-icon-state-edit {
178
- margin: 0;
179
- }
180
-
181
- .mat-step-icon-state-edit.mat-step-icon {
182
- background-color: map-get($accent, default);
183
-
184
- .mat-icon {
185
- display: none;
186
- }
187
- }
188
-
189
- .mat-step-icon-state-number {
190
- // background-color: blue;
191
- }
192
-
193
- .mat-step-icon-state-number.mat-step-icon {
194
- background-color: map-get($background, disabled);
195
-
196
- .mat-step-icon-content {
197
- display: none;
198
- }
199
- }
200
-
201
- .mat-step-icon-state-number.mat-step-icon.mat-step-icon-selected {
202
- background-color: map-get($accent, default);
203
- order: 1;
204
- }
205
- }
206
- }
207
-
208
- .mat-horizontal-content-container {
209
- padding: 0;
210
-
211
- .mat-dialog-content {
212
- max-height: calc(100vh - 268px);
213
- }
214
- }
215
- }
216
-
217
- &.hide-stepper-header {
218
- .mat-horizontal-stepper-header-container {
219
- display: none !important;
220
- }
221
-
222
- .mat-horizontal-content-container {
223
- overflow: hidden;
224
- padding: 0;
225
- }
226
- }
227
-
228
- &.page-layout-stepper {
229
- .mat-horizontal-stepper-header-container {
230
- padding-right: 24px;
231
-
232
- .mat-horizontal-stepper-header {
233
- .mat-step-label {
234
- margin-top: -60px;
235
- margin-right: 24px;
236
- }
237
- }
238
- }
239
- }
240
- }
241
-
242
- // Fixer wrappers
243
- form {
244
- //Form Field
245
- .mat-form-field-appearance-outline,
246
- .mat-form-field-appearance-fill {
247
- .mat-form-field-subscript-wrapper {
248
- padding: 0;
249
- position: relative;
250
- box-sizing: border-box;
251
- width: 100%;
252
- overflow: hidden;
253
- }
254
-
255
- .mat-form-field-wrapper,
256
- .mat-form-field-hint-wrapper {
257
- margin: 0 0 -24px 0;
258
- padding-bottom: 16px;
259
- }
260
- }
261
-
262
- //Expansion Panel
263
- .mat-expansion-panel.mat-expansion-panel-folder-navigation {
264
- .mat-expansion-panel-header {
265
- }
266
-
267
- .mat-expansion-panel-content {
268
- .mat-expansion-panel-body {
269
- max-height: 256px;
270
- overflow-y: auto;
271
- padding: 0;
272
- }
273
- }
274
- }
275
- }
276
-
277
- @media screen and (min-width: 640px) {
278
- // .mat-stepper-horizontal {
279
- // &.bullet-stepper-header-labeled {
280
- // .mat-horizontal-stepper-header-container {
281
- // padding-right: 72px;
282
- // .mat-horizontal-stepper-header {
283
- // .mat-step-label {
284
- // margin-right: 72px;
285
- // }
286
- // }
287
- // }
288
- // }
289
- // }
290
- }
291
- @media screen and (min-width: 1024px) {
292
- }
293
- @media screen and (min-width: 1280px) {
294
- }
295
- @media screen and (min-width: 1536px) {
296
- }
297
- }