testio-tailwind 1.1.2 → 2.0.1

package/src/assets/stylesheets/app.css

@@ -1,79 +1,104 @@
-@import "components/reset";
 
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
 
-@import "tom-select/dist/css/tom-select.css";
-@import "select2/dist/css/select2.css";
-@import "trix/dist/trix.css";
+@import "tailwindcss";
+@import './tailwind_config.css';
+@import './tailwind_custom_utilities.css';
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+@import './components/reset.css' layer(base);
+
+@import 'tom-select/dist/css/tom-select.css' layer(components);
+@import 'select2/dist/css/select2.css' layer(components);
+@import 'trix/dist/trix.css' layer(components);
+
+
+@import './components/actionbar.css' layer(components);
+@import './components/buttons.css' layer(components);
+@import './components/cards.css' layer(components);
+@import './components/header.css' layer(components);
+@import './components/layout.css' layer(components);
+@import './components/sidebar.css' layer(components);
+@import './components/icons.css' layer(components);
+@import './components/iconfont.css' layer(components);
+@import './components/popover.css' layer(components);
+@import './components/typography.css' layer(components);
+@import './components/lists.css' layer(components);
+@import './components/sections.css' layer(components);
+@import './components/dropdown.css' layer(components);
+@import './components/list_item.css' layer(components);
+@import './components/task_issue_item.css' layer(components);
+@import './components/devices.css' layer(components);
+@import './components/images.css' layer(components);
+@import './components/banner_card.css' layer(components);
+@import './components/toggleswitch.css' layer(components);
+@import './components/selectable_token.css' layer(components);
+@import './components/checkboxes_radiobuttons.css' layer(components);
+@import './components/form_grid.css' layer(components);
+@import './components/form_card.css' layer(components);
+@import './components/forms.css' layer(components);
+@import './components/search.css' layer(components);
+@import './components/tom_select.css' layer(components);
+@import './components/trix_editor.css' layer(components);
+@import './components/uploads.css' layer(components);
+@import './components/radio_tabs.css' layer(components);
+@import './components/user_item.css' layer(components);
+@import './components/alerts.css' layer(components);
+@import './components/tags.css' layer(components);
+@import './components/markdown_trix_styles.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/drawer.css' layer(components);
+@import './components/modals.css' layer(components);
+@import './components/progress.css' layer(components);
+@import './components/loading_spinner.css' layer(components);
+@import './components/test_item.css' layer(components);
+@import './components/metrics.css' layer(components);
+@import './components/resultmodule.css' layer(components);
+@import './components/chat.css' layer(components);
+@import './components/emptystate_message.css' layer(components);
+@import './components/splitview.css' layer(components);
+@import './components/tables.css' layer(components);
+@import './components/metasidebar.css' layer(components);
+@import './components/notifications.css' layer(components);
+@import './components/select2.css' layer(components);
+@import './components/select.css' layer(components);
+@import './components/test_header.css' layer(components);
+@import './components/ratingscale.css' layer(components);
 
+@import './components/customer/customer_header.css' layer(components);
+@import './components/customer/customer_sidebar.css' layer(components);
+@import './components/customer/customer_productcards.css' layer(components);
 
