@sanity/ui 2.0.16 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.16",
+  "version": "2.1.1",
   "keywords": [
     "sanity",
     "ui",
@@ -120,36 +120,36 @@
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^5.1.11",
+    "@sanity/pkg-utils": "^6.0.2",
     "@sanity/semantic-release-preset": "^4.1.7",
     "@sanity/ui-workshop": "^2.0.11",
-    "@storybook/addon-a11y": "^8.0.5",
-    "@storybook/addon-docs": "^8.0.5",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
-    "@storybook/addon-storysource": "^8.0.5",
-    "@storybook/addon-themes": "^8.0.5",
-    "@storybook/blocks": "^8.0.5",
+    "@storybook/addon-a11y": "^8.0.6",
+    "@storybook/addon-docs": "^8.0.6",
+    "@storybook/addon-essentials": "^8.0.6",
+    "@storybook/addon-interactions": "^8.0.6",
+    "@storybook/addon-links": "^8.0.6",
+    "@storybook/addon-storysource": "^8.0.6",
+    "@storybook/addon-themes": "^8.0.6",
+    "@storybook/blocks": "^8.0.6",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^8.0.5",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-vite": "^8.0.5",
+    "@storybook/manager-api": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.0.6",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.5",
+    "@storybook/theming": "^8.0.6",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^14.3.0",
     "@types/jest": "^29.5.12",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.5.9",
-    "@types/react": "^18.2.74",
+    "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@types/react-is": "^18.2.4",
     "@types/refractor": "^3.4.1",
     "@types/testing-library__jest-dom": "^5.14.9",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@typescript-eslint/eslint-plugin": "^7.6.0",
+    "@typescript-eslint/parser": "^7.6.0",
     "commitizen": "^4.3.0",
     "cypress": "^13.7.2",
     "cypress-real-events": "^1.12.0",
@@ -180,7 +180,7 @@
     "rimraf": "^5.0.1",
     "semantic-release": "^23.0.7",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^8.0.5",
+    "storybook": "^8.0.6",
     "styled-components": "^6.1.8",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.4.2",
@@ -200,5 +200,8 @@
   "publishConfig": {
     "access": "public",
     "provenance": true
+  },
+  "esm.sh": {
+    "bundle": false
   }
 }

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -0,0 +1,73 @@
+import {SquareIcon} from '@sanity/icons'
+import {Card} from '../../card/card'
+import {Container} from '../../container/container'
+import {Grid} from '../../grid/grid'
+import {Stack} from '../../stack/stack'
+import {Text} from '../../text/text'
+import {Button, ButtonProps} from '../button'
+
+const GAP = 4
+const COLUMNS = 3
+
+const DEFAULT_PROPS: ButtonProps = {
+  icon: SquareIcon,
+  iconRight: SquareIcon,
+}
+
+function Layout() {
+  return (
+    <Container width={2}>
+      <Stack space={4}>
+        <Grid columns={COLUMNS} gap={GAP}>
+          <Text size={1} weight="semibold">
+            Default
+          </Text>
+          <Text size={1} weight="semibold">
+            Ghost
+          </Text>
+          <Text size={1} weight="semibold">
+            Bleed
+          </Text>
+        </Grid>
+
+        <Stack space={2}>
+          <Grid columns={COLUMNS} gap={GAP}>
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
+            </Stack>
+
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
+            </Stack>
+
+            <Stack space={2}>
+              <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
+              <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
+              <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
+            </Stack>
+          </Grid>
+        </Stack>
+      </Stack>
+    </Container>
+  )
+}
+
+export default function DisabledButtonStory() {
+  return (
+    <Stack>
+      <Stack space={4}>
+        <Card padding={5} scheme="light">
+          <Layout />
+        </Card>
+
+        <Card padding={5} scheme="dark">
+          <Layout />
+        </Card>
+      </Stack>
+    </Stack>
+  )
+}

package/src/core/primitives/button/__workshop__/index.ts

@@ -50,5 +50,10 @@ export default defineScope({
       title: 'Custom icons',
       component: lazy(() => import('./customIcons')),
     },
+    {
+      name: 'disabled',
+      title: 'Disabled',
+      component: lazy(() => import('./disabled')),
+    },
   ],
 })

package/src/theme/defaults/colorTokens.ts

@@ -155,7 +155,12 @@ export const defaultColorTokens: ThemeColorTokens = {
               icon: ['white', 'black'],
             },
           },
-          bg: ['200', '800'],
+          bg: ['300', '600'],
+          fg: ['300', '600'],
+          muted: {
+            bg: ['300', '600'],
+            fg: ['300', '600'],
+          },
           kbd: {
             bg: ['black', 'white'],
             fg: ['white', 'black'],
@@ -256,8 +261,11 @@ export const defaultColorTokens: ThemeColorTokens = {
             bg: ['50', '950'],
             fg: ['200', '800'],
           },
-          fg: ['200', '800'],
-          icon: ['200', '800'],
+          fg: ['400', '600'],
+          icon: ['300', '700'],
+          muted: {
+            fg: ['400', '600'],
+          },
           kbd: {
             bg: ['white', 'black'],
             fg: ['200', '800'],
@@ -266,9 +274,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           link: {
             fg: ['200', '800'],
           },
-          muted: {
-            fg: ['200', '800'],
-          },
         },
       },
       positive: {
@@ -354,8 +359,11 @@ export const defaultColorTokens: ThemeColorTokens = {
             bg: ['50', '950'],
             fg: ['200', '800'],
           },
-          fg: ['200', '800'],
-          icon: ['200', '800'],
+          fg: ['400', '600'],
+          icon: ['300', '700'],
+          muted: {
+            fg: ['400', '600'],
+          },
           kbd: {
             bg: ['white', 'black'],
             fg: ['200', '800'],
@@ -364,9 +372,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           link: {
             fg: ['200', '800'],
           },
-          muted: {
-            fg: ['200', '800'],
-          },
         },
       },
     },