testio-tailwind 3.6.0 → 3.7.0

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

@@ -100,6 +100,18 @@
   @apply text-danger;
 }
 
+.icon.blocked {
+  @apply text-blocked;
+}
+
+.icon.pending {
+  @apply text-pending;
+}
+
+.icon.empty {
+  @apply text-chart-empty;
+}
+
 /*///// Status Icons /////*/
 
 .status-icon {

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

@@ -1,5 +1,9 @@
+html, body {
+  @apply h-full;
+}
+
 .app-body {
-  @apply grid h-screen max-h-screen w-full overflow-hidden bg-appbody text-appbody-textcolor;
+  @apply grid h-screen max-h-full w-full overflow-hidden bg-appbody text-appbody-textcolor;
   grid-template-areas:  "header header header"
                         "sidebar test-header test-header"
                         "sidebar main aside"
@@ -34,4 +38,10 @@
   @apply pb-lg;
 }
 
+.main-content.centered {
+  @apply flex justify-center;
+}
 
+.centered-content {
+  @apply w-full max-w-centered-content;
+}

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

@@ -142,7 +142,7 @@ a.listitem:hover {
 }
 
 .listitem-card {
-  @apply relative mb-md p-sm bg-appbody rounded last:mb-0;
+  @apply relative mb-md p-sm bg-appbody dark:bg-gray-750 rounded last:mb-0;
 }
 
 .listitem-card img {
@@ -154,7 +154,7 @@ a.listitem:hover {
 }
 
 .listitem-subheadline {
-  @apply mb-xs text-label font-semibold uppercase;
+  @apply mb-xs text-label font-semibold uppercase dark:uppercase dark:text-label-color;
 }
 
 .listitem[open] > .listitem-header .listitem-actions .btn,

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

@@ -67,8 +67,6 @@
   }
   .splitview-list {
     display: block;
-    /* grid-row-start: 3;
-    grid-row-end: 5; */
   }
 }
 
@@ -113,7 +111,7 @@
 /*///// Splitview Details /////*/
 
 .splitview-details {
-  @apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor;
+  @apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor dark:border-none;
   grid-area: splitview-details;
   grid-template-areas:  "details-content details-metasidebar"
                         "details-actionbar details-actionbar";
@@ -131,7 +129,7 @@
 }
 
 .splitview-details-title {
-  @apply text-heading-3;
+  @apply text-heading-3 dark:text-card-header;
 }
 
 .splitview-details-header .btn-close-detailview {
@@ -215,20 +213,14 @@
 /*///// Splitview item /////*/
 
 .splitview-item {
-  @apply grid p-xs pr-spacing -mx-xs cursor-pointer;
+  @apply relative grid p-xs pr-spacing -mx-xs dark:mx-0 dark:mb-1px cursor-pointer dark:bg-listitem dark:rounded;
   grid-template-areas: "split-check split-icon split-text split-status";
   grid-template-columns: auto auto 1fr auto;
 }
 
 .splitview-item.selected {
-  @apply text-white bg-info;
-  .splitview-item-icon, 
-  .splitview-item-metainfo {
-    @apply text-white;
-  }
-  .status-icon {
-    @apply bg-white;
-  }
+  @apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover;
+
   .splitview-item-checkbox input {
     @apply border-white;
   }
@@ -240,6 +232,16 @@
   }
 }
 
+body:not(.dark) .splitview-item.selected {
+  .splitview-item-icon, 
+  .splitview-item-metainfo {
+    @apply text-white;
+  }
+  .status-icon {
+    @apply bg-white;
+  }
+}
+
 .splitview-item:hover {
   @apply text-white bg-link-hover;
 
@@ -259,6 +261,9 @@
   .splitview-item-checkbox input[type=checkbox]:checked::after {
     @apply bg-info;
   }
+  .splitview-item-status {
+    @apply text-white;
+  }
 }
 
 .splitview-item-checkbox {
@@ -280,7 +285,7 @@
 }
 
 .splitview-item-title {
-  overflow: hidden;
+  @apply dark:text-heading-5 dark:font-headings overflow-hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   line-clamp: 4;
@@ -293,7 +298,7 @@
 }
 
 .splitview-item-status {
-  @apply flex flex-col items-end w-spacing;
+  @apply flex flex-col items-end w-spacing dark:w-auto dark:text-label-color;
   grid-area: split-status;
 }
 
