feat(slider): update spectrum css input

adobe · Jan 6, 2021 · 21ebe36 · 21ebe36
1 parent 7d83331
commit 21ebe36
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/packages/slider/package.json b/packages/slider/package.json
@@ -49,7 +49,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/slider": "^3.0.0-beta.4"
+        "@spectrum-css/slider": "^3.0.0-beta.5"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",

diff --git a/packages/slider/src/Slider.ts b/packages/slider/src/Slider.ts
@@ -21,7 +21,6 @@ import {
     ifDefined,
 } from '@spectrum-web-components/base';
 
-import spectrumSliderStyles from './spectrum-slider.css.js';
 import sliderStyles from './slider.css.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { StyleInfo } from 'lit-html/directives/style-map';
@@ -30,7 +29,7 @@ export const variants = ['filled', 'ramp', 'range', 'tick'];
 
 export class Slider extends Focusable {
     public static get styles(): CSSResultArray {
-        return [sliderStyles, spectrumSliderStyles];
+        return [sliderStyles];
     }
 
     @property()

diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
@@ -10,6 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+@import './spectrum-slider.css';
+
 /* 
  * Removes blue outline from :host when it is being focused.
  * This situation is not addressed in spectrum-css because the slider element itself
@@ -52,6 +54,10 @@ governing permissions and limitations under the License.
  * waits to be addressed at the Spectrum CSS level.
  */
 
+.track:before {
+    background-size: var(--spectrum-slider-track-background-size) !important;
+}
+
 :host([dir='ltr']) #track-right:before {
     background-position: 100%;
 }
@@ -60,8 +66,11 @@ governing permissions and limitations under the License.
     background-position: 100%;
 }
 
-.track:before {
-    background-size: var(--spectrum-slider-track-background-size) !important;
+:host([dir='ltr']) .track:before {
+    background: var(
+        --spectrum-slider-track-color,
+        var(--spectrum-global-color-gray-300)
+    );
 }
 
 :host([dir='rtl']) .track:before {
@@ -74,17 +83,3 @@ governing permissions and limitations under the License.
         )
     );
 }
-
-/* 
- * Placeholder gradient for color variant with alpha on. In the long run, the gradient
- * should be produced programatically 
-*/
-:host([has-alpha][variant='color']) {
-    & .track {
-        background: linear-gradient(
-            to right,
-            rgba(38, 128, 235, 0.5),
-            rgb(9, 90, 186)
-        );
-    }
-}