@obosbbl/grunnmuren-tailwind 2.0.1 → 2.0.3

package/font.css

@@ -0,0 +1,21 @@
+@layer base {
+  @font-face {
+    font-family: "__OBOSText_Fallback";
+    src: local("Arial");
+    size-adjust: 100%;
+    ascent-override: 94%;
+    descent-override: 26%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: "__OBOSDisplay_Fallback";
+    src: local("Arial");
+    size-adjust: 100%;
+    ascent-override: 94%;
+    descent-override: 26%;
+    line-gap-override: 0%;
+  }
+
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "Grunnmuren Tailwind preset",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -11,19 +11,19 @@
     ".": "./tailwind-base.css"
   },
   "files": [
-    "tailwind-base.css"
+    "tailwind-base.css",
+    "tailwind-typography.css",
+    "font.css"
   ],
-  "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.10",
-    "tailwindcss-animate": "^1.0.7"
-  },
   "devDependencies": {
     "tailwindcss": "4.0.17"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0"
   },
+  "dependencies": {
+    "tw-animate-css": "^1.2.5"
+  },
   "scripts": {
     "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"
   }

package/tailwind-base.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 @import "./tailwind-typography";
 @import "./font";
 
@@ -126,7 +127,7 @@
 }
 
 @utility heading-s {
-  @apply font-text font-medium text-[1.1875rem]/[1.1875rem] lg:text-[1.3125rem]/[2.125rem];
+  @apply font-text font-medium text-[1.1875rem]/[1.875rem] lg:text-[1.3125rem]/[2.125rem];
 }
 
 @utility heading-xs {

package/tailwind-typography.css

@@ -0,0 +1,509 @@
+/**
+ * This is a copy of the Tailwind Typography plugin's CSS.
+ * To support the prose styles from the tailwindcss-typography plugin.
+ */
+
+@custom-variant prose-headings (& :is(h1, h2, h3, h4, th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-lead (& :is([class~="lead"]):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-h1 (& :is(h1):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-h2 (& :is(h2):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-h3 (& :is(h3):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-h4 (& :is(h4):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-p (& :is(p):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-a (& :is(a):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-blockquote (& :is(blockquote):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-figure (& :is(figure):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-figcaption (& :is(figcaption):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-strong (& :is(strong):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-em (& :is(em):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-kbd (& :is(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-code (& :is(code):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-pre (& :is(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-ol (& :is(ol):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-ul (& :is(ul):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-li (& :is(li):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-table (& :is(table):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-thead (& :is(thead):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-tr (& :is(tr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-th (& :is(th):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-td (& :is(td):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-img (& :is(img):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-video (& :is(video):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+@custom-variant prose-hr (& :is(hr):not(:where([class~='not-prose'], [class~='not-prose'] *)));
+
+@utility prose {
+  --tw-prose-body: --theme(--color-black, initial);
+  --tw-prose-headings: inherit;
+  --tw-prose-lead: inherit;
+  --tw-prose-links: inherit;
+  --tw-prose-bold: inherit;
+  --tw-prose-counters: --theme(--color-black, initial);
+  --tw-prose-bullets: --theme(--color-black, initial);
+  --tw-prose-hr: --theme(--color-gray-200, initial);
+  --tw-prose-quotes: inherit;
+  --tw-prose-quote-borders: --theme(--color-gray-200, initial);
+  --tw-prose-captions: --theme(--color-gray-500, initial);
+  --tw-prose-kbd: --theme(--color-gray-900, initial);
+  --tw-prose-kbd-shadows: --theme(--color-gray-900, initial);
+  --tw-prose-code: --theme(--color-gray-900, initial);
+  --tw-prose-pre-code: --theme(--color-gray-200, initial);
+  --tw-prose-pre-bg: --theme(--color-gray-800, initial);
+  --tw-prose-th-borders: --theme(--color-gray-300, initial);
+  --tw-prose-td-borders: --theme(--color-gray-200, initial);
+  --tw-prose-invert-body: --theme(--color-gray-300, initial);
+  --tw-prose-invert-headings: --theme(--color-white, initial);
+  --tw-prose-invert-lead: --theme(--color-gray-400, initial);
+  --tw-prose-invert-links: --theme(--color-white, initial);
+  --tw-prose-invert-bold: --theme(--color-white, initial);
+  --tw-prose-invert-counters: --theme(--color-gray-400, initial);
+  --tw-prose-invert-bullets: --theme(--color-gray-600, initial);
+  --tw-prose-invert-hr: --theme(--color-gray-700, initial);
+  --tw-prose-invert-quotes: --theme(--color-gray-100, initial);
+  --tw-prose-invert-quote-borders: --theme(--color-gray-700, initial);
+  --tw-prose-invert-captions: --theme(--color-gray-400, initial);
+  --tw-prose-invert-kbd: --theme(--color-white, initial);
+  --tw-prose-invert-kbd-shadows: --theme(--color-white, initial);
+  --tw-prose-invert-code: --theme(--color-white, initial);
+  --tw-prose-invert-pre-code: --theme(--color-gray-300, initial);
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: --theme(--color-gray-600, initial);
+  --tw-prose-invert-td-borders: --theme(--color-gray-700, initial);
+
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--tw-prose-body);
+  max-width: 696px;
+
+  :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+    &:where(p) {
+      @apply text-[1rem]/[1.625rem];
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
+
+    &:where([class~="lead"]) {
+      @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
+      margin-top: 1.2em;
+      margin-bottom: 1.2em;
+    }
+
+    &:where(a) {
+      color: var(--tw-prose-links);
+      text-decoration: underline;
+      font-weight: 500;
+    }
+
+    &:where(strong) {
+      color: var(--tw-prose-bold);
+      font-weight: 600;
+    }
+
+    &:where(a strong) {
+      color: inherit;
+    }
+
+    &:where(blockquote strong) {
+      color: inherit;
+    }
+
+    &:where(thead th strong) {
+      color: inherit;
+    }
+
+    &:where(ol) {
+      list-style-type: decimal;
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+      padding-left: 1.625em;
+    }
+
+    &:where(ol[type="A"]) {
+      list-style-type: upper-alpha;
+    }
+
+    &:where(ol[type="a"]) {
+      list-style-type: lower-alpha;
+    }
+
+    &:where(ol[type="A" s]) {
+      list-style-type: upper-alpha;
+    }
+
+    &:where(ol[type="a" s]) {
+      list-style-type: lower-alpha;
+    }
+
+    &:where(ol[type="I"]) {
+      list-style-type: upper-roman;
+    }
+
+    &:where(ol[type="i"]) {
+      list-style-type: lower-roman;
+    }
+
+    &:where(ol[type="I" s]) {
+      list-style-type: upper-roman;
+    }
+
+    &:where(ol[type="i" s]) {
+      list-style-type: lower-roman;
+    }
+
+    &:where(ol[type="1"]) {
+      list-style-type: decimal;
+    }
+
+    &:where(ul) {
+      list-style-type: disc;
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+      padding-left: 1.625em;
+    }
+
+    &:where(ol > li)::marker {
+      font-weight: 400;
+      color: var(--tw-prose-counters);
+    }
+
+    &:where(ul > li)::marker {
+      color: var(--tw-prose-bullets);
+    }
+
+    &:where(dt) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      margin-top: 1.25em;
+    }
+
+    &:where(hr) {
+      border-color: var(--tw-prose-hr);
+      border-top-width: 1px;
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+
+    &:where(blockquote) {
+      @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem]
+      pt-4 text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem]
+      before:text-[4.6875rem]/[1.6875rem] before:font-display
+      before:not-italic before:content-["“"];
+      margin-top: 1.6em;
+      margin-bottom: 1.6em;
+    }
+
+    &:where(blockquote p:first-of-type)::before {
+      content: open-quote;
+    }
+
+    &:where(blockquote p:last-of-type)::after {
+      content: close-quote;
+    }
+
+    &:where(h1) {
+      @apply heading-xl;
+      margin-top: 0;
+      margin-bottom: 0.8888889em;
+    }
+
+    &:where(h1 strong) {
+      font-weight: 900;
+      color: inherit;
+    }
+
+    &:where(h2) {
+      @apply heading-l;
+      margin-top: 2em;
+      margin-bottom: 1em;
+    }
+
+    &:where(h2 strong) {
+      font-weight: 800;
+      color: inherit;
+    }
+
+    &:where(h3) {
+      @apply heading-m;
+      margin-top: 1.6em;
+      margin-bottom: 0.6em;
+    }
+
+    &:where(h3 strong) {
+      font-weight: 700;
+      color: inherit;
+    }
+
+    &:where(h4) {
+      @apply heading-s;
+      margin-top: 1.5em;
+      margin-bottom: 0.5em;
+    }
+
+    &:where(h4 strong) {
+      font-weight: 700;
+      color: inherit;
+    }
+
+    &:where(img) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    &:where(picture) {
+      display: block;
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    &:where(kbd) {
+      font-weight: 500;
+      font-family: inherit;
+      color: var(--tw-prose-kbd);
+      box-shadow: 0 0 0 1px --alpha(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0
+        --alpha(var(--tw-prose-kbd-shadows) / 10%);
+      font-size: 0.875em;
+      border-radius: 0.3125rem;
+      padding-top: 0.1875em;
+      padding-right: 0.375em;
+      padding-bottom: 0.1875em;
+      padding-left: 0.375em;
+    }
+
+    &:where(code) {
+      @apply text-(--tw-prose-code) py-0.5 px-2 rounded-sm border border-gray bg-gray-lightest whitespace-nowrap font-semibold text-sm;
+    }
+
+    &:where(a code) {
+      color: inherit;
+    }
+
+    &:where(h1 code) {
+      color: inherit;
+    }
+
+    &:where(h2 code) {
+      color: inherit;
+      font-size: 0.875em;
+    }
+
+    &:where(h3 code) {
+      color: inherit;
+      font-size: 0.9em;
+    }
+
+    &:where(h4 code) {
+      color: inherit;
+    }
+
+    &:where(blockquote code) {
+      color: inherit;
+    }
+
+    &:where(thead th code) {
+      color: inherit;
+    }
+
+    &:where(pre) {
+      color: var(--tw-prose-pre-code);
+      background-color: var(--tw-prose-pre-bg);
+      overflow-x: auto;
+      font-weight: 400;
+      font-size: 0.875em;
+      line-height: 1.7142857;
+      margin-top: 1.7142857em;
+      margin-bottom: 1.7142857em;
+      border-radius: 0.375rem;
+      padding-top: 0.8571429em;
+      padding-right: 1.1428571em;
+      padding-bottom: 0.8571429em;
+      padding-left: 1.1428571em;
+    }
+
+    &:where(pre code) {
+      background-color: transparent;
+      border-width: 0;
+      border-radius: 0;
+      padding: 0;
+      font-weight: inherit;
+      color: inherit;
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+    }
+
+    &:where(pre code)::before {
+      content: none;
+    }
+
+    &:where(pre code)::after {
+      content: none;
+    }
+
+    &:where(table) {
+      width: 100%;
+      table-layout: auto;
+      text-align: left;
+      margin-top: 2em;
+      margin-bottom: 2em;
+      font-size: 0.875em;
+      line-height: 1.7142857;
+    }
+
+    &:where(thead) {
+      border-bottom-width: 1px;
+      border-bottom-color: var(--tw-prose-th-borders);
+    }
+
+    &:where(thead th) {
+      color: var(--tw-prose-headings);
+      font-weight: 600;
+      vertical-align: bottom;
+      padding-right: 0.5714286em;
+      padding-bottom: 0.5714286em;
+      padding-left: 0.5714286em;
+    }
+
+    &:where(tbody tr) {
+      border-bottom-width: 1px;
+      border-bottom-color: var(--tw-prose-td-borders);
+    }
+
+    &:where(tbody tr:last-child) {
+      border-bottom-width: 0;
+    }
+
+    &:where(tbody td) {
+      vertical-align: baseline;
+    }
+
+    &:where(tfoot) {
+      border-top-width: 1px;
+      border-top-color: var(--tw-prose-th-borders);
+    }
+
+    &:where(tfoot td) {
+      vertical-align: top;
+    }
+
+    &:where(figure > *) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &:where(figcaption) {
+      color: var(--tw-prose-captions);
+      font-size: 0.875em;
+      line-height: 1.4285714;
+      margin-top: 0.8571429em;
+    }
+
+    &:where(picture > img) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    &:where(video) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    &:where(li) {
+      margin-top: 0.5em;
+      margin-bottom: 0.5em;
+    }
+
+    &:where(ol > li) {
+      padding-left: 0.375em;
+    }
+
+    &:where(ul > li) {
+      padding-left: 0.375em;
+    }
+
+    &:where(.prose > ul > li p) {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+
+    &:where(.prose > ul > li > *:first-child) {
+      margin-top: 1.25em;
+    }
+
+    &:where(.prose > ul > li > *:last-child) {
+      margin-bottom: 1.25em;
+    }
+
+    &:where(.prose > ol > li > *:first-child) {
+      margin-top: 1.25em;
+    }
+
+    &:where(.prose > ol > li > *:last-child) {
+      margin-bottom: 1.25em;
+    }
+
+    &:where(ul ul, ul ol, ol ul, ol ol) {
+      margin-top: 0.75em;
+      margin-bottom: 0.75em;
+    }
+
+    &:where(dl) {
+      margin-top: 1.25em;
+      margin-bottom: 1.25em;
+    }
+
+    &:where(dd) {
+      margin-top: 0.5em;
+      padding-left: 1.625em;
+    }
+
+    &:where(hr + *) {
+      margin-top: 0;
+    }
+
+    &:where(h2 + *) {
+      margin-top: 0;
+    }
+
+    &:where(h3 + *) {
+      margin-top: 0;
+    }
+
+    &:where(h4 + *) {
+      margin-top: 0;
+    }
+
+    &:where(thead th:first-child) {
+      padding-left: 0;
+    }
+
+    &:where(thead th:last-child) {
+      padding-right: 0;
+    }
+
+    &:where(tbody td, tfoot td) {
+      padding-top: 0.5714286em;
+      padding-right: 0.5714286em;
+      padding-bottom: 0.5714286em;
+      padding-left: 0.5714286em;
+    }
+
+    &:where(tbody td:first-child, tfoot td:first-child) {
+      padding-left: 0;
+    }
+
+    &:where(tbody td:last-child, tfoot td:last-child) {
+      padding-right: 0;
+    }
+
+    &:where(figure) {
+      margin-top: 2em;
+      margin-bottom: 2em;
+    }
+
+    &:where(.prose > :first-child) {
+      margin-top: 0;
+    }
+
+    &:where(.prose > :last-child) {
+      margin-bottom: 0;
+    }
+  }
+}