@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
@@ -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;
@@ -1,53 +0,0 @@
1
- // THIS IS A GENERATED FILE. DO NOT EDIT.
2
-
3
- // stylelint-disable vend/use-colour-function
4
-
5
- $vd-xseries-theme-dark: (
6
- background:#141217,
7
- box:#1E1C21,
8
- background-inverse:#F4F2F5,
9
- box-inverse:#FFFFFF,
10
- success:#15BF20,
11
- go-lighter:#6054FF,
12
- go:#477BFF,
13
- go-darker:#352ACF,
14
- go-highlight:rgba(0, 23, 229, .1),
15
- no-lighter:#D4301D,
16
- no:#EB4F29,
17
- no-darker:#A12416,
18
- supplementary-lighter:#3C6996,
19
- supplementary:#5B83AC,
20
- supplementary-darker:#284563,
21
- text:#E7E5E8,
22
- text-inverse:#0B0B0B,
23
- text-action:#FFFFFF,
24
- select-arrows-bg:#E7E5E8,
25
- shadow:rgba(0, 0, 0, 0.35),
26
- overlay:rgba(43, 54, 61, 0.65),
27
- framing:#27252A,
28
- keyline:#37353A,
29
- framing-inverse:#E7E5E8,
30
- keyline-inverse:#C9C7CA,
31
- golden-sand:#E6B03D,
32
- tacao:#ED6B44,
33
- new-york-pink:#DE3CEC,
34
- gothic:#A02FB6,
35
- lavender-purple:#501897,
36
- sinbad:#6952F6,
37
- shuttle-gray:#5D5D5D,
38
- nav-top:#0B0B0B,
39
- nav-side-tabs:#27252A,
40
- nav-side-drawer:#1E1C21,
41
- nav-icon-unselected:#FFFFFF,
42
- nav-icon-selected:#E7E5E8,
43
- box-supplementary:#27252A,
44
- text-nav:#FFFFFF,
45
- supplementary--text:#5B83AC,
46
- supplementary-highlight:rgba(0, 61, 229, .1),
47
- do-highlight:rgba(0, 23, 229, .1),
48
- no-highlight:rgba(229, 0, 0,.1),
49
- do-lighter:#618EFF,
50
- do:#477BFF,
51
- do-darker:#406FE5);
52
-
53
- // stylelint-enable vend/use-colour-function
@@ -1,53 +0,0 @@
1
- // THIS IS A GENERATED FILE. DO NOT EDIT.
2
-
3
- // stylelint-disable vend/use-colour-function
4
-
5
- $vd-xseries-theme-light: (
6
- background:#F4F2F5,
7
- box:#FFFFFF,
8
- background-inverse:#141217,
9
- box-inverse:#1E1C21,
10
- success:#0E7B1D,
11
- go-lighter:#6054FF,
12
- go:#3F32F5,
13
- go-darker:#352ACF,
14
- go-highlight:rgba(128, 140, 255, .1),
15
- no-lighter:#D4301D,
16
- no:#BB2A1A,
17
- no-darker:#A12416,
18
- supplementary-lighter:#3C6996,
19
- supplementary:#32577D,
20
- supplementary-darker:#284563,
21
- text:#27252A,
22
- text-inverse:#FFFFFF,
23
- text-action:#FFFFFF,
24
- select-arrows-bg:#27252A,
25
- shadow:rgba(0, 0, 0, 0.35),
26
- overlay:rgba(0, 0, 0, 0.35),
27
- framing:#E7E5E8,
28
- keyline:#C9C7CA,
29
- framing-inverse:#27252A,
30
- keyline-inverse:#37353A,
31
- golden-sand:#E6B03D,
32
- tacao:#ED6B44,
33
- new-york-pink:#DE3CEC,
34
- gothic:#A02FB6,
35
- lavender-purple:#501897,
36
- sinbad:#6952F6,
37
- shuttle-gray:#5D5D5D,
38
- nav-top:#0B0B0B,
39
- nav-side-tabs:#E7E5E8,
40
- nav-side-drawer:#FFFFFF,
41
- nav-icon-unselected:#27252A,
42
- nav-icon-selected:#3F32F5,
43
- box-supplementary:#E7E5E8,
44
- text-nav:#FFFFFF,
45
- supplementary--text:#32577D,
46
- supplementary-highlight:rgba(76, 124, 255, 0.1),
47
- do-highlight:rgba(128, 140, 255, .1),
48
- no-highlight:rgba(255, 128, 128, .1),
49
- do-lighter:#6054FF,
50
- do:#3F32F5,
51
- do-darker:#352ACF);
52
-
53
- // stylelint-enable vend/use-colour-function