@lightspeed/design-system-css 0.2.0 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (53) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/index.css +4973 -3289
  3. package/dist/index.css.map +1 -0
  4. package/dist/vend-styles.css +4973 -3289
  5. package/package.json +7 -7
  6. package/src/vend-styles/components/DatePicker/DatePicker.scss +6 -4
  7. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +3 -3
  8. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss +1 -1
  9. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +1 -1
  10. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +6 -4
  11. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +2 -2
  12. package/src/vend.ui/components/vd-dott/vd-dott.scss +3 -1
  13. package/src/vend.ui/components/vd-grid/vd-grid.scss +7 -7
  14. package/src/vend.ui/components/vd-input/vd-input-ns.scss +3 -1
  15. package/src/vend.ui/components/vd-input/vd-input.scss +1 -1
  16. package/src/vend.ui/components/vd-loader/vd-loader.scss +2 -2
  17. package/src/vend.ui/components/vd-popover/vd-popover.scss +2 -2
  18. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
  19. package/src/vend.ui/components/vd-section-back/vd-section-back.scss +1 -1
  20. package/src/vend.ui/components/vd-table/vd-table.scss +0 -7
  21. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss +3 -1
  22. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +5 -4
  23. package/src/vend.ui/components/vd-topbar/vd-topbar.scss +11 -2
  24. package/src/vend.ui/styles/global/_grid.scss +4 -2
  25. package/src/vend.ui/styles/global/colour/_colour-functions.scss +16 -8
  26. package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss +6 -5
  27. package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss +12 -8
  28. package/src/vend.ui/styles/global/text/_text-mixins.scss +4 -2
  29. package/src/vend.ui/styles/global/utils/_functions.scss +5 -3
  30. package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss +1 -1
  31. package/dist/themes/index.d.ts +0 -2
  32. package/dist/themes/index.js +0 -9
  33. package/dist/themes/index.js.map +0 -1
  34. package/dist/themes/themeToScss.d.ts +0 -2
  35. package/dist/themes/themeToScss.js +0 -60
  36. package/dist/themes/themeToScss.js.map +0 -1
  37. package/dist/themes/types.d.ts +0 -54
  38. package/dist/themes/types.js +0 -16
  39. package/dist/themes/types.js.map +0 -1
  40. package/dist/themes/xseries/dark.d.ts +0 -68
  41. package/dist/themes/xseries/dark.js +0 -84
  42. package/dist/themes/xseries/dark.js.map +0 -1
  43. package/dist/themes/xseries/light.d.ts +0 -68
  44. package/dist/themes/xseries/light.js +0 -84
  45. package/dist/themes/xseries/light.js.map +0 -1
  46. package/src/themes/index.ts +0 -2
  47. package/src/themes/themeToScss.ts +0 -67
  48. package/src/themes/types.ts +0 -68
  49. package/src/themes/xseries/dark.ts +0 -90
  50. package/src/themes/xseries/light.ts +0 -89
  51. package/src/vend.ui/styles/global/colour/themes/_theme-keys.scss +0 -5
  52. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-dark.scss +0 -53
  53. package/src/vend.ui/styles/global/colour/themes/xseries/_theme-light.scss +0 -53
