matcha-theme 18.0.27 → 18.0.28

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 (67) hide show
  1. package/README.md +304 -0
  2. package/abstracts/_breakpoints.scss +33 -0
  3. package/abstracts/_colors.scss +833 -0
  4. package/abstracts/_elevation.scss +102 -0
  5. package/abstracts/_functions.scss +424 -0
  6. package/abstracts/_grid.scss +163 -0
  7. package/abstracts/_order.scss +46 -0
  8. package/abstracts/_position.scss +51 -0
  9. package/abstracts/_sizes.scss +95 -0
  10. package/abstracts/_spacings.scss +216 -0
  11. package/abstracts/_typography.scss +124 -0
  12. package/base/_helpers.scss +2181 -0
  13. package/base/_reset.scss +9 -0
  14. package/base/_typography.scss +244 -0
  15. package/components/matcha-audio-player.scss +37 -0
  16. package/components/matcha-buttons.scss +165 -0
  17. package/components/matcha-cards.scss +93 -0
  18. package/components/matcha-color-pick.scss +32 -0
  19. package/components/matcha-draggable.scss +25 -0
  20. package/components/matcha-header.scss +327 -0
  21. package/components/matcha-horizontal-tree.scss +277 -0
  22. package/components/matcha-menu.scss +71 -0
  23. package/components/matcha-progress-bar.scss +107 -0
  24. package/components/matcha-scrollbar.scss +36 -0
  25. package/components/matcha-scrollbox-shadow.scss +127 -0
  26. package/components/matcha-table.scss +279 -0
  27. package/css/matcha-style.css +76772 -0
  28. package/fonts/CircularStd-Black.eot +0 -0
  29. package/fonts/CircularStd-Black.svg +3426 -0
  30. package/fonts/CircularStd-Black.ttf +0 -0
  31. package/fonts/CircularStd-Black.woff +0 -0
  32. package/fonts/CircularStd-Black.woff2 +0 -0
  33. package/fonts/CircularStd-Bold.eot +0 -0
  34. package/fonts/CircularStd-Bold.otf +0 -0
  35. package/fonts/CircularStd-Bold.svg +13532 -0
  36. package/fonts/CircularStd-Bold.ttf +0 -0
  37. package/fonts/CircularStd-Bold.woff +0 -0
  38. package/fonts/CircularStd-Bold.woff2 +0 -0
  39. package/fonts/CircularStd-Medium.eot +0 -0
  40. package/fonts/CircularStd-Medium.otf +0 -0
  41. package/fonts/CircularStd-Medium.svg +13511 -0
  42. package/fonts/CircularStd-Medium.ttf +0 -0
  43. package/fonts/CircularStd-Medium.woff +0 -0
  44. package/fonts/CircularStd-Medium.woff2 +0 -0
  45. package/fonts/CircularStd-Regular.eot +0 -0
  46. package/fonts/CircularStd-Regular.otf +0 -0
  47. package/fonts/CircularStd-Regular.svg +2378 -0
  48. package/fonts/CircularStd-Regular.ttf +0 -0
  49. package/fonts/CircularStd-Regular.woff +0 -0
  50. package/fonts/CircularStd-Regular.woff2 +0 -0
  51. package/main.scss +135 -0
  52. package/package.json +2 -2
  53. package/tokens/_animations.scss +37 -0
  54. package/tokens/_breakpoints.scss +38 -0
  55. package/tokens/_color-tokens.scss +1216 -0
  56. package/tokens/_elevation-tokens.scss +14 -0
  57. package/tokens/_spacing-tokens.scss +96 -0
  58. package/tokens/_typography-tokens.scss +25 -0
  59. package/vendors/angular-editor.scss +56 -0
  60. package/vendors/angular-material-fixes.scss +261 -0
  61. package/vendors/calendar.scss +2880 -0
  62. package/vendors/charts.scss +92 -0
  63. package/vendors/ng5-slider.scss +56 -0
  64. package/vendors/ngx-material-timepicker.scss +50 -0
  65. package/core.scss +0 -1210
  66. package/matcha-core.css +0 -62385
  67. package/matcha-core.min.css +0 -1
