testio-tailwind 1.1.2 → 2.0.1

package/src/assets/stylesheets/components/splitview.css

@@ -7,16 +7,16 @@
   grid-template-columns: 1fr;
   grid-template-rows: auto auto 1fr auto;
   grid-area: main;
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 2fr;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 2fr 3fr;
   }
-  @screen 3xl {
+  @media (width >= theme(--breakpoint-3xl)) {
     grid-template-columns: 1fr 3fr;
   }
 }
@@ -129,7 +129,7 @@
   dd {
     margin-bottom: 0;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 2fr 1fr 2fr;
   }
 }
@@ -166,7 +166,7 @@
 .splitview-details-content-grid {
   @apply grid gap-xs mb-md;
 
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 3fr;
     .label {
       padding-top: 2px;

package/src/assets/stylesheets/components/tables.css

@@ -188,20 +188,20 @@ td.action-cell,
 
 .table-cellstyle th.missing::after {
   @apply right-0 bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/exclamation.svg");
-  mask-image: url("$package_path/images/exclamation.svg");
+  -webkit-mask-image: url("/assets/images/exclamation.svg");
+  mask-image: url("/assets/images/exclamation.svg");
 }
 
 .table-cellstyle th.inprogress::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle th.completed::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 .table-cellstyle td {
@@ -228,8 +228,8 @@ td.action-cell,
 
 .table-cellstyle td.inprogress::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle td.completed {
@@ -238,8 +238,8 @@ td.action-cell,
 
 .table-cellstyle .completed::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 .table-cellstyle td.cell-editable, 
@@ -266,8 +266,8 @@ td.action-cell,
     @apply absolute inline-block w-icon-xs h-icon-xs right-2.5 top-2 bg-primary;
     content: "";
     mask-repeat: round;
-    -webkit-mask-image: url("$package_path/images/edit.svg");
-    mask-image: url("$package_path/images/edit.svg");
+    -webkit-mask-image: url("/assets/images/pencil.svg");
+    mask-image: url("/assets/images/pencil.svg");
   }
 }
 
@@ -342,8 +342,8 @@ td.action-cell,
   &::after {
     @apply block w-full h-full bg-white;
     content: "";
-    mask-image: url("$package_path/images/checkbox-background.svg");
-    -webkit-mask-image: url("$package_path/images/checkbox-background.svg");
+    mask-image: url("/assets/images/checkbox-background.svg");
+    -webkit-mask-image: url("/assets/images/checkbox-background.svg");
     mask-repeat: no-repeat;
   }
 }
@@ -368,14 +368,14 @@ td.action-cell,
 
 .table-cellstyle td.cell-selectable.inprogress label::after {
   @apply bg-gray-600;
-  -webkit-mask-image: url("$package_path/images/clock.svg");
-  mask-image: url("$package_path/images/clock.svg");
+  -webkit-mask-image: url("/assets/images/clock.svg");
+  mask-image: url("/assets/images/clock.svg");
 }
 
 .table-cellstyle .cell-selectable.completed label::after {
   @apply h-2.5 top-2.5 right-1.5 bg-success;
-  -webkit-mask-image: url("$package_path/images/check-thick.svg");
-  mask-image: url("$package_path/images/check-thick.svg");
+  -webkit-mask-image: url("/assets/images/check-thick.svg");
+  mask-image: url("/assets/images/check-thick.svg");
 }
 
 

package/src/assets/stylesheets/components/tags.css

@@ -13,7 +13,8 @@
 }
 
 .tag .icon {
-  @apply text-icon-xxs h-icon-xxs;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .tag.sm {
@@ -29,13 +30,19 @@
 }
 
 .tag.popover-tag {
-  @apply text-base h-auto hover:text-white hover:bg-link-hover cursor-pointer;
+  @apply text-base h-auto cursor-pointer;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
+.tag.popover-tag:hover {
+  @apply bg-link-hover text-white;
+}
+
 .tag.popover-tag .icon {
-  @apply h-icon-xs mr-icon-spacing text-icon-xs;
+  @apply mr-icon-spacing;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .tag.popover-tag:hover .icon {

package/src/assets/stylesheets/components/test_header.css

@@ -7,14 +7,14 @@
   grid-template-columns: 1fr auto auto;
   grid-template-rows: auto;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply pt-xs pr-md pb-0 pl-md;
     grid-template-areas:  "test-title test-progress session-info test-actions"
                           "nav-tabs nav-tabs nav-tabs nav-tabs";
     grid-template-columns: auto 1fr auto auto;
     grid-template-rows: auto;
   }
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     @apply pt-xs pr-md pb-0 pl-body-padding-desktop;
   }
 }
@@ -44,7 +44,7 @@
   .nav-tabs {
     @apply pt-xxs pb-xs;
   }
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply py-xxs;
   }
 }

package/src/assets/stylesheets/components/tester/tester_cards.css

@@ -1,16 +1,16 @@
 .grid-testercards {
   @apply grid gap-grid-gutter;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-columns: 1fr 1fr;
   }
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: 1fr 1fr 1fr;
   }
-  @screen xl {
+  @media (width >= theme(--breakpoint-xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   }
-  @screen 3xl {
+  @media (width >= theme(--breakpoint-3xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }

package/src/assets/stylesheets/components/trix_editor.css

@@ -1,7 +1,7 @@
 .form-group.trix-editor {
   @apply gap-grid-gutter grid-rows-auto;
   grid-template-rows: auto;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-template-areas:
       "label trix-toolbar"
       "label trix-editor";
@@ -10,7 +10,7 @@
 
 .trix-editor .trix-content {
   @apply -mt-grid-gutter;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-area: trix-editor;
   }
 }
@@ -21,7 +21,7 @@
 
 trix-toolbar {
   @apply border border-bordercolor rounded-t;
-  @screen md {
+  @media (width >= theme(--breakpoint-md)) {
     grid-area: trix-toolbar;
   }
 }

package/src/assets/stylesheets/components/typography.css

@@ -1,4 +1,8 @@
 
+body {
+  @apply font-body text-base;
+}
+
 h1, h2, h3, h4, h5,
 .text-heading-1,
 .text-heading-2,
@@ -9,31 +13,27 @@ h1, h2, h3, h4, h5,
 }
 
 h1 {
-  @apply text-heading-1;
+  font-size: var(--font-size-heading-1);
 }
 
 h2 {
-  @apply text-heading-2;
+  font-size: var(--font-size-heading-2);
 }
 
 h3 {
-  @apply text-heading-3;
+  font-size: var(--font-size-heading-3);
 }
 
 h4 {
-  @apply text-heading-4;
+  font-size: var(--font-size-heading-4);
 }
 
 h5 {
-  @apply text-heading-5;
+  font-size: var(--font-size-heading-5);
 }
 
 h6 {
-  @apply text-heading-6;
-}
-
-body {
-  @apply text-base;
+  font-size: var(--font-size-heading-6);
 }
 
 .text-display-1,
@@ -41,10 +41,11 @@ body {
 .text-display-3,
 .text-display-4 {
   @apply font-display;
+  font-weight: var(--font-weight-display);
 }
 
 a {
-  @apply text-link font-semibold hover:text-link-hover hover:underline cursor-pointer;
+  @apply text-link font-semibold leading-5 hover:text-link-hover hover:underline cursor-pointer;
 }
 
 code {

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;
+}