@necrolab/dashboard 0.5.15 → 0.5.16

package/src/views/Login.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="login-container flex min-h-screen flex-col items-center px-4 mt-[3vh] landscape:mt-[1vh] landscape:justify-start landscape:min-h-dvh" v-once>
-        <div class="login-card w-full max-w-[420px] rounded-lg border border-dark-650 bg-dark-400 p-7 backdrop-blur-[10px] shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)]">
+    <div class="flex min-h-screen flex-col items-center px-4 mt-[3vh] landscape:mt-[1vh] landscape:justify-start landscape:min-h-dvh max-md:mt-[2vh]" v-once>
+        <div class="w-full max-w-105 rounded-lg border-2 bg-dark-400 p-7 backdrop-blur-md shadow-login max-md:max-w-95 max-md:p-6 landscape:p-5 landscape:my-1" style="border-color: var(--color-border);">
             <div class="mb-10 flex justify-center landscape:mb-2">
-                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover landscape:h-10" alt="Logo: NecroLab" />
+                <img src="@/assets/img/logo_trans.png" class="mb-3 h-16 object-cover landscape:h-10 max-md:h-12" alt="Logo: NecroLab" />
             </div>
 
             <LoginForm />
@@ -12,28 +12,3 @@
 <script setup>
 import LoginForm from "@/components/Auth/LoginForm.vue";
 </script>
-<style lang="scss" scoped>
-/* Mobile-specific overrides (max-width: 480px) */
-@media (max-width: 480px) {
-    .login-container {
-        margin-top: 2vh;
-    }
-
-    .login-card {
-        max-width: 380px;
-        padding: 1.5rem;
-    }
-
-    .login-card img {
-        @apply h-12;
-    }
-}
-
-/* Landscape overrides */
-@media (orientation: landscape) {
-    .login-card {
-        padding: 1.25rem;
-        margin: 0.25rem 0;
-    }
-}
-</style>

package/src/views/Profiles.vue

@@ -14,6 +14,7 @@
                         :disabled="ui.disabledButtons['add-profiles']"
                         @click="ui.toggleModal('create-profile', true)"
                         class="smooth-hover"
+                        aria-label="Add profile"
                     >
                         <PlusIcon class="w-4 h-4" />
                     </button>
@@ -23,6 +24,7 @@
                         :disabled="ui.disabledButtons['add-profiles']"
                         @click="disable"
                         class="smooth-hover text-red-400"
+                        aria-label="Disable selected profiles"
                     >
                         <CloseXIcon />
                     </button>
@@ -32,6 +34,7 @@
                         :disabled="ui.disabledButtons['add-profiles']"
                         @click="enable"
                         class="smooth-hover text-green-400"
+                        aria-label="Enable selected profiles"
                     >
                         <CheckIcon />
                     </button>
@@ -57,6 +60,7 @@
                 <input
                     class="min-w-32 lg:min-w-38 text-white text-sm"
                     :placeholder="`Search ${ui.search.profiles.field}s`"
+                    :aria-label="`Search ${ui.search.profiles.field}s`"
                     v-model="ui.search.profiles.query"
                 />
 
@@ -113,23 +117,9 @@
         </transition-group>
     </div>
 </template>
-<style lang="scss" scoped>
-/* Page buttons styling - match Tasks page */
-button.bg-dark-400,
-button.bg-green-400,
-button.bg-red-400 {
-    &:active,
-    &:focus {
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-        border-color: oklch(0.72 0.15 145) !important;
-    }
-}
-</style>
 <script setup>
-import { computed, ref, watch } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import ProfileView from "@/components/Editors/Profile/ProfileView.vue";
-import CreateProfile from "@/components/Editors/Profile/CreateProfile.vue";
 import { useUIStore } from "@/stores/ui";
 import { PlusIcon, GroupIcon, CloseXIcon, CheckIcon } from "@/components/icons";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
@@ -137,6 +127,9 @@ import EyeToggle from "@/components/ui/controls/EyeToggle.vue";
 import TagToggle from "@/components/Editors/TagToggle.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 
+// Lazy-loaded modal component
+const CreateProfile = defineAsyncComponent(() => import("@/components/Editors/Profile/CreateProfile.vue"));
+
 const ui = useUIStore();
 ui.search.profiles.results = ui.profiles;
 

package/src/views/Tasks.vue

