@sanity/color-input 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/color-input",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "description": "Color input",
   "keywords": [
     "sanity",
@@ -56,46 +56,46 @@
   "dependencies": {
     "@sanity/icons": "^2.0.0",
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.0.0",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^2.1.0",
-    "@sanity/plugin-kit": "^3.1.1",
-    "@sanity/semantic-release-preset": "^4.0.0",
-    "@types/react": "^18.0.26",
-    "@types/react-color": "^2.17.6",
-    "@types/styled-components": "^5.1.25",
-    "@types/tinycolor2": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^8.6.0",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@sanity/pkg-utils": "^2.4.10",
+    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/semantic-release-preset": "^4.1.7",
+    "@types/react": "^18.2.65",
+    "@types/react-color": "^2.17.11",
+    "@types/styled-components": "^5.1.34",
+    "@types/tinycolor2": "^1.4.6",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.1",
-    "prettier-plugin-packagejson": "^2.3.0",
+    "npm-run-all2": "^5.0.0",
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.1.4",
-    "semantic-release": "^21.0.0",
-    "styled-components": "^5.3.6",
-    "typescript": "^4.9.4"
+    "rimraf": "^5.0.0",
+    "sanity": "^3.32.0",
+    "semantic-release": "^21.1.2",
+    "styled-components": "^5.0 || ^6.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
+    "@sanity/ui": "^1.0 || ^2.0",
     "react": "^18",
-    "sanity": "^3",
-    "styled-components": "^5.2"
+    "sanity": "^3.23.0",
+    "styled-components": "^5.0 || ^6.0"
   },
   "engines": {
     "node": ">=14"

package/src/ColorList.tsx

@@ -19,6 +19,8 @@ const ColorBoxContainer = styled.div`
 `
 
 const ColorBox = styled.div`
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
   content: '';
   position: absolute;
   inset: 0;

package/src/ColorPicker.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'
 import {Color, CustomPicker} from 'react-color'
 import {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'
@@ -111,8 +110,8 @@ const ColorPickerInner = (props: ColorPickerProps) => {
                         {rgb?.r} {rgb?.g} {rgb?.b}
                       </Text>
                       <Text size={1}>
-                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)} {Math.round(hsl?.s ?? 0)}%{' '}
-                        {Math.round(hsl?.l ?? 0)}
+                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}
+                        {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%
                       </Text>
                     </Inline>
                   </Stack>