@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,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  $vd-dott-diameter: 32px;
2
4
  $vd-dott-aperture-diameter: 12px;
3
5
  $vd-dot-border-width: 2px;
@@ -14,7 +16,7 @@ vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
14
16
  .vd-dott-mask {
15
17
  stroke: $vd-colour-white;
16
18
  // Define stroke width as the difference between aperture diameter and full diameter, expressed as % of full diameter
17
- stroke-width: ($vd-dott-diameter - $vd-dott-aperture-diameter) / $vd-dott-diameter * 100%;
19
+ stroke-width: math.div($vd-dott-diameter - $vd-dott-aperture-diameter, $vd-dott-diameter) * 100%;
18
20
  }
19
21
 
20
22
  .vd-dott-gradient-start {
@@ -2,25 +2,25 @@
2
2
 
3
3
  // Large gutter; @todo deprecate since it has inconsistent vertical spacing
4
4
  .vd-g-row--gutter-l {
5
- margin: -($vd-grid-row-gutter-large / 2);
5
+ margin: -($vd-grid-row-gutter-large * 0.5);
6
6
  max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
7
7
 
8
8
  > .vd-g-col {
9
- padding: $vd-grid-row-gutter-large / 2;
9
+ padding: $vd-grid-row-gutter-large * 0.5;
10
10
  }
11
11
  }
12
12
 
13
13
  .vd-g-row--gutter {
14
- margin-left: -($vd-grid-row-gutter-large / 2);
15
- margin-right: -($vd-grid-row-gutter-large / 2);
16
- margin-bottom: -($vd-grid-row-gutter-large / 2);
14
+ margin-left: -($vd-grid-row-gutter-large * 0.5);
15
+ margin-right: -($vd-grid-row-gutter-large * 0.5);
16
+ margin-bottom: -($vd-grid-row-gutter-large * 0.5);
17
17
  max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
18
18
 
19
19
  + .vd-g-row--gutter {
20
- margin-top: ($vd-grid-row-gutter-large / 2);
20
+ margin-top: ($vd-grid-row-gutter-large * 0.5);
21
21
  }
22
22
 
23
23
  > .vd-g-col {
24
- padding: 0 ($vd-grid-row-gutter-large / 2) ($vd-grid-row-gutter-large / 2);
24
+ padding: 0 ($vd-grid-row-gutter-large * 0.5) ($vd-grid-row-gutter-large * 0.5);
25
25
  }
26
26
  }
@@ -1,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  $vd-input-padding: vd-grid-unit(3) !default;
2
4
  $vd-input-icon-padding: 35px;
3
5
  $vd-input-icon-position-h: vd-grid-unit(3);
@@ -9,7 +11,7 @@ $vd-input-message-margin: 8px;
9
11
  // requested number of lines. Specify the exact pixel value to ensure there is not rounding issues between browsers.
10
12
  $vd-textarea-leading: 20;
11
13
  $vd-textarea-unitless-font-size: map-deep-get($_vd-text-definitions, body, size);
12
- $vd-textarea-unitless-line-height: to-fixed(($vd-textarea-leading / $vd-textarea-unitless-font-size), $digits: 5);
14
+ $vd-textarea-unitless-line-height: to-fixed(math.div($vd-textarea-leading, $vd-textarea-unitless-font-size), $digits: 5);
13
15
  $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height);
14
16
 
15
17
  @mixin vd-input-text() {
@@ -9,7 +9,7 @@
9
9
  font-size: vd-text-size(supplementary);
10
10
 
11
11
  .vd-input-error-message-text {
12
- margin-left: $vd-input-message-margin / 2;
12
+ margin-left: $vd-input-message-margin * 0.5;
13
13
  }
14
14
  }
15
15
 
@@ -38,10 +38,10 @@ $vd-i-bg-margin: vd-grid-unit(2);
38
38
  top: 50%;
39
39
  right: $vd-i-bg-margin;
40
40
  z-index: 0;
41
- margin-top: -(($vd-loader-m / 2) + $vd-loader-border);
41
+ margin-top: -(($vd-loader-m * 0.5) + $vd-loader-border);
42
42
 
