feat(tokens): Add box-shadow and line-height tokens (#35)

* feat: add focus box-shadow token * fix(tokens): correct the font size token names in font sizes * feat(tokens): add line-height tokens * fix(tokens): missing digit from SG line-height-70 * feat(theme): add line height tokens to the theme * fix: line-heights and usage of them in the site components
twilio-labs · Aug 16, 2019 · 706643b · 706643b · vercel · Aug 16, 2019
1 parent ec6beef
commit 706643b
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 56 deletions.
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -3,7 +3,12 @@ global:
   category: shadow
 imports:
   - ../aliases/box-shadow.yml
+  - ../aliases/offset.yml
 props:
   shadow-card:
     value: "{!shadow-elevation-10}"
     comment: Shadow for cards.
+  shadow-focus:
+    # TODO: need a better solution for this transparent blue
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-20}px rgba(0,117,195,0.5)"
+    comment: Shadow for focus ring on interactive elements
diff --git a/packages/paste-design-tokens/tokens/global/font-size.yml b/packages/paste-design-tokens/tokens/global/font-size.yml
@@ -6,31 +6,31 @@ imports:
 props:
   font-size-10:
     value: "{!font-size-10}"
-    comment: "Constant typography token for font size 0"
+    comment: "Constant typography token for font size 10"
   font-size-20:
     value: "{!font-size-20}"
-    comment: "Constant typography token for font size 1"
+    comment: "Constant typography token for font size 20"
   font-size-30:
     value: "{!font-size-30}"
-    comment: "Constant typography token for font size 2"
+    comment: "Constant typography token for font size 30"
   font-size-40:
     value: "{!font-size-40}"
-    comment: "Constant typography token for font size 3"
+    comment: "Constant typography token for font size 40"
   font-size-50:
     value: "{!font-size-50}"
-    comment: "Constant typography token for font size 4"
+    comment: "Constant typography token for font size 50"
   font-size-60:
     value: "{!font-size-60}"
-    comment: "Constant typography token for font size 5"
+    comment: "Constant typography token for font size 60"
   font-size-70:
     value: "{!font-size-70}"
-    comment: "Constant typography token for font size 6"
+    comment: "Constant typography token for font size 70"
   font-size-80:
     value: "{!font-size-80}"
-    comment: "Constant typography token for font size 7"
+    comment: "Constant typography token for font size 80"
   font-size-90:
     value: "{!font-size-90}"
-    comment: "Constant typography token for font size 8"
+    comment: "Constant typography token for font size 90"
   font-size-100:
     value: "{!font-size-100}"
-    comment: "Constant typography token for font size 9"
+    comment: "Constant typography token for font size 100"
diff --git a/packages/paste-design-tokens/tokens/global/index.yml b/packages/paste-design-tokens/tokens/global/index.yml
@@ -7,6 +7,7 @@ imports:
   - ./font-family.yml
   - ./font-size.yml
   - ./font-weight.yml
+  - ./line-height.yml
   - ./palette-color.yml
   - ./sizing.yml
   - ./spacing.yml

diff --git a/packages/paste-design-tokens/tokens/global/line-height.yml b/packages/paste-design-tokens/tokens/global/line-height.yml
@@ -0,0 +1,34 @@
+global:
+  category: line-height
+  type: number
+props:
+  line-height-10:
+    value: "1.666666667" ##12px * 1.666666667 = 20px
+    comment: "Constant line-height token for font size 10"
+  line-height-20:
+    value: "1.714285714" ##14px * 1.714285714 = 24px
+    comment: "Constant line-height token for font size 20"
+  line-height-30:
+    value: "1.5" ##16px * 1.5 = 24px
+    comment: "Constant line-height token for font size 30"
+  line-height-40:
+    value: "1.555555556" ##18px * 1.555555556 = 28px
+    comment: "Constant line-height token for font size 40"
+  line-height-50:
+    value: "1.6" ##20px * 1.6 = 32px
+    comment: "Constant line-height token for font size 50"
+  line-height-60:
+    value: "1.5" ##24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 60"
+  line-height-70:
+    value: "1.5" ##24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 70"
+  line-height-80:
+    value: "1.5" ##24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 80"
+  line-height-90:
+    value: "1.5" ##24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 90"
+  line-height-100:
+    value: "1.5" ##24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 100"
diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/font-size.yml
@@ -7,31 +7,31 @@ imports:
 props:
   font-size-10:
     value: "{!font-size-10}"
-    comment: "Constant typography token for font size 0"
+    comment: "Constant typography token for font size 10"
   font-size-20:
     value: "{!font-size-20}"
-    comment: "Constant typography token for font size 1"
+    comment: "Constant typography token for font size 20"
   font-size-30:
     value: "{!font-size-30}"
