@lightspeed/design-system-css 34.0.0 → 34.0.2

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 (6) hide show
  1. package/dist/index.css +14 -14
  2. package/dist/vend-styles.css +14 -14
  3. package/package.json +1 -1
  4. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +4 -4
  5. package/src/vend.ui/components/vd-radio/vd-radio.scss +2 -2
  6. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +1 -1
package/dist/index.css CHANGED
@@ -124,8 +124,8 @@
124
124
  --hs-color-fg-supplementary-soft: #3C6996;
125
125
  --hs-color-fg-supplementary-default: #5B83AC;
126
126
  --hs-color-fg-supplementary-strong: #284563;
127
- --hs-color-border-neutral-soft: #48484c;
128
- --hs-color-border-neutral-strong: #69696d;
127
+ --hs-color-border-neutral-soft: #333337;
128
+ --hs-color-border-neutral-strong: #525256;
129
129
  --hs-color-border-neutral-stronger: #8c8c90;
130
130
  --hs-color-border-neutral-inverted-soft: #e3e4e9;
131
131
  --hs-color-border-neutral-inverted-strong: #c9cacf;
@@ -305,8 +305,8 @@
305
305
  --hs-color-border-neutral-soft: #e3e4e9;
306
306
  --hs-color-border-neutral-strong: #c9cacf;
307
307
  --hs-color-border-neutral-stronger: #8c8c90;
308
- --hs-color-border-neutral-inverted-soft: #48484c;
309
- --hs-color-border-neutral-inverted-strong: #69696d;
308
+ --hs-color-border-neutral-inverted-soft: #333337;
309
+ --hs-color-border-neutral-inverted-strong: #525256;
310
310
  --hs-color-border-neutral-inverted-stronger: #8c8c90;
311
311
  --hs-color-border-neutral-ondark-soft: #48484c;
312
312
  --hs-color-border-neutral-ondark-strong: #69696d;
@@ -457,8 +457,8 @@
457
457
  --hs-color-fg-supplementary-soft: #3C6996;
458
458
  --hs-color-fg-supplementary-default: #5B83AC;
459
459
  --hs-color-fg-supplementary-strong: #284563;
460
- --hs-color-border-neutral-soft: #48484c;
461
- --hs-color-border-neutral-strong: #69696d;
460
+ --hs-color-border-neutral-soft: #333337;
461
+ --hs-color-border-neutral-strong: #525256;
462
462
  --hs-color-border-neutral-stronger: #8c8c90;
463
463
  --hs-color-border-neutral-inverted-soft: #e3e4e9;
464
464
  --hs-color-border-neutral-inverted-strong: #c9cacf;
@@ -2735,7 +2735,7 @@ vd-carousel-frame {
2735
2735
  height: 24px;
2736
2736
  width: 24px;
2737
2737
  background-color: var(--hs-color-bg-neutral-top);
2738
- border: 1px solid var(--hs-color-border-neutral-soft);
2738
+ border: 1px solid var(--hs-color-border-neutral-strong);
2739
2739
  border-radius: 4px;
2740
2740
  box-sizing: border-box;
2741
2741
  }
@@ -2744,9 +2744,9 @@ vd-carousel-frame {
2744
2744
  box-sizing: content-box;
2745
2745
  display: block;
2746
2746
  position: absolute;
2747
- border-right: 4px solid var(--hs-color-border-neutral-soft);
2748
- border-top: 4px solid var(--hs-color-border-neutral-soft);
2749
- border-color: var(--hs-color-border-neutral-soft);
2747
+ border-right: 4px solid var(--hs-color-border-neutral-strong);
2748
+ border-top: 4px solid var(--hs-color-border-neutral-strong);
2749
+ border-color: var(--hs-color-border-neutral-strong);
2750
2750
  transform: scaleX(-1) rotate(135deg);
2751
2751
  transform-origin: left top;
2752
2752
  height: 11px;
@@ -4994,7 +4994,7 @@ vd-dott,
4994
4994
  width: 24px;
4995
4995
  border-radius: 50%;
4996
4996
  background-color: var(--hs-color-bg-neutral-top);
4997
- border: 2px solid var(--hs-color-border-neutral-soft);
4997
+ border: 2px solid var(--hs-color-border-neutral-strong);
4998
4998
  box-sizing: border-box;
4999
4999
  }
