@dargmuesli/nuxt-vio 16.0.5 → 17.0.0-beta.1

package/assets/css/forms.css

@@ -0,0 +1,90 @@
+/* stylelint-disable plugin/no-unsupported-browser-features */
+@layer components {
+  .form-input {
+    appearance: none;
+    background-color: #fff;
+    border-color: oklch(55.1% 0.027 264.364deg);
+    border-width: 1px;
+    border-radius: 0;
+    padding: 0.75rem 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    --tw-shadow: 0 0 #0000;
+
+    &:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+
+      --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-color: oklch(54.6% 0.245 262.881deg);
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      border-color: oklch(54.6% 0.245 262.881deg);
+    }
+
+    &::placeholder {
+      color: oklch(55.1% 0.027 264.364deg);
+      opacity: 1;
+    }
+
+    &::-webkit-datetime-edit-fields-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-date-and-time-value {
+      min-height: 1.5em;
+      text-align: inherit;
+    }
+
+    &::-webkit-datetime-edit {
+      display: inline-flex;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-year-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-month-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-day-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-hour-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-minute-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-second-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-millisecond-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &::-webkit-datetime-edit-meridiem-field {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}

package/assets/css/tailwind.css

@@ -1,25 +1,212 @@
+/* stylelint-disable at-rule-no-deprecated */
 /* stylelint-disable at-rule-no-unknown */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/* stylelint-enable at-rule-no-unknown */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable import-notation */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
+@import 'tailwindcss';
+@import './forms.css';
+
+@plugin "@tailwindcss/forms" {
+  strategy: 'base';
+}
+
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --animate-shake: shake 0.6s ease-in-out 0s 1 normal forwards running;
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+
+    15% {
+      transform: translateX(0.375rem);
+    }
+
+    30% {
+      transform: translateX(-0.375rem);
+    }
+
+    45% {
+      transform: translateX(0.375rem);
+    }
+
+    60% {
+      transform: translateX(-0.375rem);
+    }
+
+    75% {
+      transform: translateX(0.375rem);
+    }
+
+    90% {
+      transform: translateX(-0.375rem);
+    }
+  }
+
+  --color-background-bright: rgb(255 255 255);
+  --color-background-brighten: rgb(229 231 235);
+  --color-background-dark: rgb(31 41 55);
+  --color-background-darken: rgb(55 65 81);
+  --color-link-bright: rgb(96 165 250);
+  --color-link-dark: rgb(37 99 235);
+  --color-text-bright: rgb(249 250 251);
+  --color-text-dark: rgb(17 24 39);
+  --color-vio-primary-bg: rgb(243 244 246);
+  --color-vio-primary-text: rgb(17 24 39);
+
+  /* --text-3xl--line-height: calc(2.5 / 1.875);
+  --text-4xl--line-height: calc(3 / 2.25);
+  --text-5xl--line-height: calc(4 / 3);
+  --text-6xl--line-height: calc(4.75 / 3.75);
+  --text-7xl--line-height: calc(4.75 / 4);
+  --text-8xl--line-height: calc(7.5 / 6);
+  --text-9xl--line-height: calc(10 / 8); */
+}
 