-    comment: "Constant typography token for font size 2"
+    comment: "Constant typography token for font size 30"
   font-size-40:
     value: "{!font-size-40}"
-    comment: "Constant typography token for font size 3"
+    comment: "Constant typography token for font size 40"
   font-size-50:
     value: "{!font-size-50}"
-    comment: "Constant typography token for font size 4"
+    comment: "Constant typography token for font size 50"
   font-size-60:
     value: "{!font-size-60}"
-    comment: "Constant typography token for font size 5"
+    comment: "Constant typography token for font size 60"
   font-size-70:
     value: "{!font-size-70}"
-    comment: "Constant typography token for font size 6"
+    comment: "Constant typography token for font size 70"
   font-size-80:
     value: "{!font-size-80}"
-    comment: "Constant typography token for font size 7"
+    comment: "Constant typography token for font size 80"
   font-size-90:
     value: "{!font-size-90}"
-    comment: "Constant typography token for font size 8"
+    comment: "Constant typography token for font size 90"
   font-size-100:
     value: "{!font-size-100}"
-    comment: "Constant typography token for font size 9"
+    comment: "Constant typography token for font size 100"
diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/index.yml
@@ -7,6 +7,7 @@ imports:
   - ./font-family.yml
   - ./font-size.yml
   - ./font-weight.yml
+  - ./line-height.yml
   - ./palette-color.yml
   - ./sizing.yml
   - ./spacing.yml

