Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix evergreen shadow borders and font-size-40 #4220

Merged
merged 10 commits into from
Jan 28, 2025
Merged

Fix evergreen shadow borders and font-size-40 #4220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c958a2f
fix: readd evergreen shadow borders and revert font-size-40
serifluous Jan 24, 2025
e860ccc
chore: add changeset
serifluous Jan 24, 2025
de15fa8
feat(storybook): include evergreen in stacked VRT view
krisantrobus Jan 24, 2025
8eb097d
chore(storybook): attempt to clear storybook cache in pipeline
krisantrobus Jan 27, 2025
7430760
chore(storybook): fix mmax height for Table
krisantrobus Jan 27, 2025
4c7e0b9
chore(storybook): revert change to clear storybook cache
krisantrobus Jan 27, 2025
bcbff77
chore(storybook): add storybook a11y fix
krisantrobus Jan 27, 2025
21b28e7
feat(tokens): updated evergreen theme tokens
krisantrobus Jan 28, 2025
9b65672
chore(changeset): update changeset versions
krisantrobus Jan 28, 2025
56e84d7
chore(ci): formatting fix
krisantrobus Jan 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/violet-elephants-ring.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/design-tokens": patch
"@twilio-paste/core": patch
Comment on lines +2 to +3
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a patch as technically we are fixing tokens not adding anything new

---

[Design tokens] Added shadow border tokens and font-size-40 token back to evergreen theme
24 changes: 24 additions & 0 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,30 @@ export const decorators = [
</Box>
</Box>
</Theme.Provider>
<Theme.Provider theme="evergreen" disableAnimations customBreakpoints={breakpoints}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in evergreen so we can catch theme updates in our snapshots to avoid unnecessary breaking changes.

<Box
backgroundColor="colorBackgroundBody"
color="colorText"
padding={context.parameters.padding === false ? "space0" : "space80"}
>
<Story />
</Box>
</Theme.Provider>
<Theme.Provider theme="evergreen" disableAnimations customBreakpoints={breakpoints}>
<Box
backgroundColor="colorBackgroundBody"
color="colorText"
padding={context.parameters.padding === false ? "space0" : "space20"}
>
<Box
margin={context.parameters.padding === false ? "space0" : "space40"}
padding={context.parameters.padding === false ? "space0" : "space40"}
backgroundColor="colorBackground"
>
<Story />
</Box>
</Box>
</Theme.Provider>
</Stack>
</RenderPerformanceProfiler>
);
Expand Down
106 changes: 55 additions & 51 deletions packages/paste-core/components/table/stories/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -931,66 +931,70 @@ RowHeaders.storyName = "Row headers";

export const StickyHeaders = (): React.ReactNode => {
return (
<Table>
<THead stickyHeader={true}>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
</THead>
<TBody>
{[...new Array(40).keys()].map((index) => (
<Tr key={index}>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
<Box maxHeight="size20" overflowY="auto" tabIndex={0}>
<Table>
<THead stickyHeader={true}>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
))}
</TBody>
<TFoot>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
</TFoot>
</Table>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
</THead>
<TBody>
{[...new Array(5).keys()].map((index) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This resolves the chromatic max height issue when adding the new theme to stacked view:
image

Wrapping the component in a scrollable Box still allows the sticky header to be tested.

<Tr key={index}>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
))}
</TBody>
<TFoot>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
</TFoot>
</Table>
</Box>
);
};

StickyHeaders.storyName = "Sticky headers";

export const BorderlessStickyHeaders = (): React.ReactNode => {
return (
<Table variant="borderless">
<THead stickyHeader={true}>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
</THead>
<TBody>
{[...new Array(40).keys()].map((index) => (
<Tr key={index}>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
<Box maxHeight="size20" overflowY="auto" tabIndex={0}>
<Table variant="borderless">
<THead stickyHeader={true}>
<Tr>
<Th>Column 1</Th>
<Th>Column 2</Th>
<Th>Column 3</Th>
</Tr>
))}
</TBody>
</Table>
</THead>
<TBody>
{[...new Array(5).keys()].map((index) => (
<Tr key={index}>
<Td>Content</Td>
<Td>Content</Td>
<Td>Content</Td>
</Tr>
))}
</TBody>
</Table>
</Box>
);
};

