@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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightspeed/design-system-css",
3
- "version": "0.2.0",
3
+ "version": "0.5.0",
4
4
  "description": "Lightspeed's Design System in CSS",
5
5
  "author": "Lightspeed Commerce Inc.",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
@@ -13,20 +13,20 @@
13
13
  "dist"
14
14
  ],
15
15
  "scripts": {
16
- "build": "rm -rf dist && yarn lint && yarn build:minimal && yarn build:retrocompatibility",
17
- "build:themes": "yarn ts-node ./src/themes/themeToScss",
18
- "build:minimal": "yarn tsc && node-sass -q src/index.scss -o dist/",
16
+ "prebuild": "rm -rf dist",
17
+ "build": "yarn lint && yarn build:css && yarn build:retrocompatibility",
18
+ "build:css": "sass --load-path=../../node_modules -q src/index.scss:dist/index.css",
19
19
  "build:retrocompatibility": "cp dist/index.css dist/vend-styles.css",
20
- "build-watch": "yarn lint && yarn build:themes && node-sass -rw src/ -o dist/",
20
+ "build-watch": "yarn lint && sass -rw src/:dist/",
21
21
  "test": "true",
22
22
  "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
23
23
  },
24
24
  "dependencies": {
25
- "react-datepicker": "^4.1.0"
25
+ "@lightspeed/design-system-tokens": "0.1.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/node": "^16.11.2",
29
- "node-sass": "^4.9.3",
29
+ "sass": "~1.45.2",
30
30
  "stylelint": "^13.5.0",
31
31
  "stylelint-scss": "^3.17.2",
32
32
  "ts-node": "^10.3.1"
@@ -1,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  @import '../../../vend.ui/styles/global/non-styles';
2
4
  @import './DatePicker-ns';
3
5
 
@@ -42,11 +44,11 @@
42
44
  }
43
45
 
44
46
  .vd-datepicker-group-footer {
45
- padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
47
+ padding: math.div($vd-datepicker-padding, 3) $vd-datepicker-padding;
46
48
  }
47
49
 
48
50
  .vd-datepicker-group-summary {
49
- margin: ($vd-datepicker-padding / 3);
51
+ margin: math.div($vd-datepicker-padding, 3);
50
52
  margin-left: 0;
51
53
  }
52
54
 
@@ -138,7 +140,7 @@
138
140
  display: inline-block;
139
141
  text-align: center;
140
142
  width: $vd-datepicker-button-size;
141
- padding-right: $vd-datepicker-day-spacing / 2;
143
+ padding-right: $vd-datepicker-day-spacing * 0.5;
142
144
  text-decoration: underline dotted;
143
145
  font-weight: $vd-font-weight--bold;
144
146
  }
@@ -159,7 +161,7 @@
159
161
  .react-datepicker__day {
160
162
  display: inline-block;
161
163
  font-size: $vd-datepicker-font-size;
162
- padding-right: $vd-datepicker-day-spacing / 2;
164
+ padding-right: $vd-datepicker-day-spacing * 0.5;
163
165
  cursor: pointer;
164
166
  }
165
167
 
@@ -26,13 +26,13 @@ $vd-autocomplete-filter-icon-margin: 14px;
26
26
  // right of the select in this component would need to be half that so it would look like it shares a border with
27
27
  // its neighbour. For now this has no affect as the min measure is 1px. This goes for all of the following border
28
28
  // overrides
29
- border-right: vd-border(framing, $vd-input-border-width / 2);
29
+ border-right: vd-border(framing, $vd-input-border-width * 0.5);
30
30
  transition: none;
31
31
  }
32
32
 
33
33
  .vd-lozenge-group {
34
34
  border-radius: $vd-autocomplete-filter-input-border-radius;
35
- border-left: vd-border(framing, $vd-input-border-width / 2);
35
+ border-left: vd-border(framing, $vd-input-border-width * 0.5);
36
36
  }
37
37
 
38
38
  vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
@@ -48,7 +48,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
48
48
 
49
49
  .vd-autocomplete-select-placeholder {
50
50
  @include vd-input-states();
51
- border-right: vd-border(framing, $vd-input-border-width / 2);
51
+ border-right: vd-border(framing, $vd-input-border-width * 0.5);
52
52
  border-radius: $vd-autocomplete-filter-select-border-radius;
53
53
  padding: $vd-autocomplete-filter-select-padding;
54
54
  padding-left: $vd-autocomplete-filter-select-padding-left;
@@ -1,4 +1,4 @@
1
1
  $vd-avatar-multi-size: 76px;
2
2
  $vd-avatar-multi-size-gap: 4px;
3
- $vd-avatar-multi-tile-size: ($vd-avatar-multi-size / 2) - ($vd-avatar-multi-size-gap / 2);
3
+ $vd-avatar-multi-tile-size: ($vd-avatar-multi-size * 0.5) - ($vd-avatar-multi-size-gap * 0.5);
4
4
  $vd-avatar-multi-tile-placeholder-size: 60px;
@@ -64,7 +64,7 @@
64
64
 
65
65
  .vd-avatar-multi-tile {
66
66
  flex: 1 1 50%;
67
- border: ($vd-avatar-multi-size-gap / 2) solid vd-colour(box);
67
+ border: ($vd-avatar-multi-size-gap * 0.5) solid vd-colour(box);
68
68
  border-radius: 5px;
69
69
  }
70
70
  }
