Skip to content

Commit 834ad11

Browse files
hirotomoyamadahirotomoyamada
committed
feat: added default semantic tokens
1 parent ce7552c commit 834ad11

22 files changed

+472
-873
lines changed

‎.changeset/many-years-relate.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@yamada-ui/theme': minor
3+
---
4+
5+
Added default semantic tokens.

‎packages/theme/src/components/alert.ts

+54-113
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ComponentMultiStyle, isDefaultColor, mode } from '@yamada-ui/core'
2-
import { shadeColor, toneColor, getColor } from '@yamada-ui/utils'
1+
import { ComponentMultiStyle } from '@yamada-ui/core'
2+
import { shadeColor } from '@yamada-ui/utils'
33

44
export const Alert: ComponentMultiStyle = {
55
baseStyle: {
@@ -29,124 +29,65 @@ export const Alert: ComponentMultiStyle = {
2929
},
3030

3131
variants: {
32-
basic: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => {
33-
const color = isDefaultColor(
34-
mode(toneColor(c, 500)(t, m), toneColor(c, 200)(t, m))(m),
35-
mode(getColor(`${c}.500`)(t, m), getColor(`${c}.200`)(t, m))(m),
36-
)(c)
37-
38-
return {
39-
container: {
40-
bg: ['white', 'black'],
41-
borderWidth: '1px',
42-
},
43-
icon: { color },
44-
loading: { color },
45-
}
46-
},
47-
subtle: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => {
48-
const color = isDefaultColor(
49-
[toneColor(c, 500)(t, m), toneColor(c, 200)(t, m)],
50-
[`${c}.500`, `${c}.200`],
51-
)(c)
52-
53-
return {
54-
container: {
55-
bg: isDefaultColor(
56-
[
57-
toneColor(c, 100)(t, m),
58-
shadeColor(toneColor(c, 200)(t, m), 56)(t, m),
59-
],
60-
[`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)],
61-
)(c),
62-
},
63-
icon: { color },
64-
loading: { color },
65-
}
66-
},
67-
solid: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => ({
32+
basic: ({ colorScheme: c = 'primary' }) => ({
33+
container: { bg: ['white', 'black'], borderWidth: '1px' },
34+
icon: { color: [`${c}.500`, `${c}.200`] },
35+
loading: { color: [`${c}.500`, `${c}.200`] },
36+
}),
37+
subtle: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => ({
38+
container: { bg: [`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)] },
39+
icon: { color: [`${c}.500`, `${c}.200`] },
40+
loading: { color: [`${c}.500`, `${c}.200`] },
41+
}),
42+
solid: ({ colorScheme: c = 'primary' }) => ({
6843
container: {
69-
bg: isDefaultColor(
70-
[toneColor(c, 500)(t, m), toneColor(c, 200)(t, m)],
71-
[`${c}.500`, `${c}.200`],
72-
)(c),
44+
bg: [`${c}.500`, `${c}.200`],
7345
color: ['white', 'gray.900'],
7446
},
7547
}),
76-
'island-accent': ({
48+
'island-accent': ({ colorScheme: c = 'primary' }) => ({
49+
container: {
50+
bg: ['white', 'black'],
51+
borderWidth: '1px',
52+
pl: 7,
53+
_before: {
54+
content: '""',
55+
position: 'absolute',
56+
top: '50%',
57+
left: 3,
58+
transform: 'translateY(-50%)',
59+
w: 1,
60+
h: 'calc(100% - 1.5rem)',
61+
bg: [`${c}.500`, `${c}.200`],
62+
rounded: 'full',
63+
},
64+
},
65+
icon: { color: [`${c}.500`, `${c}.200`] },
66+
}),
67+
'left-accent': ({
7768
theme: t,
7869
colorMode: m,
7970
colorScheme: c = 'primary',
80-
}) => {
81-
const color = isDefaultColor(
82-
mode(toneColor(c, 500)(t, m), toneColor(c, 200)(t, m))(m),
83-
mode(getColor(`${c}.500`)(t, m), getColor(`${c}.200`)(t, m))(m),
84-
)(c)
85-
86-
return {
87-
container: {
88-
bg: ['white', 'black'],
89-
borderWidth: '1px',
90-
pl: 7,
91-
_before: {
92-
content: '""',
93-
position: 'absolute',
94-
top: '50%',
95-
left: 3,
96-
transform: 'translateY(-50%)',
97-
w: 1,
98-
h: 'calc(100% - 1.5rem)',
99-
bg: color,
100-
rounded: 'full',
101-
},
102-
},
103-
icon: { color },
104-
}
105-
},
106-
'left-accent': ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => {
107-
const color = isDefaultColor(
108-
mode(toneColor(c, 500)(t, m), toneColor(c, 200)(t, m))(m),
109-
mode(getColor(`${c}.500`)(t, m), getColor(`${c}.200`)(t, m))(m),
110-
)(c)
111-
112-
return {
113-
container: {
114-
bg: isDefaultColor(
115-
[
116-
toneColor(c, 100)(t, m),
117-
shadeColor(toneColor(c, 200)(t, m), 56)(t, m),
118-
],
119-
[`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)],
120-
)(c),
121-
pl: 3,
122-
borderLeft: `0.25rem solid ${color}`,
123-
rounded: 4,
124-
},
125-
icon: { color },
126-
}
127-
},
128-
'top-accent': ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => {
129-
const color = isDefaultColor(
130-
mode(toneColor(c, 500)(t, m), toneColor(c, 200)(t, m))(m),
131-
mode(getColor(`${c}.500`)(t, m), getColor(`${c}.200`)(t, m))(m),
132-
)(c)
133-
134-
return {
135-
container: {
136-
bg: isDefaultColor(
137-
[
138-
toneColor(c, 100)(t, m),
139-
shadeColor(toneColor(c, 200)(t, m), 56)(t, m),
140-
],
141-
[`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)],
142-
)(c),
143-
pt: 3,
144-
borderTop: `0.25rem solid ${color}`,
145-
rounded: 4,
146-
},
147-
icon: { color },
148-
}
149-
},
71+
}) => ({
72+
container: {
73+
bg: [`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)],
74+
pl: 3,
75+
borderLeft: '0.25rem solid',
76+
borderLeftColor: [`${c}.500`, `${c}.200`],
77+
rounded: 4,
78+
},
79+
icon: { color: [`${c}.500`, `${c}.200`] },
80+
}),
81+
'top-accent': ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => ({
82+
container: {
83+
bg: [`${c}.100`, shadeColor(`${c}.200`, 56)(t, m)],
84+
pt: 3,
85+
borderTop: '0.25rem solid',
86+
borderTopColor: [`${c}.500`, `${c}.200`],
87+
rounded: 4,
88+
},
89+
icon: { color: [`${c}.500`, `${c}.200`] },
90+
}),
15091
},
15192

15293
defaultProps: {

‎packages/theme/src/components/badge.ts

+12-38
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
import { ComponentStyle, mode, isDefaultColor } from '@yamada-ui/core'
2-
import {
3-
transparentizeColor,
4-
toneColor,
5-
getColor,
6-
isGray,
7-
} from '@yamada-ui/utils'
1+
import { ComponentStyle, mode } from '@yamada-ui/core'
2+
import { transparentizeColor, getColor, isGray } from '@yamada-ui/utils'
83

94
export const Badge: ComponentStyle = {
105
baseStyle: {
@@ -17,42 +12,21 @@ export const Badge: ComponentStyle = {
1712

1813
variants: {
1914
solid: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => ({
20-
bg: isDefaultColor(
21-
[
22-
toneColor(c, 500)(t, m),
23-
transparentizeColor(toneColor(c, 500)(t, m), 0.6)(t, m),
24-
],
25-
[`${c}.500`, transparentizeColor(`${c}.500`, 0.6)(t, m)],
26-
)(c),
15+
bg: [`${c}.500`, transparentizeColor(`${c}.500`, 0.6)(t, m)],
2716
color: [`white`, `whiteAlpha.800`],
2817
}),
2918
subtle: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => ({
30-
bg: isDefaultColor(
31-
[
32-
toneColor(c, 100)(t, m),
33-
transparentizeColor(toneColor(c, 200)(t, m), 0.16)(t, m),
34-
],
35-
[
36-
isGray(c) ? `${c}.200` : `${c}.100`,
37-
transparentizeColor(`${c}.200`, 0.16)(t, m),
38-
],
39-
)(c),
40-
color: isDefaultColor(
41-
[toneColor(c, 800)(t, m), toneColor(c, 200)(t, m)],
42-
[`${c}.800`, `${c}.200`],
43-
)(c),
19+
bg: [
20+
isGray(c) ? `${c}.200` : `${c}.100`,
21+
transparentizeColor(`${c}.200`, 0.16)(t, m),
22+
],
23+
color: [`${c}.800`, `${c}.200`],
4424
}),
4525
outline: ({ theme: t, colorMode: m, colorScheme: c = 'primary' }) => {
46-
const color = isDefaultColor(
47-
mode(
48-
toneColor(c, 500)(t, m),
49-
transparentizeColor(toneColor(c, 200)(t, m), 0.8)(t, m),
50-
)(m),
51-
mode(
52-
getColor(`${c}.500`)(t, m),
53-
transparentizeColor(`${c}.200`, 0.8)(t, m),
54-
)(m),
55-
)(c)
26+
const color = mode(
27+
getColor(`${c}.500`)(t, m),
28+
transparentizeColor(`${c}.200`, 0.8)(t, m),
29+
)(m)
5630

5731
return {
5832
color,

0 commit comments

Comments
 (0)