@bloom-housing/ui-components 4.2.2-alpha.12 → 4.2.2-alpha.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/README.md +10 -4
  3. package/package.json +4 -2
  4. package/src/actions/Button.docs.mdx +76 -0
  5. package/src/actions/Button.scss +58 -61
  6. package/src/global/app-css.scss +7 -0
  7. package/src/global/mixins.scss +66 -49
  8. package/src/global/tokens/borders.scss +15 -0
  9. package/src/global/tokens/colors.scss +64 -0
  10. package/src/global/tokens/fonts.scss +45 -0
  11. package/src/global/tokens/screens.scss +6 -0
  12. package/src/global/tokens/sizes.scss +48 -0
  13. package/src/headers/PageHeader.docs.mdx +45 -0
  14. package/src/headers/PageHeader.scss +30 -17
  15. package/src/headers/PageHeader.tsx +2 -10
  16. package/src/prototypes/Swatch.tsx +10 -0
  17. package/tailwind.config.js +76 -81
  18. package/tailwind.tosass.js +2 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.2.2-alpha.13](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.12...@bloom-housing/ui-components@4.2.2-alpha.13) (2022-04-22)
7
+
8
+ **Note:** Version bump only for package @bloom-housing/ui-components
9
+
10
+
11
+
12
+
13
+
6
14
  ## [4.2.2-alpha.12](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.11...@bloom-housing/ui-components@4.2.2-alpha.12) (2022-04-22)
7
15
 
8
16
 
package/README.md CHANGED
@@ -46,16 +46,22 @@ yarn test:a11y
46
46
 
47
47
  ## Tailwind
48
48
 