@@ -305,8 +310,27 @@
   @apply mt-xxs;
 }
 
+.splitview-item.unread::after {
+  @apply absolute w-xxs h-xxs bg-purple rounded-full;
+  content: "";
+  top: 7px;
+  right: 7px;
+}
+
+.splitview-item:hover::after {
+  @apply bg-white;
+}
+
 /*///// Collapsable splitview item/group /////*/
 
+.splitview-group {
+  @apply dark:mb-xs dark:last:mb-0;
+}
+
+.splitview-group summary.splitview-item {
+  @apply dark:pl-lg;
+}
+
 .splitview-group > summary::before {
   @apply inline-block w-icon h-icon mr-xxs bg-primary;
   content: "";
@@ -314,6 +338,14 @@
   mask-image: url("/assets/images/icons/triangle-centered-right.svg");
 }
 
+.dark .splitview-group > summary::before {
+  @apply absolute top-xs left-md bg-label-color;
+}
+
+.splitview-group[open] > summary {
+  @apply rounded-b-none;
+}
+
 .splitview-group[open] > summary::before {
   mask-image: url("/assets/images/icons/triangle-centered-down.svg");
 }
@@ -323,5 +355,20 @@
 }
 
 .splitview-group .splitview-item:not(summary) {
-  padding-left: 65px;
+  @apply pl-[65px] dark:pl-lg dark:rounded-none dark:last:rounded-b;
+}
+
+
+/*///// Grid split /////*/
+
+.grid-splitview {
+  @apply grid grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
 }
+
+.grid-splitview .splitview-list {
+  @apply col-span-1 lg:col-span-2 overflow-y-visible;
+}
+
+.grid-splitview .splitview-details {
+  @apply flex flex-col col-span-1 lg:col-span-3 overflow-y-visible;
+}

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

@@ -6,7 +6,7 @@
 }
 
 .nav-tabs {
-  @apply border-b border-bordercolor;
+  @apply border-b border-bordercolor dark:border-none dark:-ml-sm;
 }
 
 .nav-tabs::after {
@@ -15,6 +15,16 @@
   background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
 }
 