@@ -1,60 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const fs_1 = tslib_1.__importDefault(require("fs"));
5
- const types_1 = require("./types");
6
- const light_1 = require("./xseries/light");
7
- const dark_1 = require("./xseries/dark");
8
- const THEME_DIR = './src/vend.ui/styles/global/colour/themes';
9
- const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n';
10
- const NO_LINT_START = '// stylelint-disable vend/use-colour-function';
11
- const NO_LINT_END = '// stylelint-enable vend/use-colour-function';
12
- const themes = [
13
- {
14
- theme: light_1.xSeriesLightTheme,
15
- mapName: 'vd-xseries-theme-light',
16
- filename: `${THEME_DIR}/xseries/_theme-light.scss`,
17
- },
18
- {
19
- theme: dark_1.xSeriesDarkTheme,
20
- mapName: 'vd-xseries-theme-dark',
21
- filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
22
- },
23
- ];
24
- const camelToKebab = (s) => s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
25
- const getKebabKey = (key) => {
26
- // supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
27
- return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key);
28
- };
29
- const saveScssMapFile = (filename, content) => {
30
- fs_1.default.writeFile(filename, content, err => {
31
- if (err) {
32
- // eslint-disable-next-line no-console
33
- console.error(err);
34
- process.exit(1);
35
- }
36
- });
37
- };
38
- // Converts theme to SCSS map
39
- exports.themeToScss = ({ theme, mapName, filename }) => {
40
- const colours = Object.entries(theme).map(c => {
41
- const kebabKey = getKebabKey(c[0]);
42
- return `\n ${kebabKey}:${c[1]}`;
43
- });
44
- const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`;
45
- return saveScssMapFile(filename, scssMap);
46
- };
47
- // Generates SCSS lists of required / available theme keys
48
- const requiredThemeKeysToScss = () => {
49
- const baseKeys = Object.keys(light_1.xSeriesLightTheme).map(k => getKebabKey(k));
50
- const rgbKeys = types_1.requiredRgbSwatches.map(k => getKebabKey(k));
51
- const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`));
52
- const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`;
53
- const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`;
54
- const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`;
55
- const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`;
56
- return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList);
57
- };
58
- themes.forEach(theme => exports.themeToScss(theme));
59
- requiredThemeKeysToScss();
60
- //# 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,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- // Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
4
- exports.requiredRgbSwatches = [
5
- 'background',
6
- 'box',
7
- 'boxInverse',
8
- 'do',
9
- 'go',
10
- 'navSideDrawer',
11
- 'navSideTabs',
12
- 'navTop',
13
- 'no',
14
- 'supplementary',
15
- ];
16
- //# 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,84 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
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
- const foregrounds = {
25
- inert: {
26
- text: '#E7E5E8',
27
- textInverse: '#0B0B0B',
28
- textAction: '#FFFFFF',
29
- selectArrowsBg: '#E7E5E8',
30
- shadow: 'rgba(0, 0, 0, 0.35)',
31
- overlay: 'rgba(43, 54, 61, 0.65)',
32
- },
33
- borders: {
34
- framing: '#27252A',
35
- keyline: '#37353A',
36
- framingInverse: '#E7E5E8',
37
- keylineInverse: '#C9C7CA',
38
- },
39
- };
40
- const discretionary = {
41
- goldenSand: '#E6B03D',
42
- tacao: '#ED6B44',
43
- newYorkPink: '#DE3CEC',
44
- gothic: '#A02FB6',
45
- lavenderPurple: '#501897',
46
- sinbad: '#6952F6',
47
- shuttleGray: '#5D5D5D',
48
- };
49
- const navigation = {
50
- // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
51
- navTop: '#0B0B0B',
52
- navSideTabs: '#27252A',
53
- navSideDrawer: '#1E1C21',
54
- navIconUnselected: '#FFFFFF',
55
- navIconSelected: '#E7E5E8',
56
- };
57
- const deprecated = {
58
- boxSupplementary: '#27252A',
59
- textNav: '#FFFFFF',
60
- supplementaryText: '#5B83AC',
61
- supplementaryHighlight: 'rgba(0, 61, 229, .1)',
62
- doHighlight: 'rgba(0, 23, 229, .1)',
63
- noHighlight: 'rgba(229, 0, 0,.1)',
64
- doLighter: '#618EFF',
65
- do: '#477BFF',
66
- doDarker: '#406FE5',
67
- };
68
- exports.xSeriesDarkThemeByCategory = {
69
- backgrounds,
70
- foregrounds,
71
- discretionary,
72
- navigation,
73
- deprecated,
74
- };
75
- exports.xSeriesDarkTheme = {
76
- ...backgrounds.inert,
77
- ...backgrounds.interactive,
78
- ...foregrounds.inert,
79
- ...foregrounds.borders,
80
- ...discretionary,
81
- ...navigation,
82
- ...deprecated,
83
- };
84
- //# 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,84 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
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
- const foregrounds = {
25
- inert: {
26
- text: '#27252A',
27
- textInverse: '#FFFFFF',
28
- textAction: '#FFFFFF',
29
- selectArrowsBg: '#27252A',
30
- shadow: 'rgba(0, 0, 0, 0.35)',
31
- overlay: 'rgba(0, 0, 0, 0.35)',
32
- },
33
- borders: {
34
- framing: '#E7E5E8',
35
- keyline: '#C9C7CA',
36
- framingInverse: '#27252A',
37
- keylineInverse: '#37353A',
38
- },
39
- };
40
- const discretionary = {
41
- goldenSand: '#E6B03D',
42
- tacao: '#ED6B44',
43
- newYorkPink: '#DE3CEC',
44
- gothic: '#A02FB6',
45
- lavenderPurple: '#501897',
46
- sinbad: '#6952F6',
47
- shuttleGray: '#5D5D5D',
48
- };
49
- const navigation = {
50
- // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
51
- navTop: '#0B0B0B',
52
- navSideTabs: '#E7E5E8',
53
- navSideDrawer: '#FFFFFF',
54
- navIconUnselected: '#27252A',
55
- navIconSelected: '#3F32F5',
56
- };
57
- const deprecated = {
58
- boxSupplementary: '#E7E5E8',
59
- textNav: '#FFFFFF',
60
- supplementaryText: '#32577D',
61
- supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
62
- doHighlight: 'rgba(128, 140, 255, .1)',
63
- noHighlight: 'rgba(255, 128, 128, .1)',
64
- doLighter: '#6054FF',
65
- do: '#3F32F5',
66
- doDarker: '#352ACF',
67
- };
68
- exports.xSeriesLightThemeByCategory = {
69
- backgrounds,
70
- foregrounds,
71
- discretionary,
72
- navigation,
73
- deprecated,
74
- };
75
- exports.xSeriesLightTheme = {
76
- ...backgrounds.inert,
77
- ...backgrounds.interactive,
78
- ...foregrounds.inert,
79
- ...foregrounds.borders,
80
- ...discretionary,
81
- ...navigation,
82
- ...deprecated,
83
- };
84
- //# 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()
@@ -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
- }