11.34.1 • Published 8 months ago

@flodesk/grain v11.34.1

Weekly downloads
-
License
UNLICENSED
Repository
-
Last release
8 months ago

Grain design system

Installation

npm install @flodesk/grain

Wrap your application root component with GrainProvider.

base.css contains all Grain global styles. Import it in the highest component possible so that it's accessible everywhere in the UI.

import { GrainProvider } from '@flodesk/grain';

function Demo() {
  return (
    <GrainProvider>
      <App />
    </GrainProvider>
  );
}

Add text styles context

Add grn-context class to a parent wrapper, this class sets dynamically the line-height and the letter-spacing. It can be added to a smaller UI section or to the page wrapper. Set it on as many wrappers as needed.

In the future, once Grain is widely adopted, we will remove these classes and apply the text styles globally.

<div className="some-wrapper grn-context">
  <Text size="l">Content</Text>
  // or
  <div className="element-with-grain-styles">Content</div>
</div>

Usage

Component usage

import { Text, Button, Input } from '@flodesk/grain';

<Text>Content</Text>;

CSS variable usage

.dashboard-header {
  font-size: var(--grn-text-xl);
  margin-bottom: var(--grn-space-l);
  color: var(--grn-color-content2);
}
@emotion/react@emotion/styledcore-jslatest-versionpackage-jsonprop-types
@everything-registry/sub-chunk-329@zalastax/nolb-_flo
11.33.1

8 months ago

11.33.0

8 months ago

11.33.2

8 months ago

11.34.0

8 months ago

11.34.1

8 months ago

11.31.0

8 months ago

11.30.0

8 months ago

11.32.1

8 months ago

11.32.0

8 months ago

11.28.9

9 months ago

11.29.0

9 months ago

11.29.2

9 months ago

11.29.1

9 months ago

11.29.3

9 months ago

11.28.8

9 months ago

11.28.5

9 months ago

11.28.4

9 months ago

11.28.7

9 months ago

11.28.6

9 months ago

11.28.3

9 months ago

11.28.1

10 months ago

11.28.2

10 months ago

11.28.0

10 months ago

11.27.0

10 months ago

11.26.2

10 months ago

11.26.1

10 months ago

11.26.0

10 months ago

11.25.0

10 months ago

11.25.1

10 months ago

11.16.0

12 months ago

10.30.1

11 months ago

10.30.0

11 months ago

11.15.1

1 year ago

11.15.0

1 year ago

10.31.0

11 months ago

11.18.0

12 months ago

11.18.2

12 months ago

11.18.1

12 months ago

11.18.3

12 months ago

11.17.0

12 months ago

10.22.4

1 year ago

11.19.0

12 months ago

10.23.0

1 year ago

10.26.1

1 year ago

10.26.0

1 year ago

11.6.4

1 year ago

11.6.5

1 year ago

11.6.2

1 year ago

11.6.3

1 year ago

11.20.1

11 months ago

11.20.0

11 months ago

10.27.0

1 year ago

10.27.1

1 year ago

11.10.2

1 year ago

11.10.1

1 year ago

10.24.1

1 year ago

10.24.2

1 year ago

10.24.0

1 year ago

11.10.0

1 year ago

11.22.1

11 months ago

11.22.0

11 months ago

11.22.3

11 months ago

11.22.2

11 months ago

11.22.5

11 months ago

11.22.4

11 months ago

11.22.6

11 months ago

11.8.0

1 year ago

10.25.0

1 year ago

10.25.1

1 year ago

11.21.2

11 months ago

11.21.1

11 months ago

11.7.0

1 year ago

11.21.0

11 months ago

11.12.0

1 year ago

11.12.2

1 year ago

11.12.1

1 year ago

11.17.0-alpha.3

12 months ago

11.17.0-alpha.2

12 months ago

11.17.0-alpha.1

12 months ago

11.24.1

10 months ago

11.24.0

10 months ago

11.11.1

1 year ago

11.11.0

1 year ago

11.23.0

11 months ago

11.23.2

10 months ago

11.23.1

11 months ago

11.23.3

10 months ago

11.9.0

1 year ago

11.14.0

1 year ago

11.14.1

1 year ago

10.28.0

1 year ago

10.28.1

1 year ago

10.28.2

1 year ago

11.13.1

1 year ago

11.13.0

1 year ago

11.13.2

1 year ago

10.29.0

12 months ago

11.6.0

1 year ago

11.6.1

1 year ago

10.22.3

1 year ago

11.5.5

1 year ago

11.5.4

1 year ago

10.22.2

1 year ago

11.5.3

1 year ago

10.22.1

1 year ago

11.5.1

