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

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 +22 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@obosbbl/grunnmuren-tailwind",
3
- "version": "2.0.0-canary.4",
3
+ "version": "2.0.0-canary.6",
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.3"
23
+ "tailwindcss": "3.4.7"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "tailwindcss": "^3.4.0"
package/tailwind-base.cjs CHANGED
@@ -221,20 +221,20 @@ module.exports = (options = {}) => {
221
221
  } = typography;
222
222
 
223
223
  // 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}]`;
224
+ const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] lg:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
225
+ const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] lg:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
226
+ const headingM = `@apply font-text font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] lg:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
227
+ const headingS = `@apply font-text font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] lg:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
228
+ const headingXs = `@apply font-text font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] lg:text-[${headingXsText.large.fontSize}]/[${headingXsText.large.lineHeight}]`;
229
229
 
230
230
  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}]`;
231
+ const lead = `@apply font-medium text-[${leadText.small.fontSize}]/[${leadText.small.lineHeight}] lg:text-[${leadText.large.fontSize}]/[${leadText.large.lineHeight}]`;
232
232
 
233
233
  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}]
234
+ text-[${blockquoteText.large.fontSize}]/[${blockquoteText.large.lineHeight}] lg:text-[${blockquoteText.small.fontSize}]/[${blockquoteText.small.lineHeight}]
235
235
  before:text-[${blockquoteText.before.fontSize}]/[${blockquoteText.before.lineHeight}] before:content-[${blockquoteText.before.content}] before:font-display before:not-italic`;
236
236
 
237
- const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] md:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
237
+ const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] lg:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
238
238
 
239
239
  if (options.legacyV1Compatibility) {
240
240
  addBase({
@@ -414,7 +414,7 @@ module.exports = (options = {}) => {
414
414
  '--tw-prose-links': 'inherit',
415
415
  '--tw-prose-quotes': 'inherit',
416
416
  '--tw-prose-counters': theme('colors.black'),
417
- '--tw-prose-bullets': theme('colors.green.DEFAULT'),
417
+ '--tw-prose-bullets': theme('colors.black'),
418
418
  color: theme('colors.black'),
419
419
  maxWidth: theme('maxWidth.prose'),
420
420
  a: {
@@ -424,7 +424,7 @@ module.exports = (options = {}) => {
424
424
  fontFamily: 'OBOSDisplay',
425
425
  fontWeight: theme('fontWeight.semibold'),
426
426
  ...typography.headingXlText.small,
427
- '@media (min-width: theme("screens.md"))': {
427
+ '@media (min-width: theme("screens.lg"))': {
428
428
  ...typography.headingXlText.large,
429
429
  },
430
430
  },
@@ -432,7 +432,7 @@ module.exports = (options = {}) => {
432
432
  fontFamily: 'OBOSDisplay',
433
433
  fontWeight: theme('fontWeight.semibold'),
434
434
  ...typography.headingLText.small,
435
- '@media (min-width: theme("screens.md"))': {
435
+ '@media (min-width: theme("screens.lg"))': {
436
436
  ...typography.headingLText.large,
437
437
  },
438
438
  },
@@ -440,7 +440,7 @@ module.exports = (options = {}) => {
440
440
  fontFamily: 'OBOSText',
441
441
  fontWeight: theme('fontWeight.medium'),
442
442
  ...typography.headingMText.small,
443
- '@media (min-width: theme("screens.md"))': {
443
+ '@media (min-width: theme("screens.lg"))': {
444
444
  ...typography.headingMText.large,
445
445
  },
446
446
  },
@@ -448,7 +448,7 @@ module.exports = (options = {}) => {
448
448
  fontFamily: 'OBOSText',
449
449
  fontWeight: theme('fontWeight.medium'),
450
450
  ...typography.headingSText.small,
451
- '@media (min-width: theme("screens.md"))': {
451
+ '@media (min-width: theme("screens.lg"))': {
452
452
  ...typography.headingSText.large,
453
453
  },
454
454
  },
@@ -456,17 +456,19 @@ module.exports = (options = {}) => {
456
456
  fontFamily: 'OBOSText',
457
457
  fontWeight: theme('fontWeight.bold'),
458
458
  ...typography.headingXsText.small,
459
- '@media (min-width: theme("screens.md"))': {
459
+ '@media (min-width: theme("screens.lg"))': {
460
460
  ...typography.headingXsText.large,
461
461
  },
462
462
  },
463
463
  li: {
464
- marginTop: '1.5em',
465
- marginBottom: '1.5em',
464
+ ...typography.paragraphText.small,
465
+ '@media (min-width: theme("screens.lg"))': {
466
+ ...typography.paragraphText.large,
467
+ },
466
468
  },
467
469
  p: {
468
470
  ...typography.paragraphText.small,
469
- '@media (min-width: theme("screens.md"))': {
471
+ '@media (min-width: theme("screens.lg"))': {
470
472
  ...typography.paragraphText.large,
471
473
  },
472
474
  },
@@ -483,7 +485,7 @@ module.exports = (options = {}) => {
483
485
  columnGap: typography.blockquoteText.columnGap,
484
486
  paddingTop: '1rem',
485
487
  ...typography.blockquoteText.small,
486
- '@media (min-width: theme("screens.md"))': {
488
+ '@media (min-width: theme("screens.lg"))': {
487
489
  ...typography.blockquoteText.large,
488
490
  },
489
491
  },
@@ -493,13 +495,13 @@ module.exports = (options = {}) => {
493
495
  '[class~="lead"]': {
494
496
  fontWeight: theme('fontWeight.medium'),
495
497
  ...typography.leadText.small,
496
- '@media (min-width: theme("screens.md"))': {
498
+ '@media (min-width: theme("screens.lg"))': {
497
499
  ...typography.leadText.large,
498
500
  },
499
501
  },
500
502
  '[class~="description"]': {
501
503
  ...typography.descriptionText.small,
502
- '@media (min-width: theme("screens.md"))': {
504
+ '@media (min-width: theme("screens.lg"))': {
503
505
  ...typography.descriptionText.large,
504
506
  },
505
507
  },