chore: feb 12 tokens

nkrantz · nkrantz · commit c7eb78c3ebc1 · 2025-02-14T11:36:14.000-05:00
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -33,6 +33,9 @@
   crossorigin="anonymous"
 />
 <link rel="stylesheet" href="https://assets.twilio.com/public_assets/paste-fonts/1.5.2/fonts.css" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet" />
 <script>
   window.global = window;
   window.process = {
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,7 +22,7 @@ export const globalTypes = {
       // https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
       icon: "paintbrush",
       // array of plain string values or MenuItem shape (see below)
-      items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark"],
+      items: ["default", "dark", "sendgrid", "evergreen", "twilio", "twilio-dark", "rebrand"],
     },
   },
   theme_layout: {
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/themes/rebrand/aliases/color-palette.yml
@@ -0,0 +1,29 @@
+imports:
+  - ../../../aliases/color-palette.yml
+aliases:
+  ## Colors
+  amaranth: "#EF223A"
+  palette-blue-05: "E4F7FF"
+  palette-blue-10: "A5EBFF"
+  palette-blue-20: "3ACEFA"
+  palette-blue-30: "19ABF3"
+  palette-blue-40: "2188EF"
+  palette-blue-50: "1866EE"
+  palette-blue-60: "1953B9"
+  palette-blue-70: "0E3E92"
+  palette-blue-80: "0B2A60"
+  palette-blue-85: "081F47"
+  palette-blue-90: "000D25"
+  palette-blue-50-transparent-30: "EEEEEE"
+  palette-gray-05: "F3F4F7"
+  palette-gray-10: "DDE0E6"
+  palette-gray-20: "BABECC"
+  palette-gray-30: "9AA0B4"
+  palette-gray-40: "7E869C"
+  palette-gray-50: "656E87"
+  palette-gray-60: "4D5777"
+  palette-gray-70: "38425E"
+  palette-gray-80: "232B45"
+  palette-gray-85: "191F36"
+  palette-gray-90: "080C18"
+  palette-gray-100: "080C18"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-family.yml b/packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-family.yml
@@ -0,0 +1,2 @@
+aliases:
+  font-family-rebrand: "'Tektur', 'TwilioSansDisplay', 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-size.yml b/packages/paste-design-tokens/tokens/themes/rebrand/aliases/font-size.yml
@@ -0,0 +1,2 @@
+aliases:
+  font-size-display-10: "2.25rem" #36px
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/background-color.yml
@@ -0,0 +1,19 @@
+global:
+  type: color
+  category: background-color
+imports:
+  - ../../twilio-dark/global/background-color.yml
+  - ../../../aliases/border-radius.yml
+props:
+  color-background:
+    value: "{!palette-gray-80}"
+  color-background-weaker:
+    value: "{!palette-gray-85}"
+  color-background-strong:
+    value: "{!palette-gray-75}"
+  color-background-body:
+    value: "{!palette-gray-100}"
+  color-background-body-inverse:
+    value: "{!palette-gray-110}"
+  color-background-inverse:
+    value: "{!palette-gray-110}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/border-color.yml
@@ -0,0 +1,10 @@
+global:
+  type: color
+  category: border-color
+imports:
+  - ../../twilio-dark/global/border-color.yml
+  - ../../../aliases/color-palette.yml
+
+props:
+  color-border-primary:
+    value: "{!palette-blue-30}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/border-radius.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/border-radius.yml
@@ -0,0 +1,11 @@
+global:
+  type: size
+  category: radius
+imports:
+  - ../../twilio-dark/global/border-radius.yml
+  - ../../../aliases/border-radius.yml
+props:
+  border-radius-20:
+    value: "{!border-radius-pill}"
+  border-radius-30:
+    value: "{!border-radius-60}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/border-width.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/border-width.yml
@@ -0,0 +1,5 @@
+global:
+  type: size
+  category: border-width
+imports:
+  - ../../twilio-dark/global/border-width.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/box-shadow.yml
@@ -0,0 +1,11 @@
+global:
+  type: shadow
+  category: box-shadow
+imports:
+  - ../../twilio-dark/global/box-shadow.yml
+  - ../aliases/color-palette.yml
+props:
+  shadow-brand-10:
+    value: "{!offset-0} {!offset-0} {!offset-80} {!offset-0} {!palette-blue-50-transparent-30}"
+  shadow-border-weak:
+    value: "{!palette-gray-55}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/color-scheme.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/color-scheme.yml
@@ -0,0 +1,5 @@
+global:
+  type: string
+  category: color-scheme
+imports:
+  - ../../../themes/twilio-dark/global/color-scheme.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/data-visualization.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/data-visualization.yml
@@ -0,0 +1,5 @@
+global:
+  type: color
+  category: data-visualization
+imports:
+  - ../../twilio-dark/global/data-visualization.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/font-family.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/font-family.yml
@@ -0,0 +1,9 @@
+global:
+  category: font
+  type: font
+imports:
+  - ../../twilio-dark/global/font-family.yml
+  - ../aliases/font-family.yml
+props:
+  font-family-display:
+    value: "{!font-family-rebrand}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/font-size.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/font-size.yml
@@ -0,0 +1,9 @@
+global:
+  category: font-size
+  type: font-size
+imports:
+  - ../../twilio-dark/global/font-size.yml
+  - ../aliases/font-size.yml
+props:
+  font-size-display-10:
+    value: "{!font-size-display-10}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/font-weight.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/font-weight.yml
@@ -0,0 +1,8 @@
+global:
+  category: font-weight
+  type: font-weight
+imports:
+  - ../../twilio/global/font-weight.yml
+props:
+  font-weight-extrabold:
+    value: "{!font-weight-bold}"
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/index.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/index.yml
@@ -0,0 +1,17 @@
+imports:
+  - ./background-color.yml
+  - ./border-color.yml
+  - ./border-radius.yml
+  - ./border-width.yml
+  - ./box-shadow.yml
+  - ./font-family.yml
+  - ./font-size.yml
+  - ./font-weight.yml
+  - ./line-height.yml
+  - ./palette-color.yml
+  - ./data-visualization.yml
+  - ./sizing.yml
+  - ./spacing.yml
+  - ./text-color.yml
+  - ./z-index.yml
+  - ./color-scheme.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/line-height.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/line-height.yml
@@ -0,0 +1,5 @@
+global:
+  category: line-height
+  type: number
+imports:
+  - ../../twilio-dark/global/line-height.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/palette-color.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/palette-color.yml
@@ -0,0 +1,5 @@
+global:
+  type: color
+  category: color
+imports:
+  - ../../twilio-dark/global/palette-color.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/sizing.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/sizing.yml
@@ -0,0 +1,5 @@
+global:
+  type: size
+  category: sizing
+imports:
+  - ../../twilio-dark/global/sizing.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/spacing.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/spacing.yml
@@ -0,0 +1,5 @@
+global:
+  category: spacing
+  type: size
+imports:
+  - ../../twilio-dark/global/spacing.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/text-color.yml
@@ -0,0 +1,5 @@
+global:
+  type: color
+  category: text-color
+imports:
+  - ../../twilio-dark/global/text-color.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/global/z-index.yml b/packages/paste-design-tokens/tokens/themes/rebrand/global/z-index.yml
@@ -0,0 +1,5 @@
+global:
+  type: z-index
+  category: z-index
+imports:
+  - ../../twilio-dark/global/z-index.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/sketch.yml b/packages/paste-design-tokens/tokens/themes/rebrand/sketch.yml
@@ -0,0 +1,5 @@
+imports:
+  - ./global/background-color.yml
+  - ./global/border-color.yml
+  - ./global/palette-color.yml
+  - ./global/text-color.yml
diff --git a/packages/paste-design-tokens/tokens/themes/rebrand/tokens.yml b/packages/paste-design-tokens/tokens/themes/rebrand/tokens.yml
@@ -0,0 +1,2 @@
+imports:
+  - ./global/index.yml
diff --git a/packages/paste-theme/src/constants.ts b/packages/paste-theme/src/constants.ts
@@ -7,6 +7,7 @@ export const ThemeVariants = {
   TWILIO: "twilio",
   TWILIO_DARK: "twilio-dark",
   EVERGREEN: "evergreen",
+  REBRAND: "rebrand",
 };
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
diff --git a/packages/paste-theme/src/styles/fonts.ts b/packages/paste-theme/src/styles/fonts.ts
@@ -322,4 +322,56 @@ Twilio Sans Display
        url('https://assets.twilio.com/public_assets/paste-fonts/1.5.2/TwilioSansDisplay-ExtraboldItl.woff2') format('woff2'),
        url('https://assets.twilio.com/public_assets/paste-fonts/1.5.2/TwilioSansDisplay-ExtraboldItl.woff') format('woff');
 }
