matcha-theme 1.0.21 → 1.0.22
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 +488 -0
- package/abstracts/_colors.scss +1 -1
- package/abstracts/_typography.scss +3 -0
- package/components/matcha-buttons.scss +16 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,488 @@
|
|
|
1
|
+
# MatchaComponents
|
|
2
|
+
|
|
3
|
+
#### Repository
|
|
4
|
+
[Link to the project](https://bitbucket.org/inradar/design-system/src/master/).
|
|
5
|
+
|
|
6
|
+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.0.0. | Node Version - lts/iron -> v20.12.2
|
|
7
|
+
|
|
8
|
+
## How to create a component
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Create a new module
|
|
12
|
+
To generate a new module run the command:
|
|
13
|
+
> Terminal: `ng g m test-component --project matcha-components`
|
|
14
|
+
|
|
15
|
+
### Create a new Component
|
|
16
|
+
To generate a component inside of your module run the command:
|
|
17
|
+
> Terminal: `ng g c test-component/my-test-component --project matcha-components`
|
|
18
|
+
|
|
19
|
+
### Update your new module file
|
|
20
|
+
|
|
21
|
+
Import the component file inside of created module.
|
|
22
|
+
|
|
23
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
|
|
24
|
+
``` TS
|
|
25
|
+
import { MyTestComponentComponent } from './test-component/my-test-component.component';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Declare the new component
|
|
29
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
|
|
30
|
+
``` TS
|
|
31
|
+
declarations: [MyTestComponentComponent],
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Export the new component
|
|
35
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
|
|
36
|
+
``` TS
|
|
37
|
+
exports: [MyTestComponentComponent],
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Update your new component file
|
|
41
|
+
We are working with modules and by default the angular-cli create components to working with standalone. Update your component decorator to look like this:
|
|
42
|
+
|
|
43
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/my-test-component.component.ts
|
|
44
|
+
``` TS
|
|
45
|
+
@Component({
|
|
46
|
+
selector: 'lib-my-test-component',
|
|
47
|
+
templateUrl: './my-test-component.component.html',
|
|
48
|
+
styleUrl: './my-test-component.component.scss'
|
|
49
|
+
})
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Update MatchaComponentsModule
|
|
53
|
+
Update the core module of library matcha-components.
|
|
54
|
+
Import the module of the component file inside of created module.
|
|
55
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
|
|
56
|
+
```TS
|
|
57
|
+
import { TestComponentModule } from './test-component/test-component.module';`
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Import the new module
|
|
61
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
|
|
62
|
+
```TS
|
|
63
|
+
imports: [TestComponentModule, ...`
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Export the new module
|
|
67
|
+
###### Path: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
|
|
68
|
+
```TS
|
|
69
|
+
exports: [TestComponentModule, ...`
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Update Public API File
|
|
73
|
+
Add the export for your new component
|
|
74
|
+
###### Path: design-system/projects/matcha-components/src/public-api.ts
|
|
75
|
+
```TS
|
|
76
|
+
export * from './lib/test-component/my-test-component/my-test-component.component';
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Add the export for your new module
|
|
80
|
+
###### Path: design-system/projects/matcha-components/src/public-api.ts
|
|
81
|
+
```TS
|
|
82
|
+
export * from './lib/test-component/test-component.module';
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## How to test a component before publish
|
|
86
|
+
|
|
87
|
+
### Update AppModule
|
|
88
|
+
Go to the main project folder src and find the app.modules.ts file.
|
|
89
|
+
|
|
90
|
+
Import the module file inside app.module.
|
|
91
|
+
###### Path: design-system/src/app/app.modules.ts
|
|
92
|
+
```TS
|
|
93
|
+
import { TestComponentModule } from '../../projects/matcha-components/src/public-api';
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Import the module
|
|
97
|
+
###### Path: design-system/src/app/app.modules.ts
|
|
98
|
+
```TS
|
|
99
|
+
imports: [TestComponentModule, ...
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Call the component tag somewhere in your test aplication
|
|
103
|
+
Add the component `tag` inside of template file
|
|
104
|
+
###### Path: design-system/src/app/dashboard/dashboard.component.html
|
|
105
|
+
``` HTML
|
|
106
|
+
<lib-my-test-component></lib-my-test-component>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Run the test project
|
|
110
|
+
Run the serve command
|
|
111
|
+
> Terminal: `ng s`
|
|
112
|
+
|
|
113
|
+
## How to publish
|
|
114
|
+
|
|
115
|
+
### Update Version
|
|
116
|
+
Inside of projects folder in find the package.json of matcha-components and update the version
|
|
117
|
+
###### Path: design-system/projects/matcha-components/package.json
|
|
118
|
+
```JSON
|
|
119
|
+
{
|
|
120
|
+
"name": "matcha-components",
|
|
121
|
+
"version": "x.x.xx",
|
|
122
|
+
"peerDependencies": {},
|
|
123
|
+
"dependencies": {},
|
|
124
|
+
"sideEffects": false
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Build the matcha-component project
|
|
129
|
+
The build artifacts will be stored in the `dist/` directory. Run the build command
|
|
130
|
+
> Terminal: `ng build matcha-components`
|
|
131
|
+
|
|
132
|
+
### Publicação do pacote
|
|
133
|
+
In the terminal change the directory to the bundle folder of matcha-components inside of dist folder. This is the folder that will be published in NPM.
|
|
134
|
+
> Terminal: `cd dist/matcha-components`
|
|
135
|
+
|
|
136
|
+
Now we can do the package publication command:
|
|
137
|
+
> Terminal: `npm publish`
|
|
138
|
+
|
|
139
|
+
## Test published component
|
|
140
|
+
|
|
141
|
+
In the terminal go back to the root of design-system
|
|
142
|
+
|
|
143
|
+
> Terminal: `cd ../..`
|
|
144
|
+
|
|
145
|
+
Now you must remove the previous installation of matcha-components to ensure the new installation.
|
|
146
|
+
> Terminal: `npm uninstall matcha-components`
|
|
147
|
+
|
|
148
|
+
Than install the new version of matcha-components
|
|
149
|
+
> Terminal: `npm i matcha-components`
|
|
150
|
+
|
|
151
|
+
Update the imports in app.modules to the matcha-component from node_modules.
|
|
152
|
+
|
|
153
|
+
###### Path: design-system/src/app/app.modules.ts
|
|
154
|
+
```TS
|
|
155
|
+
import { TestComponentModule } from 'matcha-components';
|
|
156
|
+
```
|
|
157
|
+
Run the serve command:
|
|
158
|
+
> Terminal: `ng s`
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
### Storybook
|
|
164
|
+
Run `ng run matcha-components:storybook` or `npm run storybook`to execute the storybook aplication and see the documentation of all components via [storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
|
|
165
|
+
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
### Scaffold
|
|
169
|
+
You can also use `ng g directive|pipe|service|class|guard|interface|enum|module --project matcha-components`, in case of nested components you can use `ng g c component-name/child-component --project matcha-component`.
|
|
170
|
+
|
|
171
|
+
> Note: Don't forget to add `--project matcha-components` or else it will be added to the default project in your `angular.json` file.
|
|
172
|
+
|
|
173
|
+
---
|
|
174
|
+
|
|
175
|
+
### Running example aplication
|
|
176
|
+
|
|
177
|
+
Run `ng s --project matcha-design-system` to execute an angular aplication that you can for exemple test your components or directives in pratice.
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
### Unit tests
|
|
182
|
+
|
|
183
|
+
Run `ng test matcha-components` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
184
|
+
|
|
185
|
+
# Matcha-Theme
|
|
186
|
+
|
|
187
|
+
### Theming Matcha Components
|
|
188
|
+
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.
|
|
189
|
+
|
|
190
|
+
Some like this `<body class=".theme-default-light">`.
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
```scss
|
|
194
|
+
// app.theme.scss
|
|
195
|
+
|
|
196
|
+
@use "../lib/main.scss" as matcha;
|
|
197
|
+
|
|
198
|
+
//MATCHA THEME - LIGHT
|
|
199
|
+
// palettes
|
|
200
|
+
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
|
|
201
|
+
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
|
|
202
|
+
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
|
|
203
|
+
// typography
|
|
204
|
+
$matcha-default-typography: matcha.matcha-typography-config(
|
|
205
|
+
$font-family: "Arial",
|
|
206
|
+
);
|
|
207
|
+
// theme
|
|
208
|
+
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
|
|
209
|
+
|
|
210
|
+
.theme-default-light {
|
|
211
|
+
@include matcha.matcha-components($matcha-default-theme);
|
|
212
|
+
@include matcha.matcha-typography($matcha-default-typography);
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Light and dark themes examples
|
|
217
|
+
You must create some code to do the class toggle from `.theme-default-light` to `.theme-default-dark` inside the `<body>` tag.
|
|
218
|
+
|
|
219
|
+
```scss
|
|
220
|
+
@use "../lib/main.scss" as matcha;
|
|
221
|
+
|
|
222
|
+
//MATCHA THEME - LIGHT
|
|
223
|
+
// palettes
|
|
224
|
+
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
|
|
225
|
+
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
|
|
226
|
+
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
|
|
227
|
+
// typography
|
|
228
|
+
$matcha-default-typography: matcha.matcha-typography-config(
|
|
229
|
+
$font-family: "Arial",
|
|
230
|
+
);
|
|
231
|
+
// theme
|
|
232
|
+
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
|
|
233
|
+
|
|
234
|
+
.theme-default-light {
|
|
235
|
+
@include matcha.matcha-components($matcha-default-theme);
|
|
236
|
+
@include matcha.matcha-typography($matcha-default-typography);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
// You can set how much themes you need...
|
|
240
|
+
|
|
241
|
+
//MATCHA THEME - DARK
|
|
242
|
+
// palette
|
|
243
|
+
$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
|
|
244
|
+
$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
|
|
245
|
+
$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
|
|
246
|
+
// typography
|
|
247
|
+
$matcha-default-typography: matcha.matcha-typography-config(
|
|
248
|
+
$font-family: "Arial",
|
|
249
|
+
);
|
|
250
|
+
// theme
|
|
251
|
+
$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
|
|
252
|
+
|
|
253
|
+
.theme-default-dark {
|
|
254
|
+
@include matcha.matcha-components($matcha-default-theme);
|
|
255
|
+
@include matcha.matcha-typography($matcha-default-typography);
|
|
256
|
+
}
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
### Theming both Angular Material and Matcha Components
|
|
261
|
+
|
|
262
|
+
```scss
|
|
263
|
+
@use "@angular/material" as mat;
|
|
264
|
+
@use "../lib/main.scss" as matcha;
|
|
265
|
+
@include mat.core();
|
|
266
|
+
|
|
267
|
+
//MATCHA THEME - LIGHT
|
|
268
|
+
// palettes
|
|
269
|
+
$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
|
|
270
|
+
$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
|
|
271
|
+
$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
|
|
272
|
+
// typography
|
|
273
|
+
$matcha-default-typography: matcha.matcha-typography-config(
|
|
274
|
+
$font-family: "Arial",
|
|
275
|
+
);
|
|
276
|
+
$mat-default-typography: mat.define-typography-config(
|
|
277
|
+
$font-family: "Arial",
|
|
278
|
+
);
|
|
279
|
+
// theme
|
|
280
|
+
$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
|
|
281
|
+
$mat-default-theme: mat.define-light-theme(
|
|
282
|
+
(
|
|
283
|
+
color: (
|
|
284
|
+
primary: $default-light-primary,
|
|
285
|
+
accent: $default-light-accent,
|
|
286
|
+
warn: $default-light-warn,
|
|
287
|
+
),
|
|
288
|
+
typography: $mat-default-typography,
|
|
289
|
+
)
|
|
290
|
+
);
|
|
291
|
+
|
|
292
|
+
.theme-default-light {
|
|
293
|
+
@include mat.all-component-themes($mat-default-theme);
|
|
294
|
+
@include matcha.matcha-components($matcha-default-theme);
|
|
295
|
+
@include matcha.matcha-typography($matcha-default-typography);
|
|
296
|
+
}
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
- Theming Matcha Components
|
|
300
|
+
|
|
301
|
+
```scss
|
|
302
|
+
@use "../lib/main.scss" as matcha;
|
|
303
|
+
|
|
304
|
+
//MATCHA THEME - DARK
|
|
305
|
+
// palette
|
|
306
|
+
$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
|
|
307
|
+
$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
|
|
308
|
+
$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
|
|
309
|
+
// typography
|
|
310
|
+
$matcha-default-typography: matcha.matcha-typography-config(
|
|
311
|
+
$font-family: "Arial",
|
|
312
|
+
);
|
|
313
|
+
// theme
|
|
314
|
+
$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
|
|
315
|
+
|
|
316
|
+
.theme-default-dark {
|
|
317
|
+
@include matcha.matcha-components($matcha-default-theme);
|
|
318
|
+
@include matcha.matcha-typography($matcha-default-typography);
|
|
319
|
+
}
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
## Further help
|
|
323
|
+
|
|
324
|
+
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.
|
|
325
|
+
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)
|
|
326
|
+
|
|
327
|
+
## Roadmap
|
|
328
|
+
|
|
329
|
+
**Alpha** components are in-development and may have many frequent breaking
|
|
330
|
+
changes.
|
|
331
|
+
|
|
332
|
+
**Beta** components are mostly polished and ready for use, but may still have
|
|
333
|
+
breaking changes.
|
|
334
|
+
|
|
335
|
+
**Stable** components are reviewed, documented, and API complete.
|
|
336
|
+
|
|
337
|
+
- ❌ Not started
|
|
338
|
+
- 🟡 In progress
|
|
339
|
+
- ✅ Complete
|
|
340
|
+
|
|
341
|
+
### `v1.0.0` (2023)
|
|
342
|
+
|
|
343
|
+
| Component | Alpha | Beta | Stable |
|
|
344
|
+
| ----------------------------- | :---: | :--: | :----: |
|
|
345
|
+
| Button | ✅ | ✅ | ✅ |
|
|
346
|
+
| FAB | ✅ | ✅ | ✅ |
|
|
347
|
+
| Icon button | ✅ | ✅ | ✅ |
|
|
348
|
+
| Card | ✅ | ✅ | ✅ |
|
|
349
|
+
| Checkbox | ✅ | ✅ | ✅ |
|
|
350
|
+
| Chips | ✅ | ✅ | ✅ |
|
|
351
|
+
| Dialog | ✅ | ✅ | ✅ |
|
|
352
|
+
| Divider | ✅ | ✅ | ✅ |
|
|
353
|
+
| Elevation | ✅ | ✅ | ✅ |
|
|
354
|
+
| Focus ring | ✅ | ✅ | ✅ |
|
|
355
|
+
| Field | ✅ | ✅ | ✅ |
|
|
356
|
+
| Icon | ✅ | ✅ | ✅ |
|
|
357
|
+
| List | ✅ | ✅ | ✅ |
|
|
358
|
+
| Menu | ✅ | ✅ | ✅ |
|
|
359
|
+
| Progress indicator (circular) | ✅ | ✅ | ✅ |
|
|
360
|
+
| Progress indicator (linear) | ✅ | ✅ | ✅ |
|
|
361
|
+
| Radio button | ✅ | ✅ | ✅ |
|
|
362
|
+
| Ripple | ✅ | ✅ | ✅ |
|
|
363
|
+
| Select | ✅ | ✅ | ✅ |
|
|
364
|
+
| Slider | ✅ | ✅ | ✅ |
|
|
365
|
+
| Switch | ✅ | ✅ | ✅ |
|
|
366
|
+
| Tabs | ✅ | ✅ | ✅ |
|
|
367
|
+
| Title | ✅ | ✅ | ✅ |
|
|
368
|
+
| Text field | ✅ | ✅ | ✅ |
|
|
369
|
+
|
|
370
|
+
### Future
|
|
371
|
+
|
|
372
|
+
These features are planned for a future release.
|
|
373
|
+
|
|
374
|
+
| Component | Alpha | Beta | Stable |
|
|
375
|
+
| ----------------- | :---: | :--: | :----: |
|
|
376
|
+
| Autocomplete | ✅ | ✅ | ✅ |
|
|
377
|
+
| Badge | ✅ | ✅ | ✅ |
|
|
378
|
+
| Banner | ✅ | ✅ | ✅ |
|
|
379
|
+
| Bottom app bar | ✅ | ✅ | ✅ |
|
|
380
|
+
| Bottom sheet | ✅ | ✅ | ✅ |
|
|
381
|
+
| Segmented button | ✅ | ✅ | ✅ |
|
|
382
|
+
| Card | ✅ | ✅ | ✅ |
|
|
383
|
+
| Data table | ✅ | ✅ | ✅ |
|
|
384
|
+
| Date picker | ✅ | ✅ | ✅ |
|
|
385
|
+
| Navigation bar | ✅ | ✅ | ✅ |
|
|
386
|
+
| Navigation drawer | ✅ | ✅ | ✅ |
|
|
387
|
+
| Navigation rail | ✅ | ✅ | ✅ |
|
|
388
|
+
| Search | ✅ | ✅ | ✅ |
|
|
389
|
+
| Snackbar | ✅ | ✅ | ✅ |
|
|
390
|
+
| Time picker | ✅ | ✅ | ✅ |
|
|
391
|
+
| Tooltip | ✅ | ✅ | ✅ |
|
|
392
|
+
| Top app bar | ✅ | ✅ | ✅ |
|
|
393
|
+
|
|
394
|
+
### Base CLASSES CSS
|
|
395
|
+
|
|
396
|
+
✅TYPOGRAPHY
|
|
397
|
+
✅SPACING
|
|
398
|
+
✅BORDER
|
|
399
|
+
✅COLORS
|
|
400
|
+
✅SIZES
|
|
401
|
+
|
|
402
|
+
### Atomic Components
|
|
403
|
+
|
|
404
|
+
FORM
|
|
405
|
+
✅autocomplete
|
|
406
|
+
✅checkbox
|
|
407
|
+
✅datepicker
|
|
408
|
+
✅form field
|
|
409
|
+
✅input
|
|
410
|
+
✅radio button
|
|
411
|
+
✅select
|
|
412
|
+
✅slider
|
|
413
|
+
✅slide toggle
|
|
414
|
+
|
|
415
|
+
---
|
|
416
|
+
|
|
417
|
+
NAVIGATION
|
|
418
|
+
✅menu
|
|
419
|
+
✅sidebar
|
|
420
|
+
✅toolbar
|
|
421
|
+
✅header
|
|
422
|
+
|
|
423
|
+
---
|
|
424
|
+
|
|
425
|
+
LAYOUT
|
|
426
|
+
✅badge
|
|
427
|
+
✅bottom sheet
|
|
428
|
+
✅card
|
|
429
|
+
✅divider
|
|
430
|
+
✅elevation
|
|
431
|
+
✅expansion panel
|
|
432
|
+
✅display grid
|
|
433
|
+
✅display flex
|
|
434
|
+
✅list
|
|
435
|
+
✅stepper
|
|
436
|
+
✅tabs
|
|
437
|
+
✅titles
|
|
438
|
+
✅tree
|
|
439
|
+
|
|
440
|
+
---
|
|
441
|
+
|
|
442
|
+
BUTTONS/INDICATORS
|
|
443
|
+
✅button
|
|
444
|
+
✅button toggle
|
|
445
|
+
✅chips
|
|
446
|
+
✅icon
|
|
447
|
+
✅progress spinner
|
|
448
|
+
✅progress bar
|
|
449
|
+
✅ripple
|
|
450
|
+
|
|
451
|
+
---
|
|
452
|
+
|
|
453
|
+
POPUP/MODALS
|
|
454
|
+
✅dialog
|
|
455
|
+
✅snackbar
|
|
456
|
+
✅tooltip
|
|
457
|
+
|
|
458
|
+
---
|
|
459
|
+
|
|
460
|
+
DATATABLE
|
|
461
|
+
✅paginator
|
|
462
|
+
✅sort header
|
|
463
|
+
✅table
|
|
464
|
+
|
|
465
|
+
---
|
|
466
|
+
|
|
467
|
+
At moment we have 6 bases and 42 atoms to make documentation
|
|
468
|
+
1 component equals to 2,083% do progresso
|
|
469
|
+
|
|
470
|
+
---
|
|
471
|
+
|
|
472
|
+
### Molecular Components
|
|
473
|
+
|
|
474
|
+
---
|
|
475
|
+
|
|
476
|
+
Autocomplete de membros
|
|
477
|
+
|
|
478
|
+
### Organisms Components
|
|
479
|
+
|
|
480
|
+
---
|
|
481
|
+
|
|
482
|
+
Header de buscas
|
|
483
|
+
|
|
484
|
+
### Pages Components
|
|
485
|
+
|
|
486
|
+
---
|
|
487
|
+
|
|
488
|
+
List page
|
package/abstracts/_colors.scss
CHANGED
|
@@ -338,7 +338,7 @@ $index: 0;
|
|
|
338
338
|
background: map-get($background, background);
|
|
339
339
|
color: map-get($foreground, text);
|
|
340
340
|
&-alpha {
|
|
341
|
-
background:
|
|
341
|
+
background: map-get($background, background-alpha) !important;
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
344
|
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
$foreground: map-get($theme, foreground);
|
|
7
7
|
|
|
8
8
|
.matcha-button {
|
|
9
|
+
border: 0px solid currentColor;
|
|
10
|
+
transition: all 50ms linear;
|
|
9
11
|
&-xs {
|
|
10
12
|
font-size: 14px;
|
|
11
13
|
padding: $spacing-inline-s;
|
|
@@ -55,7 +57,6 @@
|
|
|
55
57
|
min-width: 48px;
|
|
56
58
|
|
|
57
59
|
&.stroked {
|
|
58
|
-
border: 0px solid currentColor;
|
|
59
60
|
box-shadow: 0px 0px 0px 2px inset;
|
|
60
61
|
|
|
61
62
|
&.color-label {
|
|
@@ -74,6 +75,20 @@
|
|
|
74
75
|
}
|
|
75
76
|
}
|
|
76
77
|
}
|
|
78
|
+
&:hover{
|
|
79
|
+
filter: brightness(1.1);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&:active{
|
|
83
|
+
filter: brightness(0.9);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&-outline {
|
|
87
|
+
border: 0px solid currentColor;
|
|
88
|
+
box-shadow: 0px 0px 0px 2px inset;
|
|
89
|
+
background: transparent !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
77
92
|
|
|
78
93
|
&-pill {
|
|
79
94
|
border-radius: $border-radius-wider;
|