@lightspeed/design-system-css 29.0.0 → 29.0.1

Sign up to get free protection for your applications and to get access to all the features.
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 +1 -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.1","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.1"},"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
@@ -100,7 +100,7 @@
100
100
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-soft');
101
101
  } @else if (str-index($_supplied-color, darker) != null) {
102
102
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-strong');
103
- } @else if (str-index($_supplied-color, rbg) != null) {
103
+ } @else if (str-index($_supplied-color, rgb) != null) {
104
104
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default-rgb');
105
105
  } @else {
106
106
  @return hs-color('#{$_fgOrBg}-#{$_hs-color}-default');