@@ -1,36 +1,35 @@
 <template>
     <div class="tasks-page">
-        <div class="page-header tasks-header">
+        <div class="page-header">
             <div class="page-header-card">
-                <div class="icon-button" @click="ui.toggleModal('quick-settings')">
-                    <GearIcon />
-                </div>
+                <GearIcon class="smooth-hover cursor-pointer" @click="ui.toggleModal('quick-settings')" aria-label="Open settings" role="button" tabindex="0" />
                 <h4>Tasks</h4>
-                <span class="page-header-count">{{ taskCount }}</span>
+                <span class="pl-1.5 text-sm font-medium text-light-400">{{ taskCount }}</span>
             </div>
             <ul class="mobile-icons mobile-header-controls">
                 <li>
-                    <button @click="ui.startTasks()"><PlayIcon class="h-4 w-4" /></button>
+                    <button @click="ui.startTasks()" aria-label="Start all tasks"><PlayIcon class="h-4 w-4" /></button>
                 </li>
                 <li>
-                    <button @click="ui.stopTasks()"><PauseIcon class="h-4 w-4" /></button>
+                    <button @click="ui.stopTasks()" aria-label="Stop all tasks"><PauseIcon class="h-4 w-4" /></button>
                 </li>
                 <li>
                     <button
                         class="text-sm"
                         :disabled="ui.disabledButtons['add-tasks']"
-                        @click="ui.toggleModal('create-task')">
+                        @click="ui.toggleModal('create-task')"
+                        aria-label="Create new task">
                         <PlusIcon class="h-4 w-4" />
                     </button>
                 </li>
                 <li>
-                    <button @click="ui.deleteTasks()"><TrashIcon class="h-3.5 w-3.5" /></button>
+                    <button @click="ui.deleteTasks()" aria-label="Delete all tasks"><TrashIcon class="h-3.5 w-3.5" /></button>
                 </li>
             </ul>
         </div>
 
         <div class="controls-wrapper">
-            <div class="controls-wrapper lg:mb-3">
+            <div class="mb-2 lg:mb-3">
                 <DesktopControls
                     class="desktop-controls-hide"
                     @stopAll="ui.stopTasks()"
@@ -38,9 +37,14 @@
                     @deleteAll="ui.deleteTasks()" />
             </div>
 
-            <div class="mb-1 flex items-center justify-between gap-2 md:hidden">
+            <div class="mb-2 flex items-center justify-between gap-2 md:hidden">
                 <Stats class="stats-component flex-1" />
                 <div class="flex items-center gap-2">
+                    <div
+                        class="flex h-8 items-center justify-between rounded-md border border-dark-650 bg-dark-400 px-2 text-xs font-medium text-white">
+                        <p class="text-2xs">Name</p>
+                        <Switch class="scale-75" v-model="preferEventName" />
+                    </div>
                     <PriceSortToggle
                         class="h-8 min-w-20 max-w-28 flex-shrink-0"
                         :options="['All', 'Checkout']"
@@ -67,7 +71,8 @@
                             v-model="taskSearchQuery"
                             type="text"
                             placeholder="Search tasks..."
-                            class="h-full w-full bg-transparent text-sm text-white outline-none" />
+                            aria-label="Search tasks"
+                            class="transparent-input" />
                         <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
                     </div>
                 </div>
@@ -102,7 +107,8 @@
                             v-model="taskSearchQuery"
                             type="text"
                             placeholder="Search tasks..."
-                            class="h-full w-full bg-transparent text-sm text-white outline-none" />
+                            aria-label="Search tasks"
+                            class="transparent-input" />
                         <span v-if="taskSearchQuery" class="ml-2 text-xs text-light-500">{{ filteredTaskCount }}</span>
                     </div>
                 </div>
@@ -130,16 +136,17 @@
     </div>
 </template>
 <style lang="scss" scoped>
-// Add padding in PWA mode to prevent content hiding under navbar
 .tasks-header {
     @media (display-mode: standalone) {
-        padding-top: 3.5rem;
+        padding-top: 3.5rem !important;
     }
 }
 
-/* ==========================================================================
-   TASKS PAGE RESPONSIVE LAYOUT - MOBILE FIRST
-   ========================================================================== */
+.custom-dropdown-content {
+    top: 2.6rem !important;
+    left: -13px;
+    @apply border border-dark-650;
+}
 
 /* Default mobile layout */
 .desktop-controls-hide {
@@ -150,11 +157,10 @@
     display: flex;
 }
 