43
43
  &.vd-loader--small {
44
- margin-top: -(($vd-loader-s / 2) + $vd-loader-border);
44
+ margin-top: -(($vd-loader-s * 0.5) + $vd-loader-border);
45
45
  }
46
46
  }
47
47
 
@@ -8,8 +8,8 @@
8
8
  .vd-popover-beak {
9
9
  #{$edge}: 0;
10
10
  #{$direction}: $offset;
11
- margin-#{$edge}: -$vd-popover-beak-size / 2;
12
- margin-#{$direction}: -$vd-popover-beak-size / 2;
11
+ margin-#{$edge}: -$vd-popover-beak-size * 0.5;
12
+ margin-#{$direction}: -$vd-popover-beak-size * 0.5;
13
13
  border-#{$next-edge}-color: transparent;
14
14
  border-#{$opposite-edge}-color: transparent;
15
15
  box-shadow: $box-shadow;
@@ -55,6 +55,21 @@
55
55
  }
56
56
  }
57
57
 
58
+ .vd-popover-list-group-divider {
59
+ @include vd-popover-list-item(vd-grid-unit(2) $vd-popover-spacing);
60
+ @include vd-text(signpost);
61
+ position: relative;
62
+
63
+ &::after {
64
+ content: '';
65
+ border-bottom: vd-border(framing, 2px);
66
+ display: block;
67
+ position: absolute;
68
+ right: $vd-popover-spacing;
69
+ left: $vd-popover-spacing;
70
+ }
71
+ }
72
+
58
73
  .vd-popover-list-item {
59
74
  @include vd-popover-list-item();
60
75
  outline: none;
@@ -116,13 +131,19 @@
116
131
  }
117
132
  }
118
133
 
119
- &:active, &:focus {
134
+ &:active,
135
+ &:focus {
120
136
  background-color: vd-colour(go-highlight);
121
137
  }
122
138
  }
123
139
 
124
140
  .vd-popover-list-separator {
125
141
  @extend .vd-hr;
126
- margin: $vd-popover-list-spacing ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
142
+ margin: $vd-popover-list-spacing
143
+ ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
127
144
  width: inherit;
128
145
  }
146
+
147
+ .vd-popover-search-label {
148
+ margin-bottom: vd-grid-unit(1);
149
+ }
@@ -19,7 +19,7 @@
19
19
  position: absolute;
20
20
  height: $vd-scrollable-indicator-height;
21
21
  width: $vd-scrollable-indicator-width;
22
- margin: 0 (-$vd-scrollable-indicator-width / 2);
22
+ margin: 0 (-$vd-scrollable-indicator-width * 0.5);
23
23
  left: 50%;
24
24
  z-index: $vd-z-index-content-base;
25
25
  user-select: none;
@@ -1,5 +1,5 @@
1
1
  .vd-section-back {
2
- border-radius: $vd-section-back-height / 2;
2
+ border-radius: $vd-section-back-height * 0.5;
3
3
  background-color: transparent;
4
4
  cursor: pointer;
5
5
  position: absolute;
@@ -213,13 +213,6 @@ table { border-collapse: collapse; }
213
213
  padding: vd-grid-unit(4);
214
214
  }
215
215
 
216
- // Report table with expandable content
217
- &.vd-table--expandable > tbody > tr {
218
- &:nth-child(4n+3) {
219
- background-color: vd-colour(box);
220
- }
221
- }
222
-
223
216
  &.vd-table--report--nested {
224
217
  &.vd-table {
225
218
  margin-bottom: 0;
@@ -15,7 +15,7 @@
15
15
  pointer-events: none;
16
16
 
17
17
  &.vd-visible {
18
- transform: translateY($vd-toast-notification-offset / 2);
18
+ transform: translateY($vd-toast-notification-offset * 0.5);
19
19
  opacity: 1;
20
20
  }
21
21
  }
@@ -10,7 +10,7 @@
10
10
  background-color: $vd-topbar-background-color;
11
11
 
12
12
  font-family: $vd-font-primary;
13
- font-size: $vd-topbar-font-size;
13
+ font-size: 15px;
14
14
  line-height: normal;
15
15
  color: $vd-topbar-font-color;
16
16
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  &:hover {
22
22
  opacity: 1;
23
- }
23
+ }
24
24
  }