package/README.md ADDED
@@ -0,0 +1,304 @@
1
+ # Matcha-Theme
2
+
3
+ ### Theming Matcha Components
4
+ Place the class (`.theme-default-light`) that you define in theme file, inside of `body` tag. This way you can cover the whole application with the theme.
5
+
6
+ Some like this `<body class="theme-default-light">`.
7
+
8
+
9
+ ```scss
10
+ // app.theme.scss
11
+
12
+ @use "../lib/main.scss" as matcha;
13
+
14
+ //MATCHA THEME - LIGHT
15
+ // palettes
16
+ $default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
17
+ $default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
18
+ $default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
19
+ // typography
20
+ $matcha-default-typography: matcha.matcha-typography-config(
21
+ $font-family: "Arial",
22
+ );
23
+ // theme
24
+ $matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
25
+
26
+ .theme-default-light {
27
+ @include matcha.matcha-components($matcha-default-theme);
28
+ @include matcha.matcha-typography($matcha-default-typography);
29
+ }
30
+ ```
31
+
32
+ ### Light and dark themes examples
33
+ You must create some code to do the class toggle from `.theme-default-light` to `.theme-default-dark` inside the `<body>` tag.
34
+
35
+ ```scss
36
+ @use "../lib/main.scss" as matcha;
37
+
38
+ //MATCHA THEME - LIGHT
39
+ // palettes
40
+ $default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
41
+ $default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
42
+ $default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
43
+ // typography
44
+ $matcha-default-typography: matcha.matcha-typography-config(
45
+ $font-family: "Arial",
46
+ );
47
+ // theme
48
+ $matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
49
+
50
+ .theme-default-light {
51
+ @include matcha.matcha-components($matcha-default-theme);
52
+ @include matcha.matcha-typography($matcha-default-typography);
53
+ }
54
+
55
+ // You can set how much themes you need...
56
+
57
+ //MATCHA THEME - DARK
58
+ // palette
59
+ $default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
60
+ $default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
61
+ $default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
62
+ // typography
63
+ $matcha-default-typography: matcha.matcha-typography-config(
64
+ $font-family: "Arial",
65
+ );
66
+ // theme
67
+ $matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
68
+
69
+ .theme-default-dark {
70
+ @include matcha.matcha-components($matcha-default-theme);
71
+ @include matcha.matcha-typography($matcha-default-typography);
72
+ }
73
+ ```
74
+
75
+
76
+ ### Theming both Angular Material and Matcha Components
77
+
78
+ ```scss
79
+ @use "@angular/material" as mat;
80
+ @use "../lib/main.scss" as matcha;
81
+ @include mat.core();
82
+
83
+ //MATCHA THEME - LIGHT
84
+ // palettes
85
+ $default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
86
+ $default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
87
+ $default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
88
+ // typography
89
+ $matcha-default-typography: matcha.matcha-typography-config(
90
+ $font-family: "Arial",
91
+ );
92
+ $mat-default-typography: mat.define-typography-config(
93
+ $font-family: "Arial",
94
+ );
95
+ // theme
96
+ $matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
97
+ $mat-default-theme: mat.define-light-theme(
98
+ (
99
+ color: (
100
+ primary: $default-light-primary,
101
+ accent: $default-light-accent,
102
+ warn: $default-light-warn,
103
+ ),
104
+ typography: $mat-default-typography,
105
+ )
106
+ );
107
+
108
+ .theme-default-light {
109
+ @include mat.all-component-themes($mat-default-theme);
110
+ @include matcha.matcha-components($matcha-default-theme);
111
+ @include matcha.matcha-typography($matcha-default-typography);
112
+ }
113
+ ```
114
+
115
+ - Theming Matcha Components
116
+
117
+ ```scss
118
+ @use "../lib/main.scss" as matcha;
119
+
120
+ //MATCHA THEME - DARK
121
+ // palette
122
+ $default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
123
+ $default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
124
+ $default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
125
+ // typography
126
+ $matcha-default-typography: matcha.matcha-typography-config(
127
+ $font-family: "Arial",
128
+ );
129
+ // theme
130
+ $matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
131
+
132
+ .theme-default-dark {
133
+ @include matcha.matcha-components($matcha-default-theme);
134
+ @include matcha.matcha-typography($matcha-default-typography);
135
+ }
136
+ ```
137
+
138
+ ## Further help
139
+
140
+ To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
141
+ To get more help on the Storybook [stories](https://github.com/geromegrignon/angular-material-storybook/blob/main/stories/components/progress-bar/progress-bar.stories.ts)
142
+
143
+ ## Roadmap
144
+
145
+ **Alpha** components are in-development and may have many frequent breaking
146
+ changes.
147
+
148
+ **Beta** components are mostly polished and ready for use, but may still have
149
+ breaking changes.
150
+
151
+ **Stable** components are reviewed, documented, and API complete.
152
+
153
+ - ❌ Not started
154
+ - 🟡 In progress
155
+ - ✅ Complete
156
+
157
+ ### `v1.0.0` (2023)
158
+
159
+ | Component | Alpha | Beta | Stable |
160
+ | ----------------------------- | :---: | :--: | :----: |
161
+ | Button | ✅ | ✅ | ✅ |
162
+ | FAB | ✅ | ✅ | ✅ |
163
+ | Icon button | ✅ | ✅ | ✅ |
164
+ | Card | ✅ | ✅ | ✅ |
165
+ | Checkbox | ✅ | ✅ | ✅ |
166
+ | Chips | ✅ | ✅ | ✅ |
167
+ | Dialog | ✅ | ✅ | ✅ |
168
+ | Divider | ✅ | ✅ | ✅ |
169
+ | Elevation | ✅ | ✅ | ✅ |
170
+ | Focus ring | ✅ | ✅ | ✅ |
171
+ | Field | ✅ | ✅ | ✅ |
172
+ | Icon | ✅ | ✅ | ✅ |
173
+ | List | ✅ | ✅ | ✅ |
174
+ | Menu | ✅ | ✅ | ✅ |
175
+ | Progress indicator (circular) | ✅ | ✅ | ✅ |
176
+ | Progress indicator (linear) | ✅ | ✅ | ✅ |
177
+ | Radio button | ✅ | ✅ | ✅ |
178
+ | Ripple | ✅ | ✅ | ✅ |
179
+ | Select | ✅ | ✅ | ✅ |
180
+ | Slider | ✅ | ✅ | ✅ |
181
+ | Switch | ✅ | ✅ | ✅ |
182
+ | Tabs | ✅ | ✅ | ✅ |
183
+ | Title | ✅ | ✅ | ✅ |
184
+ | Text field | ✅ | ✅ | ✅ |
185
+
186
+ ### Future
187
+
188
+ These features are planned for a future release.
189
+
190
+ | Component | Alpha | Beta | Stable |
191
+ | ----------------- | :---: | :--: | :----: |
192
+ | Autocomplete | ✅ | ✅ | ✅ |
193
+ | Badge | ✅ | ✅ | ✅ |
194
+ | Banner | ✅ | ✅ | ✅ |
195
+ | Bottom app bar | ✅ | ✅ | ✅ |
196
+ | Bottom sheet | ✅ | ✅ | ✅ |
197
+ | Segmented button | ✅ | ✅ | ✅ |
198
+ | Card | ✅ | ✅ | ✅ |
199
+ | Data table | ✅ | ✅ | ✅ |
200
+ | Date picker | ✅ | ✅ | ✅ |
201
+ | Navigation bar | ✅ | ✅ | ✅ |
202
+ | Navigation drawer | ✅ | ✅ | ✅ |
203
+ | Navigation rail | ✅ | ✅ | ✅ |
204
+ | Search | ✅ | ✅ | ✅ |
205
+ | Snackbar | ✅ | ✅ | ✅ |
206
+ | Time picker | ✅ | ✅ | ✅ |
207
+ | Tooltip | ✅ | ✅ | ✅ |
208
+ | Top app bar | ✅ | ✅ | ✅ |
209
+
210
+ ### Base CLASSES CSS
211
+
212
+ ✅TYPOGRAPHY
213
+ ✅SPACING
214
+ ✅BORDER
215
+ ✅COLORS
216
+ ✅SIZES
217
+
218
+ ### Atomic Components
219
+
220
+ FORM
221
+ ✅autocomplete
222
+ ✅checkbox
223
+ ✅datepicker
224
+ ✅form field
225
+ ✅input
226
+ ✅radio button
227
+ ✅select
228
+ ✅slider
229
+ ✅slide toggle
230
+
231
+ ---
232
+
233
+ NAVIGATION
234
+ ✅menu
235
+ ✅sidebar
236
+ ✅toolbar
237
+ ✅header
238
+
239
+ ---
240
+
241
+ LAYOUT
242
+ ✅badge
243
+ ✅bottom sheet
244
+ ✅card
245
+ ✅divider
246
+ ✅elevation
247
+ ✅expansion panel
248
+ ✅display grid
249
+ ✅display flex
250
+ ✅list
251
+ ✅stepper
252
+ ✅tabs
253
+ ✅titles
254
+ ✅tree
255
+
256
+ ---
257
+
258
+ BUTTONS/INDICATORS
259
+ ✅button
260
+ ✅button toggle
261
+ ✅chips
262
+ ✅icon
263
+ ✅progress spinner
264
+ ✅progress bar
265
+ ✅ripple
266
+
267
+ ---
268
+
269
+ POPUP/MODALS
270
+ ✅dialog
271
+ ✅snackbar
272
+ ✅tooltip
273
+
274
+ ---
275
+
276
+ DATATABLE
277
+ ✅paginator
278
+ ✅sort header
279
+ ✅table
280
+
281
+ ---
282
+
283
+ At moment we have 6 bases and 42 atoms to make documentation
284
+ 1 component equals to 2,083% do progresso
285
+
286
+ ---
287
+
288
+ ### Molecular Components
289
+
290
+ ---
291
+
292
+ Autocomplete de membros
293
+
294
+ ### Organisms Components
295
+
296
+ ---
297
+
298
+ Header de buscas
299
+
300
+ ### Pages Components
301
+
302
+ ---
303
+
304
+ List page
package/abstracts/_breakpoints.scss ADDED
@@ -0,0 +1,33 @@
1
+ // -------------------------------------------------------------------------------------------------------------------
2
+ // @ Breakpoints generator
3
+ //
4
+ // Examples:
5
+ // @include media-breakpoint("xs") {
6
+ // Show styles in small devices ( Phones and Gadget, 0px and up < 600px )
7
+ // }
8
+ // @include media-breakpoint("gt-xs") {
9
+ // Show styles in medium devices (landscapes and tablets, 600px and up < 1024px )
10
+ // }
11
+ // @include media-breakpoint("gt-sm") {
12
+ // Show styles in large devices (tablets and small monitors, 1024px and up < 1440px)
13
+ // }
14
+ // @include media-breakpoint("gt-md") {
15
+ // Show styles in X-Large devices (big desktops, 1440px and up < 1920)
16
+ // }
17
+ // @include media-breakpoint("gt-lg") {
18
+ // Show styles in XX-Large devices (larger desktops, 1920px and up)
19
+ // }
20
+ // -------------------------------------------------------------------------------------------------------------------
21
+ @mixin media-breakpoint($breakpointName) {
22
+ $mediaQuery: map-get($breakpoints, $breakpointName);
23
+
24
+ @if ($mediaQuery ==null) {
25
+ @content;
26
+ }
27
+
28
+ @else {
29
+ @media #{$mediaQuery} {
30
+ @content;
31
+ }
32
+ }
33
+ }