-/* Event dropdown base styling */
 .event-dropdown {
     min-width: 0;
     /* Match PriceSortToggle height instead of input-default */
-    height: 40px;
+    height: 40px !important;
 }
 
 .event-dropdown .dropdown-value {
@@ -164,8 +170,11 @@
     white-space: nowrap;
 }
 
-/* Small mobile screens (portrait) */
 @media (max-width: 480px) and (orientation: portrait) {
+    .event-dropdown {
+        height: 40px !important; /* Match PriceSortToggle height exactly */
+    }
+
     .event-dropdown .dropdown-value {
         max-width: calc(100vw - 140px);
         font-size: 0.875rem;
@@ -176,15 +185,17 @@
     }
 }
 
-/* Extra small screens */
 @media (max-width: 375px) and (orientation: portrait) {
+    .event-dropdown {
+        height: 40px !important; /* Maintain 40px height to match PriceSortToggle */
+    }
+
     .event-dropdown .dropdown-value {
         max-width: calc(100vw - 120px);
         font-size: 0.8rem;
     }
 }
 
-/* Mobile landscape - hide non-essential elements */
 @media (max-height: 500px) and (orientation: landscape) {
     .stats-component,
     .utilities-section,
@@ -193,13 +204,12 @@
     }
 
     .pb-2 {
-        padding-top: 1rem;
+        padding-top: 1rem !important;
         padding-bottom: 0.25rem;
         margin-bottom: 0.25rem;
     }
 }
 