@@ -1,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  .vd-datepicker-ui {
2
4
  display: block;
3
5
  }
@@ -80,11 +82,11 @@
80
82
  }
81
83
 
82
84
  .vd-datepicker-group-footer {
83
- padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
85
+ padding: math.div($vd-datepicker-padding, 3) $vd-datepicker-padding;
84
86
  }
85
87
 
86
88
  .vd-datepicker-group-summary {
87
- margin: ($vd-datepicker-padding / 3);
89
+ margin: math.div($vd-datepicker-padding, 3);
88
90
  margin-left: 0;
89
91
  }
90
92
 
@@ -116,7 +118,7 @@
116
118
  }
117
119
 
118
120
  td {
119
- padding-right: $vd-datepicker-table-spacing / 2;
121
+ padding-right: $vd-datepicker-table-spacing * 0.5;
120
122
 
121
123
  &:last-child {
122
124
  padding-right: 0;
@@ -124,7 +126,7 @@
124
126
  }
125
127
 
126
128
  th {
127
- padding-right: $vd-datepicker-table-spacing / 2;
129
+ padding-right: $vd-datepicker-table-spacing * 0.5;
128
130
 
129
131
  &:last-child {
130
132
  padding-right: 0;
@@ -61,8 +61,8 @@
61
61
  }
62
62
 
63
63
  @include vd-viewport-media-max ($vd-breakpoint-small) {
64
- top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding / 2));
65
- right: $vd-dialog-close-button-anchor-padding / 2;
64
+ top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding * 0.5));
65
+ right: $vd-dialog-close-button-anchor-padding * 0.5;
66
66
  }
67
67
  }
68
68
 
@@ -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;
@@ -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;
@@ -1,3 +1,5 @@
1
1
  $vd-toast-notification-padding-v: vd-grid-unit(6);
2
- $vd-toast-notification-padding-h: vd-grid-unit(10);
2
+ $vd-toast-notification-padding-r: vd-grid-unit(19);
3
+ $vd-toast-notification-padding-l: vd-grid-unit(10);
4
+ $vd-toast-notification-dismiss-padding: vd-grid-unit(8);
3
5
  $vd-toast-notification-offset: vd-grid-unit(5);
@@ -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
  }
@@ -24,18 +24,19 @@
24
24
  position: relative;
25
25
 
26
26
  display: flex;
27
- align-items: center;
27
+ align-items: start;
28
28
  justify-content: center;
29
29
 
30
30
  width: calc(100% - #{$vd-toast-notification-offset});
31
31
  max-width: vd-grid-unit(170);
32
32
  margin: 0 auto;
33
- padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-h;
33
+ padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
34
34
 
35
35
  border-radius: $vd-border-radius;
36
36
  box-sizing: border-box;
37
37
  color: vd-colour(text-action);
38
38
  text-align: center;
39
+ font-weight: $vd-font-weight--bold;
39
40
 
40
41
  transition: opacity ease-in-out $vd-time-m;
41
42
  pointer-events: auto;
@@ -45,7 +46,7 @@
45
46
  position: absolute;
46
47
  right: 0;
47
48
  top: 0;
48
- width: $vd-toast-notification-padding-h;
49
+ padding: 0 $vd-toast-notification-dismiss-padding;
49
50
  height: 100%;
50
51
  display: flex;
51
52
  align-items: center;
@@ -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,9 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var dark_1 = require("./xseries/dark");
4
- exports.xSeriesDarkTheme = dark_1.xSeriesDarkTheme;
5
- exports.xSeriesDarkThemeByCategory = dark_1.xSeriesDarkThemeByCategory;
6
- var light_1 = require("./xseries/light");
7
- exports.xSeriesLightTheme = light_1.xSeriesLightTheme;
8
- exports.xSeriesLightThemeByCategory = light_1.xSeriesLightThemeByCategory;
9
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":";;AAAA,uCAA6E;AAApE,kCAAA,gBAAgB,CAAA;AAAE,4CAAA,0BAA0B,CAAA;AACrD,yCAAgF;AAAvE,oCAAA,iBAAiB,CAAA;AAAE,8CAAA,2BAA2B,CAAA"}
@@ -1,2 +0,0 @@
1
- import { ThemeConfig } from './types';
2
- export declare const themeToScss: ({ theme, mapName, filename }: ThemeConfig) => void;