@lightspeed/design-system-css 29.0.0 → 29.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 (5) hide show
  1. package/dist/index.css +28 -28
  2. package/dist/vend-styles.css +28 -28
  3. package/package.json +1 -1
  4. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +1 -1
  5. package/src/vend.ui/styles/global/colour/_colour-functions.scss +2 -1
package/dist/index.css CHANGED
@@ -1950,10 +1950,10 @@ a.vd-btn.disabled {
1950
1950
  .vd-btn--do:active, .vd-btn--do.vd-btn--active {
1951
1951
  color: var(--hs-color-fg-neutral-ondark-default);
1952
1952
  background-color: var(--hs-color-bg-go-strong);
1953
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1953
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1954
1954
  }
1955
1955
  .vd-btn--do:focus {
1956
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1956
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1957
1957
  }
1958
1958
 
1959
1959
  .vd-btn--icon-do {
@@ -1970,10 +1970,10 @@ a.vd-btn.disabled {
1970
1970
  .vd-btn--icon-do:active, .vd-btn--icon-do.vd-btn--active {
1971
1971
  color: var(--hs-color-fg-neutral-ondark-default);
1972
1972
  background-color: var(--hs-color-bg-go-strong);
1973
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1973
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1974
1974
  }
1975
1975
  .vd-btn--icon-do:focus {
1976
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1976
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1977
1977
  }
1978
1978
 
1979
1979
  .vd-btn--text-do {
@@ -1989,10 +1989,10 @@ a.vd-btn.disabled {
1989
1989
  .vd-btn--text-do:active, .vd-btn--text-do.vd-btn--active {
1990
1990
  color: var(--hs-color-fg-neutral-ondark-default);
1991
1991
  background-color: var(--hs-color-bg-go-strong);
1992
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1992
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1993
1993
  }
1994
1994
  .vd-btn--text-do:focus {
1995
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1995
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1996
1996
  }
1997
1997
 
1998
1998
  .vd-btn--supplementary {
@@ -2008,10 +2008,10 @@ a.vd-btn.disabled {
2008
2008
  .vd-btn--supplementary:active, .vd-btn--supplementary.vd-btn--active {
2009
2009
  color: var(--hs-color-fg-neutral-ondark-default);
2010
2010
  background-color: var(--hs-color-bg-supplementary-strong);
2011
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2011
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2012
2012
  }
2013
2013
  .vd-btn--supplementary:focus {
2014
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2014
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2015
2015
  }
2016
2016
 
2017
2017
  .vd-btn--icon-supplementary {
@@ -2028,10 +2028,10 @@ a.vd-btn.disabled {
2028
2028
  .vd-btn--icon-supplementary:active, .vd-btn--icon-supplementary.vd-btn--active {
2029
2029
  color: var(--hs-color-fg-neutral-ondark-default);
2030
2030
  background-color: var(--hs-color-bg-supplementary-strong);
2031
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2031
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2032
2032
  }
2033
2033
  .vd-btn--icon-supplementary:focus {
2034
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2034
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2035
2035
  }
2036
2036
 
2037
2037
  .vd-btn--text-supplementary {
@@ -2047,10 +2047,10 @@ a.vd-btn.disabled {
2047
2047
  .vd-btn--text-supplementary:active, .vd-btn--text-supplementary.vd-btn--active {
2048
2048
  color: var(--hs-color-fg-neutral-ondark-default);
2049
2049
  background-color: var(--hs-color-bg-supplementary-strong);
2050
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2050
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2051
2051
  }
2052
2052
  .vd-btn--text-supplementary:focus {
2053
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2053
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2054
2054
  }
2055
2055
 
2056
2056
  .vd-btn--no {
@@ -2066,10 +2066,10 @@ a.vd-btn.disabled {
2066
2066
  .vd-btn--no:active, .vd-btn--no.vd-btn--active {
2067
2067
  color: var(--hs-color-fg-neutral-ondark-default);
2068
2068
  background-color: var(--hs-color-bg-no-strong);
2069
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2069
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2070
2070
  }
2071
2071
  .vd-btn--no:focus {
2072
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2072
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2073
2073
  }
2074
2074
 
2075
2075
  .vd-btn--icon-no {
@@ -2086,10 +2086,10 @@ a.vd-btn.disabled {
2086
2086
  .vd-btn--icon-no:active, .vd-btn--icon-no.vd-btn--active {
2087
2087
  color: var(--hs-color-fg-neutral-ondark-default);
2088
2088
  background-color: var(--hs-color-bg-no-strong);
2089
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2089
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2090
2090
  }
2091
2091
  .vd-btn--icon-no:focus {
2092
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2092
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2093
2093
  }
2094
2094
 
2095
2095
  .vd-btn--text-no {
@@ -2105,10 +2105,10 @@ a.vd-btn.disabled {
2105
2105
  .vd-btn--text-no:active, .vd-btn--text-no.vd-btn--active {
2106
2106
  color: var(--hs-color-fg-neutral-ondark-default);
2107
2107
  background-color: var(--hs-color-bg-no-strong);
2108
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2108
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2109
2109
  }
2110
2110
  .vd-btn--text-no:focus {
2111
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2111
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2112
2112
  }
2113
2113
 
2114
2114
  .vd-btn--go {
@@ -2124,10 +2124,10 @@ a.vd-btn.disabled {
2124
2124
  .vd-btn--go:active, .vd-btn--go.vd-btn--active {
2125
2125
  color: var(--hs-color-fg-neutral-ondark-default);
2126
2126
  background-color: var(--hs-color-bg-go-strong);
2127
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2127
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2128
2128
  }
2129
2129
  .vd-btn--go:focus {
2130
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2130
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2131
2131
  }
2132
2132
 
2133
2133
  .vd-btn--icon-go {
@@ -2144,10 +2144,10 @@ a.vd-btn.disabled {
2144
2144
  .vd-btn--icon-go:active, .vd-btn--icon-go.vd-btn--active {
2145
2145
  color: var(--hs-color-fg-neutral-ondark-default);
2146
2146
  background-color: var(--hs-color-bg-go-strong);
2147
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2147
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2148
2148
  }
2149
2149
  .vd-btn--icon-go:focus {
2150
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2150
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2151
2151
  }
2152
2152
 
2153
2153
  .vd-btn--text-go {
@@ -2163,10 +2163,10 @@ a.vd-btn.disabled {
2163
2163
  .vd-btn--text-go:active, .vd-btn--text-go.vd-btn--active {
2164
2164
  color: var(--hs-color-fg-neutral-ondark-default);
2165
2165
  background-color: var(--hs-color-bg-go-strong);
2166
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2166
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2167
2167
  }
2168
2168
  .vd-btn--text-go:focus {
2169
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2169
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2170
2170
  }
2171
2171
 
2172
2172
  .vd-btn--link {
@@ -2251,11 +2251,11 @@ a.vd-btn.disabled {
2251
2251
  }
2252
2252
  .vd-btn-panel:focus {
2253
2253
  border-color: var(--hs-color-fg-go-default);
2254
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2254
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2255
2255
  }
2256
2256
  .vd-btn-panel:hover {
2257
2257
  border-color: var(--hs-color-bg-go-soft);
2258
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2258
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2259
2259
  }
2260
2260
  .vd-btn-panel:active {
2261
2261
  background-color: rgba(var(--hs-color-bg-neutral-top), 0.2);
@@ -2266,7 +2266,7 @@ a.vd-btn.disabled {
2266
2266
  }
2267
2267
  .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
2268
2268
  border-color: var(--hs-color-bg-go-soft);
2269
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2269
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2270
2270
  }
2271
2271
  .vd-btn-panel--selected:active {
2272
2272
  border-color: var(--hs-color-bg-go-strong);
@@ -2543,7 +2543,7 @@ vd-carousel-frame {
2543
2543
  }
2544
2544
 
2545
2545
  .vd-checkbox-input:focus-visible + .vd-checkbox-tick {
2546
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2546
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2547
2547
  }
2548
2548
 
2549
2549
  .vd-checkbox-input:checked + .vd-checkbox-tick {
package/dist/vend-styles.css CHANGED
@@ -1950,10 +1950,10 @@ a.vd-btn.disabled {
1950
1950
  .vd-btn--do:active, .vd-btn--do.vd-btn--active {
1951
1951
  color: var(--hs-color-fg-neutral-ondark-default);
1952
1952
  background-color: var(--hs-color-bg-go-strong);
1953
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1953
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1954
1954
  }
1955
1955
  .vd-btn--do:focus {
1956
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1956
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1957
1957
  }
1958
1958
 
1959
1959
  .vd-btn--icon-do {
@@ -1970,10 +1970,10 @@ a.vd-btn.disabled {
1970
1970
  .vd-btn--icon-do:active, .vd-btn--icon-do.vd-btn--active {
1971
1971
  color: var(--hs-color-fg-neutral-ondark-default);
1972
1972
  background-color: var(--hs-color-bg-go-strong);
1973
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1973
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1974
1974
  }
1975
1975
  .vd-btn--icon-do:focus {
1976
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1976
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1977
1977
  }
1978
1978
 
1979
1979
  .vd-btn--text-do {
@@ -1989,10 +1989,10 @@ a.vd-btn.disabled {
1989
1989
  .vd-btn--text-do:active, .vd-btn--text-do.vd-btn--active {
1990
1990
  color: var(--hs-color-fg-neutral-ondark-default);
1991
1991
  background-color: var(--hs-color-bg-go-strong);
1992
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
1992
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1993
1993
  }
1994
1994
  .vd-btn--text-do:focus {
1995
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
1995
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1996
1996
  }
1997
1997
 
1998
1998
  .vd-btn--supplementary {
@@ -2008,10 +2008,10 @@ a.vd-btn.disabled {
2008
2008
  .vd-btn--supplementary:active, .vd-btn--supplementary.vd-btn--active {
2009
2009
  color: var(--hs-color-fg-neutral-ondark-default);
2010
2010
  background-color: var(--hs-color-bg-supplementary-strong);
2011
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2011
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2012
2012
  }
2013
2013
  .vd-btn--supplementary:focus {
2014
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2014
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2015
2015
  }
2016
2016
 
2017
2017
  .vd-btn--icon-supplementary {
@@ -2028,10 +2028,10 @@ a.vd-btn.disabled {
2028
2028
  .vd-btn--icon-supplementary:active, .vd-btn--icon-supplementary.vd-btn--active {
2029
2029
  color: var(--hs-color-fg-neutral-ondark-default);
2030
2030
  background-color: var(--hs-color-bg-supplementary-strong);
2031
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2031
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2032
2032
  }
2033
2033
  .vd-btn--icon-supplementary:focus {
2034
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2034
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2035
2035
  }
2036
2036
 
2037
2037
  .vd-btn--text-supplementary {
@@ -2047,10 +2047,10 @@ a.vd-btn.disabled {
2047
2047
  .vd-btn--text-supplementary:active, .vd-btn--text-supplementary.vd-btn--active {
2048
2048
  color: var(--hs-color-fg-neutral-ondark-default);
2049
2049
  background-color: var(--hs-color-bg-supplementary-strong);
2050
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
2050
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2051
2051
  }
2052
2052
  .vd-btn--text-supplementary:focus {
2053
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
2053
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2054
2054
  }
2055
2055
 
2056
2056
  .vd-btn--no {
@@ -2066,10 +2066,10 @@ a.vd-btn.disabled {
2066
2066
  .vd-btn--no:active, .vd-btn--no.vd-btn--active {
2067
2067
  color: var(--hs-color-fg-neutral-ondark-default);
2068
2068
  background-color: var(--hs-color-bg-no-strong);
2069
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2069
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2070
2070
  }
2071
2071
  .vd-btn--no:focus {
2072
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2072
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2073
2073
  }
2074
2074
 
2075
2075
  .vd-btn--icon-no {
@@ -2086,10 +2086,10 @@ a.vd-btn.disabled {
2086
2086
  .vd-btn--icon-no:active, .vd-btn--icon-no.vd-btn--active {
2087
2087
  color: var(--hs-color-fg-neutral-ondark-default);
2088
2088
  background-color: var(--hs-color-bg-no-strong);
2089
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2089
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2090
2090
  }
2091
2091
  .vd-btn--icon-no:focus {
2092
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2092
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2093
2093
  }
2094
2094
 
2095
2095
  .vd-btn--text-no {
@@ -2105,10 +2105,10 @@ a.vd-btn.disabled {
2105
2105
  .vd-btn--text-no:active, .vd-btn--text-no.vd-btn--active {
2106
2106
  color: var(--hs-color-fg-neutral-ondark-default);
2107
2107
  background-color: var(--hs-color-bg-no-strong);
2108
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
2108
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2109
2109
  }
2110
2110
  .vd-btn--text-no:focus {
2111
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
2111
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2112
2112
  }
2113
2113
 
2114
2114
  .vd-btn--go {
@@ -2124,10 +2124,10 @@ a.vd-btn.disabled {
2124
2124
  .vd-btn--go:active, .vd-btn--go.vd-btn--active {
2125
2125
  color: var(--hs-color-fg-neutral-ondark-default);
2126
2126
  background-color: var(--hs-color-bg-go-strong);
2127
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2127
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2128
2128
  }
2129
2129
  .vd-btn--go:focus {
2130
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2130
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2131
2131
  }
2132
2132
 
2133
2133
  .vd-btn--icon-go {
@@ -2144,10 +2144,10 @@ a.vd-btn.disabled {
2144
2144
  .vd-btn--icon-go:active, .vd-btn--icon-go.vd-btn--active {
2145
2145
  color: var(--hs-color-fg-neutral-ondark-default);
2146
2146
  background-color: var(--hs-color-bg-go-strong);
2147
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2147
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2148
2148
  }
2149
2149
  .vd-btn--icon-go:focus {
2150
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2150
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2151
2151
  }
2152
2152
 
2153
2153
  .vd-btn--text-go {
@@ -2163,10 +2163,10 @@ a.vd-btn.disabled {
2163
2163
  .vd-btn--text-go:active, .vd-btn--text-go.vd-btn--active {
2164
2164
  color: var(--hs-color-fg-neutral-ondark-default);
2165
2165
  background-color: var(--hs-color-bg-go-strong);
2166
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2166
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2167
2167
  }
2168
2168
  .vd-btn--text-go:focus {
2169
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2169
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2170
2170
  }
2171
2171
 
2172
2172
  .vd-btn--link {
@@ -2251,11 +2251,11 @@ a.vd-btn.disabled {
2251
2251
  }
2252
2252
  .vd-btn-panel:focus {
2253
2253
  border-color: var(--hs-color-fg-go-default);
2254
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2254
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2255
2255
  }
2256
2256
  .vd-btn-panel:hover {
2257
2257
  border-color: var(--hs-color-bg-go-soft);
2258
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2258
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2259
2259
  }
2260
2260
  .vd-btn-panel:active {
2261
2261
  background-color: rgba(var(--hs-color-bg-neutral-top), 0.2);
@@ -2266,7 +2266,7 @@ a.vd-btn.disabled {
2266
2266
  }
2267
2267
  .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
2268
2268
  border-color: var(--hs-color-bg-go-soft);
2269
- box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
2269
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2270
2270
  }
2271
2271
  .vd-btn-panel--selected:active {
2272
2272
  border-color: var(--hs-color-bg-go-strong);
@@ -2543,7 +2543,7 @@ vd-carousel-frame {
2543
2543
  }
2544
2544
 
2545
2545
  .vd-checkbox-input:focus-visible + .vd-checkbox-tick {
2546
- box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
2546
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2547
2547
  }
2548
2548
 
2549
2549
  .vd-checkbox-input:checked + .vd-checkbox-tick {
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@lightspeed/design-system-css","version":"29.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":"^29.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
1
+ {"name":"@lightspeed/design-system-css","version":"29.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":"^29.0.2"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  @mixin vd-btn-outline-shadow($_vd-colour-name) {
34
34
  $_vd-requested-color: hs-get-action-color(#{$_vd-colour-name}-rgb, bg);
35
35
 
36
- box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top), 0.8),
36
+ box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top-rgb), 0.8),
37
37
  0 0 $vd-shadow-blur #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, $vd-opacity),
38
38
  0 0 0 #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, 0.6);
39
39
  }
package/src/vend.ui/styles/global/colour/_colour-functions.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  /// @param {String} [$_vd-colour-theme=$vd-colour-theme] @deprecated
7
7
  /// @return {Colour<String>} - The retrieved colour for the element
8
8
  @function vd-colour($_vd-colour-element, $_vd-colour-theme: _no_arg_provided_) {
9
+ @warn "[DEPRECATED] The 'vd-colour' function is deprecated and should not be used. Use 'hs-color' instead with the new unified theme tokens.";
9
10
  @if ($_vd-colour-theme != _no_arg_provided_) {
10
11
  @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
11
12
  }
@@ -100,7 +101,7 @@
100
101
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-soft');
101
102
  } @else if (str-index($_supplied-color, darker) != null) {
102
103
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-strong');
103
- } @else if (str-index($_supplied-color, rbg) != null) {
104
+ } @else if (str-index($_supplied-color, rgb) != null) {
104
105
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default-rgb');
105
106
  } @else {
106
107
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default');