Skip to content
Permalink
Browse files

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
  • Loading branch information...
SiTaggart committed Aug 16, 2019
1 parent ec6beef commit 706643ba49231b8866e3068eb0f5cef8cf1aba86
@@ -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
@@ -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"
@@ -7,6 +7,7 @@ imports:
- ./font-family.yml
- ./font-size.yml
- ./font-weight.yml
- ./line-height.yml
- ./palette-color.yml
- ./sizing.yml
- ./spacing.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"
@@ -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"
@@ -7,6 +7,7 @@ imports:
- ./font-family.yml
- ./font-size.yml
- ./font-weight.yml
- ./line-height.yml
- ./palette-color.yml
- ./sizing.yml
- ./spacing.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"
@@ -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,
};
@@ -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,
};
@@ -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')};
`;
@@ -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 => (
@@ -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>
@@ -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

1 comment on commit 706643b

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.