@lightspeed/design-system-css 0.4.0 → 0.6.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.
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()