testio-tailwind 1.1.2 → 2.0.0

package/src/assets/stylesheets/tailwind_config.css

@@ -0,0 +1,299 @@
+@theme {
+  /* Colors */
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: #1d1d1d;
+  --color-white: #ffffff;
+  --color-gray-100: #f2f2f2;
+  --color-gray-200: #e6e6e6;
+  --color-gray-300: #bfc1c5;
+  --color-gray-400: #9fa2a8;
+  --color-gray-500: #7c8188;
+  --color-gray-600: #5f656d;
+  --color-gray-700: #343A40;
+  --color-gray-800: #262626;
+  --color-gray-900: #222222;
+  --color-gray-lightest: #f2f2f2;
+  --color-gray-lighter: #e6e6e6;
+  --color-gray-light: #bfc1c5;
+  --color-gray-DEFAULT: #9fa2a8;
+  --color-gray-dark: #7c8188;
+  --color-gray-darker: #5f656d;
+  --color-gray-darkest: #262626;
+  --color-red-200: #FF3131;
+  --color-red-light: #FF3131;
+  --color-red-500: #ec0404;
+  --color-red-DEFAULT: #ec0404;
+  --color-orange-500: #f48d21;
+  --color-orange-DEFAULT: #f48d21;
+  --color-green-500: #8cbd24;
+  --color-green-DEFAULT: #8cbd24;
+  --color-yellow-500: #d8ce0d;
+  --color-yellow-DEFAULT: #d8ce0d;
+  --color-blue-200: #21bef4;
+  --color-blue-light: #21bef4;
+  --color-blue-500: #326dd1;
+  --color-blue-DEFAULT: #326dd1;
+  --color-petrol-500: #236a84;
+  --color-petrol-DEFAULT: #236a84;
+  --color-petrol-800: #263340;
+  --color-petrol-dark: #263340;
+  --color-teal-300: #78eac1;
+  --color-teal-lighter: #78eac1;
+  --color-teal-400: #6ddeba;
+  --color-teal-light: #6ddeba;
+  --color-teal-500: #33ba9e;
+  --color-teal-DEFAULT: #33ba9e;
+  --color-pink-500: #e83e8c;
+  --color-pink-DEFAULT: #e83e8c;
+  --color-purple-200: #8988eb;
+  --color-purple-light: #8988eb;
+  --color-purple-500: #7954ff;
+  --color-purple-DEFAULT: #7954ff;
+  --border-DEFAULT: 1px;
+  --border-0: 0px;
+  --border-1: 1px;
+  --border-2: 2px;
+  --border-4: 4px;
+  --border-6: 6px;
+  --border-10: 10px;
+  --color-appbody: #FFFFFF;
+  --color-black: #1d1d1d;
+  --color-primary: #236a84;
+  --color-link: #236a84;
+  --color-link-hover: #21bef4;
+  --color-header: #1d1d1d;
+  --color-actionbar: #236a84;
+  --color-bordercolor: #e6e6e6;
+  --color-bordercolor-dark: #D4D6DC;
+  --color-success: #8cbd24;
+  --color-danger: #ec0404;
+  --color-disabled: #bfc1c5;
+  --color-disabled-dark: #5f656d;
+  --color-placeholder: #bfc1c5;
+  --color-info: #326dd1;
+  --color-label-color: #5f656d;
+  --color-label-inverted-color: #bfc1c5;
+  --color-dark: #222222;
+  --color-card: #e6e6e6;
+  --color-critical: #ec0404;
+  --color-high: #d8ce0d;
+  --color-low: #9fa2a8;
+  --color-visual: #f48d21;
+  --color-content: #326dd1;
+  --color-usability: #263340;
+  --color-color-product-website: #236a84;
+  --color-color-product-apple: #326dd1;
+  --color-color-product-android: #8cbd24;
+  --color-color-product-streaming: #FF3131;
+  --color-color-product-gaming: #f48d21;
+  --color-color-product-windows: #d8ce0d;
+  --color-navigation-customer-color: #262626;
+  --color-navlink-customer-hover-color: #78eac1;
+  --color-navlink-customer-hover-bg: #343A40;
+  --color-navlink-customer-active-bg: #78eac1;
+  --color-navigation-tester-color: #1d1d1d;
+  --color-navlink-tester-hover-color: #7954ff;
+  --color-navlink-tester-hover-bg: #343A40;
+  --color-navlink-tester-active-bg: #7954ff;
+  --color-navigation-manager-color: #ffffff;
+  --color-navlink-manager-hover-color: #222222;
+  --color-navlink-manager-hover-bg: #e6e6e6;
+  --color-navlink-manager-active-bg: #6ddeba;
+  
+  /* Font Family */
+  --font-body: "Source Sans 3", sans-serif;
+  --font-sans: "Source Sans 3", sans-serif;
+  --font-serif: "Source Sans 3", sans-serif;
+  --font-mono: "Source Code Pro", monospace;
+  --font-display: "Source Sans 3", sans-serif;
+
+  /*//// Font size ////*/
+  --font-size-base: 0.875rem;
+  --font-size-heading-1: 2.25rem;
+  --font-size-heading-2: 1.875rem;
+  --font-size-heading-3: 1.563rem;
+  --font-size-heading-4: 1.375rem;
+  --font-size-heading-5: 1.125rem;
+  --font-size-heading-6: 1rem;
+  --font-size-navlinks: 0.875rem;
+  --font-size-buttons: 0.875rem;
+  --font-size-label: 0.8125rem;
+  --font-size-label-sm: 0.75rem;
+  --font-size-icon: 20px;
+  --font-size-icon-lg: 40px;
+  --font-size-icon-xl: 60px;
+  --font-size-icon-xxl: 90px;
+  --font-size-icon-sm: 18px;
+  --font-size-icon-xs: 16px;
+  --font-size-icon-xxs: 10px;
+  --font-size-icon-xxxs: 0.625rem;
+  --font-size-xl: 4.25rem;
+  --font-size-lg: 1.25rem;
+  --font-size-sm: 0.813rem;
+  --font-size-xs: 0.6875rem;
+  --font-size-xxs: 0.625rem;
+  --font-size-display-1: 3.25rem;
+  --font-size-display-2: 3rem;
+  --font-size-display-3: 2.75rem;
+  --font-size-display-4: 2.5rem;
+  --font-size-hidden: 0rem;
+  
+  /*//// Font weight ////*/
+  --font-weight-headings: 300;
+  --font-weight-navlinks: 600;
+  --font-weight-display: 200;
+
+  /*//// Border radius ////*/
+  --rounded-DEFAULT: 5px;
+  --rounded-default: 0.3rem;
+
+  /*//// Spacing ////*/
+  --spacing-spacing: 1.875rem;
+  --spacing-xxs: 0.3125rem;
+  --spacing-xs: 0.625rem;
+  --spacing-sm: 0.9375rem;
+  --spacing-md: 1.25rem;
+  --spacing-lg: 3.125rem;
+  --spacing-xl: 3.75rem;
+  --spacing-xxl: 5.625rem;
+  --spacing-spacing-2xl: 7.5rem;
+  --spacing-spacing-3xl: 11.25rem;
+  --spacing-spacing-4xl: 15rem;
+  --spacing-spacing-5xl: 18.75rem;
+  --spacing-spacing-6xl: 22.5rem;
+  --spacing-spacing-7xl: 26.25rem;
+  --spacing-spacing-8xl: 30rem;
+  --spacing-btn: 2.5rem;
+  --spacing-btn-xs: 1.25rem;
+  --spacing-btn-sm: 1.875rem;
+  --spacing-btn-lg: 5.625rem;
+  --spacing-btn-xl: 9.375rem;
+  --spacing-header: 3.125rem;
+  --spacing-icon: 1.25rem;
+  --spacing-icon-lg: 2.5rem;
+  --spacing-icon-xl: 3.75rem;
+  --spacing-icon-sm: 1.125rem;
+  --spacing-icon-xs: 1rem;
+  --spacing-icon-xxs: 0.875rem;
+  --spacing-icon-spacing: 0.5rem;
+  --spacing-heading: 1rem;
+  --spacing-heading-lg: 2rem;
+  --spacing-section-margin: 1.875rem;
+  --spacing-actionbar: 4.375rem;
+  --spacing-aside: 12.5rem;
+  --spacing-sidebar: 12.5rem;
+  --spacing-grid-gutter: 1.25rem;
+  --spacing-13: 3.25rem;
+  --spacing-30: 7.25rem;
+  --spacing-144: 36rem;
+  --spacing-192: 48rem;
+  --spacing-240: 60rem;
+  --spacing-body-padding-mobile: 0.9375rem;
+  --spacing-body-padding-tablet: 1.875rem;
+  --spacing-body-padding-desktop: 3.125rem;
+  --spacing-card-lg: 23.75rem;
+  --spacing-card-md: 17.5rem;
+  --spacing-card-sm: 11.25rem;
+  --spacing-card-xs: 5rem;
+  --spacing-1px: 1px;
+  --spacing-modal-lg: 75rem;
+  --spacing-modal-md: 43.75rem;
+  --spacing-modal-sm: 25rem;
+  --spacing-progress-bar-thin-height: 0.125rem;
+  --spacing-progress-bar-thick-height: 0.625rem;
+  --spacing-meta-sidebar-width: 21.875rem;
+  --spacing-popover-width: 15rem;
+
+  /*//// Min width ////*/
+  --min-w-auto: auto;
+  --min-w-btn: 2.5rem;
+  --min-w-btn-sm: 1.875rem;
+  --min-w-cell: 6.25rem;
+  --min-w-6: 1.5rem;
+  --min-w-9: 2.25rem;
+  --min-w-11: 2.75rem;
+  --min-w-12: 3rem;
+  --min-w-24: 6rem;
+  --min-w-30: 7.25rem;
+  --min-w-36: 9rem;
+  --min-w-56: 14rem;
+  --min-w-spacing: 1.875rem;
+  --min-w-xxs: 0.3125rem;
+  --min-w-xs: 0.625rem;
+  --min-w-sm: 0.9375rem;
+  --min-w-md: 1.25rem;
+  --min-w-lg: 3.125rem;
+  --min-w-xl: 3.75rem;
+  --min-w-xxl: 5.625rem;
+  --min-w-spacing-2xl: 9.375rem;
+  --min-w-spacing-3xl: 11.25rem;
+  --min-w-spacing-4xl: 15rem;
+  --min-w-spacing-5xl: 18.75rem;
+  --min-w-spacing-6xl: 22.5rem;
+  --min-w-spacing-7xl: 26.25rem;
+  --min-w-spacing-8xl: 30rem;
+  --min-h-auto: auto;
+  --min-h-btn: 2.5rem;
+  --min-h-btn-sm: 1.875rem;
+  --min-h-8: 2rem;
+  --min-h-11: 2.75rem;
+  --min-h-12: 3rem;
+  --min-h-16: 4rem;
+  --min-h-22: 5.5rem;
+  --min-h-24: 6rem;
+  --min-h-30: 7.25rem;
+  --min-h-32: 8rem;
+  --min-h-48: 12rem;
+  --min-h-96: 24rem;
+  --min-h-144: 36rem;
+  --min-h-spacing: 1.875rem;
+  --min-h-xxs: 0.3125rem;
+  --min-h-xs: 0.625rem;
+  --min-h-sm: 0.9375rem;
+  --min-h-md: 1.25rem;
+  --min-h-lg: 3.125rem;
+  --min-h-xl: 3.75rem;
+  --min-h-xxl: 5.625rem;
+
+  /*//// Max width ////*/
+  --max-w-8: 2rem;
+  --max-w-32: 8rem;
+  --max-w-44: 11rem;
+  --max-w-48: 12rem;
+  --max-w-96: 24rem;
+  --max-w-144: 36rem;
+  --max-w-192: 48rem;
+  --max-w-xxl: 5.625rem;
+  --max-w-card-lg: 23.75rem;
+  --max-w-card-md: 17.5rem;
+  --max-w-card-sm: 11.25rem;
+  --max-w-card-xs: 5rem;
+  --max-w-capped: 43.75rem;
+  --shadow-DEFAULT: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05);
+  --background-image-pattern-disabled-bright: url('/assets/images/pattern-striped-bright.png');
+  --background-image-pattern-disabled-dark: url('/assets/images/pattern-striped-dark.png');
+  
+  /*//// Grid ////*/
+  --grid-cols-3-1: 3fr 1fr;
+  --grid-cols-1-3: 1fr 3fr;
+  --grid-cols-max-auto: max-content auto;
+  --grid-cols-4-auto: auto auto auto auto;
+  --grid-cols-3-auto: auto auto auto;
+  --grid-cols-2-auto: auto auto;
+  --grid-cols-2-auto-fr: auto auto 1fr;
+  --grid-cols-auto-fr-auto: auto 1fr auto;
+  --grid-cols-auto-fr-2-auto: auto 1fr auto auto;
+  --grid-cols-auto-fr: auto 1fr;
+  --grid-cols-auto: auto;
+  --grid-cols-14: repeat(14, minmax(0, 1fr));
+  --grid-rows-auto: auto;
+  --grid-rows-auto-auto: auto auto;
+  --line-height-ultratight: 0.5;
+  --outline-link-hover: 2px solid #21bef4;
+
+  /*//// Breakpoints ////*/
+  --breakpoint-xs: 30rem;
+  --breakpoint-2xl: 1600px;
+  --breakpoint-3xl: 1930px;
+}

