Skip to content

Commit c7eb78c

Browse files
nkrantznkrantz
committed
chore: feb 12 tokens
1 parent 3e9bf5f commit c7eb78c

30 files changed

+445
-3
lines changed

‎.storybook/preview-head.html

+3
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
crossorigin="anonymous"
3434
/>
3535
<link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.5.2/fonts.css" />
36+
<link rel="preconnect" href="https://fonts.googleapis.com" />
37+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
38+
<link href="https://fonts.googleapis.com/css2?family=Tektur:[email protected]&display=swap" rel="stylesheet" />
3639
<script>
3740
window.global = window;
3841
window.process = {

‎.storybook/preview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const globalTypes = {
2222
// https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
2323
icon: "paintbrush",
2424
// array of plain string values or MenuItem shape (see below)
25-
items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark"],
25+
items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark", "rebrand"],
2626
},
2727
},
2828
theme_layout: {

‎packages/paste-design-tokens/tokens/themes/rebrand/aliases/color-palette.yml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
imports:
2+
- ../../../aliases/color-palette.yml
3+
aliases:
4+
## Colors
5+
amaranth: "#EF223A"
6+
palette-blue-05: "E4F7FF"
7+
palette-blue-10: "A5EBFF"
8+
palette-blue-20: "3ACEFA"
9+
palette-blue-30: "19ABF3"
10+
palette-blue-40: "2188EF"
11+
palette-blue-50: "1866EE"
12+
palette-blue-60: "1953B9"
13+
palette-blue-70: "0E3E92"
14+
palette-blue-80: "0B2A60"
15+
palette-blue-85: "081F47"
16+
palette-blue-90: "000D25"
17+
palette-blue-50-transparent-30: "EEEEEE"
18+
palette-gray-05: "F3F4F7"
19+
palette-gray-10: "DDE0E6"
20+
palette-gray-20: "BABECC"
21+
palette-gray-30: "9AA0B4"
22+
palette-gray-40: "7E869C"
23+
palette-gray-50: "656E87"
24+
palette-gray-60: "4D5777"
25+
palette-gray-70: "38425E"
26+
palette-gray-80: "232B45"
27+
palette-gray-85: "191F36"
28+
palette-gray-90: "080C18"
29+
palette-gray-100: "080C18"

‎packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-family.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
aliases:
2+
font-family-rebrand: "'Tektur', 'TwilioSansDisplay', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"

‎packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-size.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
aliases:
2+
font-size-display-10: "2.25rem" #36px

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
global:
2+
type: color
3+
category: background-color
4+
imports:
5+
- ../../twilio-dark/global/background-color.yml
6+
- ../../../aliases/border-radius.yml
7+
props:
8+
color-background:
9+
value: "{!palette-gray-80}"
10+
color-background-weaker:
11+
value: "{!palette-gray-85}"
12+
color-background-strong:
13+
value: "{!palette-gray-75}"
14+
color-background-body:
15+
value: "{!palette-gray-100}"
16+
color-background-body-inverse:
17+
value: "{!palette-gray-110}"
18+
color-background-inverse:
19+
value: "{!palette-gray-110}"

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

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
global:
2+
type: color
3+
category: border-color
4+
imports:
5+
- ../../twilio-dark/global/border-color.yml
6+
- ../../../aliases/color-palette.yml
7+
8+
props:
9+
color-border-primary:
10+
value: "{!palette-blue-30}"

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
global:
2+
type: size
3+
category: radius
4+
imports:
5+
- ../../twilio-dark/global/border-radius.yml
6+
- ../../../aliases/border-radius.yml
7+
props:
8+
border-radius-20:
9+
value: "{!border-radius-pill}"
10+
border-radius-30:
11+
value: "{!border-radius-60}"

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: size
3+
category: border-width
4+
imports:
5+
- ../../twilio-dark/global/border-width.yml

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
global:
2+
type: shadow
3+
category: box-shadow
4+
imports:
5+
- ../../twilio-dark/global/box-shadow.yml
6+
- ../aliases/color-palette.yml
7+
props:
8+
shadow-brand-10:
9+
value: "{!offset-0} {!offset-0} {!offset-80} {!offset-0} {!palette-blue-50-transparent-30}"
10+
shadow-border-weak:
11+
value: "{!palette-gray-55}"

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: string
3+
category: color-scheme
4+
imports:
5+
- ../../../themes/twilio-dark/global/color-scheme.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/global/data-visualization.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: color
3+
category: data-visualization
4+
imports:
5+
- ../../twilio-dark/global/data-visualization.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/global/font-family.yml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
global:
2+
category: font
3+
type: font
4+
imports:
5+
- ../../twilio-dark/global/font-family.yml
6+
- ../aliases/font-family.yml
7+
props:
8+
font-family-display:
9+
value: "{!font-family-rebrand}"

‎packages/paste-design-tokens/tokens/themes/rebrand/global/font-size.yml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
global:
2+
category: font-size
3+
type: font-size
4+
imports:
5+
- ../../twilio-dark/global/font-size.yml
6+
- ../aliases/font-size.yml
7+
props:
8+
font-size-display-10:
9+
value: "{!font-size-display-10}"

‎packages/paste-design-tokens/tokens/themes/rebrand/global/font-weight.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
global:
2+
category: font-weight
3+
type: font-weight
4+
imports:
5+
- ../../twilio/global/font-weight.yml
6+
props:
7+
font-weight-extrabold:
8+
value: "{!font-weight-bold}"

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

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
imports:
2+
- ./background-color.yml
3+
- ./border-color.yml
4+
- ./border-radius.yml
5+
- ./border-width.yml
6+
- ./box-shadow.yml
7+
- ./font-family.yml
8+
- ./font-size.yml
9+
- ./font-weight.yml
10+
- ./line-height.yml
11+
- ./palette-color.yml
12+
- ./data-visualization.yml
13+
- ./sizing.yml
14+
- ./spacing.yml
15+
- ./text-color.yml
16+
- ./z-index.yml
17+
- ./color-scheme.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/global/line-height.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
category: line-height
3+
type: number
4+
imports:
5+
- ../../twilio-dark/global/line-height.yml

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: color
3+
category: color
4+
imports:
5+
- ../../twilio-dark/global/palette-color.yml

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: size
3+
category: sizing
4+
imports:
5+
- ../../twilio-dark/global/sizing.yml

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
category: spacing
3+
type: size
4+
imports:
5+
- ../../twilio-dark/global/spacing.yml

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: color
3+
category: text-color
4+
imports:
5+
- ../../twilio-dark/global/text-color.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/global/z-index.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
global:
2+
type: z-index
3+
category: z-index
4+
imports:
5+
- ../../twilio-dark/global/z-index.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/sketch.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
imports:
2+
- ./global/background-color.yml
3+
- ./global/border-color.yml
4+
- ./global/palette-color.yml
5+
- ./global/text-color.yml

‎packages/paste-design-tokens/tokens/themes/rebrand/tokens.yml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
imports:
2+
- ./global/index.yml

‎packages/paste-theme/src/constants.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const ThemeVariants = {
77
TWILIO: "twilio",
88
TWILIO_DARK: "twilio-dark",
99
EVERGREEN: "evergreen",
10+
REBRAND: "rebrand",
1011
};
1112

1213
// eslint-disable-next-line @typescript-eslint/no-redeclare

‎packages/paste-theme/src/styles/fonts.ts

+52
Original file line numberDiff line numberDiff line change
@@ -322,4 +322,56 @@ Twilio Sans Display
322322
url('https://assets.twilio.com/public_assets/paste-fonts/1.5.2/TwilioSansDisplay-ExtraboldItl.woff2') format('woff2'),
323323
url('https://assets.twilio.com/public_assets/paste-fonts/1.5.2/TwilioSansDisplay-ExtraboldItl.woff') format('woff');
324324
}
325+
326+
/*
327+
Tektur
328+
*/
329+
@font-face {
330+
font-family: "Tektur", serif;
331+
font-style: normal;
332+
font-display: swap;
333+
font-weight: 400;
334+
src: local(''),
335+
url('https://fonts.googleapis.com/css2?family=Tektur&display=swap');
336+
}
337+
@font-face {
338+
font-family: "Tektur", serif;
339+
font-style: normal;
340+
font-display: swap;
341+
font-weight: 500;
342+
src: local(''),
343+
url('https://fonts.googleapis.com/css2?family=Tektur:wght@500&display=swap');
344+
}
345+
@font-face {
346+
font-family: "Tektur", serif;
347+
font-style: normal;
348+
font-display: swap;
349+
font-weight: 600;
350+
src: local(''),
351+
url('https://fonts.googleapis.com/css2?family=Tektur:wght@600&display=swap');
352+
}
353+
@font-face {
354+
font-family: "Tektur", serif;
355+
font-style: normal;
356+
font-display: swap;
357+
font-weight: 700;
358+
src: local(''),
359+
url('https://fonts.googleapis.com/css2?family=Tektur:wght@700&display=swap');
360+
}
361+
@font-face {
362+
font-family: "Tektur", serif;
363+
font-style: normal;
364+
font-display: swap;
365+
font-weight: 800;
366+
src: local(''),
367+
url('https://fonts.googleapis.com/css2?family=Tektur:wght@800&display=swap');
368+
}
369+
@font-face {
370+
font-family: "Tektur", serif;
371+
font-style: normal;
372+
font-display: swap;
373+
font-weight: 900;
374+
src: local(''),
375+
url('https://fonts.googleapis.com/css2?family=Tektur:wght@900&display=swap');
376+
}
325377
`;

‎packages/paste-theme/src/themeProvider.tsx

+14-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ import { ThemeVariants } from "./constants";
1313
import { pasteBaseStyles } from "./styles/base";
1414
import { pasteFonts } from "./styles/fonts";
1515
import { pasteGlobalStyles } from "./styles/global";
16-
import { DarkTheme, DefaultTheme, EvergreenTheme, SendGridTheme, TwilioDarkTheme, TwilioTheme } from "./themes";
16+
import {
17+
DarkTheme,
18+
DefaultTheme,
19+
EvergreenTheme,
20+
RebrandTheme,
21+
SendGridTheme,
22+
TwilioDarkTheme,
23+
TwilioTheme,
24+
} from "./themes";
1725
import { getThemeFromHash } from "./utils/getThemeFromHash";
1826

1927
export const StyledBase = styled.div(pasteBaseStyles);
@@ -39,6 +47,11 @@ const useThemeOverwriteHook = (): string | undefined => {
3947
// eslint-disable-next-line @typescript-eslint/ban-types
4048
function getProviderThemeProps(theme: ThemeVariants, customBreakpoints?: string[]): {} {
4149
switch (theme) {
50+
case ThemeVariants.REBRAND:
51+
return {
52+
...RebrandTheme,
53+
breakpoints: customBreakpoints || RebrandTheme.breakpoints,
54+
};
4255
case ThemeVariants.TWILIO:
4356
return {
4457
...TwilioTheme,

‎packages/paste-theme/src/themes/index.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
import { DarkTheme } from "./dark";
22
import { DefaultTheme } from "./default";
33
import { EvergreenTheme } from "./evergreen";
4+
import { RebrandTheme } from "./rebrand";
45
import { SendGridTheme } from "./sendgrid";
56
import { TwilioTheme } from "./twilio";
67
import { TwilioDarkTheme } from "./twilio-dark";
78

89
const ConsoleTheme = DefaultTheme;
910

10-
export { DefaultTheme, ConsoleTheme, SendGridTheme, DarkTheme, TwilioTheme, TwilioDarkTheme, EvergreenTheme };
11+
export {
12+
DefaultTheme,
13+
ConsoleTheme,
14+
SendGridTheme,
15+
DarkTheme,
16+
TwilioTheme,
17+
TwilioDarkTheme,
18+
EvergreenTheme,
19+
RebrandTheme,
20+
};

‎packages/paste-theme/src/themes/rebrand/index.ts

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
backgroundColors,
3+
borderColors,
4+
borderWidths,
5+
boxShadows,
6+
colorSchemes,
7+
colors,
8+
dataVisualization,
9+
fontSizes,
10+
fontWeights,
11+
fonts,
12+
lineHeights,
13+
radii,
14+
sizings,
15+
spacings,
16+
textColors,
17+
zIndices,
18+
} from "@twilio-paste/design-tokens/dist/themes/rebrand/tokens.es6";
19+
20+
import { generateThemeFromTokens } from "../../generateThemeFromTokens";
21+
22+
export const RebrandTheme = generateThemeFromTokens({
23+
backgroundColors,
24+
borderColors,
25+
borderWidths,
26+
radii,
27+
fonts,
28+
fontSizes,
29+
fontWeights,
30+
lineHeights,
31+
boxShadows,
32+
sizings,
33+
spacings,
34+
textColors,
35+
zIndices,
36+
dataVisualization,
37+
colors,
38+
colorSchemes,
39+
});

0 commit comments

Comments
 (0)