feat(slider)!: slider core tokens

components/slider/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');

components/slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrum-css/slider",
-  "version": "3.1.17",
+  "version": "4.0.0-beta.5",
   "description": "The Spectrum CSS slider component",
   "license": "Apache-2.0",
   "author": "Adobe",
@@ -18,11 +18,13 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/stepper": "^4.0.1",
+    "@spectrum-css/tokens": "^7.6.0"
   },
   "devDependencies": {
-    "@spectrum-css/component-builder": "^4.0.3",
-    "@spectrum-css/vars": "^8.0.5",
+    "@spectrum-css/component-builder-simple": "^2.0.0",
+    "@spectrum-css/stepper": "^4.0.1",
+    "@spectrum-css/tokens": "^7.6.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {

components/slider/stories/slider.stories.js

@@ -159,3 +159,12 @@ Disabled.args = {
   ...Default.args,
   isDisabled: true,
 };
+
+export const Gradient = Template.bind({});
+Gradient.args = {
+  ...Default.args,
+  style: {
+    "--spectrum-slider-track-color": "linear-gradient(to right, red, green 100%)",
+    "--spectrum-slider-track-color-rtl": "linear-gradient(to left, red, green 100%)"
+  }
+}

components/slider/stories/template.js

@@ -6,7 +6,6 @@ import { ifDefined } from "lit-html/directives/if-defined.js";
 import { useArgs, useGlobals } from "@storybook/client-api";
 
 import "../index.css";
-import "../skin.css";
 
 export const Template = ({
   rootClass = "spectrum-Slider",
@@ -16,11 +15,12 @@ export const Template = ({
   step = 2,
   values = [],
   variant,
-  fillColor,
+  fillColor = "rgb(213, 213, 213)",
   showTicks = false,
   isDisabled = false,
   isFocused = false,
   customClasses = [],
+  style = {},
   id,
   // ...globals
 }) => {
@@ -52,6 +52,7 @@ export const Template = ({
         style=${ifDefined(styleMap({
           [rtl ? 'right' : 'left']: position ? `${position}%` : undefined,
           width: width ? `${width}%` : undefined,
+          ...style
         }))}
       ></div>`;
   };
@@ -107,10 +108,10 @@ export const Template = ({
         ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
       })}
       id=${ifDefined(id)}
-      style=${ifDefined(styleMap({
+      style=${styleMap({
         maxWidth: `var(--spectrum-global-dimension-size-3000)`,
-        ['--spectrum-slider-m-track-fill-color']: fillColor,
-      }))}
+        ['--spectrum-slider-track-color']: fillColor,
+      })}
       role=${ifDefined(values.length > 1 ? "group" : undefined)}
       aria-labelledby=${ifDefined(label && id ? `${id}-label` : undefined)}>
 

components/slider/themes/express.css

@@ -0,0 +1,35 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: express) {
+    .spectrum-Slider {
+
+        --spectrum-slider-margin-top-offset: -6px;
+        --spectrum-slider-track-color: var(--spectrum-gray-200);
+        --spectrum-slider-track-fill-color: var(--spectrum-gray-600);
+        --spectrum-slider-ramp-track-color: var(--spectrum-gray-300);
+        --spectrum-slider-ramp-track-color-disabled:  var(--spectrum-gray-200);
+
+        --spectrum-slider-handle-background-color: var(--spectrum-gray-50);
+        --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50);
+        --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50);
+        --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50);
+        --spectrum-slider-handle-border-color: var(--spectrum-gray-800);
+        --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50);
+
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-200);
+
+        --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900);
+        --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900);
+        --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900);
+        --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+    }
+}

components/slider/themes/spectrum.css

@@ -0,0 +1,37 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@container (--system: spectrum) {
+    .spectrum-Slider {
+
+
+        --spectrum-slider-margin-top-offset: 0px;
+
+        --spectrum-slider-track-color: var(--spectrum-gray-300);
+        --spectrum-slider-track-fill-color: var(--spectrum-gray-700);
+        --spectrum-slider-ramp-track-color: var(--spectrum-gray-400);
+        --spectrum-slider-ramp-track-color-disabled:  var(--spectrum-gray-200);
+
+        --spectrum-slider-handle-background-color: transparent;
+        --spectrum-slider-handle-background-color-disabled: transparent;
+        --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100);
+        --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100);
+        --spectrum-slider-handle-border-color: var(--spectrum-gray-700);
+        --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100);
+
+        --spectrum-slider-tick-mark-color: var(--spectrum-gray-300);
+
+        --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800);
+        --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800);
+        --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800);
+        --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color);
+    }
+}

components/tokens/custom-spectrum/custom-large-vars.css

@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
 
   --spectrum-slider-tick-mark-height: 13px;
   --spectrum-slider-ramp-track-height: 20px;
+  --spectrum-slider-label-margin-block-end: 10px;
 
   --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0";
   --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0";
@@ -45,4 +46,8 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-checkmark-width-extra-large: 16px;
 
   --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
+  --spectrum-slider-label-margin-block-end-small: -6px;
+  --spectrum-slider-label-margin-block-end-medium: -10px;
+  --spectrum-slider-label-margin-block-end-large: -14px;
+  --spectrum-slider-label-margin-block-end-extra-large: -17px;
 }

components/tokens/custom-spectrum/custom-medium-vars.css

@@ -45,4 +45,9 @@ governing permissions and limitations under the License.
   --spectrum-menu-item-checkmark-width-extra-large: 14px;
 
   --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
+  --spectrum-slider-label-margin-block-end: 8px;
+  --spectrum-slider-label-margin-block-end-small: -5px;
+  --spectrum-slider-label-margin-block-end-medium: -8px;
+  --spectrum-slider-label-margin-block-end-large: -11px;
+  --spectrum-slider-label-margin-block-end-extra-large: -14px;
 }