-@import "components/actionbar";
-@import "components/buttons";
-@import "components/cards";
-@import "components/header";
-@import "components/layout";
-@import "components/sidebar";
-@import "components/icons";
-@import "components/iconfont";
-@import "components/popover";
-@import "components/typography";
-@import "components/lists";
-@import "components/sections";
-@import "components/dropdown";
-@import "components/list_item";
-@import "components/task_issue_item";
-@import "components/devices";
-@import "components/images";
-@import "components/banner_card";
-@import "components/toggleswitch";
-@import "components/selectable_token";
-@import "components/checkboxes_radiobuttons";
-@import "components/form_grid";
-@import "components/form_card";
-@import "components/forms";
-@import "components/search";
-@import "components/tom_select";
-@import "components/trix_editor";
-@import "components/uploads";
-@import "components/radio_tabs";
-@import "components/user_item";
-@import "components/alerts";
-@import "components/tags";
-@import "components/markdown_trix_styles";
-@import "components/tabs";
-@import "components/drawer";
-@import "components/modals";
-@import "components/progress";
-@import "components/loading_spinner";
-@import "components/test_item";
-@import "components/metrics";
-@import "components/resultmodule";
-@import "components/chat";
-@import "components/emptystate_message";
-@import "components/splitview";
-@import "components/tables";
-@import "components/metasidebar";
-@import "components/notifications";
-@import "components/select2";
-@import "components/select";
-@import "components/test_header";
-@import "components/ratingscale";
+@import './components/tester/tester_header.css' layer(components);
+@import './components/tester/tester_sidebar.css' layer(components);
+@import './components/tester/tester_cards.css' layer(components);
 
-@import "components/customer/customer_header";
-@import "components/customer/customer_sidebar";
-@import "components/customer/customer_productcards";
+@import './components/manager/manager_header.css' layer(components);
+@import './components/manager/manager_sidebar.css' layer(components);
 
-@import "components/tester/tester_header";
-@import "components/tester/tester_sidebar";
-@import "components/tester/tester_cards";
+@import './components/designsystem/designsystem-styles.css' layer(components);
 
-@import "components/manager/manager_header";
-@import "components/manager/manager_sidebar";
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-@import "components/designsystem/designsystem-styles";
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
-@import "tailwindcss/utilities";
+.source-sans-3-<uniquifier> {
+  font-family: "Source Sans 3", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: <weight>;
+  font-style: normal;
+}

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

@@ -18,7 +18,7 @@
 }
 
 .alert .close:hover, .alert .close:focus {
-  @apply text-white bg-link-hover outline-none;
+  @apply text-white bg-link-hover outline-hidden;
   .icon {
     @apply text-white;
   }

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

@@ -1,13 +1,13 @@
 .grid-cards-achievements {
   @apply grid gap-grid-gutter;
   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;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }
@@ -15,16 +15,16 @@
 .grid-cards {
   @apply grid gap-grid-gutter;
   grid-template-columns: 1fr;
-  @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;
   }
-  @screen 2xl {
+  @media (width >= theme(--breakpoint-2xl)) {
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
   }
 }
@@ -46,14 +46,14 @@
 }
 
 .card-title {
-  @apply block overflow-ellipsis text-heading-5 leading-5;
+  @apply block text-ellipsis text-heading-5 leading-5;
 }
 
 .card.card-sm {
   @apply w-full sm:w-card-sm;
 
   .card-title {
-    @apply block overflow-ellipsis text-heading-5 leading-5 text-center;
+    @apply block text-ellipsis text-heading-5 leading-5 text-center;
   }
 }
 

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

@@ -70,7 +70,8 @@ img.chat-avatar {
   justify-content: center;
   padding: 0;
   .icon {
-    @apply h-icon-xs text-icon-xs;
+    height: var(--font-size-icon-xs);
+    font-size: var(--font-size-icon-xs);
   }
 }
 
@@ -91,7 +92,9 @@ img.chat-avatar {
     @apply text-white border-0 bg-link-hover;
   }
   .icon {
-    @apply h-icon-xs text-icon-xs mr-xxs;
+    @apply mr-xxs;
+    height: var(--font-size-icon-xs);
+    font-size: var(--font-size-icon-xs);
   }
 }
 
@@ -122,14 +125,14 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message .chat-message-addons .btn {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
   &:hover, &:focus, &:active {
     @apply text-white bg-link-hover;
   }
 }
 
 .chat-message-item.your-message .chat-message-addons .tag-item {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
 }
 
 .chat-message-item.your-message .chat-actions .dropdown-actions[open] .dropdown-menu,
