7.5.2-rc.2ae21e0 • Published 4 years ago

@primer/primitives v7.5.2-rc.2ae21e0

Weekly downloads
3,619
License
MIT
Repository
github
Last release
4 years ago

Primer Primitives

npm package Storybook A11y contrast check

This repo contains values for color, spacing, and typography primitives for use with Primer, GitHub's design system.

primer primitives diagram showing how the package connects with other primer libraries primer primitives diagram showing how the package connects with other primer libraries

Install

This repository is distributed on npm. After installing npm, you can install @primer/primitives with this command.

npm install --save @primer/primitives

Usage

Storybook | Docs

See Primitives documentation for more information on theming and using CSS variables.

Data is served from the dist/ folder:

  • dist/css contains CSS files with values available as CSS variables

All available imports:

/* size/typography */
@import '@primer/primitives/dist/css/base/size/size.css';
@import '@primer/primitives/dist/css/base/typography/typography.css';
@import '@primer/primitives/dist/css/functional/size/border.css';
@import '@primer/primitives/dist/css/functional/size/breakpoints.css';
@import '@primer/primitives/dist/css/functional/size/size.css';
@import '@primer/primitives/dist/css/functional/size/viewport.css';
@import '@primer/primitives/dist/css/functional/typography/typography.css';

/* color */
@import '@primer/primitives/dist/css/functional/themes/light.css';
@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
@import '@primer/primitives/dist/css/functional/themes/dark.css';
@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';

Design token data

Design token data is stored in the src/tokens directory. These tokens are compiled with style dictionary in scripts/buildTokens.ts.

To make working with tokens easier, we added some additional functionality on top of what style dictionary comes with:

Extending and Overwriting

We have two main color modes: light and dark. Additionally we have specific accessibility modes based on those, such as light high contrast.

We added a way to create a mode by only including the changes from the main mode. We call this overrides. Overrides are cerated in src/tokens/functional/color/[light|dark]/overrides/ and have to be added to themes.config.ts to work. In the individual files, e.g. light.high-contrast.json5 you can now add tokens in the same structure as in any main file, e.g. primitives-light.json5 to replace them.

Transforming Colors with Alpha and Mix

Alpha

You can create color tokens that inherit a color but have a different alpha value by adding the alpha property. Note: The original alpha value will be replaced by your value. If you add alpha: 0.4 to a color, it doesn't matter if the color you reference has no alpha or alpha: 0.7, the new token will always have newly the defined value of alpha: 0.4.

{
  muted: {
    $value: '{base.color.blue.3}',
    alpha: 0.4, // the opacity value of the color === 40% opaque
    $type: 'color',
  },
}

Mix

In rare cases, you may need to create a color between two steps in the color scale, e.g. between gray.4 and gray.5. A common example are interactive states, like hover where a full step on the color scale would be to much. For those cases you can use the mix property.

The mix proeprty mixes the color it gets into the main color from the $value attribute. The amount added is controlled by the weight. A weight of 0.1 adds 10% of the color, and a weight of 0.75 adds 75%.

A mix proprty must always have a color and a weight child. color can be a hex value or a reference to a valid color. The weight property must receive a value between 0.0 and 1.

{
  control: {
    $value: '{base.color.gray.4}', // main color
    $type: 'color',
    mix: {
      color: '{base.color.gray.5}', // color to mix into the main color
      weight: 0.2, // amount of the mix color that is added === 20% of gray.5 is mix into gray.4
    },
  },
}

Extensions property

According to the w3c design token specs, the $extensions property is used for additional meta data.

For our Figma export we use the following meta data:

  • collection the collection that the token is added to within Figma
  • mode the mode that the token is added to within the collection in Figma
  • scopes the scopes that are assigned to the token in Figma, the actual Figma compatible scopes are retreive from an object in the figmaAttributes transformer

Code example

  bgColor: {
    $value: '{borderColor.accent.muted}',
    $type: 'color',
    $extensions: {
      'org.primer.figma': {
        collection: 'pattern/mode',
        mode: 'light',
        scopes: ['bgColor'],
      },
    },
  }

Token names and @-hack

