Skip to content

Commit 9351a24

Browse files
nkrantznkrantz
committed
chore: feb 14 afternoon
1 parent 3bd4aa1 commit 9351a24

File tree

10 files changed

+181
-6
lines changed

10 files changed

+181
-6
lines changed

‎packages/paste-core/components/disclosure/src/DisclosureContent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export const AnimatedDisclosureContent = animated(Box);
1212
const baseContainedStyles: BoxStyleProps = {
1313
borderWidth: "borderWidth10",
1414
borderStyle: "solid",
15-
borderBottomLeftRadius: "borderRadius20",
16-
borderBottomRightRadius: "borderRadius20",
15+
borderBottomLeftRadius: "borderRadius40",
16+
borderBottomRightRadius: "borderRadius40",
1717
borderTop: "none",
1818
transition: "border-color 100ms ease-out",
1919
};

‎packages/paste-core/components/disclosure/src/DisclosureHeading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import type { DisclosureVariants } from "./types";
1515
const baseContainedStyles: BoxStyleProps = {
1616
borderWidth: "borderWidth10",
1717
borderStyle: "solid",
18-
borderRadius: "borderRadius20",
18+
borderRadius: "borderRadius40",
1919
};
2020

2121
const containedStyles: BoxStyleProps = {

‎packages/paste-core/components/tabs/src/Tab.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ const getTabBoxStyles = (orientation: Orientation, variant: Variants): BoxStyleP
109109
borderStyle: "solid",
110110
borderWidth: "borderWidth10",
111111
borderBottomWidth: "borderWidth20",
112-
borderTopLeftRadius: "borderRadius30",
113-
borderTopRightRadius: "borderRadius30",
112+
borderTopLeftRadius: "borderRadius50",
113+
borderTopRightRadius: "borderRadius50",
114114
display: "inline-block",
115115
flexBasis: isFitted ? "50%" : undefined,
116116
flexGrow: isFitted ? 1 : undefined,

‎packages/paste-core/components/textarea/src/TextArea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
134134
appearance: "none",
135135
background: "transparent",
136136
border: "none",
137-
borderRadius: "borderRadius20",
137+
borderRadius: "borderRadius50",
138138
boxShadow: "none",
139139
color: "inherit",
140140
display: "block",

‎packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
5353
\\"color-background\\": \\"rgb(18, 28, 45)\\",
5454
\\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
5555
\\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
56+
\\"color-background-weakest\\": \\"rgb(6, 3, 58)\\",
5657
\\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
5758
\\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
5859
\\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -173,6 +174,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
173174
\\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
174175
\\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
175176
\\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
177+
\\"shadow-brand-10\\": \\"0 0 24px 0 rgb(24, 102, 238, .3)\\",
176178
\\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
177179
\\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
178180
\\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
@@ -535,6 +537,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
535537
\\"color-background\\": \\"rgb(244, 244, 246)\\",
536538
\\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
537539
\\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
540+
\\"color-background-weakest\\": \\"rgb(6, 3, 58)\\",
538541
\\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
539542
\\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
540543
\\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -655,6 +658,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
655658
\\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
656659
\\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
657660
\\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
661+
\\"shadow-brand-10\\": \\"0 0 24px 0 rgb(24, 102, 238, .3)\\",
658662
\\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
659663
\\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
660664
\\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
@@ -1017,6 +1021,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
10171021
\\"color-background\\": \\"rgb(244, 244, 246)\\",
10181022
\\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
10191023
\\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
1024+
\\"color-background-weakest\\": \\"rgb(6, 3, 58)\\",
10201025
\\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
10211026
\\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
10221027
\\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -1137,6 +1142,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
11371142
\\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
11381143
\\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
11391144
\\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
1145+
\\"shadow-brand-10\\": \\"0 0 24px 0 rgb(24, 102, 238, .3)\\",
11401146
\\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
11411147
\\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
11421148
\\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
@@ -1499,6 +1505,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
14991505
\\"color-background\\": \\"rgb(18, 28, 45)\\",
15001506
\\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
15011507
\\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
1508+
\\"color-background-weakest\\": \\"rgb(6, 3, 58)\\",
15021509
\\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
15031510
\\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
15041511
\\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -1619,6 +1626,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
16191626
\\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #feecec\\",
16201627
\\"shadow-border-error-weak\\": \\"0 0 0 1px #ad1111\\",
16211628
\\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
1629+
\\"shadow-brand-10\\": \\"0 0 24px 0 rgb(24, 102, 238, .3)\\",
16221630
\\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
16231631
\\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
16241632
\\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
@@ -1981,6 +1989,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
19811989
\\"color-background\\": \\"rgb(244, 244, 246)\\",
19821990
\\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
19831991
\\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
1992+
\\"color-background-weakest\\": \\"rgb(6, 3, 58)\\",
19841993
\\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
19851994
\\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
19861995
\\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
@@ -2101,6 +2110,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
21012110
\\"shadow-border-destructive-strongest\\": \\"0 0 0 1px #310c0c\\",
21022111
\\"shadow-border-error-weak\\": \\"0 0 0 1px #eb5656\\",
21032112
\\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
2113+
\\"shadow-brand-10\\": \\"0 0 24px 0 rgb(24, 102, 238, .3)\\",
21042114
\\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
21052115
\\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
21062116
\\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",

‎packages/paste-design-tokens/tokens/themes/rebrand/global/background-color.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,9 @@ props:
2121
value: "{!palette-blue-100}"
2222
color-background-body-elevation:
2323
value: "{!palette-gray-85}"
24+
color-background-primary-stronger:
25+
value: "{!palette-gray-0}"
26+
color-background-primary-weakest:
27+
value: "{!palette-blue-90}"
28+
color-background-overlay:
29+
value: "{!palette-gray-100-transparent-70}"

‎packages/paste-design-tokens/tokens/themes/rebrand/global/border-color.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ props:
1010
value: "{!palette-blue-30}"
1111
color-border-weaker:
1212
value: "{!palette-gray-80}"
13+
color-border-weakest:
14+
value: "{!palette-gray-100}"

‎packages/paste-design-tokens/tokens/themes/rebrand/global/box-shadow.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,9 @@ props:
99
value: "{!offset-0} {!offset-0} {!offset-80} {!offset-0} {!palette-blue-50-transparent-30}"
1010
shadow-border-weak:
1111
value: "{!palette-gray-55}"
12+
shadow-border-primary-stronger:
13+
value: "{!palette-gray-0}"
14+
shadow-border-primary-weaker:
15+
value: "{!palette-blue-90}"
16+
shadow-elevation-10:
17+
value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-80}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"

