Skip to content

Commit c5a92cf

Browse files
langermanklangermank
committed
graphics galore
1 parent 61c0d81 commit c5a92cf

File tree

9 files changed

+14839
-13995
lines changed

9 files changed

+14839
-13995
lines changed

‎content/foundations/color/accessibility.mdx

Whitespace-only changes.

‎content/foundations/color/base-scales.mdx

Whitespace-only changes.

‎content/foundations/color/overview.mdx

Whitespace-only changes.

‎content/foundations/color/themes.mdx

Whitespace-only changes.

‎content/foundations/color/ui-color-system.mdx

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: UI color system
3+
description:
4+
Color is a fundamental piece in the Primer visual language. In this guide you will learn about the principles,
5+
patterns, and abstractions that make Primer’s color system.
6+
---
7+
8+
import {Box} from '@primer/react'
9+
import {Caption} from '@primer/gatsby-theme-doctocat'
10+
11+
## Overview
12+
13+
GitHub's UI offers a variety of different color modes. Every pattern in Primer is built to work across all color modes out of the box.
14+
15+
When designing product interfaces in Figma, we recommend using **light mode** or **dark mode** as the Primer Web Figma library provides components and tokens in those two modes.
16+
You can learn more about using design tokens in Figma in our [Figma guidelines](../../guides/figma/getting-started#styles-and-variables).
17+
18+
### Color design tokens
19+
20+
Primer delivers colors in the form of [design tokens](https://primer.style/primitives). Design tokens are a layer of abstraction that allows better maintainability, consistency and easy theming. Within Primer, design tokens are represented as CSS variables for code and Figma variables for design. For a full reference table of all available design tokens, see the [color CSS variables](../../primitives/color) page.
21+
22+
As an example of how color tokens work, when `bgColor-default` is referenced for a background color, the value of that token will automatically change depending on the color mode.
23+
24+
<img
25+
width="960"
26+
alt="Same component shown in light mode and dark mode color palettes"
27+
src="https://github.com/primer/react/assets/18661030/21726ed0-2175-44a3-a821-af002778c0b3"
28+
/>
29+
30+
Primer design tokens are categorized into three groups: **base**, **functional**, and **component/pattern**, which can be inferred based on their naming conventions. To read more about the naming convention, see the [design token naming guidelines](../../primitives/naming-convention) page.
31+
32+
<Box display="grid" gridTemplateColumns={['1fr', null, null, null, '1fr 1fr']} gridGap={5} marginBottom={5}>
33+
<div>
34+
<img
35+
width="464"
36+
src="https://github.com/primer/react/assets/18661030/d6141e8a-012a-41bd-a23b-67d33cfd2fce"
37+
alt=""
38+
/>
39+
<p>**Base** color tokens are the lowest level tokens and map directly to a raw value. They are **only** to be used as a reference for functional and component/pattern tokens. Base color tokens don't respect color modes and should never be used directly in code or design.</p>
40+
</div>
41+
<div>
42+
<img
43+
width="464"
44+
src="https://github.com/primer/react/assets/18661030/deb7cba3-71e7-4fe5-a00e-88e3b6c8d87e"
45+
alt=""
46+
/>
47+
<p>**Functional** color tokens represent global UI patterns such as text, borders, shadows, and backgrounds. These are the most commonly used design tokens throughout all of Primer and GitHub UI. Functional color tokens reference base color tokens under the hood, and respect color modes.</p>
48+
</div>
49+
</Box>
50+
51+
<img
52+
width="960"
53+
alt="wip"
54+
src="https://github.com/primer/react/assets/18661030/200cd7f0-91dd-4e4e-b574-26612bc191b8"
55+
/>
56+
57+
**Component/pattern** color tokens represent component and pattern specific tokens. These tokens are limited and functional tokens are preferred. Component/pattern color tokens may reference both base and functional tokens under the hood, and respect color modes.
58+
59+
## Functional color tokens
60+
61+
### Neutral colors
62+
63+
#### Foreground
64+
65+
<img
66+
width="960"
67+
alt="wip"
68+
src="https://github.com/primer/react/assets/18661030/b8f72aab-98eb-4b7a-a5fa-fd8d63e9b8cd"
69+
/>
70+
71+
<StorybookEmbed
72+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
73+
stories={[{id: 'color-functional-foreground--foreground'}]}
74+
height="330"
75+
/>
76+
77+
#### Background
78+
79+
<img
80+
width="960"
81+
alt="wip"
82+
src="https://github.com/primer/react/assets/18661030/477efd99-16a0-42f7-8bd4-68c05bb5376a"
83+
/>
84+
85+
#### Border
86+
87+
<img
88+
width="960"
89+
alt="wip"
90+
src="https://github.com/primer/react/assets/18661030/6e916437-0bcd-4dd0-9e88-f014f27d1fd0"
91+
/>
92+
93+
#### Shadow
94+
95+
### Accent colors
96+
97+
#### Muted
98+
99+
<img
100+
width="960"
101+
alt="wip"
102+
src="https://github.com/primer/react/assets/18661030/df33b03c-ef06-4dc6-9d85-f6dd9cd3f3f0"
103+
/>
104+
105+
muted bg + border flash or gh comment images
106+
107+
#### Emphasis
108+
109+
<img
110+
width="960"
111+
alt="wip"
112+
src="https://github.com/primer/react/assets/18661030/3e4ec1f8-cbc5-4ebf-9816-7f247474b9c6"
113+
/>
114+
115+
#### Foreground
116+
117+
<img
118+
width="960"
119+
alt="wip"
120+
src="https://github.com/primer/react/assets/18661030/7fcd6efb-ec86-4460-98aa-e3e5be062bec"
121+
/>
122+
123+
emphasis bg open label and emphasis border input label
124+
125+
### Interactive states
126+
127+
- explain 20 40 rule
128+
- control tokens
129+
130+
<img
131+
width="960"
132+
alt="wip"
133+
src="https://github.com/primer/react/assets/18661030/b3da4f14-cd0c-43a7-a8c6-2fb8acbc74a8"
134+
/>
135+
136+
### Color roles
137+
138+
Overview image
139+
140+
Table explaining each role

‎content/foundations/primitives/color.mdx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Color
3+
description:
4+
Reference tables for all color primitives.
5+
---
6+
7+
## Foundational
8+
9+
### Foreground
10+
11+
<StorybookEmbed
12+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
13+
stories={[{id: 'color-functional-tables--foreground'}]}
14+
height="330"
15+
/>
16+
17+
### Background
18+
19+
<StorybookEmbed
20+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
21+
stories={[{id: 'color-functional-tables--background'}]}
22+
height="330"
23+
/>
24+
25+
### Border
26+
27+
<StorybookEmbed
28+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
29+
stories={[{id: 'color-functional-tables--border'}]}
30+
height="330"
31+
/>
32+
33+
### Shadow
34+
35+
<StorybookEmbed
36+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
37+
stories={[{id: 'color-functional-tables--shadow'}]}
38+
height="330"
39+
/>
40+
41+
## Pattern
42+
43+
### Button
44+
45+
<StorybookEmbed
46+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
47+
stories={[{id: 'color-patterns--button'}]}
48+
height="330"
49+
/>
50+
51+
### Control
52+
53+
<StorybookEmbed
54+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
55+
stories={[{id: 'color-patterns--control'}]}
56+
height="330"
57+
/>
58+
59+
### Focus
60+
61+
<StorybookEmbed
62+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
63+
stories={[{id: 'color-patterns--focus'}]}
64+
height="330"
65+
/>
66+
67+
### Overlay
68+
69+
<StorybookEmbed
70+
baseUrl="https://primer-b5d9560b27-26615723.drafts.github.io/storybook"
71+
stories={[{id: 'color-patterns--overlay'}]}
72+
height="330"
73+
/>

‎src/@primer/gatsby-theme-doctocat/nav.yml

+32-16
Original file line numberDiff line numberDiff line change
@@ -43,22 +43,22 @@
4343
- title: Hooks
4444
url: /guides/react/hooks
4545
children:
46-
- title: useSafeTimeout
47-
url: /guides/react/hooks/use-safe-timeout
48-
- title: useAnchoredPosition
49-
url: /guides/react/hooks/use-anchored-position
50-
- title: useFocusTrap
51-
url: /guides/react/hooks/use-focus-trap
52-
- title: useFocusZone
53-
url: /guides/react/hooks/use-focus-zone
54-
- title: useOnEscapePress
55-
url: /guides/react/hooks/use-on-escape-press
56-
- title: useOnOutsideClick
57-
url: /guides/react/hooks/use-on-outside-click
58-
- title: useOpenAndCloseFocus
59-
url: /guides/react/hooks/use-open-and-close-focus
60-
- title: useOverlay
61-
url: /guides/react/hooks/use-overlay
46+
- title: useSafeTimeout
47+
url: /guides/react/hooks/use-safe-timeout
48+
- title: useAnchoredPosition
49+
url: /guides/react/hooks/use-anchored-position
50+
- title: useFocusTrap
51+
url: /guides/react/hooks/use-focus-trap
52+
- title: useFocusZone
53+
url: /guides/react/hooks/use-focus-zone
54+
- title: useOnEscapePress
55+
url: /guides/react/hooks/use-on-escape-press
56+
- title: useOnOutsideClick
57+
url: /guides/react/hooks/use-on-outside-click
58+
- title: useOpenAndCloseFocus
59+
url: /guides/react/hooks/use-open-and-close-focus
60+
- title: useOverlay
61+
url: /guides/react/hooks/use-overlay
6262
- title: Component lifecycle
6363
url: /guides/component-lifecycle
6464
- title: Component status
@@ -108,6 +108,22 @@
108108
children:
109109
- title: Color
110110
url: /foundations/color
111+
children:
112+
- title: Overview
113+
url: /foundations/color/overview
114+
- title: Base color scales
115+
url: /foundations/color/base-scales
116+
- title: UI color system
117+
url: /foundations/color/ui-color-system
118+
- title: Themes
119+
url: /foundations/color/themes
120+
- title: Accessibility
121+
url: /foundations/color/accessibility
122+
- title: Primitives
123+
url: /foundations/primitives
124+
children:
125+
- title: Color
126+
url: /foundations/primitives/color
111127
- title: Responsive
112128
url: /foundations/responsive
113129
- title: CSS utilities

‎src/components/storybook-embed.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const baseUrls = {
1010
rails: 'https://primer.style/view-components/lookbook/',
1111
}
1212

13-
const colorSchemes = Object.keys(theme.colorSchemes)
13+
const colorSchemes = [...Object.keys(theme.colorSchemes), 'light-dark-split']
1414

1515
type StorybookEmbedProps = {
1616
framework?: 'react' | 'css'
@@ -31,7 +31,7 @@ export function StorybookEmbed({
3131
const [selectedStory, setSelectedStory] = React.useState(stories[0])
3232
const options = {
3333
id: selectedStory.id,
34-
globals: framework === 'react' ? `colorScheme:${selectedColorScheme}` : `theme:${selectedColorScheme}`,
34+
globals: framework === 'react' ? `colorScheme:${selectedColorScheme}` : `colorScheme:${selectedColorScheme}`,
3535
}
3636
const iframeRef = React.useRef<HTMLIFrameElement>(null)
3737
const iframeUrl = `${baseUrl}/iframe.html?${new URLSearchParams(options)}`

0 commit comments

Comments
 (0)