Token names have to be in camelCase or kebab-case and may only include letters, numbers and -. This is enforced by the token validation (npm run lint:tokens). The only acception is the @-hack. This is used when you want to have a default value and sub-values, e.g. bgColor.accent and bgColor.accent.muted. In this case you can create the follwing structure. The @ will be removed from the name and act as the default value.

{
  bgColor: {
    accent: {
      '@': {
        // values for accent (default)
      },
      muted: {
        // values for accent-muted
      },
    },
  },
}

License

MIT © GitHub

10.0.0-rc.59775793

11 months ago

10.2.0

11 months ago

10.1.0-rc.f1589f93

11 months ago

10.1.0-rc.3495b605

11 months ago

10.5.1-rc.aa2b8f62

7 months ago

10.1.0-rc.6e88c927

11 months ago

10.3.0-rc.37645a3a

11 months ago

10.4.0-rc.eab36abe

9 months ago

10.0.0-rc.4512e3c0

11 months ago

10.6.0-rc.cbb4dec4

7 months ago

10.4.0-rc.58347043

9 months ago

10.3.0-rc.22c9c6cf

11 months ago

10.3.0-rc.7be162ee

11 months ago

10.5.1-rc.605714e8

7 months ago

10.3.0-rc.fcd52a27

11 months ago

10.4.0-rc.3e3fc629

9 months ago

10.6.0-rc.b4f6974f

7 months ago

10.1.0-rc.3e576ad9

11 months ago

10.3.2

10 months ago

10.3.3

10 months ago

10.3.4

9 months ago

10.3.0

11 months ago

10.3.1

10 months ago

10.1.0-rc.73ea18c6

11 months ago

10.0.0-rc.8fa0b911

11 months ago

10.1.0-rc.bf1c903a

11 months ago

10.2.0-rc.a47cfce9

11 months ago

10.4.0-rc.ea0a5a9d

9 months ago

10.4.0-rc.d3e62472

9 months ago

10.4.0-rc.6ec18061

8 months ago

10.0.0

11 months ago

10.4.0-rc.a7bc1307

9 months ago

10.3.4-rc.285f6aad

9 months ago

10.4.0-rc.a2a3c0dc

9 months ago

10.6.0-rc.16836ab4

7 months ago

10.6.1-rc.792232b9

6 months ago

10.4.0-rc.06084fce

9 months ago

10.1.0-rc.e19a55fa

11 months ago

10.0.0-rc.6c2e9c4c

11 months ago

10.3.0-rc.b425078b

11 months ago

10.0.0-rc.dd3dde40

11 months ago

10.6.0-rc.0b457012

7 months ago

10.0.0-rc.f7aad39e

11 months ago

10.5.0-rc.2284dc61

8 months ago

10.7.0-rc.4b97e3bd

5 months ago

10.8.0-rc.c5ac4ae1

5 months ago

10.0.0-rc.9d1d4d6b

11 months ago

10.3.3-rc.e9918d87

10 months ago

10.1.0

11 months ago

10.6.1-rc.3c635ac2

6 months ago

10.4.0-rc.2e7935f4

9 months ago

10.0.0-rc.e5d395ea

11 months ago

10.0.0-rc.6f71ce22

11 months ago

10.4.0-rc.ba0fa656

8 months ago

10.1.0-rc.c0f9ae61

11 months ago

10.0.0-rc.eb6fe33a

12 months ago

10.1.0-rc.b6feac8e

11 months ago

10.1.0-rc.4a7e266e

11 months ago

10.5.0-rc.21e0fa7a

7 months ago

10.1.0-rc.f957a908

11 months ago

10.6.0

6 months ago

10.2.0-rc.265b4e6a

11 months ago

10.7.0

5 months ago

10.1.0-rc.ba6ac3a4

11 months ago

10.4.0-rc.9c21994b

9 months ago

10.0.0-rc.9a4ec885

11 months ago

10.3.1-rc.54209437

10 months ago

10.6.0-rc.efb715c5

7 months ago

10.4.0-rc.1cf1d876

9 months ago

10.5.0-rc.1c002767

7 months ago

