@lightspeed/design-system-css 0.4.0 → 0.6.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (33) hide show
  1. package/CHANGELOG.md +58 -0
  2. package/dist/index.css +38 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +38 -1
  5. package/package.json +6 -6
  6. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +23 -2
  7. package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss +3 -1
  8. package/src/vend.ui/styles/global/colour/_colour-functions.scss +16 -8
  9. package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +6 -5
  10. package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +12 -8
  11. package/dist/themes/index.d.ts +0 -2
  12. package/dist/themes/index.js +0 -10
  13. package/dist/themes/index.js.map +0 -1
  14. package/dist/themes/themeToScss.d.ts +0 -2
  15. package/dist/themes/themeToScss.js +0 -62
  16. package/dist/themes/themeToScss.js.map +0 -1
  17. package/dist/themes/types.d.ts +0 -54
  18. package/dist/themes/types.js +0 -17
  19. package/dist/themes/types.js.map +0 -1
  20. package/dist/themes/xseries/dark.d.ts +0 -68
  21. package/dist/themes/xseries/dark.js +0 -85
  22. package/dist/themes/xseries/dark.js.map +0 -1
  23. package/dist/themes/xseries/light.d.ts +0 -68
  24. package/dist/themes/xseries/light.js +0 -85
  25. package/dist/themes/xseries/light.js.map +0 -1
  26. package/src/themes/index.ts +0 -2
  27. package/src/themes/themeToScss.ts +0 -67
  28. package/src/themes/types.ts +0 -68
  29. package/src/themes/xseries/dark.ts +0 -90
  30. package/src/themes/xseries/light.ts +0 -89
  31. package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +0 -5
  32. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +0 -53
  33. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +0 -53
@@ -6,7 +6,7 @@
6
6
  @function vd-add-theme($theme) {
7
7
  $_vend-theme: ();
8
8
 
9
- @each $key in ($vd-theme-required-base-keys) {
9
+ @each $key in ($helios-theme-required-base-keys) {
10
10
  @if (map-has-key($theme, $key) == false) {
11
11
  @error '[colour-themes] Missing required theme property "#{$key}"';
12
12
  }
@@ -19,27 +19,31 @@
19
19
  }
20
20
 
21
21
  // Some swatches require rgb values
22
- @if (index($vd-theme-available-rgb-keys, $key) != null) {
22
+ @if (index($helios-theme-available-rgb-keys, $key) != null) {
23
23
  // Add original HEX values and generated RGB value to theme
24
24
  $combined: (
25
25
  $key: $value,
26
- #{$key}-rgb: vd-hex-to-rgb($value)
26
+ #{$key}-rgb: vd-hex-to-rgb($value),
27
27
  );
28
28
  $_vend-theme: map-merge($_vend-theme, $combined);
29
29
  } @else {
30
30
  // RGB value not required, just append the original value
31
- $_vend-theme: map-merge($_vend-theme, ($key: $value));
31
+ $_vend-theme: map-merge(
32
+ $_vend-theme,
33
+ (
34
+ $key: $value,
35
+ )
36
+ );
32
37
  }
33
38
  }
34
39
 
35
40
  @return $_vend-theme;
36
41
  }
37
42
 
38
-
39
43
  @mixin vd-generate-themes() {
40
44
  :root {
41
45
  color-scheme: light;
42
- @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-light));
46
+ @include vd-generate-theme-values(map-get($vd-colour-themes, light));
43
47
  }
44
48
 
45
49
  // Dark themes
@@ -47,7 +51,7 @@
47
51
  @media (prefers-color-scheme: dark) {
48
52
  :root {
49
53
  color-scheme: dark;
50
- @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
54
+ @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
51
55
  }
52
56
  }
53
57
  } @else {
@@ -55,7 +59,7 @@
55
59
  @media (prefers-color-scheme: dark) {
56
60
  .vd-theme--dark {
57
61
  color-scheme: dark;
58
- @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
62
+ @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
59
63
  }
60
64
  }
61
65
  }