package/src/assets/stylesheets/tailwind_custom_utilities.css

@@ -0,0 +1,268 @@
+/* Color utilities */
+
+@utility bg-transparent { background-color: var(--color-transparent); }
+@utility bg-current { background-color: var(--color-current); }
+@utility bg-black { background-color: var(--color-black); }
+@utility bg-white { background-color: var(--color-white); }
+@utility bg-gray-100 { background-color: var(--color-gray-100); }
+@utility bg-gray-200 { background-color: var(--color-gray-200); }
+@utility bg-gray-300 { background-color: var(--color-gray-300); }
+@utility bg-gray-400 { background-color: var(--color-gray-400); }
+@utility bg-gray-500 { background-color: var(--color-gray-500); }
+@utility bg-gray-600 { background-color: var(--color-gray-600); }
+@utility bg-gray-700 { background-color: var(--color-gray-700); }
+@utility bg-gray-800 { background-color: var(--color-gray-800); }
+@utility bg-gray-900 { background-color: var(--color-gray-900); }
+@utility bg-gray-lightest { background-color: var(--color-gray-lightest); }
+@utility bg-gray-lighter { background-color: var(--color-gray-lighter); }
+@utility bg-gray-light { background-color: var(--color-gray-light); }
+@utility bg-gray { background-color: var(--color-gray-DEFAULT); }
+@utility bg-gray-dark { background-color: var(--color-gray-dark); }
+@utility bg-gray-darker { background-color: var(--color-gray-darker); }
+@utility bg-gray-darkest { background-color: var(--color-gray-darkest); }
+@utility bg-red-200 { background-color: var(--color-red-200); }
+@utility bg-red-light { background-color: var(--color-red-light); }
+@utility bg-red-500 { background-color: var(--color-red-500); }
+@utility bg-red { background-color: var(--color-red-DEFAULT); }
+@utility bg-orange-500 { background-color: var(--color-orange-500); }
+@utility bg-orange { background-color: var(--color-orange-DEFAULT); }
+@utility bg-green-500 { background-color: var(--color-green-500); }
+@utility bg-green { background-color: var(--color-green-DEFAULT); }
+@utility bg-yellow-500 { background-color: var(--color-yellow-500); }
+@utility bg-yellow { background-color: var(--color-yellow-DEFAULT); }
+@utility bg-blue-200 { background-color: var(--color-blue-200); }
+@utility bg-blue-light { background-color: var(--color-blue-light); }
+@utility bg-blue-500 { background-color: var(--color-blue-500); }
+@utility bg-blue { background-color: var(--color-blue-DEFAULT); }
+@utility bg-petrol-500 { background-color: var(--color-petrol-500); }
+@utility bg-petrol { background-color: var(--color-petrol-DEFAULT); }
+@utility bg-petrol-800 { background-color: var(--color-petrol-800); }
+@utility bg-petrol-dark { background-color: var(--color-petrol-dark); }
+@utility bg-teal-300 { background-color: var(--color-teal-300); }
+@utility bg-teal-lighter { background-color: var(--color-teal-lighter); }
+@utility bg-teal-400 { background-color: var(--color-teal-400); }
+@utility bg-teal-light { background-color: var(--color-teal-light); }
+@utility bg-teal-500 { background-color: var(--color-teal-500); }
+@utility bg-teal { background-color: var(--color-teal-DEFAULT); }
+@utility bg-pink-500 { background-color: var(--color-pink-500); }
+@utility bg-pink { background-color: var(--color-pink-DEFAULT); }
+@utility bg-purple-200 { background-color: var(--color-purple-200); }
+@utility bg-purple-light { background-color: var(--color-purple-light); }
+@utility bg-purple-500 { background-color: var(--color-purple-500); }
+@utility bg-purple { background-color: var(--color-purple-DEFAULT); }
+
+@utility text-transparent { color: var(--color-transparent); }
+@utility text-current { color: var(--color-current); }
+@utility text-black { color: var(--color-black); }
+@utility text-white { color: var(--color-white); }
+@utility text-gray-100 { color: var(--color-gray-100); }
+@utility text-gray-200 { color: var(--color-gray-200); }
+@utility text-gray-300 { color: var(--color-gray-300); }
+@utility text-gray-400 { color: var(--color-gray-400); }
+@utility text-gray-500 { color: var(--color-gray-500); }
+@utility text-gray-600 { color: var(--color-gray-600); }
+@utility text-gray-700 { color: var(--color-gray-700); }
+@utility text-gray-800 { color: var(--color-gray-800); }
+@utility text-gray-900 { color: var(--color-gray-900); }
+@utility text-gray-lightest { color: var(--color-gray-lightest); }
+@utility text-gray-lighter { color: var(--color-gray-lighter); }
+@utility text-gray-light { color: var(--color-gray-light); }
+@utility text-gray { color: var(--color-gray-DEFAULT); }
+@utility text-gray-dark { color: var(--color-gray-dark); }
+@utility text-gray-darker { color: var(--color-gray-darker); }
+@utility text-gray-darkest { color: var(--color-gray-darkest); }
+@utility text-red-200 { color: var(--color-red-200); }
+@utility text-red-light { color: var(--color-red-light); }
+@utility text-red-500 { color: var(--color-red-500); }
+@utility text-red { color: var(--color-red-DEFAULT); }
+@utility text-orange-500 { color: var(--color-orange-500); }
+@utility text-orange { color: var(--color-orange-DEFAULT); }
+@utility text-green-500 { color: var(--color-green-500); }
+@utility text-green { color: var(--color-green-DEFAULT); }
+@utility text-yellow-500 { color: var(--color-yellow-500); }
+@utility text-yellow { color: var(--color-yellow-DEFAULT); }
+@utility text-blue-200 { color: var(--color-blue-200); }
+@utility text-blue-light { color: var(--color-blue-light); }
+@utility text-blue-500 { color: var(--color-blue-500); }
+@utility text-blue { color: var(--color-blue-DEFAULT); }
+@utility text-petrol-500 { color: var(--color-petrol-500); }
+@utility text-petrol { color: var(--color-petrol-DEFAULT); }
+@utility text-petrol-800 { color: var(--color-petrol-800); }
+@utility text-petrol-dark { color: var(--color-petrol-dark); }
+@utility text-teal-300 { color: var(--color-teal-300); }
+@utility text-teal-lighter { color: var(--color-teal-lighter); }
+@utility text-teal-400 { color: var(--color-teal-400); }
+@utility text-teal-light { color: var(--color-teal-light); }
+@utility text-teal-500 { color: var(--color-teal-500); }
+@utility text-teal { color: var(--color-teal-DEFAULT); }
+@utility text-pink-500 { color: var(--color-pink-500); }
+@utility text-pink { color: var(--color-pink-DEFAULT); }
+@utility text-purple-200 { color: var(--color-purple-200); }
+@utility text-purple-light { color: var(--color-purple-light); }
+@utility text-purple-500 { color: var(--color-purple-500); }
+@utility text-purple { color: var(--color-purple-DEFAULT); }
+
+@utility border-transparent { border-color: var(--color-transparent); }
+@utility border-current { border-color: var(--color-current); }
+@utility border-black { border-color: var(--color-black); }
+@utility border-white { border-color: var(--color-white); }
+@utility border-gray-100 { border-color: var(--color-gray-100); }
+@utility border-gray-200 { border-color: var(--color-gray-200); }
+@utility border-gray-300 { border-color: var(--color-gray-300); }
+@utility border-gray-400 { border-color: var(--color-gray-400); }
+@utility border-gray-500 { border-color: var(--color-gray-500); }
+@utility border-gray-600 { border-color: var(--color-gray-600); }
+@utility border-gray-700 { border-color: var(--color-gray-700); }
+@utility border-gray-800 { border-color: var(--color-gray-800); }
+@utility border-gray-900 { border-color: var(--color-gray-900); }
+@utility border-gray-lightest { border-color: var(--color-gray-lightest); }
+@utility border-gray-lighter { border-color: var(--color-gray-lighter); }
+@utility border-gray-light { border-color: var(--color-gray-light); }
+@utility border-gray { border-color: var(--color-gray-DEFAULT); }
+@utility border-gray-dark { border-color: var(--color-gray-dark); }
+@utility border-gray-darker { border-color: var(--color-gray-darker); }
+@utility border-gray-darkest { border-color: var(--color-gray-darkest); }
+@utility border-red-200 { border-color: var(--color-red-200); }
+@utility border-red-light { border-color: var(--color-red-light); }
+@utility border-red-500 { border-color: var(--color-red-500); }
+@utility border-red { border-color: var(--color-red-DEFAULT); }
+@utility border-orange-500 { border-color: var(--color-orange-500); }
+@utility border-orange { border-color: var(--color-orange-DEFAULT); }
+@utility border-green-500 { border-color: var(--color-green-500); }
+@utility border-green { border-color: var(--color-green-DEFAULT); }
+@utility border-yellow-500 { border-color: var(--color-yellow-500); }
+@utility border-yellow { border-color: var(--color-yellow-DEFAULT); }
+@utility border-blue-200 { border-color: var(--color-blue-200); }
+@utility border-blue-light { border-color: var(--color-blue-light); }
+@utility border-blue-500 { border-color: var(--color-blue-500); }
+@utility border-blue { border-color: var(--color-blue-DEFAULT); }
+@utility border-petrol-500 { border-color: var(--color-petrol-500); }
+@utility border-petrol { border-color: var(--color-petrol-DEFAULT); }
+@utility border-petrol-800 { border-color: var(--color-petrol-800); }
+@utility border-petrol-dark { border-color: var(--color-petrol-dark); }
+@utility border-teal-300 { border-color: var(--color-teal-300); }
+@utility border-teal-lighter { border-color: var(--color-teal-lighter); }
+@utility border-teal-400 { border-color: var(--color-teal-400); }
+@utility border-teal-light { border-color: var(--color-teal-light); }
+@utility border-teal-500 { border-color: var(--color-teal-500); }
+@utility border-teal { border-color: var(--color-teal-DEFAULT); }
+@utility border-pink-500 { border-color: var(--color-pink-500); }
+@utility border-pink { border-color: var(--color-pink-DEFAULT); }
+@utility border-purple-200 { border-color: var(--color-purple-200); }
+@utility border-purple-light { border-color: var(--color-purple-light); }
+@utility border-purple-500 { border-color: var(--color-purple-500); }
+@utility border-purple { border-color: var(--color-purple-DEFAULT); }
+
+
+/* // Text and font utilities */
+@utility text-heading-1 { font-size: var(--font-size-heading-1); }
+@utility text-heading-2 { font-size: var(--font-size-heading-2); }
+@utility text-heading-3 { font-size: var(--font-size-heading-3); }
+@utility text-heading-4 { font-size: var(--font-size-heading-4); }
+@utility text-heading-5 { font-size: var(--font-size-heading-5); }
+@utility text-heading-6 { font-size: var(--font-size-heading-6); }
+@utility text-navlinks { font-size: var(--font-size-navlinks); }
+@utility text-base { font-size: var(--font-size-base); }
+@utility text-buttons { font-size: var(--font-size-buttons); }
+@utility text-label { font-size: var(--font-size-label); }
+@utility text-label-sm { font-size: var(--font-size-label-sm); }
+@utility text-icon { font-size: var(--font-size-icon); }
+@utility text-icon-lg { font-size: var(--font-size-icon-lg); }
+@utility text-icon-xl { font-size: var(--font-size-icon-xl); }
+@utility text-icon-sm { font-size: var(--font-size-icon-sm); }
+@utility text-icon-xs { font-size: var(--font-size-icon-xs); }
+@utility text-icon-xxs { font-size: var(--font-size-icon-xxs); }
+@utility text-icon-xxxs { font-size: var(--font-size-icon-xxxs); }
+@utility text-xl { font-size: var(--font-size-xl); }
+@utility text-lg { font-size: var(--font-size-lg); }
+@utility text-sm { font-size: var(--font-size-sm); }
+@utility text-xs { font-size: var(--font-size-xs); }
+@utility text-xxs { font-size: var(--font-size-xxs); }
+@utility text-display-1 { font-size: var(--font-size-display-1); }
+@utility text-display-2 { font-size: var(--font-size-display-2); }
+@utility text-display-3 { font-size: var(--font-size-display-3); }
+@utility text-display-4 { font-size: var(--font-size-display-4); }
+@utility text-hidden { font-size: var(--font-size-hidden); }
+
+
+/* Spacing classes */
+@utility min-w-auto { min-width: var(--min-w-auto); }
+@utility min-w-btn { min-width: var(--min-w-btn); }
+@utility min-w-btn-sm { min-width: var(--min-w-btn-sm); }
+@utility min-w-cell { min-width: var(--min-w-cell); }
+@utility min-w-6 { min-width: var(--min-w-6); }
+@utility min-w-9 { min-width: var(--min-w-9); }
+@utility min-w-11 { min-width: var(--min-w-11); }
+@utility min-w-12 { min-width: var(--min-w-12); }
+@utility min-w-24 { min-width: var(--min-w-24); }
+@utility min-w-30 { min-width: var(--min-w-30); }
+@utility min-w-36 { min-width: var(--min-w-36); }
+@utility min-w-56 { min-width: var(--min-w-56); }
+@utility min-w-spacing { min-width: var(--min-w-spacing); }
+@utility min-w-xxs { min-width: var(--min-w-xxs); }
+@utility min-w-xs { min-width: var(--min-w-xs); }
+@utility min-w-sm { min-width: var(--min-w-sm); }
+@utility min-w-md { min-width: var(--min-w-md); }
+@utility min-w-lg { min-width: var(--min-w-lg); }
+@utility min-w-xl { min-width: var(--min-w-xl); }
+@utility min-w-xxl { min-width: var(--min-w-xxl); }
+@utility min-w-spacing-2xl { min-width: var(--min-w-spacing-2xl); }
+@utility min-w-spacing-3xl { min-width: var(--min-w-spacing-3xl); }
+@utility min-w-spacing-4xl { min-width: var(--min-w-spacing-4xl); }
+@utility min-w-spacing-5xl { min-width: var(--min-w-spacing-5xl); }
+@utility min-w-spacing-6xl { min-width: var(--min-w-spacing-6xl); }
+@utility min-w-spacing-7xl { min-width: var(--min-w-spacing-7xl); }
+@utility min-w-spacing-8xl { min-width: var(--min-w-spacing-8xl); }
+@utility min-h-auto { min-height: var(--min-h-auto); }
+@utility min-h-btn { min-height: var(--min-h-btn); }
+@utility min-h-btn-sm { min-height: var(--min-h-btn-sm); }
+@utility min-h-8 { min-height: var(--min-h-8); }
+@utility min-h-11 { min-height: var(--min-h-11); }
+@utility min-h-12 { min-height: var(--min-h-12); }
+@utility min-h-16 { min-height: var(--min-h-16); }
+@utility min-h-22 { min-height: var(--min-h-22); }
+@utility min-h-24 { min-height: var(--min-h-24); }
+@utility min-h-30 { min-height: var(--min-h-30); }
+@utility min-h-32 { min-height: var(--min-h-32); }
+@utility min-h-48 { min-height: var(--min-h-48); }
+@utility min-h-96 { min-height: var(--min-h-96); }
+@utility min-h-144 { min-height: var(--min-h-144); }
+@utility min-h-spacing { min-height: var(--min-h-spacing); }
+@utility min-h-xxs { min-height: var(--min-h-xxs); }
+@utility min-h-xs { min-height: var(--min-h-xs); }
+@utility min-h-sm { min-height: var(--min-h-sm); }
+@utility min-h-md { min-height: var(--min-h-md); }
+@utility min-h-lg { min-height: var(--min-h-lg); }
+@utility min-h-xl { min-height: var(--min-h-xl); }
+@utility min-h-xxl { min-height: var(--min-h-xxl); }
+@utility max-w-1/2 { max-width: var(--max-w-1/2); }
+@utility max-w-2/3 { max-width: var(--max-w-2/3); }
+@utility max-w-8 { max-width: var(--max-w-8); }
+@utility max-w-32 { max-width: var(--max-w-32); }
+@utility max-w-44 { max-width: var(--max-w-44); }
+@utility max-w-48 { max-width: var(--max-w-48); }
+@utility max-w-96 { max-width: var(--max-w-96); }
+@utility max-w-144 { max-width: var(--max-w-144); }
+@utility max-w-192 { max-width: var(--max-w-192); }
+@utility max-w-xxl { max-width: var(--max-w-xxl); }
+@utility max-w-card-lg { max-width: var(--max-w-card-lg); }
+@utility max-w-card-md { max-width: var(--max-w-card-md); }
+@utility max-w-card-sm { max-width: var(--max-w-card-sm); }
+@utility max-w-card-xs { max-width: var(--max-w-card-xs); }
+@utility max-w-capped { max-width: var(--max-w-capped); }
+
+/* Grid classes */
+@utility grid-cols-3-1 { grid-template-columns: var(--grid-cols-3-1); }
+@utility grid-cols-1-3 { grid-template-columns: var(--grid-cols-1-3); }
+@utility grid-cols-max-auto { grid-template-columns: var(--grid-cols-max-auto); }
+@utility grid-cols-4-auto { grid-template-columns: var(--grid-cols-4-auto); }
+@utility grid-cols-3-auto { grid-template-columns: var(--grid-cols-3-auto); }
+@utility grid-cols-2-auto { grid-template-columns: var(--grid-cols-2-auto); }
+@utility grid-cols-2-auto-fr { grid-template-columns: var(--grid-cols-2-auto-fr); }
+@utility grid-cols-auto-fr-auto { grid-template-columns: var(--grid-cols-auto-fr-auto); }
+@utility grid-cols-auto-fr-2-auto { grid-template-columns: var(--grid-cols-auto-fr-2-auto); }
+@utility grid-cols-auto-fr { grid-template-columns: var(--grid-cols-auto-fr); }
+@utility grid-cols-auto { grid-template-columns: var(--grid-cols-auto); }
+@utility grid-cols-14 { grid-template-columns: var(--grid-cols-14); }
+@utility grid-rows-auto { grid-template-rows: var(--grid-rows-auto); }
+@utility grid-rows-auto-auto { grid-template-rows: var(--grid-rows-auto-auto); }