‎packages/paste-design-tokens/tokens/themes/rebrand/global/text-color.yml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,15 @@ props:
99
value: "{!palette-gray-40}"
1010
color-text-link:
1111
value: "{!palette-gray-0}"
12+
color-text-neutral:
13+
value: "{!palette-gray-0}"
14+
color-text-warning-strong:
15+
value: "{!palette-gray-0}"
16+
color-text-success:
17+
value: "{!palette-gray-0}"
18+
color-text-new:
19+
value: "{!palette-gray-0}"
20+
color-text-icon-neutral:
21+
value: "{!palette-blue-10}"
22+
color-text-icon:
23+
value: "{!palette-gray-30}"

‎packages/paste-theme/stories/rebrandMockup.stories.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import { Alert } from "@twilio-paste/alert";
2+
import type { AlertProps } from "@twilio-paste/alert";
3+
import { Anchor } from "@twilio-paste/anchor";
4+
import { Avatar } from "@twilio-paste/avatar";
5+
import type { AvatarProps } from "@twilio-paste/avatar";
6+
import { Box } from "@twilio-paste/box";
7+
import { Button } from "@twilio-paste/button";
8+
import type { ButtonProps } from "@twilio-paste/button";
9+
import { ButtonGroup } from "@twilio-paste/button-group";
10+
import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout";
11+
import type { CalloutProps } from "@twilio-paste/callout";
12+
import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
13+
import type { DisclosureHeadingProps } from "@twilio-paste/disclosure";
14+
import { DisplayHeading } from "@twilio-paste/display-heading";
15+
import { Heading } from "@twilio-paste/heading";
16+
import { Input } from "@twilio-paste/input";
17+
import { Paragraph } from "@twilio-paste/paragraph";
18+
import { Option, Select } from "@twilio-paste/select";
19+
import { Stack } from "@twilio-paste/stack";
20+
import { TextArea } from "@twilio-paste/textarea";
21+
import * as React from "react";
22+
23+
import { ThemeProvider } from "../src/themeProvider";
24+
25+
// eslint-disable-next-line import/no-default-export
26+
export default {
27+
title: "Theme/Themes",
28+
component: ThemeProvider,
29+
};
30+
31+
export const RebrandMockup = (): React.ReactNode => (
32+
<Box backgroundColor="colorBackgroundBody">
33+
<Stack orientation="vertical" spacing="space200">
34+
<Box>
35+
<Heading as="h2" variant="heading10">
36+
Rebrand Theme
37+
</Heading>
38+
<DisplayHeading variant="displayHeading10" as="h1">
39+
Display Heading 1
40+
</DisplayHeading>
41+
<DisplayHeading variant="displayHeading20" as="h2">
42+
Display Heading 2
43+
</DisplayHeading>
44+
<DisplayHeading variant="displayHeading30" as="h3">
45+
Display Heading 3
46+
</DisplayHeading>
47+
<Heading as="h3" variant="heading20">
48+
Paragraph and Inputs
49+
</Heading>
50+
<Paragraph>
51+
Lorem <Anchor href="#">ipsum</Anchor> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
52+
incididunt ut labore et dolore magna aliqua. Nisi porta lorem mollis aliquam ut porttitor leo. Hendrerit
53+
gravida rutrum quisque non. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Tortor dignissim
54+
convallis aenean et tortor at risus. Vestibulum lorem sed risus ultricies. Tempor nec feugiat nisl pretium
55+
fusce id. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. In ante metus dictum at. Sit amet
56+
risus nullam eget felis eget nunc lobortis.
57+
</Paragraph>
58+
<Stack orientation="vertical" spacing="space50">
59+
<Input aria-label="Search" placeholder="Search options..." type="text" />
60+
<Select aria-label="Options">
61+
<Option value="option1">Option 1</Option>
62+
</Select>
63+
<TextArea aria-label="Feedback" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
64+
</Stack>
65+
</Box>
66+
<Box>
67+
<Heading as="h3" variant="heading20">
68+
Button variants
69+
</Heading>
70+
<ButtonGroup>
71+
{"primary primary_icon secondary secondary_icon destructive destructive_icon destructive_link destructive_secondary link inverse reset"
72+
.split(" ")
73+
.filter((variant) => !variant.includes("icon"))
74+
.map((variant) => (
75+
<Button key={variant} variant={variant as ButtonProps["variant"]} onClick={() => {}}>
76+
{variant} variant
77+
</Button>
78+
))}
79+
</ButtonGroup>
80+
</Box>
81+
<Box>
82+
<Heading as="h3" variant="heading20">
83+
Callout variants
84+
</Heading>
85+
<Stack orientation="horizontal" spacing="space40">
86+
{"neutral warning error success new".split(" ").map((variant) => {
87+
return (
88+
<Callout key={variant} variant={variant as CalloutProps["variant"]}>
89+
<CalloutHeading as="h2">{variant} heading</CalloutHeading>
90+
<CalloutText>{variant} variant text</CalloutText>
91+
</Callout>
92+
);
93+
})}
94+
</Stack>
95+
</Box>
96+
<Box>
97+
<Heading as="h3" variant="heading20">
98+
Alert variants
99+
</Heading>
100+
<Stack orientation="horizontal" spacing="space40">
101+
{"error neutral warning".split(" ").map((variant) => {
102+
return (
103+
<Alert key={variant} variant={variant as AlertProps["variant"]}>
104+
{variant} variant
105+
</Alert>
106+
);
107+
})}
108+
</Stack>
109+
</Box>
110+
<Box>
111+
<Heading as="h3" variant="heading20">
112+
Avatar
113+
</Heading>
114+
<Stack orientation="horizontal" spacing="space40">
115+
{"30 40 50 60 70 80 90 100 110".split(" ").map((size) => {
116+
return <Avatar key={size} size={`sizeIcon${size}` as AvatarProps["size"]} name={size} />;
117+
})}
118+
</Stack>
119+
</Box>
120+
<Box>
121+
<Heading as="h3" variant="heading20">
122+
Disclosure
123+
</Heading>
124+
<Stack orientation="vertical" spacing="space70">
125+
{"10 20 30 40 50 60".split(" ").map((size) => {
126+
return (
127+
<Disclosure key={size}>
128+
<DisclosureHeading as="h2" variant={`heading${size}` as DisclosureHeadingProps["variant"]}>
129+
Disclosure Heading
130+
</DisclosureHeading>
131+
<DisclosureContent>Content</DisclosureContent>
132+
</Disclosure>
133+
);
134+
})}
135+
</Stack>
136+
</Box>
137+
</Stack>
138+
</Box>
139+
);

0 commit comments

Comments
 (0)