@inchurch/matcha-theme 20.0.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.
- package/README.md +303 -0
- package/abstracts/_colors.scss +405 -0
- package/abstracts/_elevation.scss +102 -0
- package/abstracts/_functions.scss +1213 -0
- package/abstracts/_media-breakpoint.scss +23 -0
- package/abstracts/_typography.scss +127 -0
- package/base/_reset.scss +438 -0
- package/components/matcha-accordion.scss +157 -0
- package/components/matcha-audio-player.scss +32 -0
- package/components/matcha-autocomplete.scss +134 -0
- package/components/matcha-avatar.scss +161 -0
- package/components/matcha-badge.scss +120 -0
- package/components/matcha-breadcrumb.scss +126 -0
- package/components/matcha-button-toggle.scss +363 -0
- package/components/matcha-buttons.scss +784 -0
- package/components/matcha-calendar.scss +154 -0
- package/components/matcha-cards.scss +205 -0
- package/components/matcha-chart-card.scss +60 -0
- package/components/matcha-checkbox.scss +554 -0
- package/components/matcha-chip.scss +212 -0
- package/components/matcha-color-pick.scss +35 -0
- package/components/matcha-command-palette.scss +89 -0
- package/components/matcha-crop.scss +172 -0
- package/components/matcha-date.scss +81 -0
- package/components/matcha-divider.scss +45 -0
- package/components/matcha-draggable.scss +24 -0
- package/components/matcha-drawer.scss +235 -0
- package/components/matcha-drop-list.scss +390 -0
- package/components/matcha-emoji.scss +69 -0
- package/components/matcha-empty-state.scss +118 -0
- package/components/matcha-flag.scss +62 -0
- package/components/matcha-footer.scss +187 -0
- package/components/matcha-form-field.scss +552 -0
- package/components/matcha-form-section.scss +101 -0
- package/components/matcha-header.scss +325 -0
- package/components/matcha-highlight.scss +296 -0
- package/components/matcha-hint-text.scss +66 -0
- package/components/matcha-horizontal-tree.scss +317 -0
- package/components/matcha-icon.scss +106 -0
- package/components/matcha-image.scss +62 -0
- package/components/matcha-list.scss +212 -0
- package/components/matcha-menu.scss +86 -0
- package/components/matcha-modal.scss +234 -0
- package/components/matcha-nav.scss +450 -0
- package/components/matcha-notification.scss +197 -0
- package/components/matcha-option.scss +95 -0
- package/components/matcha-page-builder.scss +4186 -0
- package/components/matcha-paginator.scss +235 -0
- package/components/matcha-panel.scss +167 -0
- package/components/matcha-profile-card.scss +50 -0
- package/components/matcha-progress-bar.scss +209 -0
- package/components/matcha-radio.scss +528 -0
- package/components/matcha-ripple.scss +7 -0
- package/components/matcha-scrollbar.scss +35 -0
- package/components/matcha-scrollbox-shadow.scss +123 -0
- package/components/matcha-section.scss +105 -0
- package/components/matcha-select.scss +661 -0
- package/components/matcha-skeleton.scss +138 -0
- package/components/matcha-slide-toggle.scss +590 -0
- package/components/matcha-slider.scss +188 -0
- package/components/matcha-snack-bar.scss +266 -0
- package/components/matcha-spin.scss +252 -0
- package/components/matcha-spinner.scss +78 -0
- package/components/matcha-stepper.scss +177 -0
- package/components/matcha-table-cell.scss +41 -0
- package/components/matcha-table.scss +785 -0
- package/components/matcha-tabs.scss +469 -0
- package/components/matcha-text-editor.scss +151 -0
- package/components/matcha-time.scss +33 -0
- package/components/matcha-timepicker.scss +13 -0
- package/components/matcha-toolbar.scss +206 -0
- package/components/matcha-tooltip.scss +128 -0
- package/components/matcha-uploader.scss +215 -0
- package/css/matcha-style.css +76772 -0
- package/fonts/CircularStd-Black.eot +0 -0
- package/fonts/CircularStd-Black.svg +3426 -0
- package/fonts/CircularStd-Black.ttf +0 -0
- package/fonts/CircularStd-Black.woff +0 -0
- package/fonts/CircularStd-Black.woff2 +0 -0
- package/fonts/CircularStd-Bold.eot +0 -0
- package/fonts/CircularStd-Bold.otf +0 -0
- package/fonts/CircularStd-Bold.svg +13532 -0
- package/fonts/CircularStd-Bold.ttf +0 -0
- package/fonts/CircularStd-Bold.woff +0 -0
- package/fonts/CircularStd-Bold.woff2 +0 -0
- package/fonts/CircularStd-Medium.eot +0 -0
- package/fonts/CircularStd-Medium.otf +0 -0
- package/fonts/CircularStd-Medium.svg +13511 -0
- package/fonts/CircularStd-Medium.ttf +0 -0
- package/fonts/CircularStd-Medium.woff +0 -0
- package/fonts/CircularStd-Medium.woff2 +0 -0
- package/fonts/CircularStd-Regular.eot +0 -0
- package/fonts/CircularStd-Regular.otf +0 -0
- package/fonts/CircularStd-Regular.svg +2378 -0
- package/fonts/CircularStd-Regular.ttf +0 -0
- package/fonts/CircularStd-Regular.woff +0 -0
- package/fonts/CircularStd-Regular.woff2 +0 -0
- package/main.scss +262 -0
- package/package.json +11 -0
- package/tokens/_animations-tokens.scss +37 -0
- package/tokens/_breakpoints-tokens.scss +26 -0
- package/tokens/_color-tokens.scss +1153 -0
- package/tokens/_css-custom-properties.scss +568 -0
- package/tokens/_elevation-tokens.scss +33 -0
- package/tokens/_spacing-tokens.scss +94 -0
- package/tokens/_typography-tokens.scss +65 -0
- package/vendors/angular-editor.scss +56 -0
- package/vendors/angular-material-fixes.scss +297 -0
- package/vendors/calendar.scss +2880 -0
- package/vendors/charts.scss +92 -0
- package/vendors/ng5-slider.scss +56 -0
- package/vendors/ngx-material-timepicker.scss +50 -0
package/README.md
ADDED
|
@@ -0,0 +1,303 @@
|
|
|
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
|
+
|
|
142
|
+
## Roadmap
|
|
143
|
+
|
|
144
|
+
**Alpha** components are in-development and may have many frequent breaking
|
|
145
|
+
changes.
|
|
146
|
+
|
|
147
|
+
**Beta** components are mostly polished and ready for use, but may still have
|
|
148
|
+
breaking changes.
|
|
149
|
+
|
|
150
|
+
**Stable** components are reviewed, documented, and API complete.
|
|
151
|
+
|
|
152
|
+
- ❌ Not started
|
|
153
|
+
- 🟡 In progress
|
|
154
|
+
- ✅ Complete
|
|
155
|
+
|
|
156
|
+
### `v1.0.0` (2023)
|
|
157
|
+
|
|
158
|
+
| Component | Alpha | Beta | Stable |
|
|
159
|
+
| ----------------------------- | :---: | :--: | :----: |
|
|
160
|
+
| Button | ✅ | ✅ | ✅ |
|
|
161
|
+
| FAB | ✅ | ✅ | ✅ |
|
|
162
|
+
| Icon button | ✅ | ✅ | ✅ |
|
|
163
|
+
| Card | ✅ | ✅ | ✅ |
|
|
164
|
+
| Checkbox | ✅ | ✅ | ✅ |
|
|
165
|
+
| Chips | ✅ | ✅ | ✅ |
|
|
166
|
+
| Dialog | ✅ | ✅ | ✅ |
|
|
167
|
+
| Divider | ✅ | ✅ | ✅ |
|
|
168
|
+
| Elevation | ✅ | ✅ | ✅ |
|
|
169
|
+
| Focus ring | ✅ | ✅ | ✅ |
|
|
170
|
+
| Field | ✅ | ✅ | ✅ |
|
|
171
|
+
| Icon | ✅ | ✅ | ✅ |
|
|
172
|
+
| List | ✅ | ✅ | ✅ |
|
|
173
|
+
| Menu | ✅ | ✅ | ✅ |
|
|
174
|
+
| Progress indicator (circular) | ✅ | ✅ | ✅ |
|
|
175
|
+
| Progress indicator (linear) | ✅ | ✅ | ✅ |
|
|
176
|
+
| Radio button | ✅ | ✅ | ✅ |
|
|
177
|
+
| Ripple | ✅ | ✅ | ✅ |
|
|
178
|
+
| Select | ✅ | ✅ | ✅ |
|
|
179
|
+
| Slider | ✅ | ✅ | ✅ |
|
|
180
|
+
| Switch | ✅ | ✅ | ✅ |
|
|
181
|
+
| Tabs | ✅ | ✅ | ✅ |
|
|
182
|
+
| Title | ✅ | ✅ | ✅ |
|
|
183
|
+
| Text field | ✅ | ✅ | ✅ |
|
|
184
|
+
|
|
185
|
+
### Future
|
|
186
|
+
|
|
187
|
+
These features are planned for a future release.
|
|
188
|
+
|
|
189
|
+
| Component | Alpha | Beta | Stable |
|
|
190
|
+
| ----------------- | :---: | :--: | :----: |
|
|
191
|
+
| Autocomplete | ✅ | ✅ | ✅ |
|
|
192
|
+
| Badge | ✅ | ✅ | ✅ |
|
|
193
|
+
| Banner | ✅ | ✅ | ✅ |
|
|
194
|
+
| Bottom app bar | ✅ | ✅ | ✅ |
|
|
195
|
+
| Bottom sheet | ✅ | ✅ | ✅ |
|
|
196
|
+
| Segmented button | ✅ | ✅ | ✅ |
|
|
197
|
+
| Card | ✅ | ✅ | ✅ |
|
|
198
|
+
| Data table | ✅ | ✅ | ✅ |
|
|
199
|
+
| Date picker | ✅ | ✅ | ✅ |
|
|
200
|
+
| Navigation bar | ✅ | ✅ | ✅ |
|
|
201
|
+
| Navigation drawer | ✅ | ✅ | ✅ |
|
|
202
|
+
| Navigation rail | ✅ | ✅ | ✅ |
|
|
203
|
+
| Search | ✅ | ✅ | ✅ |
|
|
204
|
+
| Snackbar | ✅ | ✅ | ✅ |
|
|
205
|
+
| Time picker | ✅ | ✅ | ✅ |
|
|
206
|
+
| Tooltip | ✅ | ✅ | ✅ |
|
|
207
|
+
| Top app bar | ✅ | ✅ | ✅ |
|
|
208
|
+
|
|
209
|
+
### Base CLASSES CSS
|
|
210
|
+
|
|
211
|
+
✅TYPOGRAPHY
|
|
212
|
+
✅SPACING
|
|
213
|
+
✅BORDER
|
|
214
|
+
✅COLORS
|
|
215
|
+
✅SIZES
|
|
216
|
+
|
|
217
|
+
### Atomic Components
|
|
218
|
+
|
|
219
|
+
FORM
|
|
220
|
+
✅autocomplete
|
|
221
|
+
✅checkbox
|
|
222
|
+
✅datepicker
|
|
223
|
+
✅form field
|
|
224
|
+
✅input
|
|
225
|
+
✅radio button
|
|
226
|
+
✅select
|
|
227
|
+
✅slider
|
|
228
|
+
✅slide toggle
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
NAVIGATION
|
|
233
|
+
✅menu
|
|
234
|
+
✅sidebar
|
|
235
|
+
✅toolbar
|
|
236
|
+
✅header
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
LAYOUT
|
|
241
|
+
✅badge
|
|
242
|
+
✅bottom sheet
|
|
243
|
+
✅card
|
|
244
|
+
✅divider
|
|
245
|
+
✅elevation
|
|
246
|
+
✅expansion panel
|
|
247
|
+
✅display grid
|
|
248
|
+
✅display flex
|
|
249
|
+
✅list
|
|
250
|
+
✅stepper
|
|
251
|
+
✅tabs
|
|
252
|
+
✅titles
|
|
253
|
+
✅tree
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
BUTTONS/INDICATORS
|
|
258
|
+
✅button
|
|
259
|
+
✅button toggle
|
|
260
|
+
✅chips
|
|
261
|
+
✅icon
|
|
262
|
+
✅progress spinner
|
|
263
|
+
✅progress bar
|
|
264
|
+
✅ripple
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
POPUP/MODALS
|
|
269
|
+
✅dialog
|
|
270
|
+
✅snackbar
|
|
271
|
+
✅tooltip
|
|
272
|
+
|
|
273
|
+
---
|
|
274
|
+
|
|
275
|
+
DATATABLE
|
|
276
|
+
✅paginator
|
|
277
|
+
✅sort header
|
|
278
|
+
✅table
|
|
279
|
+
|
|
280
|
+
---
|
|
281
|
+
|
|
282
|
+
At moment we have 6 bases and 42 atoms to make documentation
|
|
283
|
+
1 component equals to 2,083% do progresso
|
|
284
|
+
|
|
285
|
+
---
|
|
286
|
+
|
|
287
|
+
### Molecular Components
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
Autocomplete de membros
|
|
292
|
+
|
|
293
|
+
### Organisms Components
|
|
294
|
+
|
|
295
|
+
---
|
|
296
|
+
|
|
297
|
+
Header de buscas
|
|
298
|
+
|
|
299
|
+
### Pages Components
|
|
300
|
+
|
|
301
|
+
---
|
|
302
|
+
|
|
303
|
+
List page
|
|
@@ -0,0 +1,405 @@
|
|
|
1
|
+
// Saturation Levels
|
|
2
|
+
$saturationLevels: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
|
3
|
+
|
|
4
|
+
// Hues Palette Colors
|
|
5
|
+
$index: 0;
|
|
6
|
+
|
|
7
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
8
|
+
// @ Text color levels generator
|
|
9
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
10
|
+
@mixin _generate-text-color-levels($classes, $contrast) {
|
|
11
|
+
@if ($contrast =="dark") {
|
|
12
|
+
#{$classes} {
|
|
13
|
+
|
|
14
|
+
&.secondary-text,
|
|
15
|
+
.secondary-text {
|
|
16
|
+
color: rgba(0, 0, 0, 0.54) !important;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&.hint-text,
|
|
20
|
+
.hint-text,
|
|
21
|
+
&.disabled-text,
|
|
22
|
+
.disabled-text {
|
|
23
|
+
color: rgba(0, 0, 0, 0.38) !important;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&.divider,
|
|
27
|
+
.divider {
|
|
28
|
+
color: rgba(0, 0, 0, 0.12) !important;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@else {
|
|
34
|
+
#{$classes} {
|
|
35
|
+
|
|
36
|
+
&.secondary-text,
|
|
37
|
+
.secondary-text {
|
|
38
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&.hint-text,
|
|
42
|
+
.hint-text,
|
|
43
|
+
&.disabled-text,
|
|
44
|
+
.disabled-text {
|
|
45
|
+
color: rgba(255, 255, 255, 0.5) !important;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.divider,
|
|
49
|
+
.divider {
|
|
50
|
+
color: rgba(255, 255, 255, 0.12) !important;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
57
|
+
// @ Static color classes generator
|
|
58
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
59
|
+
@mixin _generate-static-color-classes($colorName, $color, $contrastColor, $saturation) {
|
|
60
|
+
$colorSelector: unquote(".#{$colorName}#{$saturation}");
|
|
61
|
+
|
|
62
|
+
#{$colorSelector} {
|
|
63
|
+
background-color: $color !important;
|
|
64
|
+
color: $contrastColor !important;
|
|
65
|
+
|
|
66
|
+
&[disabled] {
|
|
67
|
+
background-color: rgba($color, 0.12) !important;
|
|
68
|
+
color: rgba($contrastColor, 0.26) !important;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
#{$colorSelector}-bg {
|
|
73
|
+
background-color: $color !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
#{$colorSelector}-fg {
|
|
77
|
+
color: $color !important;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@if ($saturation =="-500") {
|
|
81
|
+
$colorSelectorDefault: unquote(".#{$colorName}");
|
|
82
|
+
|
|
83
|
+
#{$colorSelectorDefault}-bg {
|
|
84
|
+
background-color: $color !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
#{$colorSelectorDefault}-fg {
|
|
88
|
+
color: $color !important;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@mixin colors-classes-static($theme) {
|
|
94
|
+
$palettes: getAllPalettes($theme);
|
|
95
|
+
$light-contrasting-classes: (
|
|
96
|
+
);
|
|
97
|
+
$dark-contrasting-classes: (
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
@each $paletteName, $palette in $palettes {
|
|
101
|
+
// $contrasts: map-get($red, "contrast");
|
|
102
|
+
// $contrasts = all contrast colors of $red palette
|
|
103
|
+
$contrasts: map-get($palette, "contrast");
|
|
104
|
+
|
|
105
|
+
@each $saturation in $saturationLevels {
|
|
106
|
+
// $color: map-get($red, 500)
|
|
107
|
+
// $contrast: map-get($contrasts, 500); 500 contrast color of $red palette
|
|
108
|
+
$color: map-get($palette, $saturation);
|
|
109
|
+
$contrast: map-get($contrasts, $saturation);
|
|
110
|
+
|
|
111
|
+
@if ($color !=null and $contrast !=null) {
|
|
112
|
+
@include _generate-static-color-classes($paletteName, $color, $contrast, "-#{$saturation}");
|
|
113
|
+
|
|
114
|
+
// If the contrast color is dark
|
|
115
|
+
@if (rgba(black, 1)==rgba($contrast, 1)) {
|
|
116
|
+
$dark-contrasting-classes: append($dark-contrasting-classes,
|
|
117
|
+
unquote(".#{$paletteName}-#{$saturation}"),
|
|
118
|
+
"comma"
|
|
119
|
+
);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// if the contrast color is light
|
|
123
|
+
@else {
|
|
124
|
+
$light-contrasting-classes: append($light-contrasting-classes,
|
|
125
|
+
unquote(".#{$paletteName}-#{$saturation}"),
|
|
126
|
+
"comma"
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// Generate contrasting colors
|
|
134
|
+
@include _generate-text-color-levels($dark-contrasting-classes, "dark");
|
|
135
|
+
@include _generate-text-color-levels($light-contrasting-classes, "light");
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
139
|
+
// @ Dynamic color classes generator
|
|
140
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
141
|
+
@mixin colors-classes-dynamic($theme) {
|
|
142
|
+
$primary: map-get($theme, primary);
|
|
143
|
+
$accent: map-get($theme, accent);
|
|
144
|
+
$danger: map-get($theme, danger);
|
|
145
|
+
$success: map-get($theme, success);
|
|
146
|
+
$warn: map-get($theme, warn);
|
|
147
|
+
$info: map-get($theme, info);
|
|
148
|
+
$background: map-get($theme, background);
|
|
149
|
+
$foreground: map-get($theme, foreground);
|
|
150
|
+
|
|
151
|
+
$color-functions: (
|
|
152
|
+
red: getRed,
|
|
153
|
+
pink: getPink,
|
|
154
|
+
purple: getPurple,
|
|
155
|
+
deep-purple: getDeepPurple,
|
|
156
|
+
indigo: getIndigo,
|
|
157
|
+
blue: getBlue,
|
|
158
|
+
light-blue: getLightBlue,
|
|
159
|
+
cyan: getCyan,
|
|
160
|
+
teal: getTeal,
|
|
161
|
+
green: getGreen,
|
|
162
|
+
light-green: getLightGreen,
|
|
163
|
+
lime: getLime,
|
|
164
|
+
yellow: getYellow,
|
|
165
|
+
amber: getAmber,
|
|
166
|
+
orange: getOrange,
|
|
167
|
+
deep-orange: getDeepOrange,
|
|
168
|
+
brown: getBrown,
|
|
169
|
+
grey: getGrey,
|
|
170
|
+
blue-grey: getBlueGrey,
|
|
171
|
+
primary: getPrimary,
|
|
172
|
+
accent: getAccent,
|
|
173
|
+
danger: getDanger,
|
|
174
|
+
warn: getWarn,
|
|
175
|
+
success: getSuccess,
|
|
176
|
+
info: getInfo,
|
|
177
|
+
disabled: getDisabled,
|
|
178
|
+
);
|
|
179
|
+
|
|
180
|
+
@include colors-classes-static($theme);
|
|
181
|
+
|
|
182
|
+
.color-unset {
|
|
183
|
+
color: map-get($foreground, foreground);
|
|
184
|
+
|
|
185
|
+
.ripple {
|
|
186
|
+
background: map-get($foreground, foreground);
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
@each $colorName, $colorFn in $color-functions {
|
|
191
|
+
// When a DS token exists for this semantic color (accent, primary, danger, etc.),
|
|
192
|
+
// utility classes consume var(--matcha-color-*) so Figma changes propagate at runtime.
|
|
193
|
+
// Palette colors (red, blue, green, etc.) keep their static values.
|
|
194
|
+
$is-semantic: index((primary, accent, danger, warn, success, info, disabled), $colorName) != null;
|
|
195
|
+
|
|
196
|
+
.background-#{$colorName}-alpha {
|
|
197
|
+
@if $is-semantic {
|
|
198
|
+
background: var(--matcha-color-#{$colorName}-alpha, #{call(#{$colorFn}Alpha, $theme)});
|
|
199
|
+
} @else {
|
|
200
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.#{$colorName} .ripple {
|
|
205
|
+
background: call(#{$colorFn}Alpha, $theme)
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.background-#{$colorName} {
|
|
209
|
+
@if $is-semantic {
|
|
210
|
+
background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
|
|
211
|
+
} @else {
|
|
212
|
+
background: call(#{$colorFn}, $theme);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.border-color-#{$colorName} {
|
|
217
|
+
@if $is-semantic {
|
|
218
|
+
border-color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
|
|
219
|
+
} @else {
|
|
220
|
+
border-color: call(#{$colorFn}, $theme);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.color-#{$colorName} {
|
|
225
|
+
@if $is-semantic {
|
|
226
|
+
color: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)}) !important;
|
|
227
|
+
} @else {
|
|
228
|
+
color: call(#{$colorFn}, $theme) !important;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.fill-#{$colorName} {
|
|
233
|
+
@if $is-semantic {
|
|
234
|
+
fill: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
|
|
235
|
+
} @else {
|
|
236
|
+
fill: call(#{$colorFn}, $theme);
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.stroke-#{$colorName} {
|
|
241
|
+
@if $is-semantic {
|
|
242
|
+
stroke: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
|
|
243
|
+
} @else {
|
|
244
|
+
stroke: call(#{$colorFn}, $theme);
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.color-#{$colorName}-alpha {
|
|
249
|
+
color: call(#{$colorFn}Alpha, $theme) !important
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.#{$colorName}-alpha {
|
|
253
|
+
background: call(#{$colorFn}Alpha, $theme);
|
|
254
|
+
color: call(#{$colorFn}, $theme);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.#{$colorName} {
|
|
258
|
+
@if $is-semantic {
|
|
259
|
+
background: var(--matcha-color-#{$colorName}, #{call(#{$colorFn}, $theme)});
|
|
260
|
+
color: var(--matcha-color-#{$colorName}-contrast, #{call(#{$colorFn}Contrast, $theme)});
|
|
261
|
+
} @else {
|
|
262
|
+
background: call(#{$colorFn}, $theme);
|
|
263
|
+
color: call(#{$colorFn}Contrast, $theme);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.background-basic-alpha {
|
|
269
|
+
background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.basic .ripple {
|
|
273
|
+
background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.background-basic {
|
|
277
|
+
background: var(--matcha-color-surface, #{getSurface($theme)});
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.border-color-basic {
|
|
281
|
+
border-color: var(--matcha-color-fg, #{getForeground($theme)});
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.color-basic {
|
|
285
|
+
color: var(--matcha-color-fg, #{getForeground($theme)}) !important;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.fill-basic {
|
|
289
|
+
fill: var(--matcha-color-surface, #{getSurface($theme)});
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.stroke-basic {
|
|
293
|
+
stroke: var(--matcha-color-fg, #{getForeground($theme)});
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.color-basic-alpha {
|
|
297
|
+
color: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)}) !important;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.basic-alpha {
|
|
301
|
+
background: var(--matcha-color-fg-alpha, #{getForegroundAlpha($theme)});
|
|
302
|
+
color: var(--matcha-color-fg, #{getForeground($theme)});
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.basic {
|
|
306
|
+
background: var(--matcha-color-surface, #{getSurface($theme)});
|
|
307
|
+
color: var(--matcha-color-fg, #{getForeground($theme)});
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
// Semantic surface & foreground aliases (used throughout templates)
|
|
311
|
+
.background-fg { background: var(--matcha-color-fg, #{getForeground($theme)}); }
|
|
312
|
+
.background-bg { background: var(--matcha-color-surface-bg, #{getBackground($theme)}); }
|
|
313
|
+
.background-bg-alpha { background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)}); }
|
|
314
|
+
.background-surface { background: var(--matcha-color-surface, #{getSurface($theme)}); }
|
|
315
|
+
.background-surface-alpha { background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)}); }
|
|
316
|
+
.background-hint { background: var(--matcha-color-hint, #{getGrey($theme)}); }
|
|
317
|
+
.color-fg { color: var(--matcha-color-fg, #{getForeground($theme)}) !important; }
|
|
318
|
+
.color-hint { color: var(--matcha-color-hint, #{getGrey($theme)}) !important; }
|
|
319
|
+
.color-label { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}) !important; }
|
|
320
|
+
.color-placeholder { color: var(--matcha-color-text-placeholder, #{getBlueGrey($theme)}) !important; }
|
|
321
|
+
|
|
322
|
+
.color-unset {
|
|
323
|
+
color: unset;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.background-transparent {
|
|
327
|
+
background: transparent;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
$attributes: (
|
|
331
|
+
color,
|
|
332
|
+
border-color,
|
|
333
|
+
background,
|
|
334
|
+
fill,
|
|
335
|
+
stroke
|
|
336
|
+
);
|
|
337
|
+
|
|
338
|
+
@each $attribute in $attributes {
|
|
339
|
+
@if ($attribute !="color") {
|
|
340
|
+
.#{$attribute}-bg {
|
|
341
|
+
#{$attribute}: getBackground($theme) !important;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.#{$attribute}-bg-alpha {
|
|
345
|
+
#{$attribute}: getBackgroundAlpha($theme) !important;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.#{$attribute}-bg-inverse {
|
|
349
|
+
#{$attribute}: getBackgroundInverse($theme) !important;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.#{$attribute}-bg-alpha-inverse {
|
|
353
|
+
#{$attribute}: getBackgroundAlphaInverse($theme) !important;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.#{$attribute}-surface-inverse {
|
|
357
|
+
#{$attribute}: getSurfaceInverse($theme) !important;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.#{$attribute}-surface-alpha-inverse {
|
|
361
|
+
#{$attribute}: getSurfaceAlphaInverse($theme) !important;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.#{$attribute}-fg,
|
|
366
|
+
.#{$attribute}-base,
|
|
367
|
+
.#{$attribute}-text {
|
|
368
|
+
#{$attribute}: getForeground($theme) !important;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.#{$attribute}-fg-inverse,
|
|
372
|
+
.#{$attribute}-base-inverse,
|
|
373
|
+
.#{$attribute}-text-inverse {
|
|
374
|
+
#{$attribute}: getForegroundInverse($theme) !important;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.#{$attribute}-surface {
|
|
378
|
+
#{$attribute}: getSurface($theme) !important;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.#{$attribute}-surface-alpha {
|
|
382
|
+
#{$attribute}: getSurfaceAlpha($theme) !important;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.#{$attribute}-placeholder {
|
|
386
|
+
#{$attribute}: getGrey($theme) !important;
|
|
387
|
+
|
|
388
|
+
&-alpha {
|
|
389
|
+
background: rgba(getGrey($theme), 0.2) !important;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.#{$attribute}-label {
|
|
394
|
+
#{$attribute}: getBlueGrey($theme) !important;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.#{$attribute}-disabled {
|
|
398
|
+
#{$attribute}: getDisabled($theme) !important;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.#{$attribute}-disabled-icon {
|
|
402
|
+
#{$attribute}: getDisabledContrast($theme) !important;
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|