feat: allow design token v2 in tailwind config #1993
Annotations
3 errors and 1 warning
|
Test:
.storybook/storybook.test.ts#L98
Error: expect(received).toMatchSnapshot()
Snapshot name: `Storybook Tests > react/docs/Token-v2-demo > Styled 1`
- Snapshot - 0
+ Received + 1
@@ -7,10 +7,11 @@
max-width: -moz-fit-content;
max-width: fit-content;
}
.c2 {
+ margin: 0;
color: var(--charcoal-color-text-secondary-default);
font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
}
↵
- Expected
+ Received
.c0 {
-webkit-transition: 0.3s color ease-in-out;
transition: 0.3s color ease-in-out;
display: grid;
gap: 24px;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.c2 {
+ margin: 0;
color: var(--charcoal-color-text-secondary-default);
font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
}
.c1 {
cursor: pointer;
font-weight: bold;
font-size: calc(var(--charcoal-text-font-size-body) * 1px);
line-height: calc(var(--charcoal-text-line-height-body) * 1px);
padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
border-top: 2px transparent;
color: var(--charcoal-color-text-tertiary-default);
}
.c1:hover {
color: var(--charcoal-color-text-tertiary-hover);
}
.c1:active {
color: var(--charcoal-color-text-tertiary-press);
}
.c1[aria-selected='true'] {
color: var(--charcoal-color-text-default);
border-top: 2px solid var(--charcoal-color-border-selected);
}
.c1[aria-selected='true']:hover {
color: var(--charcoal-color-text-hover);
}
.c1[aria-selected='true']:active {
color: var(--charcoal-color-text-press);
}
.c3 {
display: grid;
grid-template-areas: 'UserInfo . ShowAll' 'ArtworkList ArtworkList ArtworkList';
}
.c4 {
grid-area: UserInfo;
display: grid;
grid-auto-flow: column;
-webkit-box-pack: left;
-webkit-justify-content: left;
-ms-flex-pack: left;
justify-content: left;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: calc(var(--charcoal-space-layout-20) * 1px);
}
.c5 {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: calc(var(--charcoal-radius-oval) * 1px);
cursor: pointer;
color: var(--charcoal-color-icon-default);
background-color: var(--charcoal-color-container-secondary-default);
}
.c5:hover {
color: var(--charcoal-color-icon-hover);
background-color: var(--charcoal-color-container-secondary-hover);
}
.c5:active {
color: var(--charcoal-color-icon-press);
background-color: var(--charcoal-color-container-secondary-press);
}
.c6 {
color: var(--charcoal-color-text-default);
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
font-weight: bold;
}
.c7 {
grid-area: ShowAll;
cursor: pointer;
color: var(--charcoal-color-text-tertiary-default);
text-align: right;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
}
.c7:hover {
color: var(--charcoal-color-text-tertiary-hover);
}
.c7:active {
color: var(--charcoal-color-text-tertiary-press);
}
.c8 {
grid-area: ArtworkList;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: calc(var(--charcoal-space-layout-20) * 1px);
list-style: none;
padding: 0;
max-width: 424px;
}
.c9 {
display: grid;
gap: calc(var(--charcoal-space-layout-10) * 1px);
}
.c10 {
width: 100%;
aspect-ratio: 3 / 2;
border-radius: calc(var(--charcoal-radius-m) * 1px);
}
.c11 {
color: var(--charcoal-color-text-default);
font-size: calc(var(--charcoal-text-font-size-captio
|
|
Test:
.storybook/storybook.test.ts#L98
Error: expect(received).toMatchSnapshot()
Snapshot name: `Storybook Tests > react/docs/Token-v2-demo > Tailwind 1`
New snapshot was not written. The update flag must be explicitly passed to write a new snapshot.
This is likely because this test is run in a continuous integration (CI) environment in which snapshots are not written by default.
Received:
<div
data-dark={false}
>
<section
className="grid max-w-fit gap-[24px]"
>
<nav>
<div
aria-label="Categories"
role="tablist"
>
<a
aria-controls="panel-Illustration"
aria-selected={true}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-border-selected text-text"
id="category-Illustration"
onClick={[Function]}
role="tab"
>
Illustration
</a>
<a
aria-controls="panel-Comic"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
id="category-Comic"
onClick={[Function]}
role="tab"
>
Comic
</a>
<a
aria-controls="panel-Novel"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
id="category-Novel"
onClick={[Function]}
role="tab"
>
Novel
</a>
<a
aria-controls="panel-3D"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
id="category-3D"
onClick={[Function]}
role="tab"
>
3D
</a>
<a
aria-controls="panel-Shopping"
aria-selected={false}
className="text-text-tertiary hover:text-text-tertiary-hover active:text-text-tertiary-press text-body px-30 border-t-l cursor-pointer border-[0px] border-solid py-[13px] font-bold border-[transparent]"
id="category-Shopping"
onClick={[Function]}
role="tab"
>
Shopping
</a>
</div>
</nav>
<h2
className="text-text-secondary text-heading-xs m-0"
>
Works from users you follow
</h2>
<div
aria-labelledby="category-Illustration"
className="grid [grid-template-areas:'UserInfo_._ShowAll''ArtworkList_ArtworkList_ArtworkList']"
id="panel-Illustration"
role="tabpanel"
>
<div
className="grid grid-flow-col items-center justify-start gap-20 [grid-area:UserInfo]"
>
<a
aria-label="UserIcon"
className="rounded-oval text-icon hover:text-icon-hover active:text-icon-press bg-container-secondary hover:bg-container-hover active:bg-container-press grid h-[40px] w-[40px] cursor-pointer place-items-center"
>
<pixiv-icon
name="24/FaceEdit"
/>
</a>
<span
className="text-text text-caption-m font-bold"
>
UserName
</span>
<button
className="charcoal-button"
data-size="S"
data-variant="Primary"
>
Follow
</button>
</div>
<a
className="text-text-tertiary hover:text-text-hover active:text-text-press text-caption-m cursor-pointer content-center text-right [grid-area:ShowAll]"
>
Show all
</a>
<ul
className="grid max-w-[424px] list-none grid-cols-3 gap-20 p-0 [grid-area:ArtworkList]"
>
<li>
<article
|
|
Test
Process completed with exit code 1.
|
|
The following actions use a deprecated Node.js version and will be forced to run on node20: actions/checkout@v3, actions/setup-node@v3. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|
Loading