package/src/index.pug

@@ -14,8 +14,8 @@ main.main-content.main-content-padding.flex.flex-col.justify-start.items-center
       h3.section-title Technology
     .trix-content
       ul.max-w-paragraph.mb-8
-        li TailWindCSS V3
-        li PostCSS
+        li TailWindCSS V4 for compiling CSS
+        li Eleventy V2 for building this website
     .section-header
       h3.section-title Integration
     .trix-content.max-w-paragraph
@@ -24,42 +24,11 @@ main.main-content.main-content-padding.flex.flex-col.justify-start.items-center
           | Import 
           code app.css
           | to get all relevant modules and files.
-        li Use the following PostCss configuration in your 
-          code postcss.config.js 
-          | file:
-          pre.mt-xs
-            code.language-js
-              | const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
-              | 
-              | module.exports = {
-              |   plugins: [
-              |     require('postcss-import'),
-              |     require('tailwindcss/nesting'),
-              |     require('tailwindcss')({
-              |       content: [
-              |         './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
-              |       ],
-              |       theme: tailwindConfig.theme,
-              |       plugins: tailwindConfig.plugins,
-              |     }),
-              |     require('autoprefixer')
-              |   ]
-              | }
-        li Change the path to the tailwind.config.js file from the package.
-          pre.mt-xs
-            code.language-js
-              | const tailwindConfig = require('PATH_TO_TAILWINDCONFIG');
-        li Add all paths to your layouts and components in the content block. Otherwise TailWind will not generate your required classes.
-          pre.mt-xs
-            code.language-js
-              |  content: [
-              |    './YOUR_PATH_HERE/**/*.{html,js,haml,pug,njk}',
-              |  ],
-    .section-header
-      h3.section-title Simple start
-    p.max-w-paragraph.mb-heading To get started without any customization just download the current compiled CSS below and implement your components with the provided code.
-    a.btn.btn-block.btn-primary.max-w-paragraph.mb-8(href="/static/app.compiled.css", target="_blank")
-      .icon.icon-cloud-download.mr-icon-spacing
-      | Download compiled CSS
+        li 
+          | Run TailWindCSS V4 CLI to compile everything.
+          br
+          | Example TailWind configuration:
+          br
+          code npx @tailwindcss/cli -i input/app.css -o output/app.compiled.css
 
 