@@ -143,14 +146,14 @@ img.chat-avatar {
 }
 
 .chat-message-item.announcement .chat-message-addons .btn {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray backdrop-opacity-25;
   &:hover, &:focus, &:active {
     @apply text-white bg-link-hover;
   }
 }
 
 .chat-message-item.announcement .chat-message-addons .tag-item {
-  @apply text-white bg-gray bg-opacity-25;
+  @apply text-white bg-gray;
 }
 
 

package/src/assets/stylesheets/components/customer/customer_productcards.css

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

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

@@ -20,7 +20,7 @@
 }
 
 .device.outline {
-  @apply p-sm border border-bordercolor rounded outline-none;
+  @apply p-sm border border-bordercolor rounded outline-hidden;
 }
 
 .device-icon {

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

@@ -3,7 +3,7 @@
 }
 
 .form-label {
-  @apply text-label text-label leading-tight;
+  @apply text-label leading-tight;
 
   &.optional::after {
     content: "(optional)";
@@ -26,7 +26,7 @@
 
 .form-control,
 .form-control-static {
-  @apply h-btn w-full text-base border border-bordercolor;
+  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded;
 }
 
 .form-check .field_with_errors input[type="checkbox"],
@@ -71,14 +71,7 @@
 }
 
 textarea.form-control {
-  @apply h-auto min-h-btn;
-}
-
-.form-control-search {
-  /* padding-right: ($input-padding-x * 3);
-  background-repeat: no-repeat;
-  background-position: center right ($input-height * .25);
-  background-size: ($input-height * .50) ($input-height * .50); */
+  @apply h-auto min-h-btn pt-xs;
 }
 
 .form-control-label {

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

@@ -1,4 +1,3 @@
-
 .header {
   @apply h-header flex items-center bg-header;
   grid-area: header;
@@ -70,7 +69,7 @@
   content: url("/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg");
   height: 13px;
   width: 74px;
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply h-md;
     width: 128px;
   }

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

@@ -2,23 +2,43 @@
 /*/ Icon sizes and spacing /*/
 
 .icon {
-  @apply h-icon text-icon align-bottom;
+  height: var(--font-size-icon);
+  font-size: var(--font-size-icon);
+}
+
+.icon-xxs {
+  height: var(--font-size-icon-xxs);
+  font-size: var(--font-size-icon-xxs);
 }
 
 .icon-xs {
-  @apply h-icon-xs text-icon-xs;
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
+}
+
+.icon-xs {
+  height: var(--font-size-icon-xs);
+  font-size: var(--font-size-icon-xs);
 }
 
 .icon-sm {
-  @apply h-icon-sm text-icon-sm;
+  height: var(--font-size-icon-sm);
+  font-size: var(--font-size-icon-sm);
 }
 
 .icon-lg {
-  @apply h-icon-lg text-icon-lg;
+  height: var(--font-size-icon-lg);
+  font-size: var(--font-size-icon-lg);
 }
 
 .icon-xl {
-  @apply h-icon-xl text-icon-xl;
+  height: var(--font-size-icon-xl);
+  font-size: var(--font-size-icon-xl);
+}
+
+.icon-xxl {
+  height: var(--font-size-icon-xxl);
+  font-size: var(--font-size-icon-xxl);
 }
 
 .icon-functional {

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

@@ -1,4 +1,3 @@
-
 .list-listitems .listitem,
 .list-listitems .listitem-with-footer {
   @apply mb-xs; 
@@ -11,7 +10,7 @@
                         "badge metrics actions";
   grid-template-columns: auto 1fr auto;
 
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     grid-template-areas:  "badge title metrics actions";
   }
 }

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

@@ -1,4 +1,3 @@
-
 .list-inline {
   @apply flex flex-wrap;
 }
@@ -36,7 +35,7 @@ dl.list-inline.responsive {
   dd {
     @apply mb-xs;
   }
-  @screen lg {
+  @media (width >= theme(--breakpoint-lg)) {
     grid-template-columns: auto 1fr;
     dd {
       margin-bottom: 0;

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

@@ -1,104 +1,86 @@
 .testio-loader-wrapper {
+  display: inline-block;
   overflow: hidden;
   position: relative;
+}
 
-  .stroke {
-    stroke-linecap: round;
-    stroke-miterlimit: 10;
-    stroke-width: 180px;
-  }
+.testio-loader-wrapper .stroke {
+  stroke: var(--color-info);
+  stroke-linecap: round;
+  stroke-miterlimit: 10;
+  stroke-width: 6px;
+}
 
-  .anim-bar {
-    animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-    stroke: e6e6e6;
-  }
+.testio-loader-i {
+  height: 60px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 60px;
+}
 
-  .anim-circle {
-    animation: dash-circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
+.anim-bar {
+  animation: dash-line 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+}
 
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
+@keyframes dash-line {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: -60px;
   }
 
-  @keyframes dash-line {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: -180px;
-    }
-
-    50% {
-      stroke-dasharray: 50, 200;
-    }
-
-    100% {
-      stroke-dasharray: 0, 200;
-      stroke-dashoffset: 180px;
-    }
+  50% {
+    stroke-dasharray: 50, 200;
   }
 
-  @keyframes dash-circle {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-
-    50% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -35px;
-    }
-
-    100% {
-      stroke-dasharray: 89, 200;
-      stroke-dashoffset: -124px;
-    }
+  100% {
+    stroke-dasharray: 0, 200;
+    stroke-dashoffset: 60px;
   }
+}
 
-  @keyframes color {
-    100%,
-    0% {
-      stroke: #e6e6e6;
-    }
-
-    99% {
-      stroke: #21bef4;
-    }
-  }
+.testio-loader-o-wrapper {
+  position: relative;
+  height: 60px;
+  margin-left: 12px;
+  width: 60px;
 }
 
-.testio-loader-i {
-  height: 180px;
-  left: 0;
+.testio-loader-o-wrapper .testio-loader-o {
   position: absolute;
-  top: 0;
-  width: 180px;
+    bottom: 0;
+    height: 60px;
+    left: 0;
+    right: 0;
+    top: 0;
+    transform-origin: center center;
 }
 
-.testio-loader-o-wrapper {
-  height: 180px;
-  margin-left: 20;
-  position: relative;
-  width: 180px;
-
-  &::before {
+.testio-loader-o-wrapper::before {
     content: "";
     display: block;
     padding-top: 100%;
+}
+
+.anim-circle {
+  animation: dash-circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+}
+
+@keyframes dash-circle {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
   }
 
-  .testio-loader-o {
-    animation: rotate 2s linear infinite;
-    bottom: 0;
-    height: 180px;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform-origin: center center;
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
   }
-}
 
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}

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

@@ -1,4 +1,3 @@
-
 aside.metasidebar {
   @apply relative overflow-hidden;
   grid-area: aside;
@@ -39,7 +38,7 @@ aside .metasidebar-wrapper {
 }
 
 aside .metasidebar-wrapper[open] {
-  @screen sm {
+  @media (width >= theme(--breakpoint-sm)) {
     @apply relative grid top-auto;
   }
 }

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

@@ -14,7 +14,7 @@
 }
 
 .drawer .notification-content {
-  @apply relative grid py-xxs px-xs text-label cursor-pointer;
+  @apply relative grid py-xs px-spacing text-label cursor-pointer;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto;
 }

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

@@ -23,7 +23,7 @@ select {
 }
 
 .form-select-native select {
-  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-none border-0 cursor-pointer;
+  @apply relative flex flex-row w-full justify-start items-stretch min-h-btn py-xs px-sm text-base text-white rounded bg-primary outline-hidden border-0 cursor-pointer;
 }
 
 .form-select-native .select-wrapper select:disabled {

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

@@ -50,7 +50,7 @@ select.select2 {
   }
 
   .select2-search__field {
-    @apply h-btn-sm pl-xs outline-none;
+    @apply h-btn-sm pl-xs outline-hidden;
   }
 
   .select2-results__options {