engie-fluid-material-theme 0.3.2 → 1.0.0-rc.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 +43 -7
- package/package.json +4 -4
- /package/{src → dist}/m3-theme.scss +0 -0
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ With default style and fluid-design-system declaration, your file should seems t
|
|
|
34
34
|
|
|
35
35
|
```scss
|
|
36
36
|
@use 'sass:map';
|
|
37
|
-
@use 'engie-fluid-material-theme/
|
|
37
|
+
@use 'engie-fluid-material-theme/dist/m3-theme';
|
|
38
38
|
@use '@angular/material' as mat;
|
|
39
39
|
|
|
40
40
|
@include mat.core;
|
|
@@ -68,28 +68,64 @@ body {
|
|
|
68
68
|
{ provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: {disabled: true} },
|
|
69
69
|
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'dynamic'}}
|
|
70
70
|
```
|
|
71
|
+
## Usage
|
|
71
72
|
|
|
72
|
-
|
|
73
|
+
This library is designed so that the default Material components have an appearance similar to Fluid components.
|
|
74
|
+
|
|
75
|
+
Here few samples:
|
|
76
|
+
|
|
77
|
+
Form field:
|
|
78
|
+
```html
|
|
79
|
+
<mat-form-field>
|
|
80
|
+
<mat-label>label</mat-label>
|
|
81
|
+
<input matInput/>
|
|
82
|
+
</mat-form-field>
|
|
83
|
+
```
|
|
84
|
+
Radio
|
|
85
|
+
```html
|
|
86
|
+
<mat-radio-button (change)="valueChange()" [checked]="true">Label</mat-radio-button>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Button
|
|
90
|
+
```html
|
|
91
|
+
<button mat-flat-button (click)="buttonClick()">Button</button>
|
|
92
|
+
<button mat-stroked-button (click)="buttonClick()">Button</button>
|
|
93
|
+
<button mat-button (click)="buttonClick()">Button</button>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
In cases where color variations are needed, it is necessary to add a CSS class.
|
|
97
|
+
|
|
98
|
+
Button
|
|
99
|
+
.seconday-button, .error-button
|
|
100
|
+
|
|
101
|
+
Chip
|
|
102
|
+
.teal, .orange, .blue, .lime, .yellow
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
Badge
|
|
106
|
+
.badge, .badge.information, .badge.discovery, .badge.success, .badge.warning, .badge.danger
|
|
107
|
+
|
|
108
|
+
# Library developper Guide
|
|
73
109
|
|
|
74
110
|
Theme's code source is located in src folder.
|
|
75
111
|
|
|
76
112
|
1. Generate a dist folder with packaged css file.
|
|
77
113
|
```cmd
|
|
78
|
-
npm run build
|
|
114
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
|
79
115
|
```
|
|
80
116
|
|
|
81
117
|
2. Publish package on public NPM, don't forget to increment version in package.json:
|
|
82
118
|
```cmd
|
|
83
|
-
npm run publish
|
|
119
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run publish
|
|
84
120
|
```
|
|
85
121
|
|
|
86
122
|
3. Run linter
|
|
87
123
|
```cmd
|
|
88
|
-
npm run qa:scss
|
|
124
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run qa:scss
|
|
89
125
|
```
|
|
90
126
|
|
|
91
|
-
On
|
|
92
|
-
|
|
127
|
+
On /test folder, you can find an Angular web app which allow to visualize effects of the theme.
|
|
128
|
+
In developement phase, you can edit the theme, regenerate the build and test it directly on the web app.
|
|
93
129
|
|
|
94
130
|
```cmd
|
|
95
131
|
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "engie-fluid-material-theme",
|
|
3
|
-
"version": "0.3
|
|
3
|
+
"version": "1.0.0-rc.3",
|
|
4
4
|
"description": "Angular Material theme for Fluid Design System",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"repository": {
|
|
@@ -15,13 +15,12 @@
|
|
|
15
15
|
"theme"
|
|
16
16
|
],
|
|
17
17
|
"scripts": {
|
|
18
|
-
"build": "sass src/index.scss dist/index.css --style=compressed --no-source-map",
|
|
18
|
+
"build": "sass src/index.scss dist/index.css --style=compressed --no-source-map && copyfiles -u 1 src/m3-theme.scss dist/",
|
|
19
19
|
"qa:scss": "stylelint --color \"src/**/*.scss\"",
|
|
20
20
|
"publish": "npm publish"
|
|
21
21
|
},
|
|
22
22
|
"files": [
|
|
23
|
-
"dist"
|
|
24
|
-
"src/m3-theme.scss"
|
|
23
|
+
"dist"
|
|
25
24
|
],
|
|
26
25
|
"author": "ENGIE GEMS IS SHT-GAS",
|
|
27
26
|
"contributors": [
|
|
@@ -40,6 +39,7 @@
|
|
|
40
39
|
"@engie-group/fluid-design-system": "^5.12.0"
|
|
41
40
|
},
|
|
42
41
|
"devDependencies": {
|
|
42
|
+
"copyfiles": "^2.4.1",
|
|
43
43
|
"sass": "^1.77.6",
|
|
44
44
|
"stylelint": "^16.6.1",
|
|
45
45
|
"stylelint-config-standard-scss": "^13.1.0"
|
|
File without changes
|