@lightspeed/design-system-css 0.3.0 → 0.6.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 +58 -0
  2. package/dist/index.css +45 -4
  3. package/dist/index.css.map +1 -1
  4. package/dist/vend-styles.css +45 -4
  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-popover-list/vd-popover-list.scss +23 -2
  19. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
  20. package/src/vend.ui/components/vd-section-back/vd-section-back.scss +1 -1
  21. package/src/vend.ui/components/vd-table/vd-table.scss +0 -7
  22. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +1 -1
  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 -10
  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 -62
  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 -17
  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 -85
  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 -85
  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,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()
@@ -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;