5000
5000
  .vd-radio-tick:after {
@@ -5004,7 +5004,7 @@ vd-dott,
5004
5004
  height: 8px;
5005
5005
  width: 8px;
5006
5006
  border-radius: 50%;
5007
- background-color: var(--hs-color-border-neutral-soft);
5007
+ background-color: var(--hs-color-border-neutral-strong);
5008
5008
  opacity: 0;
5009
5009
  left: 6px;
5010
5010
  top: 6px;
@@ -5632,12 +5632,12 @@ vd-section .vd-section,
5632
5632
  color: var(--hs-color-fg-neutral-default);
5633
5633
  }
5634
5634
  .vd-tab.vd-tab--active .vd-tab-button {
5635
- border-bottom-color: var(--hs-color-fg-go-default);
5635
+ border-bottom-color: var(--hs-color-border-go-default);
5636
5636
  color: var(--hs-color-fg-go-default);
5637
5637
  }
5638
5638
  @media (hover: hover) {
5639
5639
  .vd-tab:hover:not(.vd-tab--disabled) .vd-tab-button {
5640
- border-bottom-color: var(--hs-color-fg-go-default);
5640
+ border-bottom-color: var(--hs-color-border-go-default);
5641
5641
  color: var(--hs-color-fg-go-default);
5642
5642
  }
5643
5643
  .vd-tab:hover:not(.vd-tab--active) .vd-tab-button {
package/dist/vend-styles.css CHANGED
@@ -124,8 +124,8 @@
124
124
  --hs-color-fg-supplementary-soft: #3C6996;
125
125
  --hs-color-fg-supplementary-default: #5B83AC;
126
126
  --hs-color-fg-supplementary-strong: #284563;
127
- --hs-color-border-neutral-soft: #48484c;
128
- --hs-color-border-neutral-strong: #69696d;
127
+ --hs-color-border-neutral-soft: #333337;
128
+ --hs-color-border-neutral-strong: #525256;
129
129
  --hs-color-border-neutral-stronger: #8c8c90;
130
130
  --hs-color-border-neutral-inverted-soft: #e3e4e9;
131
131
  --hs-color-border-neutral-inverted-strong: #c9cacf;
@@ -305,8 +305,8 @@
305
305
  --hs-color-border-neutral-soft: #e3e4e9;
306
306
  --hs-color-border-neutral-strong: #c9cacf;
307
307
  --hs-color-border-neutral-stronger: #8c8c90;
308
- --hs-color-border-neutral-inverted-soft: #48484c;
309
- --hs-color-border-neutral-inverted-strong: #69696d;
308
+ --hs-color-border-neutral-inverted-soft: #333337;
309
+ --hs-color-border-neutral-inverted-strong: #525256;
310
310
  --hs-color-border-neutral-inverted-stronger: #8c8c90;
311
311
  --hs-color-border-neutral-ondark-soft: #48484c;
312
312
  --hs-color-border-neutral-ondark-strong: #69696d;
@@ -457,8 +457,8 @@
457
457
  --hs-color-fg-supplementary-soft: #3C6996;
458
458
  --hs-color-fg-supplementary-default: #5B83AC;
459
459
  --hs-color-fg-supplementary-strong: #284563;
460
- --hs-color-border-neutral-soft: #48484c;
461
- --hs-color-border-neutral-strong: #69696d;
460
+ --hs-color-border-neutral-soft: #333337;
461
+ --hs-color-border-neutral-strong: #525256;
462
462
  --hs-color-border-neutral-stronger: #8c8c90;
463
463
  --hs-color-border-neutral-inverted-soft: #e3e4e9;
464
464
  --hs-color-border-neutral-inverted-strong: #c9cacf;
@@ -2735,7 +2735,7 @@ vd-carousel-frame {
2735
2735
  height: 24px;
2736
2736
  width: 24px;
2737
2737
  background-color: var(--hs-color-bg-neutral-top);
2738
- border: 1px solid var(--hs-color-border-neutral-soft);
2738
+ border: 1px solid var(--hs-color-border-neutral-strong);
2739
2739
  border-radius: 4px;
2740
2740
  box-sizing: border-box;
2741
2741
  }
@@ -2744,9 +2744,9 @@ vd-carousel-frame {
2744
2744
  box-sizing: content-box;
2745
2745
  display: block;
2746
2746
  position: absolute;
2747
- border-right: 4px solid var(--hs-color-border-neutral-soft);
2748
- border-top: 4px solid var(--hs-color-border-neutral-soft);
2749
- border-color: var(--hs-color-border-neutral-soft);
2747
+ border-right: 4px solid var(--hs-color-border-neutral-strong);
2748
+ border-top: 4px solid var(--hs-color-border-neutral-strong);
2749
+ border-color: var(--hs-color-border-neutral-strong);
2750
2750
  transform: scaleX(-1) rotate(135deg);
2751
2751
  transform-origin: left top;
2752
2752
  height: 11px;
@@ -4994,7 +4994,7 @@ vd-dott,
4994
4994
  width: 24px;
4995
4995
  border-radius: 50%;
4996
4996
  background-color: var(--hs-color-bg-neutral-top);
4997
- border: 2px solid var(--hs-color-border-neutral-soft);
4997
+ border: 2px solid var(--hs-color-border-neutral-strong);
4998
4998
  box-sizing: border-box;
4999
4999
  }
5000
5000
  .vd-radio-tick:after {
@@ -5004,7 +5004,7 @@ vd-dott,
5004
5004
  height: 8px;
5005
5005
  width: 8px;
5006
5006
  border-radius: 50%;
5007
- background-color: var(--hs-color-border-neutral-soft);
5007
+ background-color: var(--hs-color-border-neutral-strong);
5008
5008
  opacity: 0;
5009
5009
  left: 6px;
5010
5010
  top: 6px;
@@ -5632,12 +5632,12 @@ vd-section .vd-section,
5632
5632
  color: var(--hs-color-fg-neutral-default);
5633
5633
  }
5634
5634
  .vd-tab.vd-tab--active .vd-tab-button {
5635
- border-bottom-color: var(--hs-color-fg-go-default);
5635
+ border-bottom-color: var(--hs-color-border-go-default);
5636
5636
  color: var(--hs-color-fg-go-default);
5637
5637
  }
5638
5638
  @media (hover: hover) {
5639
5639
  .vd-tab:hover:not(.vd-tab--disabled) .vd-tab-button {
5640
- border-bottom-color: var(--hs-color-fg-go-default);
5640
+ border-bottom-color: var(--hs-color-border-go-default);
5641
5641
  color: var(--hs-color-fg-go-default);
5642
5642
  }
5643
5643
  .vd-tab:hover:not(.vd-tab--active) .vd-tab-button {
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@lightspeed/design-system-css","version":"34.0.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^34.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
1
+ {"name":"@lightspeed/design-system-css","version":"34.0.2","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^34.0.2"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss CHANGED
@@ -82,7 +82,7 @@
82
82
  height: $vd-checkbox-length;
83
83
  width: $vd-checkbox-length;
84
84
  background-color: hs-color(bg-neutral-top);
85
- border: 1px solid hs-color(border-neutral-soft);
85
+ border: 1px solid hs-color(border-neutral-strong);
86
86
  border-radius: $vd-border-radius;
87
87
  box-sizing: border-box;
88
88
 
@@ -91,9 +91,9 @@
91
91
  box-sizing: content-box;
92
92
  display: block;
93
93
  position: absolute;
94
- border-right: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
95
- border-top: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
96
- border-color: hs-color(border-neutral-soft);
94
+ border-right: $vd-checkbox-tick-thickness solid hs-color(border-neutral-strong);
95
+ border-top: $vd-checkbox-tick-thickness solid hs-color(border-neutral-strong);
96
+ border-color: hs-color(border-neutral-strong);
97
97
  transform: scaleX(-1) rotate(180deg + -45deg);
98
98
  transform-origin: left top;
99
99
  height: $vd-checkbox-tick-height;
package/src/vend.ui/components/vd-radio/vd-radio.scss CHANGED
@@ -66,7 +66,7 @@
66
66
  width: $vd-radio-length;
67
67
  border-radius: 50%;
68
68
  background-color: hs-color(bg-neutral-top);
69
- border: 2px solid hs-color(border-neutral-soft);
69
+ border: 2px solid hs-color(border-neutral-strong);
70
70
  box-sizing: border-box;
71
71
 
72
72
  &:after {
@@ -76,7 +76,7 @@
76
76
  height: $vd-radio-tick-length;
77
77
  width: $vd-radio-tick-length;
78
78
  border-radius: 50%;
79
- background-color: hs-color(border-neutral-soft);
79
+ background-color: hs-color(border-neutral-strong);
80
80
  opacity: 0;
81
81
  left: $vd-radio-tick-position;
82
82
  top: $vd-radio-tick-position;
package/src/vend.ui/components/vd-tabs/vd-tabs.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use 'sass:math';
2
2
 
3
3
  @mixin vd-active-tab {
4
- border-bottom-color: hs-color(fg-go-default);
4
+ border-bottom-color: hs-color(border-go-default);
5
5
  color: hs-color(fg-go-default);
6
6
  }
7
7