@@ -1,2 +0,0 @@
1
- export { xSeriesDarkTheme, xSeriesDarkThemeByCategory } from './xseries/dark';
2
- export { xSeriesLightTheme, xSeriesLightThemeByCategory } from './xseries/light';
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.xSeriesLightThemeByCategory = exports.xSeriesLightTheme = exports.xSeriesDarkThemeByCategory = exports.xSeriesDarkTheme = void 0;
4
- var dark_1 = require("./xseries/dark");
5
- Object.defineProperty(exports, "xSeriesDarkTheme", { enumerable: true, get: function () { return dark_1.xSeriesDarkTheme; } });
6
- Object.defineProperty(exports, "xSeriesDarkThemeByCategory", { enumerable: true, get: function () { return dark_1.xSeriesDarkThemeByCategory; } });
7
- var light_1 = require("./xseries/light");
8
- Object.defineProperty(exports, "xSeriesLightTheme", { enumerable: true, get: function () { return light_1.xSeriesLightTheme; } });
9
- Object.defineProperty(exports, "xSeriesLightThemeByCategory", { enumerable: true, get: function () { return light_1.xSeriesLightThemeByCategory; } });
10
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":";;;AAAA,uCAA6E;AAApE,wGAAA,gBAAgB,OAAA;AAAE,kHAAA,0BAA0B,OAAA;AACrD,yCAAgF;AAAvE,0GAAA,iBAAiB,OAAA;AAAE,oHAAA,2BAA2B,OAAA"}
@@ -1,2 +0,0 @@
1
- import { ThemeConfig } from './types';
2
- export declare const themeToScss: ({ theme, mapName, filename }: ThemeConfig) => void;
@@ -1,62 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.themeToScss = void 0;
4
- const tslib_1 = require("tslib");
5
- const fs_1 = (0, tslib_1.__importDefault)(require("fs"));
6
- const types_1 = require("./types");
7
- const light_1 = require("./xseries/light");
8
- const dark_1 = require("./xseries/dark");
9
- const THEME_DIR = './src/vend.ui/styles/global/colour/themes';
10
- const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n';
11
- const NO_LINT_START = '// stylelint-disable vend/use-colour-function';
12
- const NO_LINT_END = '// stylelint-enable vend/use-colour-function';
13
- const themes = [
14
- {
15
- theme: light_1.xSeriesLightTheme,
16
- mapName: 'vd-xseries-theme-light',
17
- filename: `${THEME_DIR}/xseries/_theme-light.scss`,
18
- },
19
- {
20
- theme: dark_1.xSeriesDarkTheme,
21
- mapName: 'vd-xseries-theme-dark',
22
- filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
23
- },
24
- ];
25
- const camelToKebab = (s) => s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
26
- const getKebabKey = (key) => {
27
- // supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
28
- return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key);
29
- };
30
- const saveScssMapFile = (filename, content) => {
31
- fs_1.default.writeFile(filename, content, err => {
32
- if (err) {
33
- // eslint-disable-next-line no-console
34
- console.error(err);
35
- process.exit(1);
36
- }
37
- });
38
- };
39
- // Converts theme to SCSS map
40
- const themeToScss = ({ theme, mapName, filename }) => {
41
- const colours = Object.entries(theme).map(c => {
42
- const kebabKey = getKebabKey(c[0]);
43
- return `\n ${kebabKey}:${c[1]}`;
44
- });
45
- const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`;
46
- return saveScssMapFile(filename, scssMap);
47
- };
48
- exports.themeToScss = themeToScss;
49
- // Generates SCSS lists of required / available theme keys
50
- const requiredThemeKeysToScss = () => {
51
- const baseKeys = Object.keys(light_1.xSeriesLightTheme).map(k => getKebabKey(k));
52
- const rgbKeys = types_1.requiredRgbSwatches.map(k => getKebabKey(k));
53
- const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`));
54
- const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`;
55
- const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`;
56
- const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`;
57
- const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`;
58
- return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList);
59
- };
60
- themes.forEach(theme => (0, exports.themeToScss)(theme));
61
- requiredThemeKeysToScss();
62
- //# sourceMappingURL=themeToScss.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"themeToScss.js","sourceRoot":"","sources":["../../src/themes/themeToScss.ts"],"names":[],"mappings":"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"}
@@ -1,54 +0,0 @@
1
- export interface ThemeConfig {
2
- theme: Theme;
3
- mapName: string;
4
- filename: string;
5
- }
6
- export interface Theme {
7
- background: string;
8
- backgroundInverse: string;
9
- box: string;
10
- boxInverse: string;
11
- boxSupplementary: string;
12
- do: string;
13
- doDarker: string;
14
- doHighlight: string;
15
- doLighter: string;
16
- framing: string;
17
- framingInverse: string;
18
- go: string;
19
- goDarker: string;
20
- goHighlight: string;
21
- goLighter: string;
22
- goldenSand: string;
23
- gothic: string;
24
- keyline: string;
25
- keylineInverse: string;
26
- lavenderPurple: string;
27
- navIconSelected: string;
28
- navIconUnselected: string;
29
- navSideDrawer: string;
30
- navSideTabs: string;
31
- navTop: string;
32
- newYorkPink: string;
33
- no: string;
34
- noDarker: string;
35
- noHighlight: string;
36
- noLighter: string;
37
- overlay: string;
38
- selectArrowsBg: string;
39
- shadow: string;
40
- shuttleGray: string;
41
- sinbad: string;
42
- success: string;
43
- supplementary: string;
44
- supplementaryDarker: string;
45
- supplementaryHighlight: string;
46
- supplementaryLighter: string;
47
- supplementaryText: string;
48
- tacao: string;
49
- text: string;
50
- textAction: string;
51
- textInverse: string;
52
- textNav: string;
53
- }
54
- export declare const requiredRgbSwatches: string[];
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.requiredRgbSwatches = void 0;
4
- // Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
5
- exports.requiredRgbSwatches = [
6
- 'background',
7
- 'box',
8
- 'boxInverse',
9
- 'do',
10
- 'go',
11
- 'navSideDrawer',
12
- 'navSideTabs',
13
- 'navTop',
14
- 'no',
15
- 'supplementary',
16
- ];
17
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/themes/types.ts"],"names":[],"mappings":";;;AAuDA,gGAAgG;AACnF,QAAA,mBAAmB,GAAG;IACjC,YAAY;IACZ,KAAK;IACL,YAAY;IACZ,IAAI;IACJ,IAAI;IACJ,eAAe;IACf,aAAa;IACb,QAAQ;IACR,IAAI;IACJ,eAAe;CAChB,CAAA"}
@@ -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"}
@@ -1,2 +0,0 @@
1
- export { xSeriesDarkTheme, xSeriesDarkThemeByCategory } from './xseries/dark'
2
- export { xSeriesLightTheme, xSeriesLightThemeByCategory } from './xseries/light'
@@ -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()