Skip to content

Commit

Permalink
Removes serif from Text (#734)
Browse files Browse the repository at this point in the history 
Removes serif from Text
  • Loading branch information
@artsy-peril
artsy-peril[bot] authored Jul 20, 2020
2 parents 5490c93 + 510f1c0 commit 4fb8629
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 147 deletions.
146 changes: 10 additions & 136 deletions packages/palette-docs/content/docs/tokens/Typography.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,152 +9,26 @@ should be contextually applied. The goal is for this system to increase overall
design consistency for our product as well as to increase efficiency for both
the design and engineering teams.

<Playground showToggle={true} title="Sans" expanded={true}>
<Playground showToggle={true} title="Text" expanded={true}>
<Flex mt={4} justifyContent="space-between">
<Box>
<Sans size="16">Sans 16</Sans>
<Sans size="14">Sans 14</Sans>
<Sans size="12">Sans 12</Sans>
<Sans size="10">Sans 10</Sans>
<Sans size="8">Sans 8</Sans>
<Sans size="6">Sans 6</Sans>
<Sans size="5t">Sans 5t</Sans>
<Sans size="5">Sans 5</Sans>
<Sans size="4t">Sans 4t</Sans>
<Sans size="4">Sans 4</Sans>
<Sans size="3t">Sans 3t</Sans>
<Sans size="3">Sans 3</Sans>
<Sans size="2">Sans 2</Sans>
<Sans size="1">Sans 1</Sans>
<Text variant="largeTitle">Text largeTitle</Text>
<Text variant="title">Text title</Text>
<Text variant="subtitle">Text subtitle</Text>
<Text variant="text">Text text</Text>
<Text variant="mediumText">Text mediumText</Text>
<Text variant="caption">Text caption</Text>
<Text variant="small">Text small</Text>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Sans size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Sans>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Sans with unstable_trackIn (narrow)" expanded={false}>
<Flex mt={4} justifyContent="space-between">
<Box>
<Sans size="16" unstable_trackIn>Sans 16</Sans>
<Sans size="14" unstable_trackIn>Sans 14</Sans>
<Sans size="12" unstable_trackIn>Sans 12</Sans>
<Sans size="10" unstable_trackIn>Sans 10</Sans>
<Sans size="8" unstable_trackIn>Sans 8</Sans>
<Sans size="6" unstable_trackIn>Sans 6</Sans>
<Sans size="5t" unstable_trackIn>Sans 5t</Sans>
<Sans size="5" unstable_trackIn>Sans 5</Sans>
<Sans size="4t" unstable_trackIn>Sans 4t</Sans>
<Sans size="4" unstable_trackIn>Sans 4</Sans>
<Sans size="3t" unstable_trackIn>Sans 3t</Sans>
<Sans size="3" unstable_trackIn>Sans 3</Sans>
<Sans size="2" unstable_trackIn>Sans 2</Sans>
<Sans size="1" unstable_trackIn>Sans 1</Sans>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Sans size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Sans>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Serif" expanded={true}>
<Flex justifyContent="space-between">
<Box>
<Serif size="12">Serif 12</Serif>
<Serif size="10">Serif 10</Serif>
<Serif size="8">Serif 8</Serif>
<Serif size="6">Serif 6</Serif>
<Serif size="5t">Serif 5t</Serif>
<Serif size="5">Serif 5</Serif>
<Serif size="4t">Serif 4t</Serif>
<Serif size="4">Serif 4</Serif>
<Serif size="3t">Serif 3t</Serif>
<Serif size="3">Serif 3</Serif>
<Serif size="2">Serif 2</Serif>
<Serif size="1">Serif 1</Serif>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Serif size="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Serif>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground showToggle={true} title="Serif with unstable_trackIn (narrow)" expanded={false}>
<Flex justifyContent="space-between">
<Box>
<Serif size="12" unstable_trackIn>Serif 12</Serif>
<Serif size="10" unstable_trackIn>Serif 10</Serif>
<Serif size="8" unstable_trackIn>Serif 8</Serif>
<Serif size="6" unstable_trackIn>Serif 6</Serif>
<Serif size="5t" unstable_trackIn>Serif 5t</Serif>
<Serif size="5" unstable_trackIn>Serif 5</Serif>
<Serif size="4t" unstable_trackIn>Serif 4t</Serif>
<Serif size="4" unstable_trackIn>Serif 4</Serif>
<Serif size="3t" unstable_trackIn>Serif 3t</Serif>
<Serif size="3" unstable_trackIn>Serif 3</Serif>
<Serif size="2" unstable_trackIn>Serif 2</Serif>
<Serif size="1" unstable_trackIn>Serif 1</Serif>
</Box>
<Flex width="50%" px={2} alignItems="center">
<BorderBox>
<Serif size="5">
<Text variant="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Serif>
</Text>
</BorderBox>
</Flex>
</Flex>
</Playground>

<Spacer my={4} />

<Playground
showToggle={true}
title="Specifying the element type"
expanded={true}
>
<Flex justifyContent="space-between" flexDirection="column">
<Box>
<Serif size="8" element="h1">
This is an h1
</Serif>
<Serif size="6" element="h2">
This is an h2
</Serif>
<Sans size="4" element="p">
And this content is all within a p.
</Sans>
</Box>
</Flex>
</Playground>

<Playground showToggle={true} title="Using endash in ranges" expanded={true}>
<Flex justifyContent="space-between" flexDirection="column">
<Box>
<Serif size="8" element="h1">
{range("$10k", "$20k")}
</Serif>
</Box>
</Flex>
</Playground>
21 changes: 17 additions & 4 deletions packages/palette/src/elements/Text/Text.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,6 @@ storiesOf("Components/Text", module)
letterSpacing: "tightest",
},
{
fontFamily: "serif",
fontSize: "70px",
lineHeight: "solid",
letterSpacing: "tight",
Expand All @@ -143,13 +142,15 @@ storiesOf("Components/Text", module)
letterSpacing: "tightest",
},
{
fontFamily: "serif",
fontSize: "55px",
lineHeight: "solid",
letterSpacing: "tightest",
},
{ fontFamily: "serif" },
]
{
variant: 'text',
lineHeight: 'solid'
}
] as const

