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

Simon Taggart · web-flow · commit 706643ba4923 · 2019-08-15T18:28:18.000-07:00
* 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
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
