Color area

packages/@adobe/spectrum-css-temp/components/colorarea/index.css

@@ -0,0 +1,71 @@
+.spectrum-ColorArea {
+  position: relative;
+  display: inline-block;
+  inline-size: var(--spectrum-colorarea-default-width);
+  block-size: var(--spectrum-colorarea-default-height);
+  min-inline-size: var(--spectrum-colorarea-min-width);
+  min-block-size: var(--spectrum-colorarea-min-height);
+
+  border-radius: var(--spectrum-colorarea-border-radius);
+
+  cursor: default;
+
+  user-select: none;
+
+  &.is-focused,
+  &.focus-ring {
+    z-index: 2;
+
+    .spectrum-ColorArea-handle {
+      /* Bigger handle when focused */
+      width: calc(var(--spectrum-colorhandle-size) * 2);
+      height: calc(var(--spectrum-colorhandle-size) * 2);
+
+      margin-left: calc(-1 * var(--spectrum-colorhandle-size));
+      margin-top: calc(-1 * var(--spectrum-colorhandle-size));
+    }
+  }
+
+  &:focus-within {
+    z-index: 2;
+  }
+
+  &.is-disabled {
+    pointer-events: none;
+  }
+
+  /* the floating inset box shadow must be a separate element since <canvas> won't take it */
+  &:before {
+    content: '';
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: var(--spectrum-colorarea-border-radius);
+  }
+}
+
+.spectrum-ColorArea-handle {
+  left: 0;
+  top: 0;
+}
+
+.spectrum-ColorArea-gradient {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--spectrum-colorarea-border-radius);
+}
+
+.spectrum-ColorArea-slider {
+  opacity: 0.0001;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  margin: 0;
+  pointer-events: none;
+}

packages/@adobe/spectrum-css-temp/components/colorarea/skin.css

@@ -0,0 +1,36 @@
+.spectrum-ColorArea {
+    &:before {
+      box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color);
+    }
+  }
+  .spectrum-ColorArea-gradient {
+    forced-color-adjust: none;
+  }
+  .spectrum-ColorHandle-color {
+    forced-color-adjust: none;
+  }
+
+  .spectrum-ColorArea {
+    &.is-disabled {
+      background: var(--spectrum-colorarea-fill-color-disabled);
+
+      &:before {
+        box-shadow: inset 0 0 0 var(--spectrum-colorarea-border-size) var(--spectrum-colorarea-border-color-disabled);
+      }
+
+      .spectrum-ColorArea-gradient {
+        display: none;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    .spectrum-ColorArea {
+      --spectrum-colorarea-fill-color-disabled : GrayText;
+    }
+    .spectrum-ColorArea {
+      &.is-disabled {
+        forced-color-adjust: none;
+      }
+    }
+  }

packages/@adobe/spectrum-css-temp/components/colorarea/vars.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2021 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.
+ */
+
+@import './index.css';
+@import './skin.css';

packages/@react-aria/color/intl/ar-AE.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "شريط تمرير ثنائي الأبعاد",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/bg-BG.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D плъзгач",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/cs-CZ.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D posuvník",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/da-DK.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-skyder",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/de-DE.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-Schieberegler",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/el-GR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Ρυθμιστικό 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/en-US.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D slider",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/es-ES.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Control deslizante en 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/et-EE.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-liugur",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/fi-FI.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-liukusäädin",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/fr-FR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Curseur 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/he-IL.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "מחוון דו-ממדי",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/hr-HR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D kliznik",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/hu-HU.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D csúszka",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/it-IT.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Dispositivo di scorrimento 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/ja-JP.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D スライダー",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/ko-KR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D 슬라이더",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/lt-LT.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D slankiklis",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/lv-LV.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Plaknes slīdnis",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/nb-NO.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-glidebryter",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/nl-NL.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-schuifregelaar",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/pl-PL.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Suwak 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/pt-BR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Controle deslizante 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/pt-PT.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Controlo de deslize 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/ro-RO.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Cursor 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/ru-RU.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Двумерный ползунок",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/sk-SK.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D jazdec",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/sl-SI.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-drsnik",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/sr-SP.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D клизач",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/sv-SE.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D-reglage",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/tr-TR.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2B slayt gösterisi",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/uk-UA.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "Повзунок 2D",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/zh-CN.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D 滑块",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/intl/zh-TW.json

@@ -0,0 +1,5 @@
+{
+  "twoDimensionalSlider": "2D 滑桿",
+  "colorNameAndValue": "{name}: {value}",
+  "x/y": "{x} / {y}"
+}

packages/@react-aria/color/package.json

@@ -18,16 +18,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/spinbutton": "^3.0.3",
-    "@react-aria/textfield": "^3.5.2",
-    "@react-aria/i18n": "^3.3.6",
-    "@react-aria/interactions": "^3.8.1",
-    "@react-aria/slider": "^3.0.5",
-    "@react-aria/utils": "^3.11.2",
+    "@internationalized/message": "^3.0.2",
+    "@react-aria/i18n": "^3.3.3",
+    "@react-aria/interactions": "^3.7.0",
+    "@react-aria/slider": "^3.0.3",
+    "@react-aria/spinbutton": "^3.0.1",
+    "@react-aria/textfield": "^3.5.0",
+    "@react-aria/utils": "^3.11.0",
+    "@react-aria/visually-hidden": "^3.2.3",
     "@react-stately/color": "3.0.0-beta.7",
     "@react-types/color": "3.0.0-beta.5",
-    "@react-types/shared": "^3.11.1",
-    "@react-types/slider": "^3.0.4"
+    "@react-types/shared": "^3.10.1",
+    "@react-types/slider": "^3.0.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1",

packages/@react-aria/color/src/index.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+export * from './useColorArea';
 export * from './useColorSlider';
 export * from './useColorWheel';
 export * from './useColorField';