10.0.0-rc.1bc5b670

11 months ago

10.0.0-rc.1553ecf5

11 months ago

10.1.0-rc.5ced3fe0

11 months ago

10.4.0-rc.6c72112f

9 months ago

10.3.0-rc.8d184d75

11 months ago

10.5.0-rc.6c9d75b1

8 months ago

10.4.0-rc.b25737a4

9 months ago

10.5.0-rc.3f4948d3

8 months ago

10.4.0-rc.26f84a31

9 months ago

10.0.0-rc.0c3e84bf

11 months ago

10.0.0-rc.2963a70e

11 months ago

10.2.0-rc.285d8b6c

11 months ago

10.4.0

8 months ago

10.0.0-rc.74fb4d30

11 months ago

10.1.0-rc.0146c170

11 months ago

10.3.0-rc.416d4297

11 months ago

10.0.0-rc.4b3d8b21

12 months ago

10.4.0-rc.5c21850f

9 months ago

10.1.0-rc.45b16c3b

11 months ago

10.1.0-rc.c0e71f3a

11 months ago

10.3.0-rc.a435cda1

11 months ago

10.0.0-rc.98e8d56c

11 months ago

10.6.0-rc.44fc5baa

6 months ago

10.2.0-rc.d826aa2b

11 months ago

10.0.0-rc.48f927a3

12 months ago

10.8.0-rc.69ebab9a

5 months ago

10.4.0-rc.a30c0d05

9 months ago

10.3.0-rc.4c6f46ed

11 months ago

10.3.2-rc.60a1f364

10 months ago

10.4.0-rc.e41ed5ed

9 months ago

10.4.0-rc.fd8ac4c9

9 months ago

10.5.0

7 months ago

10.6.0-rc.49a3da64

7 months ago

10.2.0-rc.fcf6bd37

11 months ago

10.0.0-rc.b8c347a6

11 months ago

10.6.0-rc.ce40bf19

7 months ago

10.2.0-rc.356b5bb4

11 months ago

10.0.0-rc.8406ac7b

11 months ago

9.1.2

1 year ago

9.1.1

1 year ago

9.1.0

1 year ago

9.0.3

1 year ago

7.15.15

2 years ago

7.15.14

2 years ago

7.15.13

2 years ago

7.15.12

2 years ago

7.15.10

2 years ago

7.17.0

2 years ago

7.17.1

2 years ago

9.0.2

1 year ago

9.0.1

1 year ago

9.0.0

1 year ago

7.16.0

2 years ago

7.15.1

2 years ago

7.15.2

2 years ago

7.15.0

2 years ago

7.15.9

2 years ago

7.15.7

2 years ago

7.15.8

2 years ago

7.15.5

2 years ago

7.15.6

2 years ago

7.15.3

2 years ago

7.15.4

2 years ago

7.14.0

2 years ago

7.14.1

2 years ago

7.13.1

2 years ago

7.13.0

2 years ago

7.11.14

2 years ago

8.2.3

1 year ago

8.2.2

1 year ago

8.2.4

1 year ago

8.2.1

1 year ago

8.2.0

1 year ago

7.12.0

2 years ago

8.1.0

2 years ago

8.0.0

2 years ago

7.11.10

2 years ago

7.11.11

2 years ago

7.11.12

2 years ago

7.11.13

2 years ago

7.11.5

3 years ago

7.11.6

3 years ago

7.11.3

3 years ago

7.11.4

3 years ago

7.11.2

3 years ago

7.11.9

2 years ago

7.11.7

3 years ago

7.11.8

2 years ago

7.11.1

3 years ago

7.11.0

3 years ago

7.11.0-rc.256348

3 years ago

7.10.0

3 years ago

7.8.4

3 years ago

7.9.0-rc.0409f99

3 years ago

7.9.0-rc.5ddc3c4

3 years ago

7.9.0

3 years ago

7.8.4-rc.a135dbf

3 years ago

7.8.3-rc.a61b03e

4 years ago

7.8.1-rc.1ae7ba9

4 years ago

7.8.2-rc.e28231a

4 years ago

7.8.0

4 years ago

