@obosbbl/grunnmuren-tailwind 2.0.0 → 2.0.1

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 (4) hide show
  1. package/README.md +89 -9
  2. package/package.json +15 -8
  3. package/tailwind-base.css +171 -0
  4. package/tailwind-base.cjs +0 -124
package/README.md CHANGED
@@ -1,26 +1,106 @@
1
1
  # @obosbbl/grunnmuren-tailwind
2
2
 
3
- Grunnmuren Tailwind preset.
3
+ [![npm canary version](https://img.shields.io/npm/v/@obosbbl%2Fgrunnmuren-tailwind/canary.svg)](https://www.npmjs.com/package/@obosbbl/grunnmuren-tailwind)
4
+
5
+ Grunnmuren Tailwind preset. See the [Tailwind documentation](https://tailwindcss.com/docs/presets) for more information about how presets work.
4
6
 
5
7
  ## Install
6
8
 
7
9
  ```sh
8
- npm install -D @obosbbl/grunnmuren-tailwind tailwindcss
10
+ # npm
11
+ npm install -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
12
+
13
+ # pnpm
14
+ pnpm add -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
9
15
  ```
10
16
 
11
17
  ## Usage
12
18
 
19
+ Configure Tailwind to use the preset
20
+
21
+ ```css
22
+ /* globals.css */
23
+
24
+ @import "@obosbbl/grunnmuren-tailwind";
25
+
26
+ /** Add any auto excluded sources (typically residing in node_modules) */
27
+ @source "../../node_modules/@obosbbl/grunnmuren-react/dist";
28
+ @source "../../node_modules/@code-obos/obos-layout/dist"
29
+ ```
30
+
31
+ ## Fonts
32
+
33
+ Fonts are automatically loaded from OBOS' CDN, so you don't have to host the font files yourself.
34
+
35
+ If you use [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you have to allow `https://www.obos.no` as a [font-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src), otherwise the fonts will be blocked from loading.
36
+
37
+ The preset includes a (local) fallback font to prevent [CLS](https://web.dev/articles/cls) while the fonts are loading. This is similar to the [font optimization in Next](https://nextjs.org/docs/app/building-your-application/optimizing/fonts). This is enabled by default, and can only be disabled by a @theme override of the font variables in your own main tailwind CSS file.
38
+
39
+ The fallback font metrics is generated with a script that can be run with `pnpm font-fallback` (requires [Bun](https://bun.sh/)). If the fonts are changed, the script must be rerun and the resulting file commited.
40
+
41
+ ## Migrating from v1?
42
+
43
+ To ease the transition from v1 to v2 of Grunnmuren, it is possible to configure the preset to be (partially) compatible with v1. This allows you to use v2 of the Tailwind preset with v1 of the React components, and upgrade your application over time instead of a full migration.
44
+
45
+ To do that you need to configure the preset with `legacyV1Compatibility` option.
46
+
47
+ ## Options
48
+
13
49
  ```js
14
50
  // tailwind.config.js
15
51
 
16
- // Regular usage
52
+ /** @type {import('tailwindcss').Config} */
17
53
  module.exports = {
18
- presets: [require('@obosbbl/grunnmuren-tailwind')],
19
- content: [
20
- // If using this together with Grunnmuren's React components
21
- './node_modules/@obosbbl/grunnmuren-react/dist/**/*.js',
22
- // Add your own content sources as needed, eg:
23
- './src/components/**/*.{ts,tsx}',
54
+ presets: [
55
+ require('@obosbbl/grunnmuren-tailwind')({ includeFontFallback: false }),
24
56
  ],
57
+ // content: [ ... ]
25
58
  };
26
59
  ```
60
+
61
+ The preset supports the following options:
62
+
63
+ | Name | Default value | Description |
64
+ | --------------------- | ------------- | --------------------------------------------------- |
65
+ | includeFontFallback | `true` | Whether the preset includes a font fallback |
66
+ | legacyV1Compatibility | `false` | Configures partial compatibility with Grunnmuren v1 |
67
+
68
+ ## Migrating from v2?
69
+ Tailwind is upgraded to v4. The `grunnmuren-tailwind` package is now CSS-first configured. And the previously exposed JS config file is now replaced by a CSS config file.
70
+
71
+ The `legacyV1Compatibility` option is removed, so your project has to be fully upgraded to Grunnmuren v2.
72
+
73
+ The `includeFontFallback` option is also removed, and a font fallback will automatically be applied to the OBOS fonts by defaullt.
74
+
75
+ ## Migration
76
+ 1. Upgrade your project to Tailwind 4. You can try the [migration guide](https://tailwindcss.com/docs/upgrade-guide)
77
+ from tailwind.
78
+ 2. Add `@import "@obosbbl/grunnmuren-tailwind";` to the top of the main CSS file of your project. This is the new CSS configuration file for Grunnmuren.
79
+ 3. If you have a JS/TS `tailwind.config` in your project and would like to keep it. You can include it in the main CSS file (mentioned in step 2), by using the `@config` directive, e.g: `@config '../tailwind.config.ts';`. Read more [here](https://tailwindcss.com/docs/functions-and-directives#compatibility).
80
+ 4. Finally, if you would like to get rid of the old `tailwind.config`. You can move all your configuration to the main CSS file of your project. Tailwind 4 has automatic content detection, but if you need to include some excluded source you can use the `@source` directive, e.g: `@source "./node_modules/@obosbbl/grunnmuren-react/dist";`. You can also extend the `@obosbbl/grunnmuren-tailwind` config by using various directives such as `@base` or `@theme`.
81
+
82
+ Here is an example of what your main CSS file __might__ look like after migration:
83
+
84
+ ``` CSS
85
+ @import "@obosbbl/grunnmuren-tailwind";
86
+
87
+ @source "../../node_modules/@obosbbl/grunnmuren-react/dist";
88
+ @source "../../node_modules/@code-obos/obos-layout/dist"
89
+
90
+ @theme {
91
+ --animate-custom: custom-animation 1s ease-in-out infinite;
92
+ @keyframes custom-animation {
93
+ 0%,
94
+ 100% {
95
+ transform: rotate(-3deg);
96
+ }
97
+ 50% {
98
+ transform: rotate(3deg);
99
+ }
100
+ }
101
+ }
102
+
103
+ @utility my-custom-util {
104
+ @apply flex flex-col min-h-screen;
105
+ }
106
+ ```
package/package.json CHANGED
@@ -1,23 +1,30 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-tailwind",
3
- "version": "2.0.0",
3
+ "version": "2.0.1",
4
4
  "description": "Grunnmuren Tailwind preset",
5
- "license": "MIT",
6
- "type": "commonjs",
7
5
  "repository": {
8
6
  "url": "https://github.com/code-obos/grunnmuren"
9
7
  },
8
+ "license": "MIT",
9
+ "type": "commonjs",
10
10
  "exports": {
11
- ".": "./tailwind-base.cjs"
11
+ ".": "./tailwind-base.css"
12
12
  },
13
13
  "files": [
14
- "tailwind-base.cjs"
14
+ "tailwind-base.css"
15
15
  ],
16
- "dependencies": {},
16
+ "dependencies": {
17
+ "@tailwindcss/aspect-ratio": "^0.4.2",
18
+ "@tailwindcss/typography": "^0.5.10",
19
+ "tailwindcss-animate": "^1.0.7"
20
+ },
17
21
  "devDependencies": {
18
- "tailwindcss": "3.3.4"
22
+ "tailwindcss": "4.0.17"
19
23
  },
20
24
  "peerDependencies": {
21
- "tailwindcss": "^3.4"
25
+ "tailwindcss": "^4.0.0"
26
+ },
27
+ "scripts": {
28
+ "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"
22
29
  }
23
30
  }
package/tailwind-base.css ADDED
@@ -0,0 +1,171 @@
1
+ @import "tailwindcss";
2
+ @import "./tailwind-typography";
3
+ @import "./font";
4
+
5
+ @theme {
6
+ /*** Font stacks ***/
7
+ --font-text: OBOSText, __OBOSText_Fallback, sans-serif;
8
+ --font-display: OBOSDisplay, __OBOSDisplay_Fallback, sans-serif;
9
+
10
+ /*** Widths ***/
11
+ --container-width: 92rem;
12
+ --container-gutter-width: 1rem;
13
+
14
+ /*** Colors ***/
15
+ --color-black: #333;
16
+ --color-white: #fff;
17
+ --color-gray: #818181;
18
+ --color-gray-dark: #595959;
19
+ --color-gray-light: #e6e6e6;
20
+ --color-gray-lightest: #f1f1f1;
21
+ --color-sky: #bedfec;
22
+ --color-sky-light: #deeff5;
23
+ --color-sky-lightest: #ebf5f9;
24
+ --color-mint: #cdece2;
25
+ --color-mint-light: #e6f5f0;
26
+ --color-mint-lightest: #f0f9f6;
27
+ --color-blue: #0047ba;
28
+ --color-blue-light: #bedfec;
29
+ --color-blue-lightest: #deeff5;
30
+ --color-blue-dark: #002169;
31
+ --color-green: #008761;
32
+ --color-green-dark: #00524c;
33
+ --color-green-light: #cdece2;
34
+ --color-green-lightest: #e6f5f0;
35
+ --color-red: #c0385d;
36
+ --color-red-light: #faedef;
37
+ --color-orange: #e8a74a;
38
+ --color-orange-light: #f8e5c9;
39
+ --color-yellow: #fff5d2;
40
+ }
41
+
42
+ @layer base {
43
+ @font-face {
44
+ font-family: OBOSText;
45
+ font-weight: 400;
46
+ font-style: normal;
47
+ src: url("https://www.obos.no/fonts/OBOSText-Regular.woff2") format("woff2");
48
+ font-display: swap;
49
+ }
50
+
51
+ @font-face {
52
+ font-family: OBOSText;
53
+ font-weight: 400;
54
+ font-style: italic;
55
+ src: url("https://www.obos.no/fonts/OBOSText-Italic.woff2") format("woff2");
56
+ font-display: swap;
57
+ }
58
+
59
+ @font-face {
60
+ font-family: OBOSText;
61
+ font-weight: 500;
62
+ font-style: normal;
63
+ src: url("https://www.obos.no/fonts/OBOSText-Medium.woff2") format("woff2");
64
+ font-display: swap;
65
+ }
66
+
67
+ @font-face {
68
+ font-family: OBOSDisplay;
69
+ font-weight: 600; /* SemiBold */
70
+ font-style: normal;
71
+ src: url("https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2")
72
+ format("woff2");
73
+ font-display: swap;
74
+ }
75
+
76
+ html {
77
+ @apply text-black antialiased font-normal font-text;
78
+ }
79
+
80
+ b {
81
+ font-weight: 500;
82
+ }
83
+
84
+ strong {
85
+ font-weight: 500;
86
+ }
87
+
88
+ a {
89
+ text-decoration: underline;
90
+ }
91
+
92
+ ::selection {
93
+ @apply bg-mint text-black;
94
+ }
95
+ }
96
+
97
+ /*** Layout ***/
98
+ @utility page-layout {
99
+ @apply flex flex-col min-h-screen;
100
+ }
101
+
102
+ @utility page-layout-main {
103
+ @apply bg-white grow;
104
+ }
105
+
106
+ @utility container {
107
+ @apply w-full px-(--container-gutter-width) mx-auto max-w-(--container-width);
108
+ }
109
+
110
+ @utility container-prose {
111
+ @apply w-full px-(--container-gutter-width) mx-auto;
112
+ max-width: 45.5rem;
113
+ }
114
+
115
+ /*** Typography styles ***/
116
+ @utility heading-xl {
117
+ @apply font-display font-semibold text-[2.8125rem]/[3.625rem] lg:text-[3.9375rem]/[5.125rem];
118
+ }
119
+
120
+ @utility heading-l {
121
+ @apply font-display font-semibold text-[1.8125rem]/[2.75rem] lg:text-[2.25rem]/[3.5rem];
122
+ }
123
+
124
+ @utility heading-m {
125
+ @apply font-text font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
126
+ }
127
+
128
+ @utility heading-s {
129
+ @apply font-text font-medium text-[1.1875rem]/[1.1875rem] lg:text-[1.3125rem]/[2.125rem];
130
+ }
131
+
132
+ @utility heading-xs {
133
+ @apply font-text font-medium text-[1.125rem]/[1.75rem] lg:text-[1.1875rem]/[1.9375rem];
134
+ }
135
+
136
+ @utility paragraph {
137
+ @apply text-[1rem]/[1.625rem];
138
+ }
139
+
140
+ @utility lead {
141
+ @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
142
+ }
143
+
144
+ @utility blockquote {
145
+ @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem] pt-4 text-[1.625rem]/[2.5625rem] lg:text-[1.4375rem]/[2.25rem] before:text-[4.6875rem]/[1.6875rem] before:font-display before:not-italic before:content-["“"];
146
+ }
147
+
148
+ @utility description {
149
+ @apply text-[0.875rem]/[1.375rem] lg:text-[0.875rem]/[1.4375rem];
150
+ }
151
+
152
+ /* Focus styles */
153
+ @utility outline-focus {
154
+ @apply outline-2 outline-black;
155
+ }
156
+
157
+ @utility outline-focus-offset {
158
+ @apply outline-focus outline-offset-2;
159
+ }
160
+
161
+ @utility outline-focus-inset {
162
+ @apply outline-focus -outline-offset-4;
163
+ }
164
+
165
+ @utility ring-focus {
166
+ @apply ring-2 ring-black;
167
+ }
168
+
169
+ @utility ring-focus-offset {
170
+ @apply ring-focus ring-offset-2;
171
+ }
package/tailwind-base.cjs DELETED
@@ -1,124 +0,0 @@
1
- const plugin = require('tailwindcss/plugin');
2
-
3
- const obosFonts = [
4
- {
5
- fontWeight: 400,
6
- fontStyle: 'normal',
7
- url: 'https://www.obos.no/fonts/OBOSText-Regular.woff2',
8
- },
9
- {
10
- fontWeight: 400,
11
- fontStyle: 'italic',
12
- url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
13
- },
14
- {
15
- fontWeight: 500,
16
- fontStyle: 'normal',
17
- url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
18
- },
19
- {
20
- fontWeight: 700,
21
- fontStyle: 'normal',
22
- url: 'https://www.obos.no/fonts/OBOSText-Bold.woff2',
23
- },
24
- ];
25
-
26
- module.exports = () => {
27
- const fontFamily = 'OBOSFont';
28
- const fonts = obosFonts;
29
-
30
- return {
31
- plugins: [
32
- plugin(function ({ addBase }) {
33
- addBase({
34
- html: {
35
- '@apply text-black antialiased font-normal': {},
36
- },
37
- b: {
38
- fontWeight: 500,
39
- },
40
- strong: {
41
- fontWeight: 500,
42
- },
43
- '::selection': { '@apply bg-mint text-black': {} },
44
- });
45
- }),
46
- plugin(function ({ addBase }) {
47
- addBase(
48
- fonts.map((font) => ({
49
- '@font-face': {
50
- fontFamily,
51
- fontWeight: font.fontWeight,
52
- fontStyle: font.fontStyle,
53
- src: `url('${font.url}') format('woff2')`,
54
- fontDisplay: 'swap',
55
- },
56
- })),
57
- );
58
- }),
59
- ],
60
- theme: {
61
- colors: {
62
- black: '#333',
63
- white: '#fff',
64
- gray: {
65
- DEFAULT: '#818181',
66
- dark: '#595959',
67
- light: '#E6E6E6',
68
- lightest: '#f1f1f1',
69
- },
70
- sky: {
71
- DEFAULT: '#BEDFEC',
72
- light: '#DEEFF5',
73
- lightest: '#EBF5F9',
74
- },
75
- mint: {
76
- DEFAULT: '#CDECE2',
77
- light: '#E6F5F0',
78
- lightest: '#F0F9F6',
79
- },
80
- blue: {
81
- // OBOS Blue/Primary brand
82
- DEFAULT: '#0047BA',
83
- light: '#BEDFEC',
84
- lightest: '#DEEFF5',
85
- // OBOS Ocean
86
- dark: '#002169',
87
- },
88
- green: {
89
- // OBOS Green/Primary brand
90
- DEFAULT: '#008761',
91
- lightest: '#E6F5F0',
92
- light: '#CDECE2',
93
- // OBOS Forest
94
- dark: '#00524C',
95
- },
96
- red: {
97
- DEFAULT: '#cd465e',
98
- // error red
99
- light: '#faedef',
100
- },
101
- orange: {
102
- DEFAULT: '#e8a74a',
103
- light: '#f8e5c9',
104
- },
105
- yellow: {
106
- // open house
107
- DEFAULT: '#fff5d2',
108
- },
109
- },
110
- fontFamily: {
111
- sans: [fontFamily, 'sans-serif'],
112
- },
113
- borderRadius: {
114
- none: '0',
115
- 'x-small': '0.5rem',
116
- small: '1rem',
117
- medium: '1.5rem',
118
- large: '2rem',
119
- 'x-large': '3rem',
120
- 'xx-large': '3.5rem',
121
- },
122
- },
123
- };
124
- };