@sanity/ui 2.0.15 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/theme.esm.js +16 -11
  2. package/dist/theme.esm.js.map +1 -1
  3. package/dist/theme.js +16 -11
  4. package/dist/theme.js.map +1 -1
  5. package/dist/theme.mjs +16 -11
  6. package/dist/theme.mjs.map +1 -1
  7. package/package.json +18 -18
  8. package/src/core/primitives/button/__workshop__/disabled.tsx +73 -0
  9. package/src/core/primitives/button/__workshop__/index.ts +5 -0
  10. package/src/theme/defaults/colorTokens.ts +16 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sanity/ui",
3
- "version": "2.0.15",
3
+ "version": "2.1.0",
4
4
  "keywords": [
5
5
  "sanity",
6
6
  "ui",
@@ -106,8 +106,8 @@
106
106
  },
107
107
  "dependencies": {
108
108
  "@floating-ui/react-dom": "^2.0.8",
109
- "@sanity/color": "^3.0.4",
110
- "@sanity/icons": "^2.11.6",
109
+ "@sanity/color": "^3.0.5",
110
+ "@sanity/icons": "^2.11.7",
111
111
  "csstype": "^3.1.3",
112
112
  "framer-motion": "11.0.8",
113
113
  "react-refractor": "^2.1.7"
@@ -120,23 +120,23 @@
120
120
  "@commitlint/cli": "^19.2.1",
121
121
  "@commitlint/config-conventional": "^19.1.0",
122
122
  "@juggle/resize-observer": "^3.4.0",
123
- "@sanity/pkg-utils": "^5.1.11",
123
+ "@sanity/pkg-utils": "^5.1.12",
124
124
  "@sanity/semantic-release-preset": "^4.1.7",
125
- "@sanity/ui-workshop": "^2.0.10",
126
- "@storybook/addon-a11y": "^8.0.5",
127
- "@storybook/addon-docs": "^8.0.5",
128
- "@storybook/addon-essentials": "^8.0.5",
129
- "@storybook/addon-interactions": "^8.0.5",
130
- "@storybook/addon-links": "^8.0.5",
131
- "@storybook/addon-storysource": "^8.0.5",
132
- "@storybook/addon-themes": "^8.0.5",
133
- "@storybook/blocks": "^8.0.5",
125
+ "@sanity/ui-workshop": "^2.0.11",
126
+ "@storybook/addon-a11y": "^8.0.6",
127
+ "@storybook/addon-docs": "^8.0.6",
128
+ "@storybook/addon-essentials": "^8.0.6",
129
+ "@storybook/addon-interactions": "^8.0.6",
130
+ "@storybook/addon-links": "^8.0.6",
131
+ "@storybook/addon-storysource": "^8.0.6",
132
+ "@storybook/addon-themes": "^8.0.6",
133
+ "@storybook/blocks": "^8.0.6",
134
134
  "@storybook/jest": "^0.2.3",
135
- "@storybook/manager-api": "^8.0.5",
136
- "@storybook/react": "^8.0.5",
137
- "@storybook/react-vite": "^8.0.5",
135
+ "@storybook/manager-api": "^8.0.6",
136
+ "@storybook/react": "^8.0.6",
137
+ "@storybook/react-vite": "^8.0.6",
138
138
  "@storybook/testing-library": "^0.2.2",
139
- "@storybook/theming": "^8.0.5",
139
+ "@storybook/theming": "^8.0.6",
140
140
  "@testing-library/dom": "^9.3.4",
141
141
  "@testing-library/jest-dom": "^5.17.0",
142
142
  "@testing-library/react": "^14.2.2",
@@ -180,7 +180,7 @@
180
180
  "rimraf": "^5.0.1",
181
181
  "semantic-release": "^23.0.7",
182
182
  "start-server-and-test": "^2.0.3",
183
- "storybook": "^8.0.5",
183
+ "storybook": "^8.0.6",
184
184
  "styled-components": "^6.1.8",
185
185
  "tsconfig-paths": "^4.2.0",
186
186
  "typescript": "5.4.2",
package/src/core/primitives/button/__workshop__/disabled.tsx ADDED
@@ -0,0 +1,73 @@
1
+ import {SquareIcon} from '@sanity/icons'
2
+ import {Card} from '../../card/card'
3
+ import {Container} from '../../container/container'
4
+ import {Grid} from '../../grid/grid'
5
+ import {Stack} from '../../stack/stack'
6
+ import {Text} from '../../text/text'
7
+ import {Button, ButtonProps} from '../button'
8
+
9
+ const GAP = 4
10
+ const COLUMNS = 3
11
+
12
+ const DEFAULT_PROPS: ButtonProps = {
13
+ icon: SquareIcon,
14
+ iconRight: SquareIcon,
15
+ }
16
+
17
+ function Layout() {
18
+ return (
19
+ <Container width={2}>
20
+ <Stack space={4}>
21
+ <Grid columns={COLUMNS} gap={GAP}>
22
+ <Text size={1} weight="semibold">
23
+ Default
24
+ </Text>
25
+ <Text size={1} weight="semibold">
26
+ Ghost
27
+ </Text>
28
+ <Text size={1} weight="semibold">
29
+ Bleed
30
+ </Text>
31
+ </Grid>
32
+
33
+ <Stack space={2}>
34
+ <Grid columns={COLUMNS} gap={GAP}>
35
+ <Stack space={2}>
36
+ <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
37
+ <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
38
+ <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
39
+ </Stack>
40
+
41
+ <Stack space={2}>
42
+ <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
43
+ <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
44
+ <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
45
+ </Stack>
46
+
47
+ <Stack space={2}>
48
+ <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
49
+ <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
50
+ <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
51
+ </Stack>
52
+ </Grid>
53
+ </Stack>
54
+ </Stack>
55
+ </Container>
56
+ )
57
+ }
58
+
59
+ export default function DisabledButtonStory() {
60
+ return (
61
+ <Stack>
62
+ <Stack space={4}>
63
+ <Card padding={5} scheme="light">
64
+ <Layout />
65
+ </Card>
66
+
67
+ <Card padding={5} scheme="dark">
68
+ <Layout />
69
+ </Card>
70
+ </Stack>
71
+ </Stack>
72
+ )
73
+ }
package/src/core/primitives/button/__workshop__/index.ts CHANGED
@@ -50,5 +50,10 @@ export default defineScope({
50
50
  title: 'Custom icons',
51
51
  component: lazy(() => import('./customIcons')),
52
52
  },
53
+ {
54
+ name: 'disabled',
55
+ title: 'Disabled',
56
+ component: lazy(() => import('./disabled')),
57
+ },
53
58
  ],
54
59
  })