7.8.3

4 years ago

7.8.2

4 years ago

7.8.1

4 years ago

7.8.0-rc.b3d89b6

4 years ago

7.7.0-rc.053d36d

4 years ago

7.7.0

4 years ago

7.5.2-rc.2ae21e0

4 years ago

7.6.0

4 years ago

7.5.1

4 years ago

7.6.0-rc.8feb85c

4 years ago

7.5.0-rc.9e4040c

4 years ago

7.4.1

4 years ago

7.5.1-rc.39f9362

4 years ago

7.5.1-rc.e5be394

4 years ago

7.5.1-rc.79a6143

4 years ago

7.4.1-rc.99dd470

4 years ago

7.5.0

4 years ago

7.4.2-rc.b62f0f4

4 years ago

7.1.0-rc.1ea69ad

4 years ago

7.2.0-rc.84e0df4

4 years ago

7.2.0-rc.9f50886

4 years ago

7.1.1-rc.1dffb1a

4 years ago

7.3.0-rc.7a4770b

4 years ago

7.1.1-rc.b52ea99

4 years ago

7.2.0-rc.a7c862d

4 years ago

7.4.0

4 years ago

7.0.1-rc.2d2c69a

4 years ago

7.0.0

4 years ago

7.0.1

4 years ago

7.2.0

4 years ago

7.1.2-rc.bfbd62f

4 years ago

7.2.0-rc.8d4adcc

4 years ago

7.1.1-rc.71c4e0c

4 years ago

7.3.0

4 years ago

7.0.0-rc.05608c9

4 years ago

7.4.0-rc.4670d6c

4 years ago

7.1.1

4 years ago

7.1.0

4 years ago

7.0.0-rc.fe8d621

4 years ago

6.0.0-rc.95276f7

4 years ago

6.1.0

4 years ago

6.1.0-rc.9f1f534

4 years ago

5.1.0

4 years ago

6.0.0-rc.4a64f38

4 years ago

6.0.0-rc.c5571a8

4 years ago

6.0.0

4 years ago

0.0.0-2021917043

4 years ago

5.0.0

4 years ago

5.1.0-rc.d2da270

4 years ago

5.1.0-rc.50d1b03

4 years ago

0.0.0-2021917547

4 years ago

5.0.0-rc.8de08c0

4 years ago

5.0.0-rc.c8d1c5e

4 years ago

4.8.2-rc.10f6e88

4 years ago

4.8.1

4 years ago

4.8.1-rc.176a732

4 years ago

4.8.1-rc.6934c35

4 years ago

4.8.1-rc.1b4b637

4 years ago

4.8.0

4 years ago

4.8.0-rc.bdc0e17

4 years ago

4.8.0-rc.1848ecd

4 years ago

4.7.1

4 years ago

4.7.1-rc.bd97eab

4 years ago

4.7.0-rc.666a14f

4 years ago

4.7.0-rc.8a5a4ee

4 years ago

4.7.0

4 years ago

0.0.0-2021811886

4 years ago

4.6.8-rc.e967f6b

4 years ago

4.6.9-rc.42857ef

4 years ago

4.6.9

4 years ago

4.6.8

4 years ago

4.6.8-rc.01ea610

4 years ago

4.6.8-rc.7a4b34d

4 years ago

0.0.0-2021824422

4 years ago

4.6.7-rc.5455685

4 years ago

0.0.0-2021726310

4 years ago

4.6.6-rc.c7c97e5

4 years ago

4.6.5-rc.537a730

4 years ago

4.6.7

4 years ago

4.6.6

4 years ago

4.6.5

4 years ago

4.6.5-rc.f4aa732

4 years ago

4.6.2-rc.cfa34d9

4 years ago

4.6.4-rc.7de3ecb

4 years ago

0.0.0-2021718041

4 years ago

4.6.3-rc.c3e41db

4 years ago

4.6.3

4 years ago

4.6.2

4 years ago

4.6.4

4 years ago

4.6.1

4 years ago

4.5.4

4 years ago

4.5.3

4 years ago

0.0.0-2021738454

4 years ago

4.5.2

4 years ago

