testio-tailwind 1.1.1 → 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/buttons/buttons-round.haml

@@ -0,0 +1,58 @@
+---
+title: Round buttons
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %button.btn.rounded-full.btn-primary Primary
+  %li
+    %button.btn.rounded-full.btn-primary
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+  %li
+    %button.btn.rounded-full.btn-secondary Secondary
+  %li
+    %button.btn.rounded-full.btn-secondary
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+  %li
+    %button.btn.rounded-full.btn-success Success
+  %li
+    %button.btn.rounded-full.btn-success
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Success
+  %li
+    %button.btn.rounded-full.btn-danger Danger
+  %li
+    %button.btn.rounded-full.btn-danger
+      .icon.icon-check-circle-filled.mr-icon-spacing
+      Danger
+  %li
+    %button.btn.rounded-full.btn-warning Warning
+  %li
+    %button.btn.rounded-full.btn-info Info
+  %li
+    %button.btn.rounded-full.btn-dashed Dashed
+  %li
+    %button.btn.rounded-full.btn-link Link
+  %li
+    %button.btn.rounded-full.btn-ghost Ghost
+  %li
+    %button.btn.rounded-full{disabled: "disabled"} Disabled
+
+.bg-petrol.p-2
+  %ul.list-inline
+    %li
+      %button.btn.rounded-full.btn-primary-inverted primary-inverted
+    %li
+      %button.btn.rounded-full.btn-inverted inverted
+    %li
+      %button.btn.rounded-full.btn-secondary-inverted secondary-inverted
+    %li
+      %button.btn.rounded-full.btn-outline-primary-inverted outline-primary-inverted
+    %li
+      %button.btn.rounded-full.btn-ghost-inverted Ghost inverted
+    %li
+      %button.btn.rounded-full.btn-primary-inverted{disabled: "disabled"} disabled
+