diff --git a/packages/paste-design-tokens/tokens/themes/sendgrid/global/line-height.yml b/packages/paste-design-tokens/tokens/themes/sendgrid/global/line-height.yml
@@ -0,0 +1,36 @@
+global:
+  category: line-height
+  type: number
+imports:
+  - ../../../global/line-height.yml
+props:
+  line-height-10:
+    value: "1.666666667" #12px * 1.666666667 = 20px
+    comment: "Constant line-height token for font size 10"
+  line-height-20:
+    value: "1.714285714" #14px * 1.714285714 = 24px
+    comment: "Constant line-height token for font size 20"
+  line-height-30:
+    value: "1.5" #16px * 1.5 = 24px
+    comment: "Constant line-height token for font size 30"
+  line-height-40:
+    value: "1.555555556" #18px * 1.555555556 = 28px
+    comment: "Constant line-height token for font size 40"
+  line-height-50:
+    value: "1.6" #20px * 1.6 = 32px
+    comment: "Constant line-height token for font size 50"
+  line-height-60:
+    value: "1.5" #24px * 1.5 = 36px
+    comment: "Constant line-height token for font size 60"
+  line-height-70:
+    value: "1.571428571" #28px * 1.57 = 44px
+    comment: "Constant line-height token for font size 70"
+  line-height-80:
+    value: "1.5" #32px * 1.5 = 48px
+    comment: "Constant line-height token for font size 80"
+  line-height-90:
+    value: "1.5" #32px * 1.5 = 48px
+    comment: "Constant line-height token for font size 90"
+  line-height-100:
+    value: "1.5" #32px * 1.5 = 48px
+    comment: "Constant line-height token for font size 100"
diff --git a/packages/paste-theme-tokens/src/default/index.ts b/packages/paste-theme-tokens/src/default/index.ts
@@ -7,6 +7,7 @@ import {
   fonts,
   fontSizes,
   fontWeights,
+  lineHeights,
   shadows,
   sizings,
   spacings,
@@ -16,16 +17,6 @@ import {
 
 const breakpoints = [sizings.size40, sizings.size100, sizings.size120];
 const space = {...spacings};
-const lineHeights = {
-  lineHeight10: '0.75rem', // #12px
-  lineHeight20: '1rem', // #16px
-  lineHeight30: '1.25rem', // #20px
-  lineHeight40: '1.5rem', // #24px
-  lineHeight50: '1.75rem', // #28px
-  lineHeight60: '2rem', // #32px
-  lineHeight70: '2.25rem', // #36px
-  lineHeight80: '2.5rem', // #40px
-};
 const maxWidths = {
   ...sizings,
 };

diff --git a/packages/paste-theme-tokens/src/sendgrid/index.ts b/packages/paste-theme-tokens/src/sendgrid/index.ts
@@ -7,6 +7,7 @@ import {
   fonts,
   fontSizes,
   fontWeights,
+  lineHeights,
   shadows,
   sizings,
   spacings,
@@ -16,16 +17,6 @@ import {
 
 const breakpoints = [sizings.size40, sizings.size100, sizings.size120];
 const space = {...spacings};
-const lineHeights = {
-  lineHeight10: '0.75rem', // #12px
-  lineHeight20: '1rem', // #16px
-  lineHeight30: '1.25rem', // #20px
-  lineHeight40: '1.5rem', // #24px
-  lineHeight50: '1.75rem', // #28px
-  lineHeight60: '2rem', // #32px
-  lineHeight70: '2.25rem', // #36px
-  lineHeight80: '2.5rem', // #40px
-};
 const maxWidths = {
   ...sizings,
 };
@@ -39,22 +30,22 @@ const heights = {
   ...sizings,
 };
 export const SendGridTheme = {
-  colors,
-  shadows,
-  space,
+  backgroundColors,
+  borderColors,
+  borderWidths,
   breakpoints,
-  fontSizes,
+  colors,
   fonts,
+  fontSizes,
   fontWeights,
+  heights,
   lineHeights,
-  textColors,
-  backgroundColors,
-  borderColors,
   maxWidths,
   minWidths,
-  widths,
-  heights,
   radii,
-  borderWidths,
+  shadows,
+  space,
+  textColors,
+  widths,
   zIndices,
 };
diff --git a/packages/paste-website/src/components/breadcrumb/index.tsx b/packages/paste-website/src/components/breadcrumb/index.tsx
@@ -27,7 +27,7 @@ const Breadcrumb: React.FC<{}> = ({children}) => {
 // TODO use correct tokens for lineHeight after fix
 const BreadcrumbItem = styled(Link)`
   font-size: ${themeGet('fontSizes.fontSize20')};
-  line-height: ${themeGet('lineHeights.lineHeight50')};
+  line-height: ${themeGet('lineHeights.lineHeight20')};
   letter-spacing: normal;
   color: ${themeGet('textColors.colorTextLink')};
 `;

diff --git a/packages/paste-website/src/components/paste-mdx-provider/index.tsx b/packages/paste-website/src/components/paste-mdx-provider/index.tsx
@@ -47,7 +47,7 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
       components={{
         ...shortcodes,
         h1: (props: React.ComponentProps<typeof Text>): React.ReactElement => (
-          <Text {...props} as="h1" marginBottom="space90" fontSize="fontSize80" lineHeight="lineHeight60" />
+          <Text {...props} as="h1" marginBottom="space90" fontSize="fontSize80" lineHeight="lineHeight80" />
         ),
         h2: (props: React.ComponentProps<typeof Text>): React.ReactElement => (
           <Text
@@ -56,7 +56,7 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
             marginTop="space60"
             marginBottom="space60"
             fontSize="fontSize60"
-            lineHeight="lineHeight40"
+            lineHeight="lineHeight60"
           />
         ),
         h3: (props: React.ComponentProps<typeof Text>): React.ReactElement => (
@@ -66,7 +66,7 @@ export const PasteMDXProvider: React.FC<PasteMDXProviderProps> = (props: PasteMD
             marginTop="space60"
             marginBottom="space60"
             fontSize="fontSize50"
-            lineHeight="lineHeight30"
+            lineHeight="lineHeight50"
           />
         ),
         h4: (props: React.ComponentProps<typeof Text>): React.ReactElement => (

diff --git a/packages/paste-website/src/components/tokens-example/index.tsx b/packages/paste-website/src/components/tokens-example/index.tsx
@@ -66,7 +66,7 @@ export const TextColorBox: React.FC<TextColorBoxProps> = ({color, textColor}) =>
       <Text as="span" fontSize="fontSize60" lineHeight="lineHeight60" textColor={textColor}>
         <ScreenReaderOnly>Example text: </ScreenReaderOnly>Ag
       </Text>
-      <Text as="span" fontSize="fontSize40" lineHeight="lineHeight30" textColor={textColor}>
+      <Text as="span" fontSize="fontSize40" lineHeight="lineHeight40" textColor={textColor}>
         <ScreenReaderOnly>Accessibility rating: </ScreenReaderOnly>
         {getContrastRating(accessibility)}
       </Text>

diff --git a/packages/paste-website/src/pages/tokens/index.mdx b/packages/paste-website/src/pages/tokens/index.mdx
@@ -14,7 +14,7 @@ import {TokensList} from '../../components/tokens-list';
 Laboris Lorem veniam nostrud enim do esse mollit adipisicing dolore proident labore elit et. Adipisicing sint incididunt ipsum nisi ut mollit et id est consequat qui cillum magna enim. Occaecat voluptate aute nisi aute magna enim minim quis. Irure minim nisi culpa ipsum nisi duis enim laboris officia occaecat laborum est. Duis reprehenderit magna eu laboris. Enim ad id nulla esse do excepteur.
 
 <Box backgroundColor="colorBackground" borderRadius="borderRadius20" padding="space80" my="space100" maxWidth="size40">
-  <Text as="p" lineHeight="lineHeight30" marginBottom="space40">
+  <Text as="p" marginBottom="space40">
     Working on Sketch? Download it from here. No access?{' '}
     <Anchor href="#">
       Send us a request