4.5.1

4 years ago

0.0.0-2021525207

4 years ago

4.5.0

4 years ago

0.0.0-2021525251

4 years ago

4.4.3

4 years ago

4.4.4

4 years ago

0.0.0-2021523450

4 years ago

0.0.0-2021515179

4 years ago

4.4.1

4 years ago

4.4.2

4 years ago

4.4.0

4 years ago

0.0.0-2021548596

4 years ago

4.3.9

4 years ago

0.0.0-2021591221

4 years ago

4.3.6

4 years ago

4.3.8

4 years ago

0.0.0-2021590377

4 years ago

4.3.7

4 years ago

0.0.0-2021590366

4 years ago

0.0.0-2021587485

4 years ago

0.0.0-2021427561

4 years ago

4.3.11

4 years ago

4.3.10

4 years ago

4.3.2

4 years ago

4.3.1

4 years ago

4.3.4

4 years ago

4.3.3

4 years ago

4.3.0

5 years ago

4.3.5

4 years ago

4.2.2

5 years ago

4.2.1

5 years ago

0.0.0-2021367182

5 years ago

4.2.0

5 years ago

4.1.0

5 years ago

4.0.1

5 years ago

4.0.2

5 years ago

0.0.0-202121599

5 years ago

4.0.0

5 years ago

0.0.0-fd6a5b3

5 years ago

0.0.0-52c43a6

5 years ago

0.0.0-e267bd0

5 years ago

0.0.0-ae82158

5 years ago

0.0.0-773ac4d

5 years ago

0.0.0-9d55cc8

5 years ago

0.0.0-2893f68

5 years ago

0.0.0-9846881

5 years ago

0.0.0-c3a7cd0

5 years ago

0.0.0-79e5523

5 years ago

0.0.0-1385a06

5 years ago

0.0.0-0d2b1e9

5 years ago

0.0.0-b91f935

5 years ago

0.0.0-c499f58

5 years ago

0.0.0-1a45800

5 years ago

0.0.0-aa92213

5 years ago

0.0.0-9310bf0

5 years ago

0.0.0-724076c

5 years ago

0.0.0-0981f9b

5 years ago

0.0.0-a2fe7c0

5 years ago

0.0.0-2964a5d

5 years ago

0.0.0-3ba6cc5

5 years ago

0.0.0-8527766

5 years ago

0.0.0-422853a

5 years ago

0.0.0-45d093b

5 years ago

0.0.0-6aa92e5

5 years ago

0.0.0-615e41a

5 years ago

0.0.0-b588c8b

5 years ago

0.0.0-a804d1d

5 years ago

0.0.0-60615e1

5 years ago

0.0.0-06b7fa9

5 years ago

0.0.0-c996b75

5 years ago

0.0.0-73d132c

5 years ago

0.0.0-1362186

5 years ago

0.0.0-ebf26d5

5 years ago

0.0.0-9d38696

5 years ago

0.0.0-995139d

5 years ago

0.0.0-da21f4f

5 years ago

0.0.0-2f8f2f6

5 years ago

0.0.0-883cd00

5 years ago

0.0.0-9ef25e1

5 years ago

0.0.0-45f5336

5 years ago

0.0.0-f663df0

5 years ago

0.0.0-cde6eea

5 years ago

0.0.0-3df3a30

5 years ago

0.0.0-a94bc22

5 years ago

0.0.0-20bc3a3

5 years ago

0.0.0-347f74a

5 years ago

0.0.0-1cd410b

5 years ago

0.0.0-90fe697

5 years ago

0.0.0-ab2da57

5 years ago

0.0.0-cacc3de

5 years ago

0.0.0-7e36bc4

5 years ago

0.0.0-d42611e

5 years ago

0.0.0-c7548e4

5 years ago

0.0.0-9ce7e68

5 years ago

0.0.0-a85730b

5 years ago

0.0.0-f9e3c9a

5 years ago

0.0.0-a44acbf

5 years ago

0.0.0-374ae1e

5 years ago

0.0.0-f9355f3

5 years ago

0.0.0-19ef888

5 years ago

0.0.0-a6d51cc