1 year ago

11.5.2

1 year ago

10.22.0

1 year ago

11.5.0

1 year ago

11.4.2

1 year ago

11.4.1

1 year ago

10.21.2

1 year ago

10.21.1

1 year ago

11.4.0

1 year ago

10.21.0

1 year ago

11.3.1

1 year ago

10.20.0

1 year ago

10.20.1

1 year ago

11.2.0

1 year ago

11.2.1

1 year ago

11.3.0

1 year ago

11.1.0

1 year ago

10.19.1

1 year ago

10.19.0

1 year ago

11.0.9

1 year ago

10.17.4

1 year ago

10.18.0

1 year ago

12.0.0-next.2

1 year ago

12.0.0-next.1

1 year ago

11.0.6

1 year ago

11.0.7

1 year ago

11.0.4

1 year ago

11.0.5

1 year ago

11.0.8

1 year ago

11.0.2

1 year ago

11.0.3

1 year ago

11.0.0

1 year ago

11.0.1

1 year ago

10.17.3

1 year ago

11.0.0-next.12

1 year ago

11.0.0-next.11

1 year ago

11.0.0-next.10

1 year ago

10.17.2

1 year ago

10.17.2-alpha.1

1 year ago

11.0.0-next.6

1 year ago

11.0.0-next.7

1 year ago

11.0.0-next.8

1 year ago

11.0.0-next.9

1 year ago

11.0.0-next.2

1 year ago

11.0.0-next.3

1 year ago

11.0.0-next.4

1 year ago

11.0.0-next.5

1 year ago

10.17.1

1 year ago

10.16.0

1 year ago

10.17.0

1 year ago

11.0.0-next.1

1 year ago

10.15.0

1 year ago

10.14.0

1 year ago

10.13.7-next.1

1 year ago

10.13.6-alpha.1

1 year ago

10.13.6-alpha.2

1 year ago

10.13.6

1 year ago

10.13.4

1 year ago

10.13.5

1 year ago

10.13.3

1 year ago

10.13.1

2 years ago

10.13.2

2 years ago

10.13.0

2 years ago

10.12.2

2 years ago

10.12.0

2 years ago

10.12.1

2 years ago

10.11.0

2 years ago

10.10.11

2 years ago

10.10.10

2 years ago

10.10.8

2 years ago

10.10.9

2 years ago

10.10.7

2 years ago

10.10.6

2 years ago

10.10.4

2 years ago

10.10.5

2 years ago

10.10.3

2 years ago

10.10.2

2 years ago

9.8.2

2 years ago

9.8.1

2 years ago

9.8.0

2 years ago

10.0.0

2 years ago

10.0.1

2 years ago

9.8.4

2 years ago

9.8.3

2 years ago

9.12.0

2 years ago

9.12.1

2 years ago

9.9.0

2 years ago

9.11.1

2 years ago

9.11.2

2 years ago

9.11.0

2 years ago

10.2.3

2 years ago

10.2.0

2 years ago

10.2.1

2 years ago

10.2.2

2 years ago

9.10.0

2 years ago

9.10.1

2 years ago

10.1.4

2 years ago

10.1.0

2 years ago

10.1.1

2 years ago

10.1.2

2 years ago

10.1.3

2 years ago

9.4.5

2 years ago

9.4.4

2 years ago

9.4.3

2 years ago

9.4.2

2 years ago

9.4.1

2 years ago

9.4.0

2 years ago

10.4.0

2 years ago

9.5.4

2 years ago

9.5.3

2 years ago

9.5.2

2 years ago

9.5.1

2 years ago

9.5.0

2 years ago

10.3.0

2 years ago

10.6.0

2 years ago

9.6.3

2 years ago

10.6.1

2 years ago

9.6.2

2 years ago

9.6.1

2 years ago

9.6.0

2 years ago

10.5.0

2 years ago

9.7.3

2 years ago

10.5.1

2 years ago

9.7.2

2 years ago

10.5.2

2 years ago

9.7.1

2 years ago

10.5.3

2 years ago

9.7.0

2 years ago

10.5.4

2 years ago

10.5.5

2 years ago

10.5.6

2 years ago

10.5.7

2 years ago

9.7.9

2 years ago

9.7.8

2 years ago

9.7.7

2 years ago

9.7.6

2 years ago

9.7.5

2 years ago

9.7.4

2 years ago

10.5.8

2 years ago

10.10.0

2 years ago

10.10.1

2 years ago

10.8.0

2 years ago

10.8.1

2 years ago

10.8.2

2 years ago

10.8.3

2 years ago

10.8.4

2 years ago

10.7.0

2 years ago

10.7.1

2 years ago