-/* Tablet and small desktop - show desktop controls */
 @media (min-width: 650px) {
     .desktop-controls-hide {
         display: flex;
@@ -211,34 +221,34 @@
 }
 </style>
 <script setup>
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue";
 import { DesktopControls } from "@/components/Tasks/Controls";
 import TaskView from "@/components/Tasks/TaskView.vue";
-import ViewTask from "@/components/Tasks/ViewTask.vue";
 import Utilities from "@/components/Tasks/Utilities.vue";
-import CreateTaskTM from "@/components/Tasks/CreateTaskTM.vue";
-import CreateTaskAXS from "@/components/Tasks/CreateTaskAXS.vue";
-import CheckStock from "@/components/Tasks/CheckStock.vue";
-import ScrapeVenue from "@/components/Tasks/ScrapeVenue.vue";
-import MassEditPresaleCode from "@/components/Tasks/MassEdit.vue";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 import Stats from "@/components/Tasks/Stats.vue";
 import Switch from "@/components/ui/controls/atomic/Switch.vue";
 import { useUIStore } from "@/stores/ui";
 import { TrashIcon, GearIcon, PlusIcon, PlayIcon, PauseIcon } from "@/components/icons";
-import QuickSettings from "@/components/Tasks/QuickSettings.vue";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 
+// Lazy-loaded modal components
+const ViewTask = defineAsyncComponent(() => import("@/components/Tasks/ViewTask.vue"));
+const CreateTaskTM = defineAsyncComponent(() => import("@/components/Tasks/CreateTaskTM.vue"));
+const CreateTaskAXS = defineAsyncComponent(() => import("@/components/Tasks/CreateTaskAXS.vue"));
+const CheckStock = defineAsyncComponent(() => import("@/components/Tasks/CheckStock.vue"));
+const ScrapeVenue = defineAsyncComponent(() => import("@/components/Tasks/ScrapeVenue.vue"));
+const MassEditPresaleCode = defineAsyncComponent(() => import("@/components/Tasks/MassEdit.vue"));
+const QuickSettings = defineAsyncComponent(() => import("@/components/Tasks/QuickSettings.vue"));
+
 const ui = useUIStore();
 const activeModal = computed(() => ui.activeModal);
 const taskCount = computed(() => Object.keys(ui.getSelectedTasks()).length);
 ui.refreshQueueStats();
 
 const taskSearchQuery = ref("");
-// Load preference from localStorage, default to true
 const preferEventName = ref(localStorage.getItem("preferEventName") !== "false");
 
-// Persist preference to localStorage when changed
 watch(preferEventName, (newValue) => {
     localStorage.setItem("preferEventName", String(newValue));
 });
@@ -252,6 +262,10 @@ const filteredTaskCount = computed(() => {
     Object.values(ui.tasks).forEach((task) => {
         if (task.hidden) return;
 
+        // Filter by current module (same logic as TaskView)
+        if (task.siteId !== ui.currentCountry.siteId) return;
+        if (ui.currentEvent && task.eventId !== ui.currentEvent) return;
+
         const searchableText = [
             task.eventId,
             task.eventName,
@@ -273,7 +287,6 @@ const filteredTaskCount = computed(() => {
     return count;
 });
 
-// Ensure "All events" is always selected on page load
 onMounted(() => {
     ui.setCurrentEvent("");
 });

package/tailwind.config.js

@@ -5,7 +5,6 @@ export default {
         colors: {
             transparent: "transparent",
             white: "oklch(1 0 0)",
-            pure: "oklch(1 0 0)",
             lightgray: "oklch(0.93 0 0)",
             green: {
                 300: "oklch(0.75 0.15 145 / <alpha-value>)",
@@ -36,22 +35,19 @@ export default {
                 50: "oklch(0.98 0 0 / <alpha-value>)",
                 100: "oklch(0.96 0 0 / <alpha-value>)",
                 200: "oklch(0.93 0 0 / <alpha-value>)",
-                300: "oklch(0.1822 0 0 / <alpha-value>)", // Base background (Supabase dark)
-                350: "oklch(0.1900 0 0 / <alpha-value>)", // rgba(26, 27, 30) replacement
+                300: "oklch(0.1822 0 0 / <alpha-value>)", // Base background
+                350: "oklch(0.1900 0 0 / <alpha-value>)", // Darker backgrounds
                 400: "oklch(0.2046 0 0 / <alpha-value>)", // Card backgrounds
-                450: "oklch(0.2200 0 0 / <alpha-value>)", // rgba(35, 36, 41) replacement
-                475: "oklch(0.2350 0 0 / <alpha-value>)", // rgba(46, 47, 52) replacement
+                450: "oklch(0.2200 0 0 / <alpha-value>)", // Hover backgrounds
+                475: "oklch(0.2350 0 0 / <alpha-value>)", // Focus backgrounds
                 500: "oklch(0.2603 0 0 / <alpha-value>)", // Input backgrounds
-                550: "oklch(0.2809 0 0 / <alpha-value>)", // Subtle elevation
-                600: "oklch(0.2809 0 0 / <alpha-value>)", // Borders
-                625: "oklch(0.2950 0 0 / <alpha-value>)", // rgba(61, 62, 68) replacement
+                550: "oklch(0.2809 0 0 / <alpha-value>)", // Borders and elevation
+                625: "oklch(0.2950 0 0 / <alpha-value>)", // Border variations
                 650: "oklch(0.3132 0 0 / <alpha-value>)", // Hover states
-                675: "oklch(0.3200 0 0 / <alpha-value>)", // rgba(68, 69, 75) replacement
+                675: "oklch(0.3200 0 0 / <alpha-value>)", // Background overlays
                 700: "oklch(0.31 0 0 / <alpha-value>)", // Active states
                 750: "oklch(0.33 0 0 / <alpha-value>)", // Selected states
-                800: "oklch(0.08 0 0 / <alpha-value>)", // Deep background
-                850: "oklch(0.06 0 0 / <alpha-value>)", // Deepest background
-                900: "oklch(0.03 0 0 / <alpha-value>)" // Ultra deep
+                800: "oklch(0.08 0 0 / <alpha-value>)" // Deep background
             },
             light: {
                 100: "oklch(0.98 0 0 / <alpha-value>)",
@@ -59,62 +55,41 @@ export default {
                 300: "oklch(0.90 0 0 / <alpha-value>)", // Primary text (text-primary)
                 400: "oklch(0.82 0 0 / <alpha-value>)", // Secondary text (text-secondary)
                 500: "oklch(0.65 0 0 / <alpha-value>)", // Muted text (text-muted)
-                600: "oklch(0.50 0 0 / <alpha-value>)", // Disabled text
-                700: "oklch(0.38 0 0 / <alpha-value>)", // Very muted
-                800: "oklch(0.28 0 0 / <alpha-value>)", // Dark muted
-                900: "oklch(0.18 0 0 / <alpha-value>)" // Darkest muted
-            },
-            gray: {
-                50: "oklch(0.99 0 0 / <alpha-value>)",
-                100: "oklch(0.97 0 0 / <alpha-value>)",
-                200: "oklch(0.93 0 0 / <alpha-value>)",
-                300: "oklch(0.85 0 0 / <alpha-value>)",
-                400: "oklch(0.68 0 0 / <alpha-value>)",
-                500: "oklch(0.52 0 0 / <alpha-value>)",
-                600: "oklch(0.40 0 0 / <alpha-value>)",
-                700: "oklch(0.32 0 0 / <alpha-value>)",
-                800: "oklch(0.22 0 0 / <alpha-value>)",
-                900: "oklch(0.14 0 0 / <alpha-value>)"
+                600: "oklch(0.50 0 0 / <alpha-value>)" // Disabled text
             },
             accent: {
-                blue: "oklch(0.56 0.08 264 / <alpha-value>)",
-                green: "oklch(0.72 0.15 145 / <alpha-value>)", // Primary accent (#88c999 mint green)
-                purple: "oklch(0.65 0.12 305 / <alpha-value>)",
-                pink: "oklch(0.62 0.15 350 / <alpha-value>)",
-                orange: "oklch(0.70 0.10 55 / <alpha-value>)",
-                yellow: "oklch(0.85 0.10 95 / <alpha-value>)"
+                green: "oklch(0.72 0.15 145 / <alpha-value>)" // Primary accent (#88c999 mint green)
             },
             overlay: {
-                dark: "oklch(0.08 0 0 / 0.85)", // Modal backdrop
-                darker: "oklch(0.06 0 0 / 0.90)", // Darker overlay
+                dark: "oklch(0.08 0 0 / 0.85)" // Modal backdrop
             },
             border: "oklch(0.26 0 0 / <alpha-value>)",
             'text-primary': 'oklch(0.90 0 0 / <alpha-value>)', // light-300
             'text-secondary': 'oklch(0.82 0 0 / <alpha-value>)', // light-400
             'text-muted': 'oklch(0.65 0 0 / <alpha-value>)', // light-500
-            'text-disabled': 'oklch(0.50 0 0 / <alpha-value>)', // light-600
 
             'bg-base': 'oklch(0.1822 0 0 / <alpha-value>)', // dark-300
             'bg-elevated': 'oklch(0.2046 0 0 / <alpha-value>)', // dark-400
             'bg-input': 'oklch(0.2603 0 0 / <alpha-value>)', // dark-500
 
-            'border-focus': 'oklch(0.72 0.15 145 / <alpha-value>)', // accent.green
-            'primary': 'oklch(0.72 0.15 145 / <alpha-value>)', // accent.green
+            'primary': 'oklch(0.72 0.15 145 / <alpha-value>)' // accent.green
         },
         screens: {
             // Supported devices: iPad Pro, Desktop, iPhone Portrait
             // iPhone landscape forces rotation to portrait via App.vue
 
             // Mobile first approach
-            xs: "480px", // Small mobile landscape / large mobile portrait
+            '2xs': '375px', // Extra small mobile
+            xs: '430px', // QuickSettings responsive breakpoint
             sm: "640px", // Tablet portrait
             md: "768px", // Tablet landscape / small desktop
             lg: "1024px", // Desktop
             xl: "1280px", // Large desktop
 
             // Device-specific breakpoints
-            tablet: "768px", // Tablet-specific styling
+            'tablet-lg': '720px', // CreateTaskTM breakpoint
             desktop: "1024px", // Desktop-specific styling
+            modal: '810px', // Switch component breakpoint
 
             // Orientation-based breakpoints (useful for iPad/desktop)
             landscape: {
@@ -128,24 +103,10 @@ export default {
             "h-sm": {
                 raw: "(max-height: 500px)"
             },
-            "h-md": {
-                raw: "(min-height: 600px)"
-            },
-            "h-lg": {
-                raw: "(min-height: 900px)"
-            },
 
             // Combined orientation and size breakpoints
             "mobile-portrait": {
                 raw: "(max-width: 480px) and (orientation: portrait)"
-            },
-
-            // Touch device detection
-            touch: {
-                raw: "(hover: none) and (pointer: coarse)"
-            },
-            "no-touch": {
-                raw: "(hover: hover) and (pointer: fine)"
             }
         },
         extend: {
@@ -153,30 +114,80 @@ export default {
                 'dropdown': '100',
                 'dropdown-high': '200',
                 'modal': '1000',
+                'modal-mask': '25000',
                 'tooltip': '2000',
-                'overlay': '3000',
+                'splash': '1000',
                 'max': '9999',
             },
             boxShadow: {
-                'card': '0 4px 12px rgba(0, 0, 0, 0.2)',
-                'button': '0 1px 2px rgba(0, 0, 0, 0.2)',
-                'sm': '0 1px 2px rgba(0, 0, 0, 0.1)',
-                'md': '0 2px 4px rgba(0, 0, 0, 0.1)',
-                'lg': '0 4px 12px rgba(0, 0, 0, 0.3)',
-                'xl': '0 6px 16px rgba(0, 0, 0, 0.3)',
-                'dropdown': '0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2)',
-                'input-inset': 'inset 0 2px 4px rgba(0, 0, 0, 0.4)',
-            },
-            borderRadius: {
-                'xs': '3px',
+                'card': '0 4px 12px oklch(0 0 0 / 0.2)',
+                'button': '0 1px 2px oklch(0 0 0 / 0.2)',
+                'sm': '0 1px 2px oklch(0 0 0 / 0.1)',
+                'md': '0 2px 4px oklch(0 0 0 / 0.1)',
+                'lg': '0 4px 12px oklch(0 0 0 / 0.3)',
+                'xl': '0 6px 16px oklch(0 0 0 / 0.3)',
+                'dropdown': '0 20px 25px -5px oklch(0 0 0 / 0.4), 0 10px 10px -5px oklch(0 0 0 / 0.2)',
+                'input-inset': 'inset 0 2px 4px oklch(0 0 0 / 0.4)',
+                'focus-ring': '0 0 0 1px oklch(1 0 0 / 0.2)',
+                // Custom shadows from cleanup
+                'switch': '0 1px 3px oklch(0 0 0 / 0.3)',
+                'login': '0 25px 50px -12px oklch(0 0 0 / 0.5)'
             },
             backdropBlur: {
-                'xs': '4px',
-                'sm': '8px',
+                'md': '10px'
             },
             fontSize: {
-                'xxs': '0.625rem', // 10px
-                'xxxs': '0.5625rem', // 9px
+                '3xs': '0.5rem',      // 8px
+                '2xs': '0.625rem',    // 10px
+                'xs+': '0.6875rem',   // 11px
+                'base-': '0.9375rem', // 15px (login button)
+            },
+            lineHeight: {
+                'tight-sm': '1.2',    // Used in metadata/compact displays
+                'tight-md': '1.3',    // Slightly more spacious compact text
+            },
+            spacing: {},
+            width: {
+                '4.5': '1.125rem',  // 18px - checkbox size
+                '6.5': '1.625rem',  // 26px - status badge
+                '20': '5rem',       // 80px
+                '25': '6.25rem',    // 100px
+                '26': '6.5rem',     // 104px - modal buttons
+                '30': '7.5rem',     // 120px
+                '45': '11.25rem',   // 180px
+                '75': '18.75rem',   // 300px
+                '160': '40rem',     // 640px
+            },
+            height: {
+                '3.5': '0.875rem',   // 14px
+                '4.25': '1.0625rem', // 17px
+                '4.5': '1.125rem',   // 18px - checkbox size
+                '6.5': '1.625rem',   // 26px
+                '13': '3.25rem',     // 52px - login button
+                '75': '18.75rem',    // 300px
+                '87.5': '21.875rem', // 350px
+                '125': '31.25rem',   // 500px
+            },
+            maxWidth: {
+                '30': '7.5rem',    // 120px
+                '45': '11.25rem',  // 180px
+                '95': '23.75rem',  // 380px - Login form mobile
+                '105': '26.25rem', // 420px - Login form desktop
+            },
+            minWidth: {
+                '4.5': '1.125rem',  // 18px
+                '20': '5rem',       // 80px
+                '25': '6.25rem',    // 100px
+                '30': '7.5rem',     // 120px
+            },
+            minHeight: {
+                '2.75': '0.6875rem',  // 11px
+                '14.5': '3.625rem',   // 58px
+                '17.25': '4.3125rem', // 69px
+                '18.75': '4.6875rem', // 75px
+                '75': '18.75rem',     // 300px
+                '87.5': '21.875rem',  // 350px
+                '125': '31.25rem',    // 500px
             }
         }
     },