@obosbbl/grunnmuren-tailwind 2.0.0-canary.5 → 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 +86 -50
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-tailwind",
3
- "version": "2.0.0-canary.5",
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.4"
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',
@@ -221,20 +257,20 @@ module.exports = (options = {}) => {
221
257
  } = typography;
222
258
 
223
259
  // This is tailwind syntax for setting both the font-size and the line-height
224
- const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] md:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
225
- const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] md:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
226
- const headingM = `@apply font-text font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] md:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
227
- const headingS = `@apply font-text font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] md:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
228
- const headingXs = `@apply font-text font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] md:text-[${headingXsText.large.fontSize}]/[${headingXsText.large.lineHeight}]`;
260
+ const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] lg:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
261
+ const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] lg:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
262
+ const headingM = `@apply font-text font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] lg:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
263
+ const headingS = `@apply font-text font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] lg:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
264
+ const headingXs = `@apply font-text font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] lg:text-[${headingXsText.large.fontSize}]/[${headingXsText.large.lineHeight}]`;
229
265
 
230
266
  const paragraph = `@apply text-[${paragraphText.fontSize}]/[${paragraphText.lineHeight}]`;
231
- const lead = `@apply font-medium text-[${leadText.small.fontSize}]/[${leadText.small.lineHeight}] md:text-[${leadText.large.fontSize}]/[${leadText.large.lineHeight}]`;
267
+ const lead = `@apply font-medium text-[${leadText.small.fontSize}]/[${leadText.small.lineHeight}] lg:text-[${leadText.large.fontSize}]/[${leadText.large.lineHeight}]`;
232
268
 
233
269
  const blockquote = `@apply font-${blockquoteText.fontWeight} italic grid grid-cols-[${blockquoteText.gridTemplateColumns.split(' ').join('_')}] gap-x-[${blockquoteText.columnGap}] pt-4
234
- text-[${blockquoteText.large.fontSize}]/[${blockquoteText.large.lineHeight}] md:text-[${blockquoteText.small.fontSize}]/[${blockquoteText.small.lineHeight}]
270
+ text-[${blockquoteText.large.fontSize}]/[${blockquoteText.large.lineHeight}] lg:text-[${blockquoteText.small.fontSize}]/[${blockquoteText.small.lineHeight}]
235
271
  before:text-[${blockquoteText.before.fontSize}]/[${blockquoteText.before.lineHeight}] before:content-[${blockquoteText.before.content}] before:font-display before:not-italic`;
236
272
 
237
- const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] md:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
273
+ const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] lg:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
238
274
 
239
275
  if (options.legacyV1Compatibility) {
240
276
  addBase({
@@ -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: {
@@ -424,7 +460,7 @@ module.exports = (options = {}) => {
424
460
  fontFamily: 'OBOSDisplay',
425
461
  fontWeight: theme('fontWeight.semibold'),
426
462
  ...typography.headingXlText.small,
427
- '@media (min-width: theme("screens.md"))': {
463
+ '@media (min-width: theme("screens.lg"))': {
428
464
  ...typography.headingXlText.large,
429
465
  },
430
466
  },
@@ -432,7 +468,7 @@ module.exports = (options = {}) => {
432
468
  fontFamily: 'OBOSDisplay',
433
469
  fontWeight: theme('fontWeight.semibold'),
434
470
  ...typography.headingLText.small,
435
- '@media (min-width: theme("screens.md"))': {
471
+ '@media (min-width: theme("screens.lg"))': {
436
472
  ...typography.headingLText.large,
437
473
  },
438
474
  },
@@ -440,7 +476,7 @@ module.exports = (options = {}) => {
440
476
  fontFamily: 'OBOSText',
441
477
  fontWeight: theme('fontWeight.medium'),
442
478
  ...typography.headingMText.small,
443
- '@media (min-width: theme("screens.md"))': {
479
+ '@media (min-width: theme("screens.lg"))': {
444
480
  ...typography.headingMText.large,
445
481
  },
446
482
  },
@@ -448,7 +484,7 @@ module.exports = (options = {}) => {
448
484
  fontFamily: 'OBOSText',
449
485
  fontWeight: theme('fontWeight.medium'),
450
486
  ...typography.headingSText.small,
451
- '@media (min-width: theme("screens.md"))': {
487
+ '@media (min-width: theme("screens.lg"))': {
452
488
  ...typography.headingSText.large,
453
489
  },
454
490
  },
@@ -456,19 +492,19 @@ module.exports = (options = {}) => {
456
492
  fontFamily: 'OBOSText',
457
493
  fontWeight: theme('fontWeight.bold'),
458
494
  ...typography.headingXsText.small,
459
- '@media (min-width: theme("screens.md"))': {
495
+ '@media (min-width: theme("screens.lg"))': {
460
496
  ...typography.headingXsText.large,
461
497
  },
462
498
  },
463
499
  li: {
464
500
  ...typography.paragraphText.small,
465
- '@media (min-width: theme("screens.md"))': {
501
+ '@media (min-width: theme("screens.lg"))': {
466
502
  ...typography.paragraphText.large,
467
503
  },
468
504
  },
469
505
  p: {
470
506
  ...typography.paragraphText.small,
471
- '@media (min-width: theme("screens.md"))': {
507
+ '@media (min-width: theme("screens.lg"))': {
472
508
  ...typography.paragraphText.large,
473
509
  },
474
510
  },
@@ -485,7 +521,7 @@ module.exports = (options = {}) => {
485
521
  columnGap: typography.blockquoteText.columnGap,
486
522
  paddingTop: '1rem',
487
523
  ...typography.blockquoteText.small,
488
- '@media (min-width: theme("screens.md"))': {
524
+ '@media (min-width: theme("screens.lg"))': {
489
525
  ...typography.blockquoteText.large,
490
526
  },
491
527
  },
@@ -495,13 +531,13 @@ module.exports = (options = {}) => {
495
531
  '[class~="lead"]': {
496
532
  fontWeight: theme('fontWeight.medium'),
497
533
  ...typography.leadText.small,
498
- '@media (min-width: theme("screens.md"))': {
534
+ '@media (min-width: theme("screens.lg"))': {
499
535
  ...typography.leadText.large,
500
536
  },
501
537
  },
502
538
  '[class~="description"]': {
503
539
  ...typography.descriptionText.small,
504
- '@media (min-width: theme("screens.md"))': {
540
+ '@media (min-width: theme("screens.lg"))': {
505
541
  ...typography.descriptionText.large,
506
542
  },
507
543
  },