engie-fluid-material-theme 0.2.2 → 0.3.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.
- package/README.md +21 -8
- package/package.json +9 -5
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Installation guide
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This library provides a Material Theme giving to an application an appearance similar to ENGIE's Fluid Design System.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
:warning: This theme is not perfectly similar to Fluid Design System
|
|
6
6
|
|
|
7
7
|
## Pre requisite
|
|
8
8
|
|
|
@@ -14,13 +14,28 @@ Assuming that you have installed following packages:
|
|
|
14
14
|
```
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
-
1.
|
|
18
|
-
|
|
17
|
+
1. Install this package:
|
|
18
|
+
```cmd
|
|
19
|
+
npm install --save engie-fluid-material-theme
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
2. Reference theme file by adding it in styles array in angular.json.
|
|
23
|
+
|
|
24
|
+
With default style and fluid-design-system declaration, your file should seems to the following
|
|
25
|
+
```json
|
|
26
|
+
"styles": [
|
|
27
|
+
"src/styles.scss",
|
|
28
|
+
"node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css",
|
|
29
|
+
"node_modules/@engie-group/fluid-design-system/lib/fluid-design-system.css",
|
|
30
|
+
**"node_modules/engie-fluid-material-theme/dist/index.css"**
|
|
31
|
+
]
|
|
32
|
+
```
|
|
33
|
+
3. Load material theme in the main styles.scss file:
|
|
19
34
|
|
|
20
35
|
```scss
|
|
21
36
|
@use 'sass:map';
|
|
37
|
+
@use 'engie-fluid-material-theme/src/m3-theme';
|
|
22
38
|
@use '@angular/material' as mat;
|
|
23
|
-
@use 'styles/theme/m3-theme';
|
|
24
39
|
|
|
25
40
|
@include mat.core;
|
|
26
41
|
|
|
@@ -43,11 +58,9 @@ body {
|
|
|
43
58
|
@include mat.all-component-colors(m3-theme.$dark-theme);
|
|
44
59
|
}
|
|
45
60
|
}
|
|
46
|
-
|
|
47
|
-
@import './theme/index';
|
|
48
61
|
```
|
|
49
62
|
|
|
50
|
-
|
|
63
|
+
4. Configure default material components behavior by importing two providers on your app.config.
|
|
51
64
|
- Remove globaly the ripple effect
|
|
52
65
|
- 'Outline' appearance for all formfields
|
|
53
66
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "engie-fluid-material-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Angular Material theme for Fluid Design System",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"repository": {
|
|
@@ -15,7 +15,9 @@
|
|
|
15
15
|
"theme"
|
|
16
16
|
],
|
|
17
17
|
"scripts": {
|
|
18
|
-
"build
|
|
18
|
+
"build": "sass src/index.scss dist/index.css --style=compressed --no-source-map",
|
|
19
|
+
"qa:scss": "stylelint --color \"src/**/*.scss\"",
|
|
20
|
+
"publish": "npm publish"
|
|
19
21
|
},
|
|
20
22
|
"files": [
|
|
21
23
|
"dist",
|
|
@@ -23,11 +25,11 @@
|
|
|
23
25
|
],
|
|
24
26
|
"author": "ENGIE GEMS IS SHT-GAS",
|
|
25
27
|
"contributors": [
|
|
26
|
-
|
|
28
|
+
"Nicolas BUOT <KK1268@engie.com>"
|
|
27
29
|
],
|
|
28
30
|
"license": "EPL-2.0",
|
|
29
31
|
"publishConfig": {
|
|
30
|
-
|
|
32
|
+
"access": "public"
|
|
31
33
|
},
|
|
32
34
|
"bugs": {
|
|
33
35
|
"url": "https://github.tools.digital.engie.com/GEMFranceGalileo/fluid-material-theme/issues"
|
|
@@ -38,6 +40,8 @@
|
|
|
38
40
|
"@engie-group/fluid-design-system": "^5.12.0"
|
|
39
41
|
},
|
|
40
42
|
"devDependencies": {
|
|
41
|
-
"sass": "^1.77.6"
|
|
43
|
+
"sass": "^1.77.6",
|
|
44
|
+
"stylelint": "^16.6.1",
|
|
45
|
+
"stylelint-config-standard-scss": "^13.1.0"
|
|
42
46
|
}
|
|
43
47
|
}
|