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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.0.0-canary.7",
+  "version": "2.0.0-canary.9",
   "description": "Grunnmuren Tailwind preset",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -20,7 +20,7 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "tailwindcss": "3.4.13"
+    "tailwindcss": "3.4.15"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.0"

package/tailwind-base.cjs

@@ -1,3 +1,4 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
 const plugin = require('tailwindcss/plugin');
 const fontFallbacks = require('./fonts/font-fallback');
 
@@ -159,7 +160,7 @@ module.exports = (options = {}) => {
       ...v1CompatibilityPlugins,
       require('@tailwindcss/typography'),
       require('tailwindcss-animate'),
-      plugin(function ({ addBase, addComponents, theme }) {
+      plugin(({ addBase, addComponents, theme }) => {
         addBase({
           html: {
             '@apply text-black antialiased font-normal font-text': {},
@@ -243,7 +244,7 @@ module.exports = (options = {}) => {
         });
       }),
 
-      plugin(function ({ addBase, addComponents }) {
+      plugin(({ addBase, addComponents }) => {
         const {
           headingXlText,
           headingLText,
@@ -333,9 +334,29 @@ module.exports = (options = {}) => {
           '.description': {
             [description]: {},
           },
+          /** Standard black focus outline */
+          '.outline-focus': {
+            '@apply outline outline-2 outline-black': {},
+          },
+          /** Standard black focus outline with offset */
+          '.outline-focus-offset': {
+            '@apply outline-focus outline-offset-2': {},
+          },
+          /** Standard black focus outline with negative offset (inset) */
+          '.outline-focus-inset': {
+            '@apply outline-focus -outline-offset-4': {},
+          },
+          /** Standard black focus ring */
+          '.ring-focus': {
+            '@apply ring-2 ring-black': {},
+          },
+          /** Standard black focus ring with offset */
+          '.ring-focus-offset': {
+            '@apply ring-focus ring-offset-2': {},
+          },
         });
       }),
-      plugin(function ({ addBase }) {
+      plugin(({ addBase }) => {
         addBase(
           Object.entries(fontDeclarations).flatMap(
             ([fontFamily, fontFamilyDeclarations]) =>
@@ -425,6 +446,8 @@ module.exports = (options = {}) => {
             fontFallbacks.OBOSDisplay['font-family'],
           'sans-serif',
         ],
+        // OBOS doesn't have monospaced font, so we keep Tailwind's default here
+        mono: defaultTheme.fontFamily.mono,
       },
       extend: {
         maxWidth: {
@@ -550,7 +573,7 @@ module.exports = (options = {}) => {
 };
 
 // These custom components are only used for v1 compat
-const button = plugin(function ({ addComponents, theme }) {
+const button = plugin(({ addComponents, theme }) => {
   const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';
 
   addComponents({
@@ -607,7 +630,7 @@ const button = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const radio = plugin(function ({ addComponents, theme }) {
+const radio = plugin(({ addComponents, theme }) => {
   addComponents({
     '.radio': {
       // hide the native radio input
@@ -652,7 +675,7 @@ const radio = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const checkbox = plugin(function ({ addComponents, theme }) {
+const checkbox = plugin(({ addComponents, theme }) => {
   addComponents({
     '.checkbox': {
       '&::before': {
@@ -673,7 +696,7 @@ const checkbox = plugin(function ({ addComponents, theme }) {
   });
 });
 
-const snackbar = plugin(function ({ addComponents, theme }) {
+const snackbar = plugin(({ addComponents, theme }) => {
   addComponents({
     '.snackbar': {
       'grid-template-columns': 'min-content auto',