@obosbbl/grunnmuren-tailwind 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "type": "commonjs",
@@ -16,10 +16,10 @@
   ],
   "dependencies": {
     "@tailwindcss/aspect-ratio": "0.4.0",
-    "@tailwindcss/typography": "0.5.2"
+    "@tailwindcss/typography": "0.5.4"
   },
   "devDependencies": {
-    "tailwindcss": "3.0.24"
+    "tailwindcss": "3.1.8"
   },
   "peerDependencies": {
     "tailwindcss": "^3"

package/tailwind-base.cjs

@@ -47,12 +47,30 @@ const obosFonts = [
   },
 ];
 
-const button = plugin(function ({ addComponents }) {
-  // adds a shade on the button when hovered
-  // ideally this would be solved by just darkening the button background,
-  // but that doesn't really work since some of the button variations have transparent backgrounds
+const button = plugin(function ({ addComponents, theme }) {
   addComponents({
     '.button': {
+      // The Tailwind utilities we use for focus styling are kinda hard to "translate", so using the @apply utility here, even though mixing styles are meh...
+      '@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-black ring-offset-2':
+        {},
+      position: 'relative',
+      textDecorationLine: 'none',
+      display: 'inline-block',
+      border: '2px solid',
+      padding: `${theme('spacing.2')} ${theme('spacing.6')}`,
+      borderRadius: '0.75rem',
+      transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
+      fontWeight: theme('fontWeight.medium'),
+      width: 'fit-content',
+      '&:disabled': {
+        backgroundColor: theme('colors.gray.light'),
+        borderColor: theme('colors.gray.light'),
+        color: theme('colors.black'),
+        pointerEvents: 'none',
+      },
+      '&:hover': {
+        borderRadius: '0.375rem',
+      },
       '&::after': {
         content: '""',
         position: 'absolute',
@@ -64,16 +82,61 @@ const button = plugin(function ({ addComponents }) {
         bottom: '-2px',
         borderRadius: '0.75rem',
       },
+      // adds a shade on the button when hovered
+      // ideally this would be solved by just darkening the button background,
+      // but that doesn't really work since some of the button variations have transparent backgrounds
       '&:hover::after': {
         backgroundColor: 'rgba(0, 0, 0, 0.1)',
         borderRadius: '0.375rem',
-        transition: 'all 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
+      },
+    },
+  });
+});
+
+const radio = plugin(function ({ addComponents, theme }) {
+  addComponents({
+    '.radio': {
+      // hide the native radio input
+      appearance: 'none',
+      // not removed via appeareance
+      margin: 0,
+      height: '1.25rem',
+      width: '1.25rem',
+      borderRadius: '50%',
+      border: `2px solid ${theme('colors.gray.dark')}`,
+      cursor: 'pointer',
+      marginRight: '0.75rem',
+      // use grid to handle the checked:before styles
+      display: 'inline-grid',
+      placeContent: 'center',
+      '&:checked': {
+        borderColor: theme('colors.green.DEFAULT'),
+      },
+      '&:focus-visible': {
+        outline: '1px solid currentColor',
+        outlineOffset: '4px',
+      },
+      '&::before': {
+        content: '""',
+        display: 'block',
+        borderRadius: '50%',
+        transform: 'scale(0)',
+        width: '0.65em',
+        height: '0.65em',
+        transition: '120ms transform ease-in-out',
+        boxShadow: `inset 1em 1em ${theme('colors.green.DEFAULT')}`,
+        /* Windows High Contrast Mode */
+        backgroundColor: 'CanvasText',
+      },
+      '&:checked::before': {
+        transform: 'scale(1)',
       },
     },
   });
 });
 
-const checkbox = plugin(function ({ addComponents }) {
+const checkbox = plugin(function ({ addComponents, theme }) {
   addComponents({
     '.checkbox': {
       '&::before': {
@@ -82,6 +145,7 @@ const checkbox = plugin(function ({ addComponents }) {
         height: '0.65em',
         transform: 'scale(0)',
         transition: '120ms transform ease-in-out',
+        backgroundColor: theme('colors.white'),
         'box-shadow': 'inset 1em 1em currentColor',
         'clip-path':
           'polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)',
@@ -167,14 +231,14 @@ module.exports = (userOptions) => {
   const opts = userOptions ? { ...defaultOpts, ...userOptions } : defaultOpts;
   let fontFamily = 'OBOSFont';
   let fonts = obosFonts;
-  let containerSize = '90rem';
+  let containerSize = '92rem';
   if (opts.useLegacyFont) {
     fontFamily = 'Gordita';
     fonts = gorditaFonts;
   }
 
   if (opts.useLegacyContainerSize) {
-    containerSize = '80rem';
+    containerSize = '82rem';
   }
 
   return {
@@ -186,6 +250,7 @@ module.exports = (userOptions) => {
       headings,
       checkbox,
       snackbar,
+      radio,
       plugin(function ({ addBase, addUtilities, addComponents, theme }) {
         addBase({
           html: {
@@ -221,7 +286,7 @@ module.exports = (userOptions) => {
             paddingRight: '1rem',
             marginLeft: 'auto',
             marginRight: 'auto',
-            maxWidth: '37rem',
+            maxWidth: '39rem',
           },
           // that thin blue line at the top
           '.topline::before': {