engie-fluid-material-theme 0.3.2 → 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 +6 -6
- package/dist/m3-theme.scss +151 -0
- package/package.json +3 -2
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;
|
|
@@ -75,21 +75,21 @@ Theme's code source is located in src folder.
|
|
|
75
75
|
|
|
76
76
|
1. Generate a dist folder with packaged css file.
|
|
77
77
|
```cmd
|
|
78
|
-
npm run build
|
|
78
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
2. Publish package on public NPM, don't forget to increment version in package.json:
|
|
82
82
|
```cmd
|
|
83
|
-
npm run publish
|
|
83
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run publish
|
|
84
84
|
```
|
|
85
85
|
|
|
86
86
|
3. Run linter
|
|
87
87
|
```cmd
|
|
88
|
-
npm run qa:scss
|
|
88
|
+
C:\Users\GAIA\source\repos\fluid-material-theme>npm run qa:scss
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
On
|
|
92
|
-
|
|
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
93
|
|
|
94
94
|
```cmd
|
|
95
95
|
C:\Users\GAIA\source\repos\fluid-material-theme>npm run build
|
|
@@ -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"
|