Expand Down
3 changes: 0 additions & 3 deletions packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,6 @@ props:
color-background-strongest:
value: "#696F8C"
comment: Strongest default background color.
color-background-weak:
value: "#F9FAFC"
comment: Weak default background color.
color-background-inverse:
value: "{!palette-gray-100}"
comment: Inverse background color for any container. Must be used on color-background-body-inverse.
Expand Down
95 changes: 95 additions & 0 deletions packages/paste-design-tokens/tokens/themes/evergreen/global/box-shadow.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,98 @@ global:
category: box-shadow
imports:
- ../../../global/box-shadow.yml
props:
shadow-border-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #EDEFF5"
comment: Weaker shadow border for disabled inputs.
shadow-border-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #E6E8F0"
comment: Weak shadow border for disabled inputs.
shadow-border:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #D8DAE5"
comment: Shadow border for inputs.
shadow-border-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #8F95B2"
comment: Strong shadow border for inputs.
shadow-border-primary-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #D6E0FF"
comment: "Weaker shadow border for primary interactions."
shadow-border-primary-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #9DB5FF"
comment: "Weaker shadow border for primary interactions."
shadow-border-primary:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #3366FF"
comment: "Default shadow border for primary interactions."
shadow-border-primary-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #2952CC"
comment: Strong shadow border for inputs hover.
shadow-border-primary-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #1F3D99"
comment: Stronger shadow border for inputs active.
shadow-border-primary-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #0C1E56"
comment: Strongest shadow border for inputs active.
shadow-border-destructive-weaker:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #F9DADA"
comment: Weaker shadow border for destructive interactions.
shadow-border-destructive-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6"
comment: Weak shadow border for destructive interactions.
shadow-border-destructive:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343"
comment: Shadow border for destructive interactions.
shadow-border-destructive-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636"
comment: Strong shadow border for destructive interactions
shadow-border-destructive-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828"
comment: Stronger shadow border for destructive interactions
shadow-border-destructive-strongest:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #310C0C"
comment: Strongest shadow border for destructive interactions
shadow-border-error-weak:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #F4B6B6"
comment: Shadow border for inverse error inputs.
shadow-border-error:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #D14343"
comment: Shadow border for error inputs.
shadow-border-error-strong:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #A73636"
comment: Shadow border for error inputs hover.
shadow-border-error-stronger:
value: "{!offset-0} {!offset-0} {!offset-0} 1px #7D2828"
comment: Shadow border for error inputs hover.

# Badge
shadow-border-bottom-neutral-weaker:
value: "{!offset-0} 1px {!offset-0} #9DB5FF"
comment: Weaker bottom shadow border for neutral status
shadow-border-bottom-warning-weaker:
value: "{!offset-0} 1px {!offset-0} #F2C8B6"
comment: Weaker bottom shadow border warning warning status
shadow-border-bottom-error-weaker:
value: "{!offset-0} 1px {!offset-0} #F4B6B6"
comment: Weaker bottom shadow border for error status
shadow-border-bottom-success-weaker:
value: "{!offset-0} 1px {!offset-0} #DCF2EA"
comment: Weaker bottom shadow border for success status
shadow-border-bottom-new-weaker:
value: "{!offset-0} 1px {!offset-0} #D0CAF4"
comment: Weaker bottom shadow border for new status
shadow-border-bottom-decorative-10-weaker:
value: "{!offset-0} 1px {!offset-0} #D8DAE5"
comment: Weaker bottom shadow border for decorative 10
shadow-border-bottom-decorative-20-weaker:
value: "{!offset-0} 1px {!offset-0} #D6E0FF"
comment: Weaker bottom shadow border for decorative 20
shadow-border-bottom-decorative-30-weaker:
value: "{!offset-0} 1px {!offset-0} #DCF2EA"
comment: Weaker bottom shadow border for decorative 30
shadow-border-bottom-decorative-40-weaker:
value: "{!offset-0} 1px {!offset-0} #D0CAF4"
comment: Weaker bottom shadow border for decorative 40

# Top borders
shadow-border-top-primary:
value: "{!offset-0} {!offset-negative-05} {!offset-0} #3366FF"
comment: Top shadow border for selected status of horizontal tabs
2 changes: 2 additions & 0 deletions packages/paste-design-tokens/tokens/themes/evergreen/global/font-size.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ imports:
props:
font-size-10:
value: "0.75rem" #12px
font-size-40:
value: "0.875rem" #14px, intentionally the same size as font-size-30
font-size-50:
value: "1rem" #16px
font-size-80:
Expand Down
11 changes: 5 additions & 6 deletions packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,6 @@ props:
color-text-new:
value: "#524988"
comment: Color for text indicating a new status.
color-text-neutral:
value: "#1F3D99"
comment: Color for text indicating a neutral status.

# icon
color-text-icon:
Expand Down Expand Up @@ -128,9 +125,6 @@ props:
color-text-icon-warning:
value: "#DE7548"
comment: Icon color for indicating a warning.
color-text-icon-neutral:
value: "#2952CC"
comment: Icon color for being neutral.
color-text-icon-brand-highlight:
value: "#52BD94"
comment: Segment brand color used for the Segment logo.
Expand All @@ -153,3 +147,8 @@ props:
color-text-user:
value: "#6D2ED1"
comment: Text color for user avatar.

# primary
color-text-primary:
value: "#3366FF"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@serifluous we hardcoded this value as most other values (including the color-text-link) are hardcoded. No aliases are actually being used. The ones in the alias for palette-blue-60 aren't being referenced. Should we be using aliases in these themes? Would need another refactor if so.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Originally, they should've been, but at this point, we're just leaving them as hex codes

comment: Primary text.
Loading