+.dark .nav-tabs::after {
+  @apply hidden;
+}
+
+.dark .nav-tabs .navlink.active::after {
+  @apply absolute block left-sm right-sm bottom-0 bg-link-hover;
+  content: '';
+  height: 2px;
+}
+
 .nav-tabs::-webkit-scrollbar,
 .nav-pills::-webkit-scrollbar,
 .nav-tabs .navlinks::-webkit-scrollbar {
@@ -25,17 +35,16 @@
 
 .nav-tabs .navlink, 
 .nav-tabs .nav-link {
-  @apply inline-flex items-start whitespace-nowrap mr-md h-spacing text-primary text-heading-5 font-headings border-b border-link-hover rounded-none cursor-pointer;
-  margin-bottom: -1px;
+  @apply relative inline-flex items-start dark:items-center mr-md dark:mr-0 -mb-1px dark:mb-0 h-spacing dark:h-[34px] text-primary dark:text-label-color dark:px-sm dark:rounded-full whitespace-nowrap text-heading-5 font-headings dark:uppercase border-b border-link-hover dark:border-none rounded-none cursor-pointer;
   line-height: 1;
   user-select: none;
 
   &.active {
-    @apply border-b-4 border-info;
+    @apply border-b-4 dark:border-b-2 border-info dark:border-none dark:text-white;
   }
 
   &:hover, &:focus {
-    @apply text-link-hover border-b-4 border-link-hover;
+    @apply text-link-hover border-b-4 dark:border-none border-link-hover dark:bg-link-hover dark:text-white;
   }
 
   &.disabled, &.disabled:hover, &.disabled:focus {

package/src/assets/stylesheets/tailwind_config.css

@@ -11,6 +11,7 @@
   --color-gray-500: #888888;
   --color-gray-600: #5f656d;
   --color-gray-700: #343A40;
+  --color-gray-750: #2E2E2E;
   --color-gray-800: #262626;
   --color-gray-900: #222222;
   --color-gray-lightest: #f2f2f2;
@@ -203,6 +204,7 @@
   --spacing-card-md: 17.5rem;
   --spacing-card-sm: 11.25rem;
   --spacing-card-xs: 5rem;
+  --card-padding: 30px;
   --spacing-1px: 1px;
   --spacing-modal-lg: 75rem;
   --spacing-modal-md: 43.75rem;
@@ -277,6 +279,7 @@
   --max-w-card-sm: 11.25rem;
   --max-w-card-xs: 5rem;
   --max-w-capped: 43.75rem;
+  --max-w-centered-content: 1600px;
   --shadow-DEFAULT: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.05);
   
   /*//// Grid ////*/

package/src/assets/stylesheets/tailwind_custom_utilities.css

@@ -101,6 +101,11 @@
 @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 text-blocked { color: var(--color-blocked); }
+@utility text-pending { color: var(--color-pending); }
+@utility text-chart-empty { color: var(--color-chart-empty); }
+
+
 
 @utility border-transparent { border-color: var(--color-transparent); }
 @utility border-current { border-color: var(--color-current); }
@@ -183,9 +188,18 @@
 @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); }
+@utility text-card-header {
+  font-size: var(--fontsize-card-header); 
+  font-weight: var( --font-weight-headings);
+  text-transform: uppercase;
+}
+
 
+/* Padding */
+@utility p-card-padding { padding: var(--card-padding); }
 
-/* Spacing classes */
+
+/* min width */
 @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); }
@@ -235,6 +249,8 @@
 @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); }
+
+/* max width */
 @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); }
@@ -250,6 +266,7 @@
 @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); }
+@utility max-w-centered-content { max-width: var(--max-w-centered-content); }
 
 /* Grid classes */
 @utility grid-cols-3-1 { grid-template-columns: var(--grid-cols-3-1); }

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -2,22 +2,40 @@
 @layer theme {
   .dark {
     /* Colors */
-    --color-appbody: #1d1d1d;
+    --color-appbody: #181818;
     --color-appbody-textcolor: #f2f2f2;
+    --color-header: #1d1d1d;
     --color-actionbar: #343A40;
     --color-metasidebar: #262626;
     --color-primary: #78eac1;
     --color-link: #8988eb;
     --color-link-hover: #7954ff;
-    --color-bordercolor: #343A40;
+    --color-bordercolor: #2E2E2E;
     --color-card: #262626;
     --color-disabled: #5f656d;
     --color-listitem: #343A40;
     --color-placeholder: #5f656d;
     --color-tag: #5f656d;
-    --color-label-color: #bfc1c5;
+    --color-label-color: #888888;
+    --color-success: #33BA9E;
+    --color-danger: #FF3131;
+    --color-blocked: #F48D21;
+    --color-pending: #888888;
+    --color-chart-empty: #2E2E2E;
+    --color-info: #326dd1;
+    --color-dark: #222222;
+    --color-card: #1D1D1D;
+    --color-listitem: #262626;
 
     /*//// Border radius ////*/
     --radius: 12px;
+
+    /*//// Spacing ////*/
+    --card-padding: 30px;
+    --spacing-grid-gutter: 40px;
+
+    
+    /*//// Fontsize ////*/
+    --fontsize-card-header: 18px;
   }
 }

package/src/pages/agenticqa/header.haml

