@lightspeed/design-system-css 0.4.0 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +13 -0
- package/dist/index.css.map +1 -1
- package/package.json +6 -6
- package/src/vend.ui/styles/global/colour/_colour-functions.scss +16 -8
- package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +6 -5
- package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +12 -8
- package/dist/themes/index.d.ts +0 -2
- package/dist/themes/index.js +0 -10
- package/dist/themes/index.js.map +0 -1
- package/dist/themes/themeToScss.d.ts +0 -2
- package/dist/themes/themeToScss.js +0 -62
- package/dist/themes/themeToScss.js.map +0 -1
- package/dist/themes/types.d.ts +0 -54
- package/dist/themes/types.js +0 -17
- package/dist/themes/types.js.map +0 -1
- package/dist/themes/xseries/dark.d.ts +0 -68
- package/dist/themes/xseries/dark.js +0 -85
- package/dist/themes/xseries/dark.js.map +0 -1
- package/dist/themes/xseries/light.d.ts +0 -68
- package/dist/themes/xseries/light.js +0 -85
- package/dist/themes/xseries/light.js.map +0 -1
- package/src/themes/index.ts +0 -2
- package/src/themes/themeToScss.ts +0 -67
- package/src/themes/types.ts +0 -68
- package/src/themes/xseries/dark.ts +0 -90
- package/src/themes/xseries/light.ts +0 -89
- package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +0 -5
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +0 -53
- package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +0 -53
@@ -1,68 +0,0 @@
|
|
1
|
-
import { Theme } from '../types';
|
2
|
-
export declare const xSeriesDarkThemeByCategory: {
|
3
|
-
backgrounds: {
|
4
|
-
inert: {
|
5
|
-
background: string;
|
6
|
-
box: string;
|
7
|
-
backgroundInverse: string;
|
8
|
-
boxInverse: string;
|
9
|
-
success: string;
|
10
|
-
};
|
11
|
-
interactive: {
|
12
|
-
goLighter: string;
|
13
|
-
go: string;
|
14
|
-
goDarker: string;
|
15
|
-
goHighlight: string;
|
16
|
-
noLighter: string;
|
17
|
-
no: string;
|
18
|
-
noDarker: string;
|
19
|
-
supplementaryLighter: string;
|
20
|
-
supplementary: string;
|
21
|
-
supplementaryDarker: string;
|
22
|
-
};
|
23
|
-
};
|
24
|
-
foregrounds: {
|
25
|
-
inert: {
|
26
|
-
text: string;
|
27
|
-
textInverse: string;
|
28
|
-
textAction: string;
|
29
|
-
selectArrowsBg: string;
|
30
|
-
shadow: string;
|
31
|
-
overlay: string;
|
32
|
-
};
|
33
|
-
borders: {
|
34
|
-
framing: string;
|
35
|
-
keyline: string;
|
36
|
-
framingInverse: string;
|
37
|
-
keylineInverse: string;
|
38
|
-
};
|
39
|
-
};
|
40
|
-
discretionary: {
|
41
|
-
goldenSand: string;
|
42
|
-
tacao: string;
|
43
|
-
newYorkPink: string;
|
44
|
-
gothic: string;
|
45
|
-
lavenderPurple: string;
|
46
|
-
sinbad: string;
|
47
|
-
shuttleGray: string;
|
48
|
-
};
|
49
|
-
navigation: {
|
50
|
-
navTop: string;
|
51
|
-
navSideTabs: string;
|
52
|
-
navSideDrawer: string;
|
53
|
-
navIconUnselected: string;
|
54
|
-
navIconSelected: string;
|
55
|
-
};
|
56
|
-
deprecated: {
|
57
|
-
boxSupplementary: string;
|
58
|
-
textNav: string;
|
59
|
-
supplementaryText: string;
|
60
|
-
supplementaryHighlight: string;
|
61
|
-
doHighlight: string;
|
62
|
-
noHighlight: string;
|
63
|
-
doLighter: string;
|
64
|
-
do: string;
|
65
|
-
doDarker: string;
|
66
|
-
};
|
67
|
-
};
|
68
|
-
export declare const xSeriesDarkTheme: Theme;
|
@@ -1,85 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.xSeriesDarkTheme = exports.xSeriesDarkThemeByCategory = void 0;
|
4
|
-
const backgrounds = {
|
5
|
-
inert: {
|
6
|
-
background: '#141217',
|
7
|
-
box: '#1E1C21',
|
8
|
-
backgroundInverse: '#F4F2F5',
|
9
|
-
boxInverse: '#FFFFFF',
|
10
|
-
success: '#15BF20',
|
11
|
-
},
|
12
|
-
interactive: {
|
13
|
-
goLighter: '#6054FF',
|
14
|
-
go: '#477BFF',
|
15
|
-
goDarker: '#352ACF',
|
16
|
-
goHighlight: 'rgba(0, 23, 229, .1)',
|
17
|
-
noLighter: '#D4301D',
|
18
|
-
no: '#EB4F29',
|
19
|
-
noDarker: '#A12416',
|
20
|
-
supplementaryLighter: '#3C6996',
|
21
|
-
supplementary: '#5B83AC',
|
22
|
-
supplementaryDarker: '#284563',
|
23
|
-
},
|
24
|
-
};
|
25
|
-
const foregrounds = {
|
26
|
-
inert: {
|
27
|
-
text: '#E7E5E8',
|
28
|
-
textInverse: '#0B0B0B',
|
29
|
-
textAction: '#FFFFFF',
|
30
|
-
selectArrowsBg: '#E7E5E8',
|
31
|
-
shadow: 'rgba(0, 0, 0, 0.35)',
|
32
|
-
overlay: 'rgba(43, 54, 61, 0.65)',
|
33
|
-
},
|
34
|
-
borders: {
|
35
|
-
framing: '#27252A',
|
36
|
-
keyline: '#37353A',
|
37
|
-
framingInverse: '#E7E5E8',
|
38
|
-
keylineInverse: '#C9C7CA',
|
39
|
-
},
|
40
|
-
};
|
41
|
-
const discretionary = {
|
42
|
-
goldenSand: '#E6B03D',
|
43
|
-
tacao: '#ED6B44',
|
44
|
-
newYorkPink: '#DE3CEC',
|
45
|
-
gothic: '#A02FB6',
|
46
|
-
lavenderPurple: '#501897',
|
47
|
-
sinbad: '#6952F6',
|
48
|
-
shuttleGray: '#5D5D5D',
|
49
|
-
};
|
50
|
-
const navigation = {
|
51
|
-
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
52
|
-
navTop: '#0B0B0B',
|
53
|
-
navSideTabs: '#27252A',
|
54
|
-
navSideDrawer: '#1E1C21',
|
55
|
-
navIconUnselected: '#FFFFFF',
|
56
|
-
navIconSelected: '#E7E5E8',
|
57
|
-
};
|
58
|
-
const deprecated = {
|
59
|
-
boxSupplementary: '#27252A',
|
60
|
-
textNav: '#FFFFFF',
|
61
|
-
supplementaryText: '#5B83AC',
|
62
|
-
supplementaryHighlight: 'rgba(0, 61, 229, .1)',
|
63
|
-
doHighlight: 'rgba(0, 23, 229, .1)',
|
64
|
-
noHighlight: 'rgba(229, 0, 0,.1)',
|
65
|
-
doLighter: '#618EFF',
|
66
|
-
do: '#477BFF',
|
67
|
-
doDarker: '#406FE5',
|
68
|
-
};
|
69
|
-
exports.xSeriesDarkThemeByCategory = {
|
70
|
-
backgrounds,
|
71
|
-
foregrounds,
|
72
|
-
discretionary,
|
73
|
-
navigation,
|
74
|
-
deprecated,
|
75
|
-
};
|
76
|
-
exports.xSeriesDarkTheme = {
|
77
|
-
...backgrounds.inert,
|
78
|
-
...backgrounds.interactive,
|
79
|
-
...foregrounds.inert,
|
80
|
-
...foregrounds.borders,
|
81
|
-
...discretionary,
|
82
|
-
...navigation,
|
83
|
-
...deprecated,
|
84
|
-
};
|
85
|
-
//# sourceMappingURL=dark.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"dark.js","sourceRoot":"","sources":["../../../src/themes/xseries/dark.ts"],"names":[],"mappings":";;;AAEA,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE,SAAS;QACrB,GAAG,EAAE,SAAS;QACd,iBAAiB,EAAE,SAAS;QAC5B,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;KACnB;IACD,WAAW,EAAE;QACX,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,sBAAsB;QACnC,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,oBAAoB,EAAE,SAAS;QAC/B,aAAa,EAAE,SAAS;QACxB,mBAAmB,EAAE,SAAS;KAC/B;CACF,CAAA;AAED,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,SAAS;QACrB,cAAc,EAAE,SAAS;QAEzB,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,wBAAwB;KAClC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAA;AAED,MAAM,aAAa,GAAG;IACpB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,8HAA8H;IAC9H,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS;IACxB,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;CAC3B,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,sBAAsB,EAAE,sBAAsB;IAC9C,WAAW,EAAE,sBAAsB;IACnC,WAAW,EAAE,oBAAoB;IACjC,SAAS,EAAE,SAAS;IACpB,EAAE,EAAE,SAAS;IACb,QAAQ,EAAE,SAAS;CACpB,CAAA;AAEY,QAAA,0BAA0B,GAAG;IACxC,WAAW;IACX,WAAW;IACX,aAAa;IACb,UAAU;IACV,UAAU;CACX,CAAA;AAEY,QAAA,gBAAgB,GAAU;IACrC,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,WAAW;IAC1B,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,OAAO;IACtB,GAAG,aAAa;IAChB,GAAG,UAAU;IACb,GAAG,UAAU;CACd,CAAA"}
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import { Theme } from '../types';
|
2
|
-
export declare const xSeriesLightThemeByCategory: {
|
3
|
-
backgrounds: {
|
4
|
-
inert: {
|
5
|
-
background: string;
|
6
|
-
box: string;
|
7
|
-
backgroundInverse: string;
|
8
|
-
boxInverse: string;
|
9
|
-
success: string;
|
10
|
-
};
|
11
|
-
interactive: {
|
12
|
-
goLighter: string;
|
13
|
-
go: string;
|
14
|
-
goDarker: string;
|
15
|
-
goHighlight: string;
|
16
|
-
noLighter: string;
|
17
|
-
no: string;
|
18
|
-
noDarker: string;
|
19
|
-
supplementaryLighter: string;
|
20
|
-
supplementary: string;
|
21
|
-
supplementaryDarker: string;
|
22
|
-
};
|
23
|
-
};
|
24
|
-
foregrounds: {
|
25
|
-
inert: {
|
26
|
-
text: string;
|
27
|
-
textInverse: string;
|
28
|
-
textAction: string;
|
29
|
-
selectArrowsBg: string;
|
30
|
-
shadow: string;
|
31
|
-
overlay: string;
|
32
|
-
};
|
33
|
-
borders: {
|
34
|
-
framing: string;
|
35
|
-
keyline: string;
|
36
|
-
framingInverse: string;
|
37
|
-
keylineInverse: string;
|
38
|
-
};
|
39
|
-
};
|
40
|
-
discretionary: {
|
41
|
-
goldenSand: string;
|
42
|
-
tacao: string;
|
43
|
-
newYorkPink: string;
|
44
|
-
gothic: string;
|
45
|
-
lavenderPurple: string;
|
46
|
-
sinbad: string;
|
47
|
-
shuttleGray: string;
|
48
|
-
};
|
49
|
-
navigation: {
|
50
|
-
navTop: string;
|
51
|
-
navSideTabs: string;
|
52
|
-
navSideDrawer: string;
|
53
|
-
navIconUnselected: string;
|
54
|
-
navIconSelected: string;
|
55
|
-
};
|
56
|
-
deprecated: {
|
57
|
-
boxSupplementary: string;
|
58
|
-
textNav: string;
|
59
|
-
supplementaryText: string;
|
60
|
-
supplementaryHighlight: string;
|
61
|
-
doHighlight: string;
|
62
|
-
noHighlight: string;
|
63
|
-
doLighter: string;
|
64
|
-
do: string;
|
65
|
-
doDarker: string;
|
66
|
-
};
|
67
|
-
};
|
68
|
-
export declare const xSeriesLightTheme: Theme;
|
@@ -1,85 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.xSeriesLightTheme = exports.xSeriesLightThemeByCategory = void 0;
|
4
|
-
const backgrounds = {
|
5
|
-
inert: {
|
6
|
-
background: '#F4F2F5',
|
7
|
-
box: '#FFFFFF',
|
8
|
-
backgroundInverse: '#141217',
|
9
|
-
boxInverse: '#1E1C21',
|
10
|
-
success: '#0E7B1D',
|
11
|
-
},
|
12
|
-
interactive: {
|
13
|
-
goLighter: '#6054FF',
|
14
|
-
go: '#3F32F5',
|
15
|
-
goDarker: '#352ACF',
|
16
|
-
goHighlight: 'rgba(128, 140, 255, .1)',
|
17
|
-
noLighter: '#D4301D',
|
18
|
-
no: '#BB2A1A',
|
19
|
-
noDarker: '#A12416',
|
20
|
-
supplementaryLighter: '#3C6996',
|
21
|
-
supplementary: '#32577D',
|
22
|
-
supplementaryDarker: '#284563',
|
23
|
-
},
|
24
|
-
};
|
25
|
-
const foregrounds = {
|
26
|
-
inert: {
|
27
|
-
text: '#27252A',
|
28
|
-
textInverse: '#FFFFFF',
|
29
|
-
textAction: '#FFFFFF',
|
30
|
-
selectArrowsBg: '#27252A',
|
31
|
-
shadow: 'rgba(0, 0, 0, 0.35)',
|
32
|
-
overlay: 'rgba(0, 0, 0, 0.35)',
|
33
|
-
},
|
34
|
-
borders: {
|
35
|
-
framing: '#E7E5E8',
|
36
|
-
keyline: '#C9C7CA',
|
37
|
-
framingInverse: '#27252A',
|
38
|
-
keylineInverse: '#37353A',
|
39
|
-
},
|
40
|
-
};
|
41
|
-
const discretionary = {
|
42
|
-
goldenSand: '#E6B03D',
|
43
|
-
tacao: '#ED6B44',
|
44
|
-
newYorkPink: '#DE3CEC',
|
45
|
-
gothic: '#A02FB6',
|
46
|
-
lavenderPurple: '#501897',
|
47
|
-
sinbad: '#6952F6',
|
48
|
-
shuttleGray: '#5D5D5D',
|
49
|
-
};
|
50
|
-
const navigation = {
|
51
|
-
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
52
|
-
navTop: '#0B0B0B',
|
53
|
-
navSideTabs: '#E7E5E8',
|
54
|
-
navSideDrawer: '#FFFFFF',
|
55
|
-
navIconUnselected: '#27252A',
|
56
|
-
navIconSelected: '#3F32F5',
|
57
|
-
};
|
58
|
-
const deprecated = {
|
59
|
-
boxSupplementary: '#E7E5E8',
|
60
|
-
textNav: '#FFFFFF',
|
61
|
-
supplementaryText: '#32577D',
|
62
|
-
supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
|
63
|
-
doHighlight: 'rgba(128, 140, 255, .1)',
|
64
|
-
noHighlight: 'rgba(255, 128, 128, .1)',
|
65
|
-
doLighter: '#6054FF',
|
66
|
-
do: '#3F32F5',
|
67
|
-
doDarker: '#352ACF',
|
68
|
-
};
|
69
|
-
exports.xSeriesLightThemeByCategory = {
|
70
|
-
backgrounds,
|
71
|
-
foregrounds,
|
72
|
-
discretionary,
|
73
|
-
navigation,
|
74
|
-
deprecated,
|
75
|
-
};
|
76
|
-
exports.xSeriesLightTheme = {
|
77
|
-
...backgrounds.inert,
|
78
|
-
...backgrounds.interactive,
|
79
|
-
...foregrounds.inert,
|
80
|
-
...foregrounds.borders,
|
81
|
-
...discretionary,
|
82
|
-
...navigation,
|
83
|
-
...deprecated,
|
84
|
-
};
|
85
|
-
//# sourceMappingURL=light.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"light.js","sourceRoot":"","sources":["../../../src/themes/xseries/light.ts"],"names":[],"mappings":";;;AAEA,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE,SAAS;QACrB,GAAG,EAAE,SAAS;QACd,iBAAiB,EAAE,SAAS;QAC5B,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;KACnB;IACD,WAAW,EAAE;QACX,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,yBAAyB;QACtC,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,oBAAoB,EAAE,SAAS;QAC/B,aAAa,EAAE,SAAS;QACxB,mBAAmB,EAAE,SAAS;KAC/B;CACF,CAAA;AAED,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,SAAS;QACrB,cAAc,EAAE,SAAS;QACzB,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,qBAAqB;KAC/B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAA;AAED,MAAM,aAAa,GAAG;IACpB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,8HAA8H;IAC9H,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS;IACxB,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;CAC3B,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,sBAAsB,EAAE,yBAAyB;IACjD,WAAW,EAAE,yBAAyB;IACtC,WAAW,EAAE,yBAAyB;IACtC,SAAS,EAAE,SAAS;IACpB,EAAE,EAAE,SAAS;IACb,QAAQ,EAAE,SAAS;CACpB,CAAA;AAEY,QAAA,2BAA2B,GAAG;IACzC,WAAW;IACX,WAAW;IACX,aAAa;IACb,UAAU;IACV,UAAU;CACX,CAAA;AAEY,QAAA,iBAAiB,GAAU;IACtC,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,WAAW;IAC1B,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,OAAO;IACtB,GAAG,aAAa;IAChB,GAAG,UAAU;IACb,GAAG,UAAU;CACd,CAAA"}
|
package/src/themes/index.ts
DELETED
@@ -1,67 +0,0 @@
|
|
1
|
-
import fs from 'fs'
|
2
|
-
import { requiredRgbSwatches, ThemeConfig } from './types'
|
3
|
-
import { xSeriesLightTheme } from './xseries/light'
|
4
|
-
import { xSeriesDarkTheme } from './xseries/dark'
|
5
|
-
|
6
|
-
const THEME_DIR = './src/vend.ui/styles/global/colour/themes'
|
7
|
-
const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n'
|
8
|
-
const NO_LINT_START = '// stylelint-disable vend/use-colour-function'
|
9
|
-
const NO_LINT_END = '// stylelint-enable vend/use-colour-function'
|
10
|
-
|
11
|
-
const themes: ThemeConfig[] = [
|
12
|
-
{
|
13
|
-
theme: xSeriesLightTheme,
|
14
|
-
mapName: 'vd-xseries-theme-light',
|
15
|
-
filename: `${THEME_DIR}/xseries/_theme-light.scss`,
|
16
|
-
},
|
17
|
-
{
|
18
|
-
theme: xSeriesDarkTheme,
|
19
|
-
mapName: 'vd-xseries-theme-dark',
|
20
|
-
filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
|
21
|
-
},
|
22
|
-
]
|
23
|
-
|
24
|
-
const camelToKebab = (s: string) =>
|
25
|
-
s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
|
26
|
-
|
27
|
-
const getKebabKey = (key: string) => {
|
28
|
-
// supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
|
29
|
-
return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key)
|
30
|
-
}
|
31
|
-
|
32
|
-
const saveScssMapFile = (filename: string, content: any) => {
|
33
|
-
fs.writeFile(filename, content, err => {
|
34
|
-
if (err) {
|
35
|
-
// eslint-disable-next-line no-console
|
36
|
-
console.error(err)
|
37
|
-
process.exit(1)
|
38
|
-
}
|
39
|
-
})
|
40
|
-
}
|
41
|
-
|
42
|
-
// Converts theme to SCSS map
|
43
|
-
export const themeToScss = ({ theme, mapName, filename }: ThemeConfig) => {
|
44
|
-
const colours = Object.entries(theme).map(c => {
|
45
|
-
const kebabKey = getKebabKey(c[0])
|
46
|
-
return `\n ${kebabKey}:${c[1]}`
|
47
|
-
})
|
48
|
-
const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`
|
49
|
-
return saveScssMapFile(filename, scssMap)
|
50
|
-
}
|
51
|
-
|
52
|
-
// Generates SCSS lists of required / available theme keys
|
53
|
-
const requiredThemeKeysToScss = () => {
|
54
|
-
const baseKeys = Object.keys(xSeriesLightTheme).map(k => getKebabKey(k))
|
55
|
-
const rgbKeys = requiredRgbSwatches.map(k => getKebabKey(k))
|
56
|
-
const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`))
|
57
|
-
|
58
|
-
const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`
|
59
|
-
const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`
|
60
|
-
const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`
|
61
|
-
|
62
|
-
const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`
|
63
|
-
return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList)
|
64
|
-
}
|
65
|
-
|
66
|
-
themes.forEach(theme => themeToScss(theme))
|
67
|
-
requiredThemeKeysToScss()
|
package/src/themes/types.ts
DELETED
@@ -1,68 +0,0 @@
|
|
1
|
-
export interface ThemeConfig {
|
2
|
-
theme: Theme
|
3
|
-
mapName: string
|
4
|
-
filename: string
|
5
|
-
}
|
6
|
-
|
7
|
-
export interface Theme {
|
8
|
-
background: string
|
9
|
-
backgroundInverse: string
|
10
|
-
box: string
|
11
|
-
boxInverse: string
|
12
|
-
boxSupplementary: string
|
13
|
-
do: string
|
14
|
-
doDarker: string
|
15
|
-
doHighlight: string
|
16
|
-
doLighter: string
|
17
|
-
framing: string
|
18
|
-
framingInverse: string
|
19
|
-
go: string
|
20
|
-
goDarker: string
|
21
|
-
goHighlight: string
|
22
|
-
goLighter: string
|
23
|
-
goldenSand: string
|
24
|
-
gothic: string
|
25
|
-
keyline: string
|
26
|
-
keylineInverse: string
|
27
|
-
lavenderPurple: string
|
28
|
-
navIconSelected: string
|
29
|
-
navIconUnselected: string
|
30
|
-
navSideDrawer: string
|
31
|
-
navSideTabs: string
|
32
|
-
navTop: string
|
33
|
-
newYorkPink: string
|
34
|
-
no: string
|
35
|
-
noDarker: string
|
36
|
-
noHighlight: string
|
37
|
-
noLighter: string
|
38
|
-
overlay: string
|
39
|
-
selectArrowsBg: string
|
40
|
-
shadow: string
|
41
|
-
shuttleGray: string
|
42
|
-
sinbad: string
|
43
|
-
success: string
|
44
|
-
supplementary: string
|
45
|
-
supplementaryDarker: string
|
46
|
-
supplementaryHighlight: string
|
47
|
-
supplementaryLighter: string
|
48
|
-
supplementaryText: string
|
49
|
-
tacao: string
|
50
|
-
text: string
|
51
|
-
textAction: string
|
52
|
-
textInverse: string
|
53
|
-
textNav: string
|
54
|
-
}
|
55
|
-
|
56
|
-
// Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
|
57
|
-
export const requiredRgbSwatches = [
|
58
|
-
'background',
|
59
|
-
'box',
|
60
|
-
'boxInverse',
|
61
|
-
'do',
|
62
|
-
'go',
|
63
|
-
'navSideDrawer',
|
64
|
-
'navSideTabs',
|
65
|
-
'navTop',
|
66
|
-
'no',
|
67
|
-
'supplementary',
|
68
|
-
]
|
@@ -1,90 +0,0 @@
|
|
1
|
-
import { Theme } from '../types'
|
2
|
-
|
3
|
-
const backgrounds = {
|
4
|
-
inert: {
|
5
|
-
background: '#141217',
|
6
|
-
box: '#1E1C21',
|
7
|
-
backgroundInverse: '#F4F2F5',
|
8
|
-
boxInverse: '#FFFFFF',
|
9
|
-
success: '#15BF20',
|
10
|
-
},
|
11
|
-
interactive: {
|
12
|
-
goLighter: '#6054FF',
|
13
|
-
go: '#477BFF',
|
14
|
-
goDarker: '#352ACF',
|
15
|
-
goHighlight: 'rgba(0, 23, 229, .1)',
|
16
|
-
noLighter: '#D4301D',
|
17
|
-
no: '#EB4F29',
|
18
|
-
noDarker: '#A12416',
|
19
|
-
supplementaryLighter: '#3C6996',
|
20
|
-
supplementary: '#5B83AC',
|
21
|
-
supplementaryDarker: '#284563',
|
22
|
-
},
|
23
|
-
}
|
24
|
-
|
25
|
-
const foregrounds = {
|
26
|
-
inert: {
|
27
|
-
text: '#E7E5E8',
|
28
|
-
textInverse: '#0B0B0B',
|
29
|
-
textAction: '#FFFFFF',
|
30
|
-
selectArrowsBg: '#E7E5E8',
|
31
|
-
|
32
|
-
shadow: 'rgba(0, 0, 0, 0.35)',
|
33
|
-
overlay: 'rgba(43, 54, 61, 0.65)',
|
34
|
-
},
|
35
|
-
borders: {
|
36
|
-
framing: '#27252A',
|
37
|
-
keyline: '#37353A',
|
38
|
-
framingInverse: '#E7E5E8',
|
39
|
-
keylineInverse: '#C9C7CA',
|
40
|
-
},
|
41
|
-
}
|
42
|
-
|
43
|
-
const discretionary = {
|
44
|
-
goldenSand: '#E6B03D',
|
45
|
-
tacao: '#ED6B44',
|
46
|
-
newYorkPink: '#DE3CEC',
|
47
|
-
gothic: '#A02FB6',
|
48
|
-
lavenderPurple: '#501897',
|
49
|
-
sinbad: '#6952F6',
|
50
|
-
shuttleGray: '#5D5D5D',
|
51
|
-
}
|
52
|
-
|
53
|
-
const navigation = {
|
54
|
-
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
55
|
-
navTop: '#0B0B0B',
|
56
|
-
navSideTabs: '#27252A',
|
57
|
-
navSideDrawer: '#1E1C21',
|
58
|
-
navIconUnselected: '#FFFFFF',
|
59
|
-
navIconSelected: '#E7E5E8',
|
60
|
-
}
|
61
|
-
|
62
|
-
const deprecated = {
|
63
|
-
boxSupplementary: '#27252A',
|
64
|
-
textNav: '#FFFFFF',
|
65
|
-
supplementaryText: '#5B83AC',
|
66
|
-
supplementaryHighlight: 'rgba(0, 61, 229, .1)',
|
67
|
-
doHighlight: 'rgba(0, 23, 229, .1)',
|
68
|
-
noHighlight: 'rgba(229, 0, 0,.1)',
|
69
|
-
doLighter: '#618EFF',
|
70
|
-
do: '#477BFF',
|
71
|
-
doDarker: '#406FE5',
|
72
|
-
}
|
73
|
-
|
74
|
-
export const xSeriesDarkThemeByCategory = {
|
75
|
-
backgrounds,
|
76
|
-
foregrounds,
|
77
|
-
discretionary,
|
78
|
-
navigation,
|
79
|
-
deprecated,
|
80
|
-
}
|
81
|
-
|
82
|
-
export const xSeriesDarkTheme: Theme = {
|
83
|
-
...backgrounds.inert,
|
84
|
-
...backgrounds.interactive,
|
85
|
-
...foregrounds.inert,
|
86
|
-
...foregrounds.borders,
|
87
|
-
...discretionary,
|
88
|
-
...navigation,
|
89
|
-
...deprecated,
|
90
|
-
}
|
@@ -1,89 +0,0 @@
|
|
1
|
-
import { Theme } from '../types'
|
2
|
-
|
3
|
-
const backgrounds = {
|
4
|
-
inert: {
|
5
|
-
background: '#F4F2F5',
|
6
|
-
box: '#FFFFFF',
|
7
|
-
backgroundInverse: '#141217',
|
8
|
-
boxInverse: '#1E1C21',
|
9
|
-
success: '#0E7B1D',
|
10
|
-
},
|
11
|
-
interactive: {
|
12
|
-
goLighter: '#6054FF',
|
13
|
-
go: '#3F32F5',
|
14
|
-
goDarker: '#352ACF',
|
15
|
-
goHighlight: 'rgba(128, 140, 255, .1)',
|
16
|
-
noLighter: '#D4301D',
|
17
|
-
no: '#BB2A1A',
|
18
|
-
noDarker: '#A12416',
|
19
|
-
supplementaryLighter: '#3C6996',
|
20
|
-
supplementary: '#32577D',
|
21
|
-
supplementaryDarker: '#284563',
|
22
|
-
},
|
23
|
-
}
|
24
|
-
|
25
|
-
const foregrounds = {
|
26
|
-
inert: {
|
27
|
-
text: '#27252A',
|
28
|
-
textInverse: '#FFFFFF',
|
29
|
-
textAction: '#FFFFFF',
|
30
|
-
selectArrowsBg: '#27252A',
|
31
|
-
shadow: 'rgba(0, 0, 0, 0.35)',
|
32
|
-
overlay: 'rgba(0, 0, 0, 0.35)',
|
33
|
-
},
|
34
|
-
borders: {
|
35
|
-
framing: '#E7E5E8',
|
36
|
-
keyline: '#C9C7CA',
|
37
|
-
framingInverse: '#27252A',
|
38
|
-
keylineInverse: '#37353A',
|
39
|
-
},
|
40
|
-
}
|
41
|
-
|
42
|
-
const discretionary = {
|
43
|
-
goldenSand: '#E6B03D',
|
44
|
-
tacao: '#ED6B44',
|
45
|
-
newYorkPink: '#DE3CEC',
|
46
|
-
gothic: '#A02FB6',
|
47
|
-
lavenderPurple: '#501897',
|
48
|
-
sinbad: '#6952F6',
|
49
|
-
shuttleGray: '#5D5D5D',
|
50
|
-
}
|
51
|
-
|
52
|
-
const navigation = {
|
53
|
-
// When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
|
54
|
-
navTop: '#0B0B0B',
|
55
|
-
navSideTabs: '#E7E5E8',
|
56
|
-
navSideDrawer: '#FFFFFF',
|
57
|
-
navIconUnselected: '#27252A',
|
58
|
-
navIconSelected: '#3F32F5',
|
59
|
-
}
|
60
|
-
|
61
|
-
const deprecated = {
|
62
|
-
boxSupplementary: '#E7E5E8',
|
63
|
-
textNav: '#FFFFFF',
|
64
|
-
supplementaryText: '#32577D',
|
65
|
-
supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
|
66
|
-
doHighlight: 'rgba(128, 140, 255, .1)',
|
67
|
-
noHighlight: 'rgba(255, 128, 128, .1)',
|
68
|
-
doLighter: '#6054FF',
|
69
|
-
do: '#3F32F5',
|
70
|
-
doDarker: '#352ACF',
|
71
|
-
}
|
72
|
-
|
73
|
-
export const xSeriesLightThemeByCategory = {
|
74
|
-
backgrounds,
|
75
|
-
foregrounds,
|
76
|
-
discretionary,
|
77
|
-
navigation,
|
78
|
-
deprecated,
|
79
|
-
}
|
80
|
-
|
81
|
-
export const xSeriesLightTheme: Theme = {
|
82
|
-
...backgrounds.inert,
|
83
|
-
...backgrounds.interactive,
|
84
|
-
...foregrounds.inert,
|
85
|
-
...foregrounds.borders,
|
86
|
-
...discretionary,
|
87
|
-
...navigation,
|
88
|
-
...deprecated,
|
89
|
-
}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
// THIS IS A GENERATED FILE. DO NOT EDIT.
|
2
|
-
|
3
|
-
$vd-theme-required-base-keys: background,box,background-inverse,box-inverse,success,go-lighter,go,go-darker,go-highlight,no-lighter,no,no-darker,supplementary-lighter,supplementary,supplementary-darker,text,text-inverse,text-action,select-arrows-bg,shadow,overlay,framing,keyline,framing-inverse,keyline-inverse,golden-sand,tacao,new-york-pink,gothic,lavender-purple,sinbad,shuttle-gray,nav-top,nav-side-tabs,nav-side-drawer,nav-icon-unselected,nav-icon-selected,box-supplementary,text-nav,supplementary--text,supplementary-highlight,do-highlight,no-highlight,do-lighter,do,do-darker;
|
4
|
-
$vd-theme-available-rgb-keys: background,box,box-inverse,do,go,nav-side-drawer,nav-side-tabs,nav-top,no,supplementary;
|
5
|
-
$vd-theme-available-keys: background,box,background-inverse,box-inverse,success,go-lighter,go,go-darker,go-highlight,no-lighter,no,no-darker,supplementary-lighter,supplementary,supplementary-darker,text,text-inverse,text-action,select-arrows-bg,shadow,overlay,framing,keyline,framing-inverse,keyline-inverse,golden-sand,tacao,new-york-pink,gothic,lavender-purple,sinbad,shuttle-gray,nav-top,nav-side-tabs,nav-side-drawer,nav-icon-unselected,nav-icon-selected,box-supplementary,text-nav,supplementary--text,supplementary-highlight,do-highlight,no-highlight,do-lighter,do,do-darker,background-rgb,box-rgb,box-inverse-rgb,do-rgb,go-rgb,nav-side-drawer-rgb,nav-side-tabs-rgb,nav-top-rgb,no-rgb,supplementary-rgb;
|