+
+/*
+Tektur
+*/
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur&display=swap');
+}
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur:wght@500&display=swap');
+}
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur:wght@600&display=swap');
+}
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur:wght@700&display=swap');
+}
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur:wght@800&display=swap');
+}
+@font-face {
+  font-family: "Tektur", serif;
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: local(''),
+       url('https://fonts.googleapis.com/css2?family=Tektur:wght@900&display=swap');
+}
 `;
diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
@@ -13,7 +13,15 @@ import { ThemeVariants } from "./constants";
 import { pasteBaseStyles } from "./styles/base";
 import { pasteFonts } from "./styles/fonts";
 import { pasteGlobalStyles } from "./styles/global";
-import { DarkTheme, DefaultTheme, EvergreenTheme, SendGridTheme, TwilioDarkTheme, TwilioTheme } from "./themes";
+import {
+  DarkTheme,
+  DefaultTheme,
+  EvergreenTheme,
+  RebrandTheme,
+  SendGridTheme,
+  TwilioDarkTheme,
+  TwilioTheme,
+} from "./themes";
 import { getThemeFromHash } from "./utils/getThemeFromHash";
 
 export const StyledBase = styled.div(pasteBaseStyles);
@@ -39,6 +47,11 @@ const useThemeOverwriteHook = (): string | undefined => {
 // eslint-disable-next-line @typescript-eslint/ban-types
 function getProviderThemeProps(theme: ThemeVariants, customBreakpoints?: string[]): {} {
   switch (theme) {
+    case ThemeVariants.REBRAND:
+      return {
+        ...RebrandTheme,
+        breakpoints: customBreakpoints || RebrandTheme.breakpoints,
+      };
     case ThemeVariants.TWILIO:
       return {
         ...TwilioTheme,
diff --git a/packages/paste-theme/src/themes/index.ts b/packages/paste-theme/src/themes/index.ts
@@ -1,10 +1,20 @@
 import { DarkTheme } from "./dark";
 import { DefaultTheme } from "./default";
 import { EvergreenTheme } from "./evergreen";
+import { RebrandTheme } from "./rebrand";
 import { SendGridTheme } from "./sendgrid";
 import { TwilioTheme } from "./twilio";
 import { TwilioDarkTheme } from "./twilio-dark";
 
 const ConsoleTheme = DefaultTheme;
 
-export { DefaultTheme, ConsoleTheme, SendGridTheme, DarkTheme, TwilioTheme, TwilioDarkTheme, EvergreenTheme };
+export {
+  DefaultTheme,
+  ConsoleTheme,
+  SendGridTheme,
+  DarkTheme,
+  TwilioTheme,
+  TwilioDarkTheme,
+  EvergreenTheme,
+  RebrandTheme,
+};
diff --git a/packages/paste-theme/src/themes/rebrand/index.ts b/packages/paste-theme/src/themes/rebrand/index.ts
@@ -0,0 +1,39 @@
+import {
+  backgroundColors,
+  borderColors,
+  borderWidths,
+  boxShadows,
+  colorSchemes,
+  colors,
+  dataVisualization,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  sizings,
+  spacings,
+  textColors,
+  zIndices,
+} from "@twilio-paste/design-tokens/dist/themes/rebrand/tokens.es6";
+
+import { generateThemeFromTokens } from "../../generateThemeFromTokens";
+
+export const RebrandTheme = generateThemeFromTokens({
+  backgroundColors,
+  borderColors,
+  borderWidths,
+  radii,
+  fonts,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  boxShadows,
+  sizings,
+  spacings,
+  textColors,
+  zIndices,
+  dataVisualization,
+  colors,
+  colorSchemes,
+});
diff --git a/packages/paste-theme/stories/rebrandTheme.stories.tsx b/packages/paste-theme/stories/rebrandTheme.stories.tsx

Original file line number	Diff line number	Diff 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"`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+aliases:`
	`2`	`+ font-size-display-10: "2.25rem" #36px`