5 years ago

0.0.0-45687a0

5 years ago

0.0.0-0ecefb1

5 years ago

0.0.0-5ca9f4b

5 years ago

0.0.0-8efdc39

5 years ago

0.0.0-abb740a

5 years ago

0.0.0-402d12a

5 years ago

0.0.0-5463300

5 years ago

0.0.0-3dafc1d

5 years ago

0.0.0-10e7afa

5 years ago

0.0.0-4ef22c9

5 years ago

0.0.0-593708c

5 years ago

0.0.0-6096eb4

5 years ago

0.0.0-a59e532

5 years ago

0.0.0-1264a05

5 years ago

0.0.0-54c46a7

5 years ago

0.0.0-0fb8c91

5 years ago

0.0.0-a5f105b

5 years ago

0.0.0-c215e1e

5 years ago

0.0.0-d93cf7b

5 years ago

0.0.0-b577cad

5 years ago

0.0.0-c09bcdc

5 years ago

0.0.0-412212a

5 years ago

0.0.0-91649c4

5 years ago

0.0.0-3d5a7cb

5 years ago

0.0.0-f515e0e

5 years ago

0.0.0-85928e6

5 years ago

0.0.0-2fb44d3

5 years ago

0.0.0-007782e

5 years ago

0.0.0-9a3455a

5 years ago

0.0.0-8446567

5 years ago

0.0.0-ccc5a7a

5 years ago

0.0.0-b882089

5 years ago

0.0.0-ffa88b0

5 years ago

0.0.0-fa9ddb1

5 years ago

0.0.0-af5eae1

5 years ago

0.0.0-9e6def0

5 years ago

0.0.0-10a4ed9

5 years ago

0.0.0-63623fe

5 years ago

0.0.0-94a584e

5 years ago

0.0.0-e8e7cfd

5 years ago

0.0.0-96e5110

5 years ago

0.0.0-289de1a

5 years ago

0.0.0-2aa081e

5 years ago

0.0.0-d525e4d

5 years ago

0.0.0-27b8d20

5 years ago

0.0.0-f150c92

5 years ago

0.0.0-be37ff0

5 years ago

0.0.0-109dae0

5 years ago

0.0.0-54a9dc3

5 years ago

0.0.0-8699963

5 years ago

0.0.0-4813158

5 years ago

0.0.0-e66591e

5 years ago

0.0.0-e6d856b

5 years ago

0.0.0-a800d96

5 years ago

0.0.0-4982aaf

5 years ago

0.0.0-0ca963b

5 years ago

0.0.0-f020b15

5 years ago

0.0.0-991da9a

5 years ago

0.0.0-2d2879b

5 years ago

0.0.0-b8d5846

5 years ago

0.0.0-28a3cba

5 years ago

0.0.0-47e6716

5 years ago

0.0.0-45ed36c

5 years ago

0.0.0-ec289d2

5 years ago

0.0.0-a5223f5

5 years ago

0.0.0-fc5e8c6

5 years ago

0.0.0-671bb45

5 years ago

0.0.0-d095039

5 years ago

0.0.0-3fe9f48

5 years ago

0.0.0-36490c8

5 years ago

0.0.0-176f414

5 years ago

0.0.0-7eb1d66

5 years ago

0.0.0-838f839

5 years ago

0.0.0-2f13178

5 years ago

0.0.0-817da55

5 years ago

0.0.0-d1fda60

5 years ago

0.0.0-acfe9b1

5 years ago

0.0.0-562b929

5 years ago

0.0.0-cae874f

5 years ago

0.0.0-369f06e

5 years ago

0.0.0-575ec39

5 years ago

0.0.0-18b6150

5 years ago

0.0.0-40dbbb1

5 years ago

3.0.0

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

0.0.0-d009d68

7 years ago

0.0.0-e91ad2a

7 years ago

0.0.0-716bdb9

7 years ago

0.0.0-111865f

7 years ago

0.0.0-412fea4

7 years ago

0.0.0-62e4999

7 years ago

0.0.0-8c0eca3

7 years ago

0.0.0-ea2ae7c

7 years ago