@@ -0,0 +1,77 @@
+---
+tags: agenticqa
+title: Header
+---
+
+%nav.header.agenticqa
+  .header-wrapper
+    .navlinks.logo-wrapper
+      %a.navlink.header-logo{href:'#'}
+    .navlinks.left
+      %a.navlink.active{href:'#'} Navlink active
+      %a.navlink{href:'#'} Navlink
+      %a.navlink{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Navlink
+      %details.header-dropdown
+        %summary.navlink Collapsable
+        .dropdown-menu
+          %a.navlink{href:'#'}
+            %span.icon.icon-user  
+            Dropdown-item
+          %a.navlink{href:'#'}
+            %span.icon.icon-cog  
+            Dropdown-item
+          %a.navlink{href:'#'}
+            %span.icon.icon-shutdown 
+            Dropdown-item with a longer text to see how things break and behave
+      %a.navlink.responsive-label{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Responsive label
+    %details.mobile-links
+      %summary.mobile-menu-btn
+        .navlink
+          %span.sr-only Open main menu
+          %span.icon.icon-menu
+      .mobile-menu.sidebar
+        %a.navlink.active{href:'#'}
+          %span.navlink-badge.icon.icon-home
+          Navlink active
+        %a.navlink{href:'#'}
+          %span.navlink-badge.icon.icon-plus
+          Add project
+        %details
+          %summary.navlink
+            %span.icon.icon-product
+            Collapsable
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink.active{href:'#'}
+            %span.icon.icon-test
+            Active child
+    .navlinks.right
+      %details.header-dropdown.user-menu
+        %summary.btn-profile.navlink
+          %span.sr-only Open user menu
+          %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png'}
+          .user-details
+            .profile-role Admin
+            .profile-name Anja Berger
+        .dropdown-menu.profile-dropdown
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-user  
+            Your Profile
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-cog  
+            Settings
+          %a.dropdown-link{href:'#'}
+            %span.icon.icon-shutdown
+            Sign out
+

package/src/pages/components/splitview_item_collapsable.haml

@@ -37,7 +37,7 @@ title: Splitview item collapsable
 .splitview-list
   %details.splitview-group
     %summary.splitview-item
-      .splitview-item-icon.icon.icon-circle.danger
+      .splitview-item-icon.icon.icon-circle-empty
       .splitview-item-text
         .splitview-item-title Splitview group title / Test Case title
         .splitview-item-metainfo

package/src/pages/examples/agenticqa.haml

@@ -0,0 +1,38 @@
+---
+layout: page-example-agenticqa.njk
+title: "Agentic QA"
+tags: "examples"
+---
+
+%main.main-content.centered#ds-splitview-demo
+  .centered-content
+    .grid-splitview
+      .card.p-card-padding.splitview-list
+        %nav.nav-tabs
+          .navlink.active{href:""} 11 Pages
+          .navlink{href:""} 6 Checks
+        %details.splitview-group
+          %summary.splitview-item.unread
+            .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+            .splitview-item-text
+              .splitview-item-title Splitview group title / Test Case title
+            .splitview-item-status
+              .text-with-icon
+                .icon.icon-sync
+                executing checks
+          .splitview-item.selected#ds-splitview-demo-item
+            .splitview-item-icon.icon.icon-cross-circle-filled.danger
+            .splitview-item-text Check title
+          .splitview-item.unread
+            .splitview-item-icon.icon.icon-check-circle-filled.success
+            .splitview-item-text Check title with a lot of lorem ipsum
+          .splitview-item.unread
+            .splitview-item-icon.icon.icon-blocked.blocked
+            .splitview-item-text Check title with a lot of lorem ipsum
+          .splitview-item.unread
+            .splitview-item-icon.icon.icon-sync.pending
+            .splitview-item-text Check title with a lot of lorem ipsum
+      .card.p-card-padding.splitview-details
+        .splitview-details-header
+          %h3.splitview-details-title Splitview-details-title
+