diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md new file mode 100644 index 0000000000..ca1191d684 --- /dev/null +++ b/.changeset/serious-clouds-jam.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/colorslider": minor +--- + +# S2 colorslider migration + +This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec. + +| Before | After | +| ------------------------- | -------------------------- | +| `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` | diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 95889bd99a..6675a0f505 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -1,10 +1,10 @@ /*! - * Copyright 2023 Adobe. All rights reserved. - * + * Copyright 2024 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 - * + * * 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 @@ -16,7 +16,7 @@ --spectrum-color-slider-handle-margin-block: var(--spectrum-component-top-to-text-75); /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-rgba: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); /* Checkerboard pattern */ --spectrum-color-slider-checkerboard-size: var(--spectrum-opacity-checkerboard-square-size); @@ -74,11 +74,6 @@ inset-inline-start: 50%; inset-block-start: 0; } - - .spectrum-ColorSlider-handle { - inset-inline-start: 50%; - inset-block-start: 0; - } } .spectrum-ColorSlider-handle {