package/src/pages/components/banner_cards.haml

@@ -10,16 +10,6 @@ title: Banner cards
     %p We are glad to have you here. To get started earning money with us please complete some onboarding modules. Also check out this Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
     .card-actions
       %a.btn.btn-inverted{href:""} Dismiss
-.banner-card
-  .card-chart
-    .piechart-example
-    .chart-value 0/3
-    .chart-label madatory modules completed
-  .card-content
-    %h5.card-title Mandatory onboarding modules available
-    %p You received mandatory onboarding modules which are required for receiving customer tasks and test invitations. Please complete them soon.
-    .card-actions
-      %a.btn.btn-primary{href:""} Go to learning portal
 .banner-card
   .card-image
     %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}

package/src/pages/components/loading_spinner.haml

@@ -3,9 +3,9 @@ tags: components
 title: Loading spinner
 ---
 
-.testio-loader-wrapper.d-inline-block
-  %svg.testio-loader-i{viewbox:'0 0 50 50'}
-    %line.anim-bar.stroke{x1:'4px', y1:'5px', x2:'4px', y2:'45px'}
+.testio-loader-wrapper
+  %svg.testio-loader-i{viewbox: "0 0 50 50"}
+    %line.anim-bar.stroke{x1: "4px", x2: "4px", y1: "5px", y2: "45px"}
   .testio-loader-o-wrapper
-    %svg.testio-loader-o{viewbox:'25 25 50 50'}
-      %circle.anim-circle.stroke{cx:'50', cy:'50', r:'20', fill:'none'}
+    %svg.testio-loader-o{viewbox: "25 25 50 50"}
+      %circle.anim-circle.stroke{cx: "50", cy: "50", r: "20", fill: "none"}

package/src/pages/forms/search.haml

@@ -17,7 +17,7 @@ title: Search
       %button.btn.btn-submit{type:'submit'}
   .form-group
     %label.form-label Search popover
-    %details.popover-wrapper.dropright
+    %details.popover-wrapper
       %summary
         .btn.btn-square
           .icon.icon-search
@@ -28,7 +28,7 @@ title: Search
           %button.btn.btn-submit{type:'submit'}
   .form-group
     %label.form-label Search popover with result selection
-    %details.popover-wrapper.dropright
+    %details.popover-wrapper
       %summary
         .btn.btn-square
           .icon.icon-search