Skip to content

Commit c47b60c

Browse files
johnykeijohnykei
authored
Merge pull request #101 from digital-go-jp/v2
merge v2 into main
2 parents b5987ab + 2def525 commit c47b60c

File tree

18 files changed

+140
-516
lines changed

18 files changed

+140
-516
lines changed

‎.github/CODEOWNERS‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
* @johnykei @takumi-hatta-dig
1+
* @digital-go-jp/design-system

‎src/components/Accordion/Accordion.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const AccordionDefaultIconWrapper = (props: AccordionDefaultIconWrapperPr
2424
className={`
2525
inline-flex border border-current bg-white text-blue-1000
2626
${shapeStyle === 'square' ? 'rounded-lg' : 'rounded-full'}
27-
group-hover/summary:ring-[calc(2/16*1rem)] group-hover/summary:ring-blue-1000
27+
group-hover/summary:outline group-hover/summary:outline-2 group-hover/summary:outline-current
2828
${className ?? ''}
2929
`}
3030
{...rest}

‎src/components/Breadcrumbs/Breadcrumbs.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,10 @@ export const WithVisibleLabel: Story = {
108108
return (
109109
<Breadcrumbs className='flex gap-1 items-baseline' aria-labelledby={`${breadcrumbsId}-label`}>
110110
<div className='flex-none'>
111-
<BreadcrumbsLabel className='text-dns-16N-2' id={`${breadcrumbsId}-label`}>
111+
<BreadcrumbsLabel className='text-dns-16N-120' id={`${breadcrumbsId}-label`}>
112112
現在位置
113113
</BreadcrumbsLabel>
114-
<span className='text-dns-16N-2'>：</span>
114+
<span className='text-dns-16N-120'>：</span>
115115
</div>
116116

117117
<BreadcrumbList>

‎src/components/Breadcrumbs/Breadcrumbs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const BreadcrumbItem = ({
1515
return (
1616
<li
1717
aria-current='page'
18-
className={`inline break-words text-oln-16N-1 ${className ?? ''}`}
18+
className={`inline break-words text-oln-16N-100 ${className ?? ''}`}
1919
{...rest}
2020
>
2121
{children}
@@ -43,7 +43,7 @@ export const BreadcrumbItem = ({
4343
};
4444

4545
export const breadcrumbLinkStyle = `
46-
text-blue-1000 text-oln-16N-1 underline underline-offset-[calc(3/16*1rem)]
46+
text-blue-1000 text-oln-16N-100 underline underline-offset-[calc(3/16*1rem)]
4747
hover:text-blue-900 hover:decoration-[calc(3/16*1rem)]
4848
active:text-orange-700 active:decoration-1
4949
focus-visible:rounded focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:text-blue-1000 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300

‎src/components/Button/Button.stories.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const AllButtons = {
5656
return (
5757
<div className='flex flex-col gap-8'>
5858
<div>
59-
<h2 className='mb-6 text-std-32B-5'>塗りボタン（Solid Fill）</h2>
59+
<h2 className='mb-6 text-std-32B-150'>塗りボタン（Solid Fill）</h2>
6060
<div className='flex items-center gap-4'>
6161
<Button variant='solid-fill' size='lg'>
6262
ラベル
@@ -73,7 +73,7 @@ export const AllButtons = {
7373
</div>
7474
</div>
7575
<div>
76-
<h2 className='mb-6 text-std-32B-5'>アウトラインボタン（Outline）</h2>
76+
<h2 className='mb-6 text-std-32B-150'>アウトラインボタン（Outline）</h2>
7777
<div className='flex items-center gap-4'>
7878
<Button variant='outline' size='lg'>
7979
ラベル
@@ -90,7 +90,7 @@ export const AllButtons = {
9090
</div>
9191
</div>
9292
<div>
93-
<h2 className='mb-6 text-std-32B-5'>テキストボタン（Text）</h2>
93+
<h2 className='mb-6 text-std-32B-150'>テキストボタン（Text）</h2>
9494
<div className='flex items-center gap-4'>
9595
<Button variant='text' size='lg'>
9696
ラベル
@@ -116,7 +116,7 @@ export const DisabledButtons = {
116116
return (
117117
<div className='flex flex-col gap-8'>
118118
<div>
119-
<h2 className='mb-4 text-std-32B-5'>Disabledの作例（aria-disabled 属性を使用）</h2>
119+
<h2 className='mb-4 text-std-32B-150'>Disabledの作例（aria-disabled 属性を使用）</h2>
120120
<p className='mb-8'>
121121
※ ボタンの無効化に<code>disabled</code>
122122
コンテンツ属性ではなく、キーボード操作のタブフォーカスでもアクセスできる
@@ -188,30 +188,30 @@ export const LinkButtons = {
188188
return (
189189
<div className='flex flex-col gap-8'>
190190
<div>
191-
<h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Solid Fill）</h2>
191+
<h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Solid Fill）</h2>
192192
<div className='flex items-center gap-4'>
193193
<Button asChild variant='solid-fill' size='lg'>
194-
<a className='text-center' href={href}>
194+
<a className='inline-flex items-center justify-center' href={href}>
195195
ラベル
196196
</a>
197197
</Button>
198198
</div>
199199
</div>
200200
<div>
201-
<h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Outline）</h2>
201+
<h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Outline）</h2>
202202
<div className='flex items-center gap-4'>
203203
<Button asChild variant='outline' size='lg'>
204-
<a className='text-center' href={href}>
204+
<a className='inline-flex items-center justify-center' href={href}>
205205
ラベル
206206
</a>
207207
</Button>
208208
</div>
209209
</div>
210210
<div>
211-
<h2 className='mb-6 text-std-32B-5'>ボタンの見た目をしたリンク（Text）</h2>
211+
<h2 className='mb-6 text-std-32B-150'>ボタンの見た目をしたリンク（Text）</h2>
212212
<div className='flex items-center gap-4'>
213213
<Button asChild variant='text' size='lg'>
214-
<a className='text-center' href={href}>
214+
<a className='inline-flex items-center justify-center' href={href}>
215215
ラベル
216216
</a>
217217
</Button>

‎src/components/Button/Button.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,18 @@ export type ButtonVariant = 'solid-fill' | 'outline' | 'text';
55
export type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
66

77
export const buttonBaseStyle = `
8-
border underline-offset-[calc(3/16*1rem)]
8+
underline-offset-[calc(3/16*1rem)]
99
focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
10-
aria-disabled:pointer-events-none
10+
aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
1111
`;
1212

1313
export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
1414
'solid-fill': `
15+
border-4
16+
border-double
17+
border-transparent
1518
bg-blue-900
1619
text-white
17-
border-transparent
1820
hover:bg-blue-1000
1921
hover:underline
2022
active:bg-blue-1200
@@ -23,9 +25,10 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
2325
aria-disabled:text-solid-gray-50
2426
`,
2527
outline: `
28+
border
29+
border-current
2630
bg-white
2731
text-blue-900
28-
border-current
2932
hover:bg-blue-200
3033
hover:text-blue-1000
3134
hover:underline
@@ -36,12 +39,11 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
3639
aria-disabled:text-solid-gray-300
3740
`,
3841
text: `
39-
bg-transparent
4042
text-blue-900
41-
border-transparent
4243
underline
4344
hover:bg-blue-50
4445
hover:text-blue-1000
46+
hover:decoration-[calc(3/16*1rem)]
4547
active:bg-blue-100
4648
active:text-blue-1200
4749
focus-visible:bg-yellow-300
@@ -52,10 +54,10 @@ export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
5254
};
5355

5456
export const buttonSizeStyle: { [key in ButtonSize]: string } = {
55-
lg: 'min-w-[calc(136/16*1rem)] rounded-lg p-4 text-oln-16B-100 leading-snug',
56-
md: 'min-w-24 rounded-lg px-4 py-3 text-oln-16B-100 leading-snug',
57-
sm: 'relative min-w-20 rounded-md px-3 py-1.5 text-oln-16B-100 leading-snug after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(5/16*1rem)]',
58-
xs: 'relative min-w-18 rounded px-2 py-1.5 text-oln-14B-100 after:absolute after:-inset-x-[calc(1/16*1rem)] after:-inset-y-[calc(9/16*1rem)]',
57+
lg: 'min-w-[calc(136/16*1rem)] min-h-14 rounded-lg px-4 py-3 text-oln-16B-100',
58+
md: 'min-w-24 min-h-12 rounded-lg px-4 py-2 text-oln-16B-100',
59+
sm: 'relative min-w-20 min-h-9 rounded-md px-3 py-0.5 text-oln-16B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
60+
xs: 'relative min-w-18 min-h-7 rounded px-2 py-0.5 text-oln-14B-100 after:absolute after:inset-x-0 after:-inset-y-full after:m-auto after:h-[44px]',
5961
};
6062

6163
export type ButtonProps = {

‎src/components/Checkbox/Checkbox.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
2121
appearance-none relative shrink-0 mt-0.5 w-[calc(17/16*1rem)] h-[calc(17/16*1rem)] border-[calc(1.5/16*1rem)] border-solid-gray-900 bg-white rounded-sm
2222
focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
2323
before:hidden before:absolute before:top-[calc(3/16*1rem)] before:left-[calc(2.5/16*1rem)] before:w-[calc(9/16*1rem)] before:h-[calc(5.5/16*1rem)] before:border-b-[calc(1.5/16*1rem)] before:border-l-[calc(1.5/16*1rem)] before:border-white before:-rotate-45
24-
checked:bg-blue-900 checked:border-blue-900 checked:before:block
25-
${isError && '!border-error-1 checked:bg-error-1'}
26-
aria-disabled:bg-solid-gray-50 aria-disabled:!border-solid-gray-300 aria-disabled:before:border-solid-gray-50 checked:aria-disabled:bg-solid-gray-300
24+
checked:bg-blue-900 checked:border-blue-900 checked:before:block checked:forced-colors:bg-[CanvasText] checked:before:forced-colors:border-[Canvas]
25+
${isError ? '!border-error-1 checked:bg-error-1' : ''}
26+
aria-disabled:bg-solid-gray-50 aria-disabled:!border-solid-gray-300 aria-disabled:before:border-solid-gray-50 aria-disabled:checked:bg-solid-gray-300 aria-disabled:forced-colors:!border-[GrayText] aria-disabled:checked:forced-colors:bg-[GrayText]
2727
`}
2828
id={id}
2929
onClick={props['aria-disabled'] ? handleDisabled : onClick}

‎src/components/HamburgerMenuButton/HamburgerMenuButton.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export const Example: Story = {
3737
)}
3838
</HamburgerMenuButton>
3939
{isMenuOpen && (
40-
<div className='h-40 w-60 border border-solid-grey-420 p-4' id={`${sampleId}-menu`}>
40+
<div className='h-40 w-60 border border-solid-gray-420 p-4' id={`${sampleId}-menu`}>
4141
サンプルメニュー
4242
</div>
4343
)}
@@ -61,7 +61,7 @@ export const WithoutLabel: Story = {
6161
{isMenuOpen ? <CloseWithLabelIcon /> : <HamburgerWithLabelIcon />}
6262
</HamburgerMenuButton>
6363
{isMenuOpen && (
64-
<div className='h-40 w-60 border border-solid-grey-420 p-4' id={`${sampleId}-menu`}>
64+
<div className='h-40 w-60 border border-solid-gray-420 p-4' id={`${sampleId}-menu`}>
6565
サンプルメニュー
6666
</div>
6767
)}
@@ -89,7 +89,7 @@ export const WithoutLabelEN: Story = {
8989
)}
9090
</HamburgerMenuButton>
9191
{isMenuOpen && (
92-
<div className='h-40 w-60 border border-solid-grey-420 p-4' id={`${sampleId}-menu`}>
92+
<div className='h-40 w-60 border border-solid-gray-420 p-4' id={`${sampleId}-menu`}>
9393
サンプルメニュー
9494
</div>
9595
)}
@@ -125,7 +125,7 @@ export const Responsive: Story = {
125125
)}
126126
</HamburgerMenuButton>
127127
{isMenuOpen && (
128-
<div className='h-40 w-60 border border-solid-grey-420 p-4' id={`${sampleId}-menu`}>
128+
<div className='h-40 w-60 border border-solid-gray-420 p-4' id={`${sampleId}-menu`}>
129129
サンプルメニュー
130130
</div>
131131
)}
@@ -144,8 +144,8 @@ export const WithFocusTrap: Story = {
144144
const lastItemRef = React.useRef<HTMLAnchorElement>(null);
145145
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
146146
const sampleMenuLinkClasses = `
147-
flex min-h-[calc(44/16*1rem)] items-center px-4 py-3 text-dns-16N-2
148-
hover:bg-solid-grey-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
147+
flex min-h-[calc(44/16*1rem)] items-center px-4 py-3 text-dns-16N-120
148+
hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
149149
focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:-outline-offset-4 focus-visible:bg-yellow-300 focus-visible:ring-[calc(6/16*1rem)] focus-visible:ring-inset focus-visible:ring-yellow-300
150150
`;
151151
const sampleMenu = [
@@ -213,7 +213,7 @@ export const WithFocusTrap: Story = {
213213
</HamburgerMenuButton>
214214
{isMenuOpen && (
215215
<div
216-
className='fixed top-0 bottom-0 left-0 pt-14 px-4 w-72 shadow-1 z-10'
216+
className='fixed top-0 bottom-0 left-0 pt-14 px-4 w-72 shadow-1 z-10 forced-colors:border-r'
217217
id={`${sampleId}-menu`}
218218
>
219219
<ul className='py-2'>

‎src/components/HamburgerMenuButton/HamburgerMenuButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export const HamburgerMenuButton = forwardRef<HTMLButtonElement, HamburgerMenuBu
99
return (
1010
<button
1111
className={`
12-
flex w-fit items-center gap-x-1.5 border border-transparent text-oln-16N-1 rounded touch-manipulation
13-
hover:bg-solid-grey-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
12+
flex w-fit items-center gap-x-1.5 border border-transparent text-oln-16N-100 rounded touch-manipulation
13+
hover:bg-solid-gray-50 hover:underline hover:underline-offset-[calc(3/16*1rem)]
1414
focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:bg-yellow-300 focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
1515
${className ?? ''}
1616
`}

‎src/components/Input/Input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
2626
${InputBlockSizeStyle[blockSize]}
2727
${isError ? 'border-error-1' : 'border-solid-gray-900'}
2828
focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
29-
aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none
29+
aria-disabled:border-solid-gray-300 aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none aria-disabled:forced-colors:text-[GrayText] aria-disabled:forced-colors:border-[GrayText]
3030
${className ?? ''}
3131
`}
3232
readOnly={props['aria-disabled'] ? true : readOnly}

0 commit comments

Comments
 (0)