Skip to content

Commit

Permalink
Fix evergreen shadow borders and font-size-40 (#4220)
Browse files Browse the repository at this point in the history 
Co-authored-by: Kristian Antrobus <[email protected]>
  • Loading branch information
@serifluous @krisantrobus
serifluous and krisantrobus authored Jan 28, 2025
1 parent 2fba6b9 commit add4a2d
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 60 deletions.
6 changes: 6 additions & 0 deletions .changeset/violet-elephants-ring.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@twilio-paste/design-tokens": patch
"@twilio-paste/core": patch
---

[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
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}>
<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
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) => (
<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
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
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
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
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"
comment: Primary text.

0 comments on commit add4a2d

Please sign in to comment.