25
25
 
26
26
  .vd-nav-item-icon + .vd-nav-item-label {
@@ -33,4 +33,13 @@
33
33
  text-overflow: ellipsis;
34
34
  overflow: hidden;
35
35
  }
36
+
37
+ .vd-logo-container {
38
+ display: flex;
39
+ height: 100%;
40
+ }
41
+
42
+ .vd-logo {
43
+ padding-left: 34px;
44
+ }
36
45
  }
@@ -1,6 +1,8 @@
1
1
  // =================================== Responsive Grid =================================== //
2
2
 
3
3
  // Grid Settings
4
+ @use "sass:math";
5
+
4
6
  $vd-grid-columns: 12 !default;
5
7
  $vd-grid-block-max: 8 !default;
6
8
 
@@ -15,7 +17,7 @@ $vd-grid-row-gutter-large: 24px;
15
17
  //
16
18
  @mixin vd-grid-columns ($breakpoint) {
17
19
  @for $i from 1 through $vd-grid-columns {
18
- $_vd-column-width: percentage($i / $vd-grid-columns);
20
+ $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
19
21
 
20
22
  .vd-g-#{$breakpoint}-#{$i} {
21
23
  flex: 0 0 $_vd-column-width;
@@ -37,7 +39,7 @@ $vd-grid-row-gutter-large: 24px;
37
39
  flex-wrap: wrap;
38
40
 
39
41
  > .vd-g-col {
40
- $_vd-block-column-width: percentage(1 / $i);
42
+ $_vd-block-column-width: percentage(math.div(1, $i));
41
43
 
42
44
  flex: 0 0 $_vd-block-column-width;
43
45
  max-width: $_vd-block-column-width;
@@ -8,7 +8,7 @@
8
8
  @if ($_vd-colour-theme != _no_arg_provided_) {
9
9
  @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
10
10
  }
11
- @if (index($vd-theme-available-keys, $_vd-colour-element) != null) {
11
+ @if (index($helios-theme-available-keys, $_vd-colour-element) != null) {
12
12
  @return var(--vd-colour--#{$_vd-colour-element});
13
13
  } @else {
14
14
  @error "[colour-functions] The specified element (#{$_vd-colour-element}) does not exist.";
@@ -28,7 +28,11 @@
28
28
  /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
29
29
  /// @return {Colour<String>} - The highlighted colour
30
30
  @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
31
- @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
31
+ @return mix(
32
+ vd-colour($_vd-primary-element),
33
+ vd-colour($_vd-secondary-element),
34
+ 10
35
+ );
32
36
  }
33
37
 
34
38
  /// Generating a solid border for permitted border types (currently either keyline or framing)
@@ -37,7 +41,11 @@
37
41
  /// @param {String} $_vd-border-type - The border type, either keyline or framing
38
42
  /// @param {Unit} [$_vd-border-width=1px] - The width of the border
39
43
  /// @param {String} [$_vd-border-style=solid] - The style of the border
40
- @function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
44
+ @function vd-border(
45
+ $_vd-border-type,
46
+ $_vd-border-width: 1px,
47
+ $_vd-border-style: solid
48
+ ) {
41
49
  @if (null != index($vd-border-types, $_vd-border-type)) {
42
50
  @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
43
51
  } @else {
@@ -50,7 +58,7 @@
50
58
  /// @function vd-hex-to-rgb
51
59
  /// @return {String} The RGB values
52
60
  @function vd-hex-to-rgb($hexColour) {
53
- @return red($hexColour),green($hexColour),blue($hexColour);
61
+ @return red($hexColour), green($hexColour), blue($hexColour);
54
62
  }
55
63
 
56
64
  /// Ensures that the browsers RGBA colour function is used. This means we can use string values (which is not allowed
@@ -59,7 +67,7 @@
59
67
  /// @function vd-rgba
60
68
  /// @return {String} RGBA value
61
69
  @function vd-rgba($string, $opacity) {
62
- @return #{"rgba(#{$string}, #{$opacity})"};
70
+ @return #{'rgba(#{$string}, #{$opacity})'};
63
71
  }
64
72
 
65
73
  /// Encodes a hex value.
@@ -67,10 +75,10 @@
67
75
  /// @function vd-encode-colour
68
76
  /// @return {String} The encoded hex value.
69
77
  @function vd-encode-colour($string) {
70
- @if type-of($string) == 'color' {
78
+ @if type-of($string) == 'color' {
71
79
  $hex: str-slice(ie-hex-str($string), 4);
72
- $string:unquote("#{$hex}");
80
+ $string: unquote('#{$hex}');
73
81
  }
74
82
  $string: '%23' + $string;
75
- @return $string;
83
+ @return $string;
76
84
  }
@@ -1,11 +1,12 @@
1
- @import './theme-keys';
2
- @import './xseries/theme-dark';
3
- @import './xseries/theme-light';
1
+ @import '@lightspeed/design-system-tokens/scss/theme-keys';
2
+ @import '@lightspeed/design-system-tokens/scss/theme-dark';
3
+ @import '@lightspeed/design-system-tokens/scss/theme-light';
4
+
4
5
  @import './theme-functions';
5
6
 
6
7
  $vd-colour-themes: (
7
- xseries-dark: vd-add-theme($vd-xseries-theme-dark),
8
- xseries-light: vd-add-theme($vd-xseries-theme-light)
8
+ dark: vd-add-theme($helios-theme-dark),
9
+ light: vd-add-theme($helios-theme-light),
9
10
  );
10
11
 
11
12
  // Only generate dark mode css variables for apps that request it
@@ -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,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  @import "text-definitions";
2
4
 
3
5
  @mixin font-smoothing {
@@ -18,7 +20,7 @@
18
20
  // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
19
21
  // required font size.
20
22
  @mixin vd-line-height ($leading, $font-size) {
21
- line-height: ($leading / $font-size)
23
+ line-height: math.div($leading, $font-size)
22
24
  }
23
25
 
24
26
  // Intro
@@ -82,7 +84,7 @@
82
84
  }
83
85
 
84
86
  @else if ($property == 'tracking') {
85
- letter-spacing: $value / 10 * 1em;
87
+ letter-spacing: $value * 0.1 * 1em;
86
88
  }
87
89
 
88
90
  @else if ($property == 'size') {
@@ -3,6 +3,8 @@
3
3
  /// @function vd-px-unit
4
4
  /// @param {Number} $_value - Number to add 'px'
5
5
  /// @return {Number} - Number with px unit
6
+ @use "sass:math";
7
+
6
8
  @function vd-px-unit ($_value) {
7
9
  @return $_value * 1px;
8
10
  }
@@ -13,7 +15,7 @@
13
15
  /// @return {Number} - Unitless number
14
16
  @function strip-unit($number) {
15
17
  @if type-of($number) == 'number' and not unitless($number) {
16
- @return $number / ($number * 0 + 1);
18
+ @return math.div($number, $number * 0 + 1);
17
19
  }
18
20
 
19
21
  @return $number;
@@ -29,7 +31,7 @@
29
31
  $sass-precision: 5;
30
32
 
31
33
  $pow: pow(10, $digits);
32
- @return round($float * $pow) / $pow;
34
+ @return math.div(round($float * $pow), $pow);
33
35
  }
34
36
 
35
37
  /// Power function
@@ -47,7 +49,7 @@
47
49
  }
48
50
  } @else {
49
51
  @for $i from $n to 0 {
50
- $ret: $ret / $x;
52
+ $ret: math.div($ret, $x);
51
53
  }
52
54
  }
53
55
 
@@ -46,7 +46,7 @@
46
46
  display: block;
47
47
 
48
48
  position: absolute;
49
- top: $nv-notifications-list-spacing / 2;
49
+ top: $nv-notifications-list-spacing * 0.5;
50
50
  left: -$nv-notifications-list-spacing;
51
51
 
52
52
  .nv-notifications-list-item--read & {
@@ -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"}