return (
<Table>
Expand Down Expand Up @@ -181,3 +182,15 @@ storiesOf("Components/Text", module)
</Table>
)
})
.add("overflowEllipsis", () => {
return (
<Text variant="text" overflowEllipsis>
All their equipment and instruments are alive. All their equipment and
instruments are alive. All their equipment and instruments are alive.
All their equipment and instruments are alive. All their equipment and
instruments are alive. All their equipment and instruments are alive.
All their equipment and instruments are alive. All their equipment and
instruments are alive. All their equipment and instruments are alive.
</Text>
)
})
19 changes: 13 additions & 6 deletions packages/palette/src/elements/Text/Text.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
import { themeGet } from "@styled-system/theme-get"
import styled, { css } from "styled-components"
import { variant } from "styled-system"
import { styled as primitives } from "../../platform/primitives"
import { textMixin, TextProps } from "./Text.shared"
import { TEXT_VARIANTS } from "./tokens"

/**
* Text
*/
export const Text = primitives.Text<TextProps>`
/** Adds ellipsis to overflowing text */
export const overflowEllipsisMixin = css`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`

/** Text */
export const Text = styled.div<TextProps & { overflowEllipsis?: boolean }>`
${variant({ variants: TEXT_VARIANTS.small })}
${textMixin}
@media (min-width: ${themeGet("breakpoints.0")}) {
${variant({ variants: TEXT_VARIANTS.large })}
${textMixin}
}
${textMixin}
${({ overflowEllipsis }) => overflowEllipsis && overflowEllipsisMixin}
`

Text.displayName = "Text"
Expand Down
1 change: 0 additions & 1 deletion packages/palette/src/elements/Text/tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,4 @@ export * from "./tokens.shared"
*/
export const TEXT_FONTS = {
sans: '"ll-unica77", "Helvetica Neue", Helvetica, Arial, sans-serif',
serif: '"adobe-garamond-pro", "Times New Roman", Times, serif',
}

0 comments on commit 4fb8629

Please sign in to comment.