From c5ea385811db2fb5f708fd2cc0ab7ef27078b89e Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 12 Nov 2024 11:40:55 -0800 Subject: [PATCH] feat(colorwheel): s2 migration --- .changeset/giant-windows-smoke.md | 7 ++ components/colorwheel/index.css | 186 +++++++++++++++--------------- 2 files changed, 101 insertions(+), 92 deletions(-) create mode 100644 .changeset/giant-windows-smoke.md diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md new file mode 100644 index 00000000000..7dfab7765c9 --- /dev/null +++ b/.changeset/giant-windows-smoke.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/colorwheel": major +--- + +# colorwheel S2 migration + +This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function. diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index 6750face813..93207999839 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -10,126 +10,128 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ .spectrum-ColorWheel { - --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); - --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); - --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); - --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); + --spectrum-colorwheel-width: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width); + --spectrum-colorwheel-height: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); + --spectrum-colorwheel-border-opacity: 0.1; + --spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); + --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); + --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); + --spectrum-colorwheel-colorarea-margin: var(--spectrum-color-wheel-color-area-margin); + --spectrum-colorwheel-colorhandle-position: calc((var(--spectrum-colorwheel-width) / 2) - (var(--spectrum-colorwheel-track-width) / 2)); } /* Windows High Contrast Mode */ @media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; - } - - .spectrum-ColorWheel { - forced-color-adjust: none; - } + .spectrum-ColorWheel { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + } + + .spectrum-ColorWheel { + forced-color-adjust: none; + } } .spectrum-ColorWheel { - position: relative; - display: block; - min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width)); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - user-select: none; - cursor: default; - - &.is-focused { - z-index: 2; - } - - /* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */ - --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); - --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); - - &.is-disabled { - pointer-events: none; - } - - &.is-dragged { - /* Be on top when dragging so loupe can overlap */ - z-index: 2; - } + position: relative; + display: block; + min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-colorwheel-min-width)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + user-select: none; + cursor: default; + + &.is-focused { + z-index: 2; + } + + /* --track-width and --border-width to be used with JS in calculating the clip-path paths and colorarea-container-size */ + --track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); + --border-width: var(--mod-colorwheel-border-width, var(--spectrum-colorwheel-border-width)); + + &.is-disabled { + pointer-events: none; + } + + &.is-dragged { + /* Be on top when dragging so loupe can overlap */ + z-index: 2; + } } .spectrum-ColorWheel-inner { - display: flex; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-start: 0; - inset-block-end: 0; - inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); - block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); - margin: auto; + display: flex; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; + inline-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + block-size: var(--mod-colorwheel-colorarea-container-size, var(--spectrum-colorwheel-colorarea-container-size)); + margin: auto; } .spectrum-ColorWheel-colorarea-container { - block-size: auto; - inline-size: 100%; - display: flex; - align-items: center; - justify-content: center; - margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); + block-size: auto; + inline-size: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-colorwheel-colorarea-margin)); } .spectrum-ColorWheel-slider { - opacity: 0; - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; - z-index: 0; - margin: 0; - pointer-events: none; + opacity: 0; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; + z-index: 0; + margin: 0; + pointer-events: none; } .spectrum-ColorWheel-handle { - transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0); - inset-block-start: 50%; - inset-inline: 50% + transform: translate(var(--spectrum-colorwheel-colorhandle-position), 0); + inset-block-start: 50%; + inset-inline: 50%; } .spectrum-ColorWheel-ColorArea-handle { - inset-block-start: 0; - inset-inline-end: 0; + inset-block-start: 0; + inset-inline-end: 0; - &:dir(rtl) { - inset-inline-start: 0; - } + &:dir(rtl) { + inset-inline-start: 0; + } } /* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */ .spectrum-ColorWheel-border { - position: relative; - background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); - inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); - block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); - clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); - - &.is-disabled { - background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); - } + position: relative; + background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + inline-size: var(--mod-colorwheel-width, var(--spectrum-colorwheel-width)); + block-size: var(--mod-colorwheel-height, var(--spectrum-colorwheel-height)); + clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); + + &.is-disabled { + background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } } .spectrum-ColorWheel-wheel { - position: absolute; - background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red); - inset-block: var(--spectrum-colorwheel-border-width); - inset-inline: var(--spectrum-colorwheel-border-width); - clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); - - &.is-disabled { - pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); - } + position: absolute; + background: conic-gradient(from 90deg, red, rgb(255, 128, 0), rgb(255, 255, 0), rgb(128, 255, 0), rgb(0, 255, 0), rgb(0, 255, 128), rgb(0, 255, 255), rgb(0, 128, 255), rgb(0, 0, 255), rgb(128, 0, 255), rgb(255, 0, 255), rgb(255, 0, 128), red); + inset-block: var(--spectrum-colorwheel-border-width); + inset-inline: var(--spectrum-colorwheel-border-width); + clip-path: path(evenodd, var(--mod-colorwheel-path, var(--spectrum-colorwheel-path))); + + &.is-disabled { + pointer-events: none; + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } }