engie-fluid-material-theme 0.3.1 → 1.0.0-rc.1
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 +31 -2
- package/dist/m3-theme.scss +151 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ This library provides a Material Theme giving to an application an appearance si
|
|
|
6
6
|
|
|
7
7
|
## Pre requisite
|
|
8
8
|
|
|
9
|
-
Assuming that you have installed
|
|
9
|
+
Assuming that you have installed Material components (^18) and the Fluid Design System:
|
|
10
10
|
|
|
11
11
|
```cmd
|
|
12
12
|
@engie-group/fluid-design-system
|
|
@@ -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;
|
|
@@ -69,3 +69,32 @@ body {
|
|
|
69
69
|
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline', subscriptSizing: 'dynamic'}}
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
# Usage Guide
|
|
73
|
+
|
|
74
|
+
Theme's code source is located in src folder.
|
|
75
|
+
|
|
76
|
+
1. Generate a dist folder with packaged css file.
|
|
77
|
+
```cmd
|
|
78
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
2. Publish package on public NPM, don't forget to increment version in package.json:
|
|
82
|
+
```cmd
|
|
83
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run publish
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
3. Run linter
|
|
87
|
+
```cmd
|
|
88
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run qa:scss
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
On /test folder, you can find an Angular web app which allow to visualize effects of the theme.
|
|
92
|
+
In developement phase, you can edit the theme, regenerate the build and test it directly on the web app.
|
|
93
|
+
|
|
94
|
+
```cmd
|
|
95
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
```cmd
|
|
99
|
+
C:\Users\GAIA\source\repos\fluid-material-theme\test>npm start
|
|
100
|
+
```
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
// This file was generated by running 'ng generate @angular/material:m3-theme'.
|
|
2
|
+
// Proceed with caution if making changes to this file.
|
|
3
|
+
|
|
4
|
+
@use 'sass:map';
|
|
5
|
+
@use '@angular/material' as mat;
|
|
6
|
+
|
|
7
|
+
// Note: Color palettes are generated from primary: #007acd, secondary: #334551, tertiary: #60798B, neutral: #60798B
|
|
8
|
+
$_palettes: (
|
|
9
|
+
primary: (
|
|
10
|
+
0: #000000,
|
|
11
|
+
10: #001d36,
|
|
12
|
+
20: #003259,
|
|
13
|
+
25: var(--nj-core-color-blue-900),
|
|
14
|
+
30: var(--nj-core-color-blue-800),
|
|
15
|
+
35: var(--nj-core-color-blue-700),
|
|
16
|
+
40: var(--nj-core-color-blue-600),
|
|
17
|
+
50: var(--nj-core-color-blue-500),
|
|
18
|
+
60: var(--nj-core-color-blue-400),
|
|
19
|
+
70: var(--nj-core-color-blue-300),
|
|
20
|
+
80: var(--nj-core-color-blue-600),
|
|
21
|
+
90: var(--nj-core-color-blue-100),
|
|
22
|
+
95: var(--nj-core-color-blue-100),
|
|
23
|
+
98: var(--nj-core-color-blue-100),
|
|
24
|
+
99: var(--nj-core-color-blue-100),
|
|
25
|
+
100: var(--nj-core-color-grey-0),
|
|
26
|
+
),
|
|
27
|
+
secondary: (
|
|
28
|
+
0: var(--nj-core-color-grey-1000),
|
|
29
|
+
10: var(--nj-core-color-grey-900),
|
|
30
|
+
20: var(--nj-core-color-grey-800),
|
|
31
|
+
25: var(--nj-core-color-grey-700),
|
|
32
|
+
30: var(--nj-core-color-grey-600),
|
|
33
|
+
35: var(--nj-core-color-grey-500),
|
|
34
|
+
40: var(--nj-core-color-grey-200),
|
|
35
|
+
50: var(--nj-core-color-grey-100),
|
|
36
|
+
60: var(--nj-core-color-grey-300),
|
|
37
|
+
70: var(--nj-core-color-grey-200),
|
|
38
|
+
80: var(--nj-core-color-grey-100),
|
|
39
|
+
90: var(--nj-core-color-grey-100),
|
|
40
|
+
95: var(--nj-core-color-grey-100),
|
|
41
|
+
98: var(--nj-core-color-grey-100),
|
|
42
|
+
99: var(--nj-core-color-grey-100),
|
|
43
|
+
100: var(--nj-core-color-grey-1000),
|
|
44
|
+
),
|
|
45
|
+
tertiary: (
|
|
46
|
+
0: #000000,
|
|
47
|
+
10: #001e2e,
|
|
48
|
+
20: #00344c,
|
|
49
|
+
25: #00405c,
|
|
50
|
+
30: #004c6c,
|
|
51
|
+
35: #00587d,
|
|
52
|
+
40: #00658e,
|
|
53
|
+
50: #007fb1,
|
|
54
|
+
60: #2f9ad0,
|
|
55
|
+
70: #52b5ec,
|
|
56
|
+
80: #84cfff,
|
|
57
|
+
90: #c7e7ff,
|
|
58
|
+
95: #e4f3ff,
|
|
59
|
+
98: #f6faff,
|
|
60
|
+
99: #fbfcff,
|
|
61
|
+
100: var(--nj-core-color-grey-0),
|
|
62
|
+
),
|
|
63
|
+
neutral: (
|
|
64
|
+
0: #000000,
|
|
65
|
+
10: #001e2e,
|
|
66
|
+
20: #00344c,
|
|
67
|
+
25: #00405c,
|
|
68
|
+
30: #004c6c,
|
|
69
|
+
35: #00587d,
|
|
70
|
+
40: #00658e,
|
|
71
|
+
50: #007fb1,
|
|
72
|
+
60: #2f9ad0,
|
|
73
|
+
70: #52b5ec,
|
|
74
|
+
80: #84cfff,
|
|
75
|
+
90: var(--nj-core-color-grey-400),
|
|
76
|
+
95: #e4f3ff,
|
|
77
|
+
98: #f6faff,
|
|
78
|
+
99: #fbfcff,
|
|
79
|
+
100: var(--nj-core-color-grey-0),
|
|
80
|
+
),
|
|
81
|
+
neutral-variant: (
|
|
82
|
+
0: var(--nj-core-color-grey-900),
|
|
83
|
+
10: var(--nj-core-color-grey-800),
|
|
84
|
+
20: var(--nj-core-color-grey-700),
|
|
85
|
+
25: var(--nj-core-color-grey-600),
|
|
86
|
+
30: var(--nj-core-color-grey-600),
|
|
87
|
+
35: var(--nj-core-color-grey-500),
|
|
88
|
+
40: var(--nj-core-color-grey-500),
|
|
89
|
+
50: var(--nj-core-color-grey-400),
|
|
90
|
+
60: var(--nj-core-color-grey-300),
|
|
91
|
+
70: var(--nj-core-color-grey-200),
|
|
92
|
+
80: var(--nj-core-color-grey-600),
|
|
93
|
+
90: #dfe2eb,
|
|
94
|
+
95: #edf1fa,
|
|
95
|
+
98: #f8f9ff,
|
|
96
|
+
99: #fdfcff,
|
|
97
|
+
100: var(--nj-core-color-grey-0),
|
|
98
|
+
),
|
|
99
|
+
error: (
|
|
100
|
+
0: var(--nj-core-color-red-1000),
|
|
101
|
+
10: var(--nj-core-color-red-900),
|
|
102
|
+
20: var(--nj-core-color-red-800),
|
|
103
|
+
25: var(--nj-core-color-red-800),
|
|
104
|
+
30: var(--nj-core-color-red-700),
|
|
105
|
+
35: var(--nj-core-color-red-700),
|
|
106
|
+
40: var(--nj-core-color-red-600),
|
|
107
|
+
50: var(--nj-core-color-red-500),
|
|
108
|
+
60: var(--nj-core-color-red-400),
|
|
109
|
+
70: var(--nj-core-color-red-300),
|
|
110
|
+
80: var(--nj-core-color-red-200),
|
|
111
|
+
90: var(--nj-core-color-red-100),
|
|
112
|
+
95: var(--nj-core-color-red-100),
|
|
113
|
+
98: var(--nj-core-color-red-100),
|
|
114
|
+
99: var(--nj-core-color-red-100),
|
|
115
|
+
100: var(--nj-core-color-grey-0),
|
|
116
|
+
),
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
$_rest: (
|
|
120
|
+
secondary: map.get($_palettes, secondary),
|
|
121
|
+
neutral: map.get($_palettes, neutral),
|
|
122
|
+
neutral-variant: map.get($_palettes, neutral-variant),
|
|
123
|
+
error: map.get($_palettes, error),
|
|
124
|
+
);
|
|
125
|
+
$_primary: map.merge(map.get($_palettes, primary), $_rest);
|
|
126
|
+
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
|
|
127
|
+
$_error: map.merge(map.get($_palettes, error), $_rest);
|
|
128
|
+
|
|
129
|
+
$light-theme: mat.define-theme((
|
|
130
|
+
color: (
|
|
131
|
+
theme-type: light,
|
|
132
|
+
primary: $_primary,
|
|
133
|
+
tertiary: $_tertiary,
|
|
134
|
+
),
|
|
135
|
+
typography: (
|
|
136
|
+
plain-family: var(--nj-semantic-font-family-default),
|
|
137
|
+
brand-family: var(--nj-semantic-font-family-default),
|
|
138
|
+
regular-weight: var(--nj-semantic-font-weight-base),
|
|
139
|
+
),
|
|
140
|
+
density: (
|
|
141
|
+
scale: -4,
|
|
142
|
+
)
|
|
143
|
+
));
|
|
144
|
+
|
|
145
|
+
$dark-theme: mat.define-theme((
|
|
146
|
+
color: (
|
|
147
|
+
theme-type: dark,
|
|
148
|
+
primary: $_primary,
|
|
149
|
+
tertiary: $_tertiary
|
|
150
|
+
)
|
|
151
|
+
));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "engie-fluid-material-theme",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.1",
|
|
4
4
|
"description": "Angular Material theme for Fluid Design System",
|
|
5
5
|
"main": "index.css",
|
|
6
6
|
"repository": {
|
|
@@ -15,7 +15,7 @@
|
|
|
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
|
},
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"@engie-group/fluid-design-system": "^5.12.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
+
"copyfiles": "^2.4.1",
|
|
43
44
|
"sass": "^1.77.6",
|
|
44
45
|
"stylelint": "^16.6.1",
|
|
45
46
|
"stylelint-config-standard-scss": "^13.1.0"
|