package/src/theme/defaults/colorTokens.ts CHANGED
@@ -155,7 +155,12 @@ export const defaultColorTokens: ThemeColorTokens = {
155
155
  icon: ['white', 'black'],
156
156
  },
157
157
  },
158
- bg: ['200', '800'],
158
+ bg: ['300', '600'],
159
+ fg: ['300', '600'],
160
+ muted: {
161
+ bg: ['300', '600'],
162
+ fg: ['300', '600'],
163
+ },
159
164
  kbd: {
160
165
  bg: ['black', 'white'],
161
166
  fg: ['white', 'black'],
@@ -256,8 +261,11 @@ export const defaultColorTokens: ThemeColorTokens = {
256
261
  bg: ['50', '950'],
257
262
  fg: ['200', '800'],
258
263
  },
259
- fg: ['200', '800'],
260
- icon: ['200', '800'],
264
+ fg: ['400', '600'],
265
+ icon: ['300', '700'],
266
+ muted: {
267
+ fg: ['400', '600'],
268
+ },
261
269
  kbd: {
262
270
  bg: ['white', 'black'],
263
271
  fg: ['200', '800'],
@@ -266,9 +274,6 @@ export const defaultColorTokens: ThemeColorTokens = {
266
274
  link: {
267
275
  fg: ['200', '800'],
268
276
  },
269
- muted: {
270
- fg: ['200', '800'],
271
- },
272
277
  },
273
278
  },
274
279
  positive: {
@@ -354,8 +359,11 @@ export const defaultColorTokens: ThemeColorTokens = {
354
359
  bg: ['50', '950'],
355
360
  fg: ['200', '800'],
356
361
  },
357
- fg: ['200', '800'],
358
- icon: ['200', '800'],
362
+ fg: ['400', '600'],
363
+ icon: ['300', '700'],
364
+ muted: {
365
+ fg: ['400', '600'],
366
+ },
359
367
  kbd: {
360
368
  bg: ['white', 'black'],
361
369
  fg: ['200', '800'],
@@ -364,9 +372,6 @@ export const defaultColorTokens: ThemeColorTokens = {
364
372
  link: {
365
373
  fg: ['200', '800'],
366
374
  },
367
- muted: {
368
- fg: ['200', '800'],
369
- },
370
375
  },
371
376
  },
372
377
  },