-/* doiuse-disable css-cascade-layers */
 @layer base {
-  /* doiuse-enable css-cascade-layers */
-
-  :root {
-    /* stylelint-disable plugin/no-unsupported-browser-features */
-    --color-background-bright: 255 255 255;
-    --color-background-brighten: 229 231 235;
-    --color-background-dark: 31 41 55;
-    --color-background-darken: 55 65 81;
-    --color-link-bright: 96 165 250;
-    --color-link-dark: 37 99 235;
-    --color-text-bright: 249 250 251;
-    --color-text-dark: 17 24 39;
-    --color-vio-primary-bg: 243 244 246;
-    --color-vio-primary-text: 17 24 39;
-    /* stylelint-enable plugin/no-unsupported-browser-features */
+  ::placeholder {
+    @apply italic;
+  }
+
+  :disabled {
+    /* pointer-events-none */
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  a,
+  button {
+    @apply focus:ring-3 focus:ring-blue-500/50 focus:outline-none;
+  }
+
+  a[target='_blank']:not([is-external-icon-disabled])::after {
+    /* inline-table centers the element vertically in the tiptap text area, instead of inline-block */
+    @apply ml-[5px] inline-table h-3 w-3 bg-current;
+
+    content: '';
+    mask: url('data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJhcnJvdy11cC1yaWdodC1mcm9tLXNxdWFyZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFycm93LXVwLXJpZ2h0LWZyb20tc3F1YXJlIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTM4NCAzMjBjLTE3LjY3IDAtMzIgMTQuMzMtMzIgMzJ2OTZINjRWMTYwaDk2YzE3LjY3IDAgMzItMTQuMzIgMzItMzJzLTE0LjMzLTMyLTMyLTMyTDY0IDk2Yy0zNS4zNSAwLTY0IDI4LjY1LTY0IDY0VjQ0OGMwIDM1LjM0IDI4LjY1IDY0IDY0IDY0aDI4OGMzNS4zNSAwIDY0LTI4LjY2IDY0LTY0di05NkM0MTYgMzM0LjMgNDAxLjcgMzIwIDM4NCAzMjB6TTUwMi42IDkuMzY3QzQ5Ni44IDMuNTc4IDQ4OC44IDAgNDgwIDBoLTE2MGMtMTcuNjcgMC0zMS4xIDE0LjMyLTMxLjEgMzEuMWMwIDE3LjY3IDE0LjMyIDMxLjEgMzEuOTkgMzEuMWg4Mi43NUwxNzguNyAyOTAuN2MtMTIuNSAxMi41LTEyLjUgMzIuNzYgMCA0NS4yNkMxOTEuMiAzNDguNSAyMTEuNSAzNDguNSAyMjQgMzM2bDIyNC0yMjYuOFYxOTJjMCAxNy42NyAxNC4zMyAzMS4xIDMxLjEgMzEuMVM1MTIgMjA5LjcgNTEyIDE5MlYzMS4xQzUxMiAyMy4xNiA1MDguNCAxNS4xNiA1MDIuNiA5LjM2N3oiPjwvcGF0aD48L3N2Zz4K')
+      no-repeat 50% 50%;
+    mask-size: cover;
+  }
+
+  address {
+    @apply m-4;
+  }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+
+  h1 {
+    /* mb-4 */
+    @apply heading text-center text-4xl;
+  }
+
+  h2 {
+    @apply heading text-3xl;
+  }
+
+  h3 {
+    @apply heading text-2xl;
+  }
+
+  h4 {
+    @apply heading text-xl;
+  }
+
+  h5 {
+    @apply heading text-lg;
+  }
+
+  h6 {
+    @apply heading;
+  }
+
+  img::before {
+    @apply flex h-full items-center justify-center;
+  }
+
+  table {
+    @apply w-full;
+  }
+
+  td {
+    @apply px-4 py-6 whitespace-nowrap;
+  }
+
+  th {
+    @apply px-3 py-6 text-left text-xs font-medium tracking-wider uppercase;
+  }
+}
+
+@layer components {
+  .form-input {
+    appearance: none;
+    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+    border-radius: 0.25rem;
+    border-width: 1px;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+    color: rgb(24 24 27 / var(--tw-text-opacity, 1));
+    line-height: 1.25;
+    padding: 0.5rem 1rem;
+    width: 100%;
+  }
+
+  .form-input:focus {
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  }
+
+  .form-input::placeholder {
+    opacity: 0.5;
+  }
+
+  .form-input-error .form-input {
+    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+  }
+
+  .form-input-success .form-input {
+    border-color: rgb(22 163 74 / var(--tw-border-opacity, 1));
+  }
+
+  .form-input-warning .form-input {
+    border-color: rgb(202 138 4 / var(--tw-border-opacity, 1));
+  }
+
+  .form-textarea::placeholder {
+    opacity: 0.5;
+  }
+}
+
+@utility disabled {
+  /* pointer-events-none */
+  @apply cursor-not-allowed opacity-50;
+}
+
+@utility heading {
+  @apply font-bold;
+} /* set overflow truncate/ellipsis in the surrounding container, or larger fonts will be cut off due to their line-heights */
+
+.dark {
+  @apply scheme-dark;
+}
+
+.prose {
+  a {
+    /* color-link */
+    @apply no-underline;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply leading-snug;
   }
 }

package/components/vio/_/VioLink.vue

@@ -56,7 +56,7 @@ const route = useRoute()
 // computations
 const classes = computed(() => {
   return [
-    'rounded',
+    'rounded-sm',
     ...(props.isColored ? ['text-link-dark dark:text-link-bright'] : []),
     ...(props.isUnderlined ? ['underline'] : []),
   ].join(' ')

package/components/vio/button/VioButtonColored.vue

@@ -7,10 +7,10 @@
       [
         ...(isPrimary
           ? [
-              'border-transparent bg-gray-800 text-text-bright hover:brightness-90 dark:bg-vio-primary-bg dark:text-vio-primary-text',
+              'text-text-bright dark:bg-vio-primary-bg dark:text-vio-primary-text border-transparent bg-gray-800 hover:brightness-90',
             ]
           : [
-              'border-gray-300 text-text-dark hover:bg-black/5 dark:border-gray-600 dark:text-text-bright dark:hover:bg-black/30',
+              'text-text-dark dark:text-text-bright border-gray-300 hover:bg-black/5 dark:border-gray-600 dark:hover:bg-black/30',
             ]),
       ].join(' ')
     "

package/components/vio/form/VioFormCheckbox.vue

@@ -2,7 +2,7 @@
   <div>
     <input
       :id="`input-${formKey}`"
-      class="rounded"
+      class="rounded-sm"
       type="checkbox"
       :checked="value"
       @change="emit('change', ($event.target as HTMLInputElement).checked)"

package/components/vio/form/input/VioFormInput.vue

@@ -20,7 +20,7 @@
         >
           <span>{{ title }}</span>
           <span
-            class="text-xs font-medium text-gray-500 dark:text-gray-400 md:text-right"
+            class="text-xs font-medium text-gray-500 md:text-right dark:text-gray-400"
           >
             <span v-if="isRequired">
               {{ t('required') }}

package/components/vio/form/input/VioFormInputIconWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="absolute right-0 top-1/2 -translate-y-1/2 px-3">
+  <span class="absolute top-1/2 right-0 -translate-y-1/2 px-3">
     <div class="rounded-full bg-gray-50">
       <slot />
     </div>

package/components/vio/layout/VioLayoutBreadcrumbs.vue

@@ -16,7 +16,7 @@
       >
         <span>{{ t('separator') }}</span>
         <VioLink
-          class="whitespace-nowrap text-2xl"
+          class="text-2xl whitespace-nowrap"
           :data-testid="`breadcrumb-prefix-${prefix.to}`"
           :is-colored="false"
           :to="prefix.to"
@@ -28,7 +28,7 @@
     <span>{{ t('separator') }}</span>
     <VioLink :is-colored="false" :to="route.path">
       <span
-        class="whitespace-nowrap text-2xl font-bold"
+        class="text-2xl font-bold whitespace-nowrap"
         data-testid="breadcrumb"
       >
         <slot />
@@ -42,7 +42,7 @@
       >
         <span>{{ t('separator') }}</span>
         <VioLink
-          class="whitespace-nowrap text-2xl"
+          class="text-2xl whitespace-nowrap"
           :data-testid="`breadcrumb-suffix-${suffix.to}`"
           :is-colored="false"
           :to="suffix.to"

package/components/vio/layout/VioLayoutFooterCategory.vue

@@ -2,7 +2,7 @@
   <div
     class="flex flex-1 basis-1/2 flex-col items-start gap-2 p-4 md:flex-none md:basis-auto"
   >
-    <span class="whitespace-nowrap text-lg font-medium leading-7">
+    <span class="text-lg leading-7 font-medium whitespace-nowrap">
       {{ heading }}
     </span>
     <slot />

package/components/vio/layout/VioLayoutTbody.vue

@@ -1,6 +1,6 @@
 <template>
   <tbody
-    class="divide-y divide-background-brighten dark:divide-background-darken"
+    class="divide-background-brighten dark:divide-background-darken divide-y"
   >
     <slot />
   </tbody>

package/components/vio/layout/VioLayoutThead.vue

@@ -1,6 +1,6 @@
 <template>
   <thead
-    class="sticky top-0 z-10 bg-background-brighten dark:bg-background-darken"
+    class="bg-background-brighten dark:bg-background-darken sticky top-0 z-10"
   >
     <slot />
   </thead>

package/nuxt.config.ts

@@ -1,6 +1,4 @@
-import { dirname, join } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
+import tailwindcss from '@tailwindcss/vite'
 import { defu } from 'defu'
 
 import {
@@ -12,9 +10,6 @@ import {
 } from './utils/constants'
 import { VIO_NUXT_BASE_CONFIG } from './utils/nuxt'
 
-const currentDir = dirname(fileURLToPath(import.meta.url))
-
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig(
   defu(
     {
@@ -30,6 +25,7 @@ export default defineNuxtConfig(
         },
       },
       compatibilityDate: '2024-04-03',
+      css: ['./assets/css/tailwind.css'],
       ...(process.env.NUXT_PUBLIC_SITE_URL
         ? {}
         : {
@@ -54,7 +50,6 @@ export default defineNuxtConfig(
         '@nuxtjs/html-validator',
         '@nuxtjs/i18n',
         '@nuxtjs/seo',
-        '@nuxtjs/tailwindcss',
         '@pinia/nuxt',
         'nuxt-gtag',
         (_options, nuxt) => {
@@ -125,6 +120,9 @@ export default defineNuxtConfig(
           // },
         },
       },
+      vite: {
+        plugins: [tailwindcss()],
+      },
 
       // modules
       colorMode: {
@@ -256,9 +254,6 @@ export default defineNuxtConfig(
       sitemap: {
         credits: false,
       },
-      tailwindcss: {
-        cssPath: join(currentDir, './assets/css/tailwind.css'),
-      },
 
       // environments
       $development: {

package/package.json

@@ -5,14 +5,13 @@
     "@heroicons/vue": "2.2.0",
     "@http-util/status-i18n": "0.8.1",
     "@intlify/eslint-plugin-vue-i18n": "4.0.0-next.1",
-    "@nuxt/devtools": "2.0.0",
+    "@nuxt/devtools": "2.1.0",
     "@nuxt/eslint": "1.0.1",
     "@nuxt/image": "1.9.0",
     "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/html-validator": "1.8.2",
     "@nuxtjs/i18n": "9.1.1",
     "@nuxtjs/seo": "2.1.1",
-    "@nuxtjs/tailwindcss": "6.13.1",
     "@pinia/nuxt": "0.10.1",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/typography": "0.5.16",
@@ -30,13 +29,14 @@
     "eslint-plugin-yml": "1.16.0",
     "globals": "15.15.0",
     "jiti": "2.4.2",
-    "jose": "5.9.6",
+    "jose": "5.10.0",
     "nuxt-gtag": "3.0.2",
     "nuxt-security": "2.1.5",
-    "sweetalert2": "11.16.1",
+    "sweetalert2": "11.17.2",
     "vue-tsc": "2.2.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "4.0.6",
     "@unhead/vue": "1.11.19",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "7.2.2",
@@ -55,7 +55,7 @@
     "stylelint-config-recommended-vue": "1.6.0",
     "stylelint-config-standard": "37.0.0",
     "stylelint-no-unsupported-browser-features": "8.0.4",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.0.6",
     "unhead": "1.11.19",
     "vue": "3.5.13",
     "vue-router": "4.5.0"
@@ -80,8 +80,7 @@
     "error.vue",
     "i18n.config.ts",
     "nuxt.config.ts",
-    "package.json",
-    "tailwind.config.ts"
+    "package.json"
   ],
   "main": "nuxt.config.ts",
   "name": "@dargmuesli/nuxt-vio",
@@ -118,5 +117,5 @@
     "start:static": "serve .playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "16.0.5"
+  "version": "17.0.0-beta.1"
 }

package/tailwind.config.ts

@@ -1,253 +0,0 @@
-import type { ModuleOptions } from '@nuxtjs/tailwindcss'
-import formsPlugin from '@tailwindcss/forms'
-import typographyPlugin from '@tailwindcss/typography'
-import type { PluginAPI } from 'tailwindcss/types/config'
-
-const heading = (theme: PluginAPI['theme']): Record<string, string> => ({
-  fontWeight: theme('fontWeight.bold'),
-  // marginBottom: theme('margin.1'),
-  // marginTop: theme('margin.4'),
-  // set overflow truncate/ellipsis in the surrounding container, or larger fonts will be cut off due to their line-heights
-})
-
-const prose = (theme: PluginAPI['theme']) => ({
-  css: {
-    a: {
-      color: theme('colors.link'),
-      textDecoration: 'none',
-    },
-    h1: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-    h2: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-    h3: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-    h4: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-    h5: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-    h6: {
-      lineHeight: theme('lineHeight.snug'),
-    },
-  },
-})
-
-export default {
-  darkMode: 'class',
-  plugins: [
-    formsPlugin,
-    typographyPlugin,
-    ({ addBase, addComponents, addUtilities, theme }: PluginAPI) => {
-      addBase({
-        ':disabled': {
-          cursor: theme('cursor.not-allowed'),
-          opacity: theme('opacity.50'),
-        },
-        'a[target="_blank"]:not([is-external-icon-disabled]):after': {
-          backgroundColor: 'currentColor',
-          content: '""',
-          display: 'inline-table', // inline-table centers the element vertically in the tiptap text area, instead of inline-block
-          mask: 'url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJhcnJvdy11cC1yaWdodC1mcm9tLXNxdWFyZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWFycm93LXVwLXJpZ2h0LWZyb20tc3F1YXJlIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTM4NCAzMjBjLTE3LjY3IDAtMzIgMTQuMzMtMzIgMzJ2OTZINjRWMTYwaDk2YzE3LjY3IDAgMzItMTQuMzIgMzItMzJzLTE0LjMzLTMyLTMyLTMyTDY0IDk2Yy0zNS4zNSAwLTY0IDI4LjY1LTY0IDY0VjQ0OGMwIDM1LjM0IDI4LjY1IDY0IDY0IDY0aDI4OGMzNS4zNSAwIDY0LTI4LjY2IDY0LTY0di05NkM0MTYgMzM0LjMgNDAxLjcgMzIwIDM4NCAzMjB6TTUwMi42IDkuMzY3QzQ5Ni44IDMuNTc4IDQ4OC44IDAgNDgwIDBoLTE2MGMtMTcuNjcgMC0zMS4xIDE0LjMyLTMxLjEgMzEuMWMwIDE3LjY3IDE0LjMyIDMxLjEgMzEuOTkgMzEuMWg4Mi43NUwxNzguNyAyOTAuN2MtMTIuNSAxMi41LTEyLjUgMzIuNzYgMCA0NS4yNkMxOTEuMiAzNDguNSAyMTEuNSAzNDguNSAyMjQgMzM2bDIyNC0yMjYuOFYxOTJjMCAxNy42NyAxNC4zMyAzMS4xIDMxLjEgMzEuMVM1MTIgMjA5LjcgNTEyIDE5MlYzMS4xQzUxMiAyMy4xNiA1MDguNCAxNS4xNiA1MDIuNiA5LjM2N3oiPjwvcGF0aD48L3N2Zz4K) no-repeat 50% 50%',
-          maskSize: 'cover',
-          height: theme('fontSize.xs'),
-          marginLeft: '5px',
-          width: theme('fontSize.xs'),
-        },
-        'a:focus': {
-          // @apply outline-none ring
-          outline: '2px solid transparent',
-          outlineOffset: '2px',
-          boxShadow:
-            'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-        },
-        address: {
-          margin: theme('margin.4'),
-        },
-        'button:focus': {
-          // @apply outline-none ring
-          outline: '2px solid transparent',
-          outlineOffset: '2px',
-          boxShadow:
-            'var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-        },
-        h1: {
-          ...heading(theme),
-          fontSize: theme('fontSize.4xl'),
-          // marginBottom: theme('margin.4'),
-          textAlign: 'center',
-        },
-        h2: {
-          ...heading(theme),
-          fontSize: theme('fontSize.3xl'),
-        },
-        h3: {
-          ...heading(theme),
-          fontSize: theme('fontSize.2xl'),
-        },
-        h4: {
-          ...heading(theme),
-          fontSize: theme('fontSize.xl'),
-        },
-        h5: {
-          ...heading(theme),
-          fontSize: theme('fontSize.lg'),
-        },
-        h6: {
-          ...heading(theme),
-        },
-        img: {
-          '&::before': {
-            alignItems: 'center',
-            display: 'flex',
-            height: '100%',
-            justifyContent: 'center',
-          },
-        },
-        table: {
-          width: '100%',
-        },
-        td: {
-          padding: theme('padding.4') + ' ' + theme('padding.6'),
-          whiteSpace: 'nowrap',
-        },
-        th: {
-          padding: theme('padding.3') + ' ' + theme('padding.6'),
-          textAlign: 'left',
-          fontSize: theme('fontSize.xs'),
-          fontWeight: theme('fontWeight.medium'),
-          textTransform: 'uppercase',
-          letterSpacing: theme('letterSpacing.wider'),
-        },
-      })
-      addComponents({
-        '::placeholder': {
-          fontStyle: 'italic',
-          '.form-input&,.form-textarea&': {
-            opacity: '0.5',
-          },
-        },
-        '.form-input': {
-          appearance: 'none',
-          backgroundColor: theme('colors.gray.50'),
-          borderColor: theme('colors.gray.300'),
-          borderRadius: theme('borderRadius.DEFAULT'),
-          borderWidth: theme('borderWidth.DEFAULT'),
-          boxShadow: theme('boxShadow.sm'),
-          color: theme('colors.text.dark'),
-          lineHeight: theme('lineHeight.tight'),
-          padding: theme('padding.2') + ' ' + theme('padding.4'),
-          width: theme('width.full'),
-          '&:focus': {
-            backgroundColor: theme('colors.white'),
-          },
-        },
-        '.form-input-error': {
-          '.form-input': {
-            borderColor: theme('colors.red.500'),
-          },
-        },
-        '.form-input-success': {
-          '.form-input': {
-            borderColor: theme('colors.green.600'),
-          },
-        },
-        '.form-input-warning': {
-          '.form-input': {
-            borderColor: theme('colors.yellow.600'),
-          },
-        },
-        '.fullscreen': {
-          bottom: '0',
-          height: theme('height.full'),
-          left: '0',
-          position: 'absolute',
-          right: '0',
-          top: '0',
-          width: theme('width.full'),
-        },
-        '.object-position-custom': {
-          objectPosition: '50% 30%',
-        },
-      })
-      addUtilities({
-        '.disabled': {
-          cursor: theme('cursor.not-allowed'),
-          opacity: theme('opacity.50'),
-        },
-      })
-    },
-  ],
-  theme: {
-    extend: {
-      animation: {
-        shake: 'shake 0.6s ease-in-out 0s 1 normal forwards running',
-      },
-      colors: {
-        background: {
-          bright: 'rgb(var(--color-background-bright))',
-          brighten: 'rgb(var(--color-background-brighten))',
-          dark: 'rgb(var(--color-background-dark))',
-          darken: 'rgb(var(--color-background-darken))',
-        },
-        link: {
-          bright: 'rgb(var(--color-link-bright))',
-          dark: 'rgb(var(--color-link-dark))',
-        },
-        text: {
-          bright: 'rgb(var(--color-text-bright))',
-          dark: 'rgb(var(--color-text-dark))',
-        },
-        vio: {
-          primary: {
-            bg: 'rgb(var(--color-vio-primary-bg))',
-            text: 'rgb(var(--color-vio-primary-text))',
-          },
-        },
-      },
-      keyframes: {
-        shake: {
-          '0%': {
-            transform: 'translateX(0)',
-          },
-          '15%': {
-            transform: 'translateX(0.375rem)',
-          },
-          '30%': {
-            transform: 'translateX(-0.375rem)',
-          },
-          '45%': {
-            transform: 'translateX(0.375rem)',
-          },
-          '60%': {
-            transform: 'translateX(-0.375rem)',
-          },
-          '75%': {
-            transform: 'translateX(0.375rem)',
-          },
-          '90%': {
-            transform: 'translateX(-0.375rem)',
-          },
-          '100%': {
-            transform: 'translateX(0)',
-          },
-        },
-      },
-      screens: {
-        12: { raw: '(min-aspect-ratio: 2/1)' },
-      },
-      typography: (theme: PluginAPI['theme']) => ({
-        DEFAULT: prose(theme),
-        sm: prose(theme),
-        base: prose(theme),
-        lg: prose(theme),
-        xl: prose(theme),
-        '2xl': prose(theme),
-      }),
-    },
-  },
-} as ModuleOptions['config']