@obosbbl/grunnmuren-tailwind 2.0.0-canary.6 → 2.0.0-canary.7

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 (2) hide show
  1. package/package.json +2 -2
  2. package/tailwind-base.cjs +68 -32
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-tailwind",
3
- "version": "2.0.0-canary.6",
3
+ "version": "2.0.0-canary.7",
4
4
  "description": "Grunnmuren Tailwind preset",
5
5
  "repository": {
6
6
  "url": "https://github.com/code-obos/grunnmuren"
@@ -20,7 +20,7 @@
20
20
  "tailwindcss-animate": "^1.0.7"
21
21
  },
22
22
  "devDependencies": {
23
- "tailwindcss": "3.4.7"
23
+ "tailwindcss": "3.4.13"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "tailwindcss": "^3.4.0"
package/tailwind-base.cjs CHANGED
@@ -154,8 +154,6 @@ module.exports = (options = {}) => {
154
154
  );
155
155
  }
156
156
 
157
- const containerSize = '92rem';
158
-
159
157
  return {
160
158
  plugins: [
161
159
  ...v1CompatibilityPlugins,
@@ -176,6 +174,44 @@ module.exports = (options = {}) => {
176
174
  'text-decoration': 'underline',
177
175
  },
178
176
  '::selection': { '@apply bg-mint text-black': {} },
177
+ ':root': {
178
+ '--gm-container-width': '92rem',
179
+ '--gm-container-gutter-width': '1rem',
180
+
181
+ '--gm-color-black': '#333',
182
+ '--gm-color-white': '#fff',
183
+
184
+ '--gm-color-gray': '#818181',
185
+ '--gm-color-gray-dark': '#595959',
186
+ '--gm-color-gray-light': '#e6e6e6',
187
+ '--gm-color-gray-lightest': '#f1f1f1',
188
+
189
+ '--gm-color-sky': '#bedfec',
190
+ '--gm-color-sky-light': '#deeff5',
191
+ '--gm-color-sky-lightest': '#ebf5f9',
192
+
193
+ '--gm-color-mint': '#cdece2',
194
+ '--gm-color-mint-light': '#e6f5f0',
195
+ '--gm-color-mint-lightest': '#f0f9f6',
196
+
197
+ '--gm-color-blue': '#0047ba',
198
+ '--gm-color-blue-light': '#bedfec',
199
+ '--gm-color-blue-lightest': '#deeff5',
200
+ '--gm-color-blue-dark': '#002169',
201
+
202
+ '--gm-color-green': '#008761',
203
+ '--gm-color-green-dark': '#00524c',
204
+ '--gm-color-green-light': '#cdece2',
205
+ '--gm-color-green-lightest': '#e6f5f0',
206
+
207
+ '--gm-color-red': '#c0385d',
208
+ '--gm-color-red-light': '#faedef',
209
+
210
+ '--gm-color-orange': '#e8a74a',
211
+ '--gm-color-orange-light': '#f8e5c9',
212
+
213
+ '--gm-color-yellow': '#fff5d2',
214
+ },
179
215
  });
180
216
 
181
217
  addComponents({
@@ -190,16 +226,16 @@ module.exports = (options = {}) => {
190
226
  },
191
227
  '.container': {
192
228
  width: '100%',
193
- paddingLeft: '1rem',
194
- paddingRight: '1rem',
229
+ paddingLeft: 'var(--gm-container-gutter-width)',
230
+ paddingRight: 'var(--gm-container-gutter-width)',
195
231
  marginLeft: 'auto',
196
232
  marginRight: 'auto',
197
- maxWidth: containerSize,
233
+ maxWidth: 'var(--gm-container-width)',
198
234
  },
199
235
  '.container-prose': {
200
236
  width: '100%',
201
- paddingLeft: '1rem',
202
- paddingRight: '1rem',
237
+ paddingLeft: 'var(--gm-container-gutter-width)',
238
+ paddingRight: 'var(--gm-container-gutter-width)',
203
239
  marginLeft: 'auto',
204
240
  marginRight: 'auto',
205
241
  maxWidth: '45.5rem',
@@ -329,52 +365,52 @@ module.exports = (options = {}) => {
329
365
  inherit: 'inherit',
330
366
  current: 'currentColor',
331
367
  transparent: 'transparent',
332
- black: '#333',
333
- white: '#fff',
368
+ black: 'var(--gm-color-black)',
369
+ white: 'var(--gm-color-white)',
334
370
  gray: {
335
- DEFAULT: '#818181',
336
- dark: '#595959',
337
- light: '#E6E6E6',
338
- lightest: '#f1f1f1',
371
+ DEFAULT: 'var(--gm-color-gray)',
372
+ dark: 'var(--gm-color-gray-dark)',
373
+ light: 'var(--gm-color-gray-light)',
374
+ lightest: 'var(--gm-color-gray-lightest)',
339
375
  },
340
376
  sky: {
341
- DEFAULT: '#BEDFEC',
342
- light: '#DEEFF5',
343
- lightest: '#EBF5F9',
377
+ DEFAULT: 'var(--gm-color-sky)',
378
+ light: 'var(--gm-color-sky-light)',
379
+ lightest: 'var(--gm-color-sky-lightest)',
344
380
  },
345
381
  mint: {
346
- DEFAULT: '#CDECE2',
347
- light: '#E6F5F0',
348
- lightest: '#F0F9F6',
382
+ DEFAULT: 'var(--gm-color-mint)',
383
+ light: 'var(--gm-color-mint-light)',
384
+ lightest: 'var(--gm-color-mint-lightest)',
349
385
  },
350
386
  blue: {
351
387
  // OBOS Blue/Primary brand
352
- DEFAULT: '#0047BA',
353
- light: '#BEDFEC',
354
- lightest: '#DEEFF5',
388
+ DEFAULT: 'var(--gm-color-blue)',
355
389
  // OBOS Ocean
356
- dark: '#002169',
390
+ dark: 'var(--gm-color-blue-dark)',
391
+ light: 'var(--gm-color-blue-light)',
392
+ lightest: 'var(--gm-color-blue-lightest)',
357
393
  },
358
394
  green: {
359
395
  // OBOS Green/Primary brand
360
- DEFAULT: '#008761',
361
- lightest: '#E6F5F0',
362
- light: '#CDECE2',
396
+ DEFAULT: 'var(--gm-color-green)',
363
397
  // OBOS Forest
364
- dark: '#00524C',
398
+ dark: 'var(--gm-color-green-dark)',
399
+ light: 'var(--gm-color-green-light)',
400
+ lightest: 'var(--gm-color-green-lightest)',
365
401
  },
366
402
  red: {
367
- DEFAULT: '#C0385D',
403
+ DEFAULT: 'var(--gm-color-red)',
368
404
  // error red
369
- light: '#FAEDEF',
405
+ light: 'var(--gm-color-red-light)',
370
406
  },
371
407
  orange: {
372
- DEFAULT: '#e8a74a',
373
- light: '#f8e5c9',
408
+ DEFAULT: 'var(--gm-color-orange)',
409
+ light: 'var(--gm-color-orange-light)',
374
410
  },
375
411
  yellow: {
376
412
  // open house
377
- DEFAULT: '#fff5d2',
413
+ DEFAULT: 'var(--gm-color-yellow)',
378
414
  },
379
415
  },
380
416
  fontFamily: {