49
- - We are using the [Tailwind](https://v1.tailwindcss.com) framework to make use of their low-level utility library that styles components based on custom settings. We configure the settings in `tailwind.config`. Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files.
49
+ - We are using the [Tailwind](https://v2.tailwindcss.com) framework to make use of their low-level utility classes in page-level markup and sometimes in components. We configure the settings in `tailwind.config.js`.
50
50
 
51
- - Use Tailwind where possible before creating custom style sheets or custom classes for consistency.
52
-
53
- Vendor Plugins
51
+ ## Vendor Plugins
54
52
 
55
53
  - [AG Grid](https://www.ag-grid.com)
56
54
 
57
55
  ## Style Conventions
58
56
 
57
+ - Some styles live in a global folder, but for the most part our components are styled with isolated SCSS files located alongside React component TS files.
58
+
59
+ - We are currently in the process of migrating components to a second-generation styling convention which relies on CSS variables for design tokens and generally removes `@apply` Tailwind statements.
60
+
61
+ - Bloom design tokens include colors, typography settings, sizes, borders, and so forth. They're located in the `src/global/tokens` folder.
62
+
63
+ - More information on this process can be found in [Styling2ndGen.md](https://github.com/bloom-housing/bloom/blob/dev/docs/Styling2ndGen.md).
64
+
59
65
  ### Naming Conventions
60
66
 
61
67
  - Our recommendation for class naming methodology is a modified version of BEM. It still uses blocks, sections within blocks and modifiers, but with a subclass syntax for modifiers.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bloom-housing/ui-components",
3
- "version": "4.2.2-alpha.12",
3
+ "version": "4.2.2-alpha.13",
4
4
  "author": "Sean Albert <sean.albert@exygy.com>",
5
5
  "description": "Shared user interface components for Bloom affordable housing system",
6
6
  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
@@ -24,6 +24,7 @@
24
24
  "@babel/preset-env": "^7.15.4",
25
25
  "@emotion/core": "^10.0.35",
26
26
  "@emotion/styled": "^10.0.27",
27
+ "@geometricpanda/storybook-addon-badges": "^0.2.1",
27
28
  "@storybook/addon-a11y": "^6.3.8",
28
29
  "@storybook/addon-actions": "^6.3.8",
29
30
  "@storybook/addon-docs": "^6.3.8",
@@ -74,6 +75,7 @@
74
75
  "@types/body-scroll-lock": "^2.6.1",
75
76
  "@types/jwt-decode": "^2.2.1",
76
77
  "@types/markdown-to-jsx": "^6.11.2",
78
+ "@types/mdx": "^2.0.1",
77
79
  "@types/node": "^12.12.67",
78
80
  "@types/node-polyglot": "^2.4.1",
79
81
  "@types/react-beautiful-dnd": "^13.1.1",
@@ -100,5 +102,5 @@
100
102
  "tailwindcss": "2.2.10",
101
103
  "typesafe-actions": "^5.1.0"
102
104
  },
103
- "gitHead": "3de4a8504e25ef61454336746d1d012de66d05b3"
105
+ "gitHead": "b9236b9c931e6dfbfab0552982f8589ec1badb85"
104
106
  }
package/src/actions/Button.docs.mdx ADDED
@@ -0,0 +1,76 @@
1
+ import { Canvas, Story, Source, ArgsTable } from "@storybook/addon-docs"
2
+ import { Swatch } from "../prototypes/Swatch"
3
+ import { Button } from "./Button"
4
+
5
+ # Button
6
+
7
+ The button component offers flexible usage with a variety of different appearance options. Size, color, and shape can be controlled via standardized props.
8
+
9
+ <Canvas>
10
+ <Button>This is a Button</Button>
11
+ </Canvas>
12
+
13
+ ## Variants
14
+
15
+ There are several props which accept enums to adjust style type, border, and size. For example, to choose the "primary" style and a "small" size, you would pass the `AppearanceStyleType.primary` enum to `styleType` prop and `AppearanceSizeType.small` enum to `size` prop.
16
+
17
+ <Canvas>
18
+ <Story id="actions-button--small-and-primary" />
19
+ </Canvas>
20
+
21
+ Other variants include appearances which aren't button-like such as `unstyled` and `inline`.
22
+
23
+ ## Component Properties
24
+
25
+ <ArgsTable of={Button} />
26
+
27
+ ## Theming Variables
28
+
29
+ You can apply CSS variables to the `.button` selector to customize the appearance of the component.
30
+
31
+ ### Color Variables
32
+
33
+ | Name | Color | Description |
34
+ | --------------------------------------------- | ------------------------------------------------ | ------------------------------------ |
35
+ | `--primary-appearance-background-color` | <Swatch colorVar="--bloom-color-primary" /> | Primary background color |
36
+ | `--primary-appearance-border-color` | <Swatch colorVar="--bloom-color-primary" /> | Primary border color |
37
+ | `--primary-appearance-label-color` | <Swatch colorVar="--bloom-color-white" /> | Primary label color |
38
+ | `--primary-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary background color |
39
+ | `--primary-appearance-hover-border-color` | <Swatch colorVar="--bloom-color-primary-dark" /> | Hover state primary border color |
40
+ | `--primary-appearance-hover-label-color` | <Swatch colorVar="--bloom-color-white" /> | Hover state primary label color |
41
+ | `--success-appearance-background-color` | <Swatch colorVar="--bloom-color-success" /> | Success background color |
42
+ | `--success-appearance-border-color` | <Swatch colorVar="--bloom-color-success" /> | Success border color |
43
+ | `--success-appearance-label-color` | <Swatch colorVar="--bloom-color-white" /> | Success label color |
44
+ | `--success-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-success-dark" /> | Hover state success background color |
45
+ | `--success-appearance-hover-border-color` | <Swatch colorVar="--bloom-color-success" /> | Hover state success border color |
46
+ | `--success-appearance-hover-label-color` | <Swatch colorVar="--bloom-color-white" /> | Hover state success label color |
47
+ | `--alert-appearance-background-color` | <Swatch colorVar="--bloom-color-alert" /> | Alert background color |
48
+ | `--alert-appearance-border-color` | <Swatch colorVar="--bloom-color-alert" /> | Alert border color |
49
+ | `--alert-appearance-label-color` | <Swatch colorVar="--bloom-color-white" /> | Alert label color |
50
+ | `--alert-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-alert-dark" /> | Hover state alert background color |
51
+ | `--alert-appearance-hover-border-color` | <Swatch colorVar="--bloom-color-alert" /> | Hover state alert border color |
52
+ | `--alert-appearance-hover-label-color` | <Swatch colorVar="--bloom-color-white" /> | Hover state alert label color |
53
+ | `--warn-appearance-background-color` | <Swatch colorVar="--bloom-color-warn" /> | Warning background color |
54
+ | `--warn-appearance-border-color` | <Swatch colorVar="--bloom-color-warn" /> | Warning border color |
55
+ | `--warn-appearance-label-color` | <Swatch colorVar="--bloom-color-white" /> | Warning label color |
56
+ | `--warn-appearance-hover-background-color` | <Swatch colorVar="--bloom-color-warn-dark" /> | Hover state warning background color |
57
+ | `--warn-appearance-hover-border-color` | <Swatch colorVar="--bloom-color-warn" /> | Hover state warning border color |
58
+ | `--warn-appearance-hover-label-color` | <Swatch colorVar="--bloom-color-white" /> | Hover state warning label color |
59
+
60
+ ### Typographic & Spacing Variables
61
+
62
+ | Name | Type | Description | Default |
63
+ | ------------------------ | ----------- | --------------------------------------------------- | --------------------------------------------------- |
64
+ | `--label-font` | Font | Font family of the button label | `--bloom-font-alt-sans` |
65
+ | `--label-transform` | Case | Text case of the button label | `uppercase` |
66
+ | `--label-letter-spacing` | Size | The average gap between letters of the button label | `--bloom-letter-spacing-widest` |
67
+ | `--label-weight` | Font Weight | Typographic weight of the button label | `bold` |
68
+ | `--normal-rounded` | Size | Border radius of a normal-size button | `--bloom-rounded` |
69
+ | `--normal-padding` | Size | Padding of the normal-size button interior | `--bloom-s4` (top/bottom) `--bloom-s6` (left/right) |
70
+ | `--normal-font-size` | Size | Font size of the normal-size button | `--bloom-font-size-sm` |
71
+ | `--small-rounded` | Size | Border radius of a small-size button | `--bloom-rounded` |
72
+ | `--small-padding` | Size | Padding of the small-size button interior | `--bloom-s3` (top/bottom) `--bloom-s6` (left/right) |
73
+ | `--small-font-size` | Size | Font size of the small-size button | `--bloom-font-size-xs` |
74
+ | `--big-rounded` | Size | Border radius of a large-size button | `--bloom-rounded` |
75
+ | `--big-padding` | Size | Padding of the large-size button interior | `--bloom-s6` |
76
+ | `--big-font-size` | Size | Font size of the large-size button | `--bloom-font-size-sm` |
package/src/actions/Button.scss CHANGED
@@ -1,59 +1,58 @@
1
1
  @import "../global/mixins.scss";
2
2
 
3
3
  .button {
4
- @apply relative;
5
- @apply rounded;
6
- @apply px-6;
7
- @apply py-4;
8
- @apply text-lg;
9
- @apply text-center;
10
- @apply uppercase;
11
- @apply font-alt-sans;
12
- @apply inline-block;
13
- @apply tracking-widest;
14
- @apply text-sm;
15
- @apply font-bold;
16
- @apply leading-snug;
4
+ position: relative;
5
+ border-radius: var(--normal-rounded, var(--bloom-rounded));
6
+ padding: var(--normal-padding, var(--bloom-s4) var(--bloom-s6));
7
+ text-align: center;
8
+ text-transform: var(--label-transform, uppercase);
9
+ font-family: var(--label-font, var(--bloom-font-alt-sans));
10
+ display: inline-block;
11
+ letter-spacing: var(--label-letter-spacing, var(--bloom-letter-spacing-widest));
12
+ font-size: var(--normal-font-size, var(--bloom-font-size-sm));
13
+ font-weight: var(--label-weight, bold);
14
+ line-height: var(--bloom-line-height-snug);
17
15
 
18
16
  &:focus {
19
17
  outline: none;
20
- box-shadow: 0 0 0 2px #fff, 0 0 3px 4px $tailwind-accent-cool;
18
+ box-shadow: 0 0 0 2px #fff, 0 0 3px 4px var(--bloom-color-accent-cool);
21
19
  }
22
20
 
23
21
  &:hover {
24
- @apply border-primary-dark;
22
+ border-color: var(--bloom-color-primary-dark);
25
23
  }
26
24
 
27
25
  &:disabled {
28
26
  pointer-events: none;
29
- @apply bg-white;
30
- @apply border-gray-450;
31
- @apply text-gray-450;
27
+ background-color: var(--bloom-color-white);
28
+ border-color: var(--bloom-color-gray-450);
29
+ color: var(--bloom-color-gray-450);
32
30
  }
33
31
 
34
32
  &.is-secondary {
35
- @apply border-gray-700;
36
- @apply text-gray-700;
33
+ border-color: var(--bloom-color-gray-700);
34
+ color: var(--bloom-color-gray-700);
37
35
 
38
36
  &:hover {
39
- @apply bg-gray-700;
40
- @apply text-white;
37
+ background-color: var(--bloom-color-gray-700);
38
+ color: var(--bloom-color-white);
41
39
  }
42
40
  }
43
41
 
44
42
  &.is-small {
45
- @apply text-xs;
46
- @apply px-6;
47
- @apply py-3;
43
+ border-radius: var(--small-rounded, var(--bloom-rounded));
44
+ padding: var(--small-padding, var(--bloom-s3) var(--bloom-s6));
45
+ font-size: var(--small-font-size, var(--bloom-font-size-xs));
48
46
  }
49
47
 
50
48
  &.is-big {
51
- @apply px-6;
52
- @apply py-6;
49
+ border-radius: var(--big-rounded, var(--bloom-rounded));
50
+ padding: var(--big-padding, var(--bloom-s6));
51
+ font-size: var(--big-font-size, var(--bloom-font-size-sm));
53
52
  }
54
53
 
55
54
  &.is-normal-case {
56
- @apply normal-case;
55
+ text-transform: none;
57
56
  }
58
57
 
59
58
  &.is-unstyled {
@@ -62,74 +61,72 @@
62
61
 
63
62
  &.is-unstyled,
64
63
  &.is-inline {
65
- @apply normal-case;
66
- @apply border-0;
67
- @apply p-0;
68
- @apply font-sans;
69
- @apply tracking-normal;
70
- @apply font-normal;
71
- @apply underline;
72
- @apply m-4;
73
- @apply text-tiny;
64
+ text-transform: none;
65
+ border: none;
66
+ padding: 0;
67
+ font-family: var(--bloom-font-sans);
68
+ letter-spacing: normal;
69
+ font-weight: 400;
70
+ text-decoration: underline;
71
+ margin: var(--bloom-s4);
72
+ font-size: var(--bloom-font-size-tiny);
74
73
 
75
74
  &:hover {
76
- @apply text-primary;
75
+ color: var(--bloom-color-primary);
77
76
  background: transparent;
78
77
  }
79
78
  }
80
79
 
81
80
  &.is-inline {
82
- @apply text-primary;
83
- @apply font-semibold;
84
- @apply text-tiny;
85
- @apply m-0;
86
- @apply no-underline;
81
+ color: var(--bloom-color-primary);
82
+ font-weight: 600;
83
+ font-size: var(--bloom-font-size-tiny);
84
+ margin: 0;
85
+ text-decoration: none;
87
86
 
88
87
  &.has-icon-left {
89
88
  .button__icon {
90
- @apply mr-1;
89
+ margin-right: var(--bloom-s1);
91
90
  }
92
91
  }
93
92
  &.has-icon-right {
94
93
  .button__icon {
95
- @apply ml-1;
94
+ margin-left: var(--bloom-s1);
96
95
  }
97
96
  }
98
97
  }
99
98
 
100
99
  &.has-icon-left {
101
100
  .button__icon {
102
- @apply mr-3;
101
+ margin-right: var(--bloom-s3);
103
102
  }
104
103
  }
105
104
  &.has-icon-right {
106
105
  .button__icon {
107
- @apply ml-3;
106
+ margin-left: var(--bloom-s3);
108
107
  }
109
108
  }
110
109
 
111
110
  &.is-text-caps {
112
- @apply text-primary-dark;
113
- @apply normal-case;
114
- @apply border-0;
115
- @apply p-0;
116
- @apply font-sans;
117
- @apply tracking-normal;
118
- @apply font-normal;
119
- @apply underline;
120
- @apply m-4;
121
- @apply uppercase;
122
- @apply text-tiny;
123
- @apply block;
111
+ color: var(--bloom-color-primary-dark);
112
+ border: none;
113
+ padding: 0;
114
+ font-family: var(--bloom-font-sans);
115
+ letter-spacing: normal;
116
+ text-decoration: underline;
117
+ margin: var(--bloom-s4);
118
+ text-transform: uppercase;
119
+ font-size: var(--bloom-font-size-tiny);
120
+ display: block;
124
121
 
125
122
  &:hover {
126
- @apply text-primary-dark;
123
+ color: var(--bloom-color-primary-dark);
127
124
  background: transparent;
128
125
  }
129
126
  }
130
127
 
131
128
  &.is-fullwidth {
132
- @apply w-full;
129
+ width: 100%;
133
130
  }
134
131
 
135
132
  &.is-loading {
package/src/global/app-css.scss CHANGED
@@ -1,3 +1,10 @@
1
+ /* Design Tokens: */
2
+ @import "tokens/borders.scss";
3
+ @import "tokens/colors.scss";
4
+ @import "tokens/fonts.scss";
5
+ @import "tokens/screens.scss";
6
+ @import "tokens/sizes.scss";
7
+
1
8
  html {
2
9
  @apply antialiased;
3
10
  }
package/src/global/mixins.scss CHANGED
@@ -13,42 +13,45 @@
13
13
 
14
14
  // Adds full screen image to pseudo element
15
15
  @mixin overlay-image() {
16
- @apply block;
17
- @apply absolute;
18
- @apply inset-0;
16
+ display: block;
17
+ position: absolute;
18
+ top: 0px;
19
+ right: 0px;
20
+ bottom: 0px;
21
+ left: 0px;
19
22
  content: "";
20
23
  z-index: 2;
21
24
  }
22
25
 
23
26
  @mixin clearfix() {
24
27
  &::after {
25
- @apply table;
26
- @apply clear-both;
28
+ display: table;
29
+ clear: both;
27
30
  content: "";
28
31
  }
29
32
  }
30
33
 
31
34
  @mixin has-toggle() {
32
35
  &:after {
33
- @apply font-bold;
34
- @apply inline-block;
35
- @apply ml-2;
36
- @apply mr-2;
37
- @apply text-sm;
36
+ font-weight: bold;
37
+ display: inline-block;
38
+ margin-left: var(--bloom-s2);
39
+ margin-right: var(--bloom-s2);
40
+ font-size: var(--bloom-font-size-sm);
38
41
  content: "⌃";
39
42
  transform: rotate(180deg) translateY(2px);
40
43
  }
41
44
  &[aria-expanded="true"]:after {
42
- @apply mr-5;
45
+ margin-right: var(--bloom-s5);
43
46
  transform: rotate(0deg) translateY(2px);
44
47
  }
45
48
  }
46
49
 
47
50
  @mixin has-image-skeleton() {
48
- @apply bg-gray-500;
51
+ background-color: var(--bloom-color-gray-500);
49
52
 
50
53
  &::before {
51
- @apply float-left;
54
+ float: left;
52
55
  content: "";
53
56
  width: 1px;
54
57
  margin-left: -1px;
@@ -58,104 +61,118 @@
58
61
 
59
62
  &::after {
60
63
  /* to clear float */
61
- @apply table;
62
- @apply clear-both;
64
+ display: table;
65
+ clear: both;
63
66
  content: "";
64
67
  }
65
68
  }
66
69
 
67
70
  @mixin filled-appearances() {
68
71
  &.is-primary {
69
- @apply bg-primary;
70
- @apply border-primary;
71
- @apply text-white;
72
+ background-color: var(--primary-appearance-background-color, var(--bloom-color-primary));
73
+ border-color: var(--primary-appearance-border-color, var(--bloom-color-primary));
74
+ color: var(--primary-appearance-label-color, var(--bloom-color-white));
72
75
 
73
76
  &:hover {
74
- @apply bg-primary-dark;
75
- @apply border-primary-dark;
77
+ background-color: var(
78
+ --primary-appearance-hover-background-color,
79
+ var(--bloom-color-primary-dark)
80
+ );
81
+ border-color: var(--primary-appearance-hover-border-color, var(--bloom-color-primary-dark));
82
+ color: var(--primary-appearance-hover-label-color, var(--bloom-color-white));
76
83
  }
77
84
  }
78
85
 
79
86
  &.is-success {
80
- @apply bg-success;
81
- @apply border-success;
82
- @apply text-white;
87
+ background-color: var(--success-appearance-background-color, var(--bloom-color-success));
88
+ border-color: var(--success-appearance-border-color, var(--bloom-color-success));
89
+ color: var(--success-appearance-label-color, var(--bloom-color-white));
83
90
 
84
91
  &:hover {
85
- @apply bg-success-dark;
92
+ background-color: var(
93
+ --success-appearance-hover-background-color,
94
+ var(--bloom-color-success-dark)
95
+ );
96
+ border-color: var(--success-appearance-hover-border-color, var(--bloom-color-success));
97
+ color: var(--success-appearance-hover-label-color, var(--bloom-color-white));
86
98
  }
87
99
  }
88
100
 
89
101
  &.is-alert {
90
- @apply bg-alert;
91
- @apply border-alert;
92
- @apply text-white;
102
+ background-color: var(--bloom-color-alert);
103
+ border-color: var(--bloom-color-alert);
104
+ color: var(--bloom-color-white);
93
105
 
94
106
  &:hover {
95
- @apply bg-alert-dark;
96
- @apply border-alert-dark;
107
+ background-color: var(--bloom-color-alert-dark);
108
+ border-color: var(--bloom-color-alert-dark);
97
109
  }
98
110
  }
99
111
 
100
112
  &.is-warning {
101
- @apply bg-warn;
102
- @apply border-warn;
103
- @apply text-gray-800;
113
+ background-color: var(--bloom-color-warn);
114
+ border-color: var(--bloom-color-warn);
115
+ color: var(--bloom-color-gray-800);
104
116
 
105
117
  &:hover {
106
- @apply text-white;
107
- @apply bg-warn-dark;
108
- @apply border-warn-dark;
118
+ color: var(--bloom-color-white);
119
+ background-color: var(--bloom-color-warn-dark);
120
+ border-color: var(--bloom-color-warn-dark);
109
121
  }
110
122
  }
111
123
 
112
124
  &.is-borderless {
113
- @apply text-primary-darker;
125
+ color: var(--bloom-color-primary-darker);
114
126
  border-color: transparent;
115
127
  background: transparent;
116
128
 
117
129
  &:hover {
118
130
  background: transparent;
119
- @apply text-primary-darker;
131
+ border-color: transparent;
132
+ color: var(--bloom-color-primary-darker);
120
133
  }
121
134
  }
122
135
  }
123
136
 
124
137
  @mixin outlined-appearances() {
125
- @apply bg-white;
126
- @apply text-primary;
127
- @apply border-2;
128
- @apply border-primary;
138
+ background-color: var(--bloom-color-white);
139
+ color: var(--bloom-color-primary);
140
+ border-width: var(--bloom-border-2);
141
+ border-color: var(--bloom-color-primary);
129
142
 
130
143
  &:hover {
131
- @apply bg-primary-dark;
132
- @apply text-white;
144
+ background-color: var(
145
+ --outlined-appearance-hover-background-color,
146
+ var(--bloom-color-primary-dark)
147
+ );
148
+ border-color: var(--outlined-appearance-hover-border-color, var(--bloom-color-primary));
149
+ color: var(--outlined-appearance-hover-label-color, var(--bloom-color-white));
133
150
  }
134
151
 
135
152
  &.is-outlined {
136
153
  background: transparent;
137
154
 
138
155
  &.is-success {
139
- @apply text-success;
156
+ color: var(--bloom-color-success);
140
157
 
141
158
  &:hover {
142
- @apply text-white;
159
+ color: var(--bloom-color-white);
143
160
  }
144
161
  }
145
162
 
146
163
  &.is-alert {
147
- @apply text-alert;
164
+ color: var(--bloom-color-alert);
148
165
 
149
166
  &:hover {
150
- @apply text-white;
167
+ color: var(--bloom-color-white);
151
168
  }
152
169
  }
153
170
 
154
171
  &.is-warning {
155
- @apply text-gray-800;
172
+ color: var(--bloom-color-gray-800);
156
173
 
157
174
  &:hover {
158
- @apply text-white;
175
+ color: var(--bloom-color-white);
159
176
  }
160
177
  }
161
178
  }
package/src/global/tokens/borders.scss ADDED
@@ -0,0 +1,15 @@
1
+ :root {
2
+ --bloom-rounded-sm: 0.125rem;
3
+ --bloom-rounded: 0.25rem;
4
+ --bloom-rounded-md: 0.375rem;
5
+ --bloom-rounded-lg: 0.5rem;
6
+ --bloom-rounded-xl: 0.75rem;
7
+ --bloom-rounded-2xl: 1rem;
8
+ --bloom-rounded-3xl: 1.5rem;
9
+ --bloom-rounded-full: 9999px;
10
+
11
+ --bloom-border-1: 1px;
12
+ --bloom-border-2: 2px;
13
+ --bloom-border-4: 4px;
14
+ --bloom-border-8: 8px;
15
+ }
package/src/global/tokens/colors.scss ADDED
@@ -0,0 +1,64 @@
1
+ :root {
2
+ --bloom-color-white: #ffffff;
3
+ --bloom-color-black: #000000;
4
+
5
+ --bloom-color-red-800: #b21d38;
6
+ --bloom-color-red-700: #e41d3d;
7
+ --bloom-color-red-300: #f9d2d8;
8
+
9
+ --bloom-color-green-800: #216e1f;
10
+ --bloom-color-green-700: #2e8540;
11
+ --bloom-color-green-300: #b4e5be;
12
+
13
+ --bloom-color-blue-800: #205493;
14
+ --bloom-color-blue-700: #0067be;
15
+ --bloom-color-blue-600: #0077da;
16
+ --bloom-color-blue-300: #daeeff;
17
+ --bloom-color-blue-200: #f5f8f9;
18
+
19
+ --bloom-color-yellow-800: #e5a000;
20
+ --bloom-color-yellow-700: #fdb81e;
21
+ --bloom-color-yellow-300: #fee8b6;
22
+
23
+ --bloom-color-gray-950: #242c2e;
24
+ --bloom-color-gray-900: #222222;
25
+ --bloom-color-gray-850: #333333;
26
+ --bloom-color-gray-800: #30383a;
27
+ --bloom-color-gray-750: #555555;
28
+ --bloom-color-gray-700: #767676;
29
+ --bloom-color-gray-600: #999999;
30
+ --bloom-color-gray-550: #aaaaaa;
31
+ --bloom-color-gray-500: #cccccc;
32
+ --bloom-color-gray-450: #dedee0;
33
+ --bloom-color-gray-400: #efefef;
34
+ --bloom-color-gray-300: #f6f6f6;
35
+ --bloom-color-gray-200: #f7f7f7;
36
+ --bloom-color-gray-100: #f9f9f9;
37
+
38
+ --bloom-color-primary: var(--bloom-color-blue-600);
39
+ --bloom-color-primary-dark: var(--bloom-color-blue-700);
40
+ --bloom-color-primary-darker: var(--bloom-color-blue-800);
41
+ --bloom-color-primary-light: var(--bloom-color-blue-300);
42
+ --bloom-color-primary-lighter: var(--bloom-color-blue-200);
43
+
44
+ --bloom-color-secondary: var(--bloom-color-blue-700);
45
+ --bloom-color-alert: var(--bloom-color-red-700);
46
+ --bloom-color-alert-light: var(--bloom-color-red-300);
47
+ --bloom-color-alert-dark: var(--bloom-color-red-800);
48
+ --bloom-color-success: var(--bloom-color-green-700);
49
+ --bloom-color-success-light: var(--bloom-color-green-300);
50
+ --bloom-color-success-dark: var(--bloom-color-green-800);
51
+ --bloom-color-warn: var(--bloom-color-yellow-700);
52
+ --bloom-color-warn-light: var(--bloom-color-yellow-300);
53
+ --bloom-color-warn-dark: var(--bloom-color-yellow-800);
54
+
55
+ --bloom-color-accent-cool: #00bed5;
56
+ --bloom-color-accent-cool-light: #c8f1ff;
57
+ --bloom-color-accent-cool-dark: #009db0;
58
+ --bloom-color-accent-warm: #ff6627;
59
+ --bloom-color-accent-warm-dark: #d54309;
60
+ --bloom-color-accent-warm-light: #ffd2c0;
61
+ --bloom-color-accent-warm-lighter: #fff7f3;
62
+
63
+ --bloom-color-lush: #99cd00;
64
+ }
package/src/global/tokens/fonts.scss ADDED
@@ -0,0 +1,45 @@
1
+ :root {
2
+ --bloom-font-sans: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
3
+ --bloom-font-serif: "Droid Serif", Georgia, Times, serif;
4
+ --bloom-font-alt-sans: Lato, Helvetica, Arial, Verdana, sans-serif;
5
+ --bloom-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
6
+ "Courier New", monospace;
7
+
8
+ --bloom-font-size-2xs: 0.6875rem;
9
+ --bloom-font-size-xs: 0.75rem;
10
+ --bloom-font-size-sm: 0.8125rem;
11
+ --bloom-font-size-tiny: 0.875rem;
12
+ --bloom-font-size-base: 1rem;
13
+ --bloom-font-size-lg: 1.25rem;
14
+ --bloom-font-size-xl: 1.375rem;
15
+ --bloom-font-size-2xl: 1.5rem;
16
+ --bloom-font-size-3xl: 1.625rem;
17
+ --bloom-font-size-4xl: 2rem;
18
+ --bloom-font-size-5xl: 2.5rem;
19
+ --bloom-font-size-6xl: 3rem;
20
+ --bloom-font-size-6_5xl: 4rem;
21
+ --bloom-font-size-7xl: 4.5rem;
22
+
23
+ --bloom-letter-spacing-tightest: -0.075em;
24
+ --bloom-letter-spacing-tighter: -0.05em;
25
+ --bloom-letter-spacing-tight: -0.025em;
26
+ --bloom-letter-spacing-wide: 0.025em;
27
+ --bloom-letter-spacing-wider: 0.05em;
28
+ --bloom-letter-spacing-widest: 0.12em;
29
+ --bloom-letter-spacing-ultrawide: 0.25em;
30
+
31
+ --bloom-line-height-3: 0.75rem;
32
+ --bloom-line-height-4: 1rem;
33
+ --bloom-line-height-5: 1.25rem;
34
+ --bloom-line-height-6: 1.5rem;
35
+ --bloom-line-height-7: 1.75rem;
36
+ --bloom-line-height-8: 2rem;
37
+ --bloom-line-height-9: 2.25rem;
38
+ --bloom-line-height-10: 2.5rem;
39
+ --bloom-line-height-none: 1;
40
+ --bloom-line-height-tight: 1.25;
41
+ --bloom-line-height-snug: 1.375;
42
+ --bloom-line-height-normal: 1.5;
43
+ --bloom-line-height-relaxed: 1.625;
44
+ --bloom-line-height-loose: 2;
45
+ }
package/src/global/tokens/screens.scss ADDED
@@ -0,0 +1,6 @@
1
+ :root {
2
+ --bloom-screen-sm: #{$screen-sm};
3
+ --bloom-screen-md: #{$screen-md};
4
+ --bloom-screen-lg: #{$screen-lg};
5
+ --bloom-screen-xl: #{$screen-xl};
6
+ }
package/src/global/tokens/sizes.scss ADDED
@@ -0,0 +1,48 @@
1
+ :root {
2
+ --bloom-s0_5: 0.125rem;
3
+ --bloom-s1: 0.25rem;
4
+ --bloom-s1_5: 0.375rem;
5
+ --bloom-s2: 0.5rem;
6
+ --bloom-s2_5: 0.625rem;
7
+ --bloom-s3: 0.75rem;
8
+ --bloom-s3_5: 0.875;
9
+ --bloom-s4: 1rem;
10
+ --bloom-s5: 1.25rem;
11
+ --bloom-s6: 1.5rem;
12
+ --bloom-s7: 1.75rem;
13
+ --bloom-s8: 2rem;
14
+ --bloom-s9: 2.25rem;
15
+ --bloom-s10: 2.5rem;
16
+ --bloom-s11: 2.75rem;
17
+ --bloom-s12: 3rem;
18
+ --bloom-s14: 3.5rem;
19
+ --bloom-s16: 4rem;
20
+ --bloom-s20: 5rem;
21
+ --bloom-s24: 6rem;
22
+ --bloom-s28: 7rem;
23
+ --bloom-s32: 8rem;
24
+ --bloom-s36: 9rem;
25
+ --bloom-s40: 10rem;
26
+ --bloom-s44: 11rem;
27
+ --bloom-s48: 12rem;
28
+ --bloom-s52: 13rem;
29
+ --bloom-s56: 14rem;
30
+ --bloom-s60: 15rem;
31
+ --bloom-s64: 16rem;
32
+ --bloom-s72: 18rem;
33
+ --bloom-s80: 20rem;
34
+ --bloom-s96: 24rem;
35
+
36
+ --bloom-width-xs: 20rem;
37
+ --bloom-width-sm: 24rem;
38
+ --bloom-width-md: 28rem;
39
+ --bloom-width-lg: 32rem;
40
+ --bloom-width-xl: 36rem;
41
+ --bloom-width-2xl: 42rem;
42
+ --bloom-width-3xl: 48rem;
43
+ --bloom-width-4xl: 56rem;
44
+ --bloom-width-5xl: 64rem;
45
+ --bloom-width-6xl: 72rem;
46
+ --bloom-width-7xl: 80rem;
47
+ --bloom-width-prose: 65ch;
48
+ }
package/src/headers/PageHeader.docs.mdx ADDED
@@ -0,0 +1,45 @@
1
+ import { Canvas, Story, ArgsTable } from "@storybook/addon-docs"
2
+ import { PageHeader } from "./PageHeader"
3
+
4
+ # Page Header
5
+
6
+ The page header component displays a title, with an optional subtitle and/or arbitary children elements.
7
+
8
+ <Canvas>
9
+ <Story id="headers-page-header--with-content" />
10
+ </Canvas>
11
+
12
+ <br />
13
+ <br />
14
+
15
+ ## Variants
16
+
17
+ ### Inverse
18
+
19
+ Set the `inverse` property to `true`.
20
+
21
+ <Canvas>
22
+ <Story id="headers-page-header--inversed" />
23
+ </Canvas>
24
+
25
+ ## Component Properties
26
+
27
+ <ArgsTable of={PageHeader} />
28
+
29
+ ## Theming Variables
30
+
31
+ <Canvas>
32
+ <Story id="headers-page-header--style-overrides" />
33
+ </Canvas>
34
+
35
+ You can apply CSS variables to the `.page-header` selector to customize the appearance of the component.
36
+
37
+ | Name | Type | Description | Default |
38
+ | ---------------------------- | ----- | --------------------------------------------------------- | ------------------------------- |
39
+ | `--background-color` | Color | The background of the header | `--bloom-color-primary-lighter` |
40
+ | `--border-color` | Color | The color of the top border | `--bloom-color-gray-450` |
41
+ | `--text-color` | Color | The color of text inside the header | `inherit` |
42
+ | `--inverse-background-color` | Color | The `inverse` variant background | `--bloom-color-primary-darker` |
43
+ | `--inverse-border-color` | Color | The `inverse` variant color of the top border | `--bloom-color-primary` |
44
+ | `--inverse-text-color` | Color | The `inverse` variant color of text | `--bloom-color-white` |
45
+ | `--title-font-size` | Size | The font size of the title (only on medium+ size screens) | `--bloom-font-size-5xl` |
package/src/headers/PageHeader.scss CHANGED
@@ -1,34 +1,47 @@
1
1
  .page-header {
2
- @apply py-8;
3
- @apply border-t;
4
- @apply border-gray-450;
2
+ /* Component Variables */
3
+ --background-color: var(--bloom-color-primary-lighter);
4
+ --border-color: var(--bloom-color-gray-450);
5
+ --text-color: inherit;
6
+ --inverse-background-color: var(--bloom-color-primary-darker);
7
+ --inverse-border-color: var(--bloom-color-primary);
8
+ --inverse-text-color: var(--bloom-color-white);
9
+ --title-font-size: var(--bloom-font-size-5xl);
5
10
 
6
- @screen md {
7
- @apply py-10;
11
+ /* Base Styles */
12
+ padding: var(--bloom-s8) 0;
13
+ background-color: var(--background-color);
14
+ border-top: var(--bloom-border-1) solid var(--border-color);
15
+ color: var(--text-color);
16
+
17
+ @media (min-width: $screen-sm) {
18
+ padding: var(--bloom-s10) 0;
8
19
  }
9
20
 
10
- &.bg-primary-dark {
11
- @apply text-white;
12
- @apply border-primary;
21
+ /* Variants */
22
+ &.is-inverse {
23
+ --background-color: var(--inverse-background-color);
24
+ --border-color: var(--inverse-border-color);
25
+ --text-color: var(--inverse-text-color);
13
26
  }
14
27
  }
15
28
 
16
29
  .page-header__group {
17
- @apply px-5;
18
- @apply m-auto;
19
- @apply max-w-5xl;
30
+ padding: 0 var(--bloom-s5);
31
+ margin: auto;
32
+ max-width: var(--bloom-width-5xl);
20
33
  }
21
34
 
22
35
  .page-header__title {
23
- @apply text-center;
36
+ text-align: center;
24
37
 
25
- @screen md {
26
- @apply text-5xl;
27
- @apply text-left;
38
+ @media (min-width: $screen-md) {
39
+ font-size: var(--title-font-size);
40
+ text-align: left;
28
41
  }
29
42
  }
30
43
 
31
44
  .page-header__lead {
32
- @apply m-auto;
33
- @apply max-w-5xl;
45
+ margin: auto;
46
+ max-width: var(--bloom-width-5xl);
34
47
  }
package/src/headers/PageHeader.tsx CHANGED
@@ -12,16 +12,8 @@ export interface PageHeaderProps {
12
12
 
13
13
  const PageHeader = (props: PageHeaderProps) => {
14
14
  const classNames = ["page-header"]
15
- if (props.className) {
16
- classNames.push(...props.className.split(" "))
17
- }
18
-
19
- if (props.inverse) {
20
- classNames.push("bg-primary-dark")
21
- classNames.push("text-white")
22
- } else {
23
- classNames.push("bg-primary-lighter")
24
- }
15
+ if (props.inverse) classNames.push("is-inverse")
16
+ if (props.className) classNames.push(...props.className.split(" "))
25
17
 
26
18
  return (
27
19
  <header className={classNames.join(" ")}>
package/src/prototypes/Swatch.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import * as React from "react"
2
+
3
+ export const Swatch = (props: { colorVar: string }) => (
4
+ <span
5
+ style={{ backgroundColor: `var(${props.colorVar})` }}
6
+ className="w-6 border border-gray-500 inline-block"
7
+ >
8
+ &nbsp;
9
+ </span>
10
+ )
package/tailwind.config.js CHANGED
@@ -12,106 +12,101 @@ module.exports = {
12
12
  print: { raw: "print" },
13
13
  },
14
14
  fontSize: {
15
- "2xs": ".6875rem",
16
- xs: ".75rem",
17
- sm: ".8125rem",
18
- tiny: ".875rem",
19
- base: "1rem",
20
- lg: "1.25rem",
21
- xl: "1.375rem",
22
- "2xl": "1.5rem",
23
- "3xl": "1.625rem",
24
- "4xl": "2rem",
25
- "5xl": "2.5rem",
26
- "6xl": "3rem",
27
- "6.5xl": "4rem",
28
- "7xl": "4.5rem",
15
+ "2xs": "var(--bloom-font-size-2xs)",
16
+ xs: "var(--bloom-font-size-xs)",
17
+ sm: "var(--bloom-font-size-sm)",
18
+ tiny: "var(--bloom-font-size-tiny)",
19
+ base: "var(--bloom-font-size-base)",
20
+ lg: "var(--bloom-font-size-lg)",
21
+ xl: "var(--bloom-font-size-xl)",
22
+ "2xl": "var(--bloom-font-size-2xl)",
23
+ "3xl": "var(--bloom-font-size-3xl)",
24
+ "4xl": "var(--bloom-font-size-4xl)",
25
+ "5xl": "var(--bloom-font-size-5xl)",
26
+ "6xl": "var(--bloom-font-size-6xl)",
27
+ "6.5xl": "var(--bloom-font-size-6_5xl)",
28
+ "7xl": "var(--bloom-font-size-7xl)",
29
29
  },
30
30
  fontFamily: {
31
- sans: ["Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif"],
32
- serif: ["Droid Serif", "Georgia", "Times", "serif"],
33
- "alt-sans": ["Lato", "Helvetica", "Arial", "Verdana", "sans-serif"],
31
+ sans: "var(--bloom-font-sans)",
32
+ serif: "var(--bloom-font-serif)",
33
+ "alt-sans": "var(--bloom-font-alt-sans)",
34
34
  },
35
35
  colors: {
36
- primary: "#0077DA",
37
- "primary-dark": "#0067be",
38
- "primary-darker": "#205493",
39
- "primary-light": "#DAEEFF",
40
- "primary-lighter": "#F5F8F9",
41
- secondary: "#0067be",
42
- alert: "#E41D3D",
43
- "alert-light": "#F9D2D8",
44
- "alert-dark": "#B21D38",
45
- success: "#2E8540",
46
- "success-light": "#B4E5BE",
47
- "success-dark": "#216E1F",
48
- warn: "#FDB81E",
49
- "warn-light": "#FEE8B6",
50
- "warn-dark": "#E5A000",
51
- "accent-cool": "#00BED5",
52
- "accent-cool-light": "#C8F1FF",
53
- "accent-cool-dark": "#009DB0",
54
- "accent-warm": "#ff6627",
55
- "accent-warm-dark": "#D54309",
56
- "accent-warm-light": "#FFD2C0",
57
- "accent-warm-lighter": "#FFF7F3",
58
- royal: "#B85ED5",
59
- "royal-light": "#EED7F5",
60
- "royal-dark": "#A131C6",
61
- lush: "#99CD00",
62
- "lush-light": "#F2FFCD",
63
- "lush-dark": "#7CA700",
64
- white: "#FFFFFF",
65
- black: "#000000",
36
+ primary: "var(--bloom-color-primary)",
37
+ "primary-dark": "var(--bloom-color-primary-dark)",
38
+ "primary-darker": "var(--bloom-color-primary-darker)",
39
+ "primary-light": "var(--bloom-color-primary-light)",
40
+ "primary-lighter": "var(--bloom-color-primary-lighter)",
41
+ secondary: "var(--bloom-color-secondary)",
42
+ alert: "var(--bloom-color-alert)",
43
+ "alert-light": "var(--bloom-color-alert-light)",
44
+ "alert-dark": "var(--bloom-color-alert-dark)",
45
+ success: "var(--bloom-color-success)",
46
+ "success-light": "var(--bloom-color-success-light)",
47
+ "success-dark": "var(--bloom-color-success-dark)",
48
+ warn: "var(--bloom-color-warn)",
49
+ "warn-light": "var(--bloom-color-warn-light)",
50
+ "warn-dark": "var(--bloom-color-warn-dark)",
51
+ "accent-cool": "var(--bloom-color-accent-cool)",
52
+ "accent-cool-light": "var(--bloom-color-accent-cool-light)",
53
+ "accent-cool-dark": "var(--bloom-color-accent-cool-dark)",
54
+ "accent-warm": "var(--bloom-color-accent-warm)",
55
+ "accent-warm-dark": "var(--bloom-color-accent-warm-dark)",
56
+ "accent-warm-light": "var(--bloom-color-accent-warm-light)",
57
+ "accent-warm-lighter": "var(--bloom-color-accent-warm-lighter)",
58
+ lush: "var(--bloom-color-lush)",
59
+ white: "var(--bloom-color-white)",
60
+ black: "var(--bloom-color-black)",
66
61
  blue: {
67
- 800: "#205493",
68
- 700: "#0067be",
69
- 600: "#0077DA",
70
- 300: "#DAEEFF",
71
- 200: "#F5F8F9",
62
+ 800: "var(--bloom-color-blue-800)",
63
+ 700: "var(--bloom-color-blue-700)",
64
+ 600: "var(--bloom-color-blue-600)",
65
+ 300: "var(--bloom-color-blue-300)",
66
+ 200: "var(--bloom-color-blue-200)",
72
67
  },
73
68
  red: {
74
- 700: "#E41D3D",
75
- 300: "#F9D2D8",
69
+ 700: "var(--bloom-color-red-700)",
70
+ 300: "var(--bloom-color-red-300)",
76
71
  },
77
72
  yellow: {
78
- 700: "#FDB81E",
79
- 300: "#FEE8B6",
73
+ 700: "var(--bloom-color-yellow-700)",
74
+ 300: "var(--bloom-color-yellow-300)",
80
75
  },
81
76
  green: {
82
- 700: "#2E8540",
83
- 300: "#B4E5BE",
77
+ 700: "var(--bloom-color-green-700)",
78
+ 300: "var(--bloom-color-green-300)",
84
79
  },
85
80
  teal: {
86
- 700: "#2E8540",
87
- 300: "#B4E5BE",
81
+ 700: "var(--bloom-color-green-700)",
82
+ 300: "var(--bloom-color-green-300)",
88
83
  },
89
84
  gray: {
90
- 950: "#242C2E",
91
- 900: "#222222",
92
- 850: "#333333",
93
- 800: "#30383A",
94
- 750: "#555555",
95
- 700: "#767676",
96
- 600: "#999999",
97
- 550: "#AAAAAA",
98
- 500: "#CCCCCC",
99
- 450: "#DEDEE0",
100
- 400: "#EFEFEF",
101
- 300: "#F6F6F6",
102
- 200: "#F7F7F7",
103
- 100: "#F9F9F9",
85
+ 950: "var(--bloom-color-gray-950)",
86
+ 900: "var(--bloom-color-gray-900)",
87
+ 850: "var(--bloom-color-gray-850)",
88
+ 800: "var(--bloom-color-gray-800)",
89
+ 750: "var(--bloom-color-gray-750)",
90
+ 700: "var(--bloom-color-gray-700)",
91
+ 600: "var(--bloom-color-gray-600)",
92
+ 550: "var(--bloom-color-gray-550)",
93
+ 500: "var(--bloom-color-gray-500)",
94
+ 450: "var(--bloom-color-gray-450)",
95
+ 400: "var(--bloom-color-gray-400)",
96
+ 300: "var(--bloom-color-gray-300)",
97
+ 200: "var(--bloom-color-gray-200)",
98
+ 100: "var(--bloom-color-gray-100)",
104
99
  },
105
100
  },
106
101
  letterSpacing: {
107
- tightest: "-.075em",
108
- tighter: "-.05em",
109
- tight: "-.025em",
102
+ tightest: "var(--bloom-letter-spacing-tightest)",
103
+ tighter: "var(--bloom-letter-spacing-tighter)",
104
+ tight: "var(--bloom-letter-spacing-tight)",
110
105
  normal: "0",
111
- wide: ".025em",
112
- wider: ".05em",
113
- widest: ".12em",
114
- ultrawide: ".25em",
106
+ wide: "var(--bloom-letter-spacing-wide)",
107
+ wider: "var(--bloom-letter-spacing-wider)",
108
+ widest: "var(--bloom-letter-spacing-widest)",
109
+ ultrawide: "var(--bloom-letter-spacing-ultrawide)",
115
110
  },
116
111
  extend: {
117
112
  borderColor: (theme) => ({
package/tailwind.tosass.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* eslint-env node */
2
2
 
3
3
  const tailwindToSassVars = (bloomTheme) => {
4
+ // TODO: we should remove this in favor of just using the new CSS variables
4
5
  const bloomColorVars = Object.keys(bloomTheme.theme.colors).map((colorKey) => {
5
6
  if (typeof bloomTheme.theme.colors[colorKey] == "object") {
6
7
  // create a map variable that can be used by the map-get SCSS function
@@ -17,7 +18,7 @@ const tailwindToSassVars = (bloomTheme) => {
17
18
  }
18
19
  })
19
20
  const bloomScreenVars = Object.keys(bloomTheme.theme.screens).map((screenKey) => {
20
- return `$tailwind-screens-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
21
+ return `$screen-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
21
22
  })
22
23
 
23
24
  // Uncomment this if you want to debug: