@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
@@ -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