10.7.2

2 years ago

10.7.3

2 years ago

10.7.4

2 years ago

10.7.5

2 years ago

10.9.0

2 years ago

10.9.1

2 years ago

10.9.2

2 years ago

10.9.3

2 years ago

9.3.0

2 years ago

10.9.4

2 years ago

10.9.5

2 years ago

10.9.6

2 years ago

10.9.7

2 years ago

9.15.1

2 years ago

9.15.2

2 years ago

9.15.3

2 years ago

9.15.0

2 years ago

9.14.0

2 years ago

9.7.10

2 years ago

9.7.12

2 years ago

9.7.11

2 years ago

9.13.0

2 years ago

9.1.6

2 years ago

9.1.5

2 years ago

9.1.4

2 years ago

9.1.3

2 years ago

9.1.2

2 years ago

9.0.1

2 years ago

9.0.0

2 years ago

9.2.1

2 years ago

9.1.1

2 years ago

9.1.0

2 years ago

9.2.0

2 years ago

8.11.1

2 years ago

8.11.0

2 years ago

8.1.0

2 years ago

8.1.2

2 years ago

8.1.1

2 years ago

8.12.0

2 years ago

8.12.2

2 years ago

8.12.1

2 years ago

8.12.4

2 years ago

8.12.3

2 years ago

8.12.6

2 years ago

8.12.5

2 years ago

8.2.0

2 years ago

8.12.8

2 years ago

8.12.7

2 years ago

8.12.9

2 years ago

8.13.1

2 years ago

8.13.0

2 years ago

8.13.3

2 years ago

8.13.2

2 years ago

8.4.4

2 years ago

8.4.1

2 years ago

8.4.0

2 years ago

8.4.3

2 years ago

8.4.2

2 years ago

8.3.0

2 years ago

8.14.0

2 years ago

8.14.2

2 years ago

8.14.1

2 years ago

8.5.0

2 years ago

8.5.1

2 years ago

8.6.1

2 years ago

8.6.0

2 years ago

8.7.2

2 years ago

8.7.1

2 years ago

8.7.0

2 years ago

8.12.10

2 years ago

8.8.1

2 years ago

8.8.0

2 years ago

8.10.0

2 years ago

8.10.1

2 years ago

8.9.0

2 years ago

8.1.3

2 years ago

8.0.0

2 years ago

7.7.1

2 years ago

7.7.0

2 years ago

7.8.0

2 years ago

7.8.1

2 years ago

7.9.3

2 years ago

7.9.2

2 years ago

7.9.1

2 years ago

7.9.0

2 years ago

7.5.1

2 years ago

7.5.0

2 years ago

7.6.1

2 years ago

7.6.0

2 years ago

7.3.1

2 years ago

7.3.0

2 years ago

7.4.2

2 years ago

7.4.1

2 years ago

7.4.0

2 years ago

6.15.0

2 years ago

6.14.6

2 years ago

6.14.5

2 years ago

6.14.4

2 years ago

6.14.3

2 years ago

6.14.7

2 years ago

6.14.2

2 years ago

6.14.1

2 years ago

6.14.0

2 years ago

6.13.4

2 years ago

6.13.3

2 years ago

6.13.2

2 years ago

6.13.1

2 years ago

6.13.0

2 years ago

7.0.0

2 years ago

7.1.0

2 years ago

7.2.0

2 years ago

6.5.10

3 years ago

6.5.0

3 years ago

6.6.1

3 years ago

6.6.0

3 years ago

6.7.0

3 years ago

6.7.1

3 years ago

6.8.1

3 years ago

6.8.0

3 years ago

6.0.0

3 years ago

6.1.5

3 years ago

6.9.0

3 years ago

6.9.2

3 years ago

6.9.1

3 years ago

6.9.4

3 years ago

6.9.3

3 years ago

6.1.0

3 years ago

6.1.2

3 years ago

6.1.1

3 years ago

6.1.4

3 years ago

6.1.3

3 years ago

6.3.10

3 years ago

6.3.11

3 years ago

6.2.0

3 years ago

6.12.0

2 years ago

6.12.3

2 years ago

6.12.2

2 years ago

6.12.1

2 years ago

6.3.4

3 years ago

5.24.2

3 years ago

6.3.3

3 years ago

5.24.1

3 years ago

6.3.6

3 years ago

5.24.0

3 years ago

6.3.5

3 years ago

6.3.8

3 years ago

6.3.7

3 years ago

6.3.9

3 years ago

6.3.0

3 years ago

6.3.1

3 years ago

6.11.1

2 years ago

6.11.0

3 years ago

5.25.0

3 years ago

6.4.0

3 years ago

6.10.2

3 years ago

6.10.1

3 years ago

6.10.0

3 years ago

6.10.3

3 years ago

6.5.2

3 years ago

6.5.1

3 years ago

6.5.4

3 years ago

6.5.3

3 years ago

6.5.6

3 years ago

6.5.5

3 years ago

6.5.8

3 years ago

6.5.7

3 years ago

6.5.9

3 years ago

5.23.4

3 years ago

5.23.3

3 years ago

5.23.2

3 years ago

5.23.1

3 years ago

5.23.0

3 years ago

5.20.3

3 years ago

5.20.2

3 years ago

5.20.1

3 years ago

5.20.0

3 years ago

5.21.2

3 years ago

5.21.1

3 years ago

5.21.0

3 years ago

5.19.1

3 years ago

5.22.0

3 years ago

5.15.0

3 years ago

5.16.7

3 years ago

5.16.6

3 years ago

5.16.5

3 years ago

5.16.4

3 years ago

5.16.3

3 years ago

5.16.2

3 years ago

5.16.1

3 years ago

5.16.0

3 years ago

5.17.0

3 years ago

5.18.1

3 years ago

5.14.5

3 years ago

5.18.0

3 years ago

5.14.4

3 years ago

5.14.3

3 years ago

5.14.2

3 years ago

5.14.1

3 years ago

5.14.0

3 years ago

5.19.0

3 years ago

5.15.2

3 years ago

5.15.1

3 years ago

5.3.2

3 years ago

5.3.1

3 years ago

5.3.0

3 years ago

1.6.0

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

5.11.4

3 years ago

2.11.0

3 years ago

5.11.3

3 years ago

5.11.2

3 years ago

2.4.1

3 years ago

5.11.1

3 years ago

2.4.0

3 years ago

5.11.0

3 years ago

2.4.3

3 years ago

2.4.2

3 years ago

2.8.1

3 years ago

2.4.5

3 years ago

2.8.0

3 years ago

2.4.4

3 years ago

2.0.0

3 years ago

2.19.8

3 years ago

2.19.9

3 years ago

2.19.6

3 years ago

2.19.7

3 years ago

2.19.4

3 years ago

2.19.5

3 years ago

2.19.2

3 years ago

2.19.3

3 years ago

2.19.0

3 years ago

2.19.1

3 years ago

2.15.0

3 years ago

2.22.1

3 years ago

2.22.0

3 years ago

4.0.0

3 years ago

5.8.2

3 years ago

5.8.1

3 years ago

5.8.0

3 years ago

5.4.2

3 years ago

5.4.1

3 years ago

5.4.0

3 years ago

5.0.0

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

2.19.13

3 years ago

2.3.0

3 years ago

2.19.14

3 years ago

5.12.1

3 years ago

2.3.2

3 years ago

5.12.0

3 years ago

2.10.0

3 years ago

2.3.1

3 years ago

2.7.0

3 years ago

2.19.10

3 years ago

2.19.11

3 years ago

2.7.2

3 years ago

2.19.12

3 years ago

2.7.1

3 years ago

3.1.2

3 years ago

3.1.1

3 years ago

3.1.0

3 years ago

2.18.1

3 years ago

2.4.7

3 years ago

2.18.2

3 years ago

2.4.6

3 years ago

2.18.0

3 years ago

2.4.8

3 years ago

2.14.1

3 years ago

2.14.0

3 years ago

2.21.0

3 years ago

5.9.2

3 years ago

5.9.1

3 years ago

5.9.0

3 years ago

5.5.3

3 years ago

5.5.2

3 years ago

5.5.1

3 years ago

5.5.0

3 years ago

5.1.2

3 years ago

5.1.1

3 years ago

5.1.0

3 years ago

1.4.0

3 years ago

2.2.0

3 years ago

5.13.0

3 years ago

2.6.0

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

2.7.4

3 years ago

2.7.3

3 years ago

2.17.0

3 years ago

2.7.6

3 years ago

2.7.5

3 years ago

3.0.0

3 years ago

2.13.0

3 years ago

2.20.2

3 years ago

2.20.3

3 years ago

2.20.0

3 years ago

2.20.1

3 years ago

5.6.0

3 years ago

5.2.0

3 years ago

2.20.4

3 years ago

1.3.0

3 years ago

2.12.0

3 years ago

2.5.0

3 years ago

5.10.0

3 years ago

2.5.1

3 years ago

2.9.0

3 years ago

2.1.0

3 years ago

2.16.0

3 years ago

5.11.5

3 years ago

5.7.2

3 years ago

5.7.1

3 years ago

5.7.0

3 years ago

1.2.0

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago