testio-tailwind 3.18.0 → 3.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.18.0",
+	"version": "3.19.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/assets/stylesheets/app.css

@@ -16,6 +16,7 @@
 @import './plugin_themes/select2.css' layer(components);
 @import './plugin_themes/markdown_trix_styles.css' layer(components);
 @import './plugin_themes/pagy.css' layer(components);
+@import './plugin_themes/dropzone.css' layer(components);
 
 /*//// Components ////*/
 @import './components/fonts.css' layer(components);

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

@@ -19,7 +19,7 @@
 }
 
 .form-check input {
-  @apply h-btn-sm w-btn-sm border border-primary dark:border-appbody-textcolor rounded-sm bg-transparent;
+  @apply h-btn-sm w-btn-sm border border-primary dark:border-label-color rounded-sm bg-transparent;
   cursor: pointer;
   flex-shrink: 0;
 }
@@ -123,11 +123,10 @@
 
 
 .form-radio input {
-  @apply w-btn-sm h-btn-sm border border-primary dark:border-appbody-textcolor;
+  @apply w-btn-sm h-btn-sm border border-primary dark:border-label-color;
 
   &:disabled {
-    @apply border-disabled;
-    background-image: url("/assets/images/pattern-striped-bright.png");
+    @apply border-disabled bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
     background-repeat: repeat;
     background-color: transparent;
     cursor: not-allowed;

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

@@ -50,7 +50,7 @@
 }
 
 textarea.form-control {
-  @apply h-auto min-h-btn pt-xs;
+  @apply h-auto min-h-btn py-xs;
 }
 
 .form-control-label {

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

@@ -23,12 +23,11 @@ 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-hidden 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 dark:bg-gray-700;
 }
 
 .form-select-native .select-wrapper select:disabled {
-  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor text-disabled cursor-not-allowed hover:text-disabled bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   &::after {
     @apply bg-disabled;
@@ -43,7 +42,7 @@ select {
 }
 
 .form-select-native option {
-  @apply appearance-none py-xxs;
+  @apply appearance-none py-xxs first:rounded-t last:rounded-b;
   &:hover,
   &:focus {
     @apply bg-link-hover;

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

@@ -4,7 +4,7 @@
 }
 
 .selectable-token label {
-  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer;
+  @apply relative inline-flex items-center justify-start h-btn m-0 py-xs px-md text-primary bg-transparent border border-primary rounded cursor-pointer dark:border-bordercolor dark:rounded-md;
   line-height: normal;
   &:hover, &:focus {
     @apply text-white bg-link-hover border-link-hover;
@@ -106,23 +106,6 @@
   }
 }
 
-
-.toggle-btn-group {
-  @apply flex;
-}
-
-.toggle-btn-group .selectable-token label {
-  @apply rounded-none;
-}
-
-.toggle-btn-group .selectable-token:first-child label {
-  @apply rounded-l;
-}
-
-.toggle-btn-group .selectable-token:last-child label {
-  @apply rounded-r;
-}
-
 /*////// Token LG /////*/
 
 .selectable-token.lg label,
@@ -143,7 +126,7 @@
 }
 
 .selectable-token.lg .icon {
-  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded;
+  @apply flex justify-center items-center mb-xxs w-btn-lg h-btn-lg text-icon-lg text-primary border border-primary rounded dark:rounded-md dark:border-bordercolor;
 }
 
 .selectable-token.lg input:checked + label .icon {
@@ -191,3 +174,23 @@
     @apply block text-icon-xl h-icon-xl my-xs;
   }
 }
+
+
+/*///// Toggle buttons /////*/
+
+
+.toggle-btn-group {
+  @apply flex;
+}
+
+.toggle-btn-group .selectable-token label {
+  @apply rounded-none;
+}
+
+.toggle-btn-group .selectable-token:first-child label {
+  @apply rounded-l dark:rounded-l-md;
+}
+
+.toggle-btn-group .selectable-token:last-child label {
+  @apply rounded-r dark:rounded-r-md;
+}

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

@@ -9,7 +9,7 @@
 }
 
 .toggle-switch-label {
-  @apply inline-block ml-xs text-base font-normal text-black cursor-pointer;
+  @apply inline-block ml-xs text-base font-normal cursor-pointer dark:text-appbody-textcolor;
 }
 
 .toggle-switch input,
@@ -18,7 +18,7 @@
 }
 
 .toggle-switch .slider {
-  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer;
+  @apply absolute top-0 left-0 right-0 bottom-0 bg-gray-light transition-transform cursor-pointer dark:bg-gray-700;
   border-radius: 20px;
 }
 
@@ -48,8 +48,7 @@
 }
 
 .toggle-switch.disabled .slider {
-  @apply border border-disabled;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   background-color: transparent;
   cursor: not-allowed;
@@ -60,6 +59,10 @@
   }
 }
 
+.dark .toggle-switch.disabled .slider::before {
+  @apply bg-gray-700;
+}
+
 .toggle-switch input:disabled + .slider,
 .toggle-switch input:disabled + label {
   background-color: transparent;

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

@@ -18,10 +18,10 @@
 }
 
 .attachment {
-  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded;
+  @apply relative inline-flex flex-col h-auto w-xxl overflow-visible rounded dark:rounded-md select-none;
 
   & .attachment-thumb {
-    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary rounded text-white dark:border-bordercolor;
+    @apply relative flex justify-center items-center w-xxl h-xxl overflow-hidden border-1 border-primary bg-primary text-white dark:border-bordercolor rounded dark:rounded-md;
 
     & .icon {
       @apply text-icon-lg;
@@ -37,11 +37,11 @@
   }
 
   & .attachment-name {
-    @apply mt-xxs text-xs font-normal text-center text-black line-clamp-3 leading-tight whitespace-normal break-all;
+    @apply mt-xxs text-xs font-normal text-center text-appbody-textcolor line-clamp-3 leading-tight whitespace-normal break-all;
   }
 
   & .attachment-btn {
-    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr;
+    @apply absolute flex justify-center top-0 right-0 w-btn-sm h-btn-sm p-0 text-icon rounded-tr dark:rounded-md;
   }
 }
 
@@ -54,7 +54,7 @@
 }
 
 
-/* Selectable / checkbox attachment */
+/*///// Selectable / checkbox attachment /////*/
 
 .attachment.selectable {
   @apply ml-spacing;
@@ -69,7 +69,7 @@
 }
 
 .attachment.selectable .attachment-thumb {
-  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover;
+  @apply bg-gray border border-bordercolor hover:border-link-hover hover:bg-link-hover select-none;
 }
 
 .attachment.selectable label::before {
@@ -77,10 +77,19 @@
   content: "";
 }
 
+.dark .attachment.selectable label::before {
+  @apply border-label-color rounded-sm;
+}
+
 .attachment.selectable input:checked + label::before {
-  @apply bg-info;
-  mask-image: url("/assets/images/icons/checkbox-sm-checked.svg");
+  @apply bg-info border-info;
+}
+
+.attachment.selectable input:checked + label::after {
+  @apply absolute top-0 -left-spacing h-md w-md bg-white border-0;
+  mask-image: url("/assets/images/icons/checkbox-background-sm.svg");
   mask-repeat: no-repeat;
+  content: "";
 }
 
 .attachment.selectable input:checked + label .attachment-thumb {

package/src/assets/stylesheets/plugin_themes/dropzone.css

@@ -2,7 +2,7 @@
 /* Dropzone plugin */
 
 .dropzone {
-  @apply relative flex justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-black hover:border-link-hover hover:text-link-hover cursor-pointer;
+  @apply relative flex flex-col justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-appbody-textcolor hover:border-link-hover hover:text-link-hover cursor-pointer;
 }
 
 .dz-preview {

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

@@ -91,11 +91,11 @@ select.select2 {
 .select2-container {
   .select2-selection,
   .select2-search__field {
-    @apply bg-primary border-primary text-white;
+    @apply bg-primary border-primary text-white dark:text-white dark:bg-gray-700 dark:border-0;
   }
 
   .select2-dropdown {
-    @apply bg-primary border-link-hover text-white;
+    @apply bg-primary border-link-hover text-white dark:bg-gray-700 dark:border-0;
   }
 
   .select2-selection__arrow {
@@ -107,7 +107,7 @@ select.select2 {
   }
 
   .select2-search__field {
-    @apply bg-petrol-dark;
+    @apply bg-petrol-dark dark:bg-gray-800 dark:rounded-s-md;
   }
 
   .select2-results__option--highlighted {
@@ -116,15 +116,15 @@ select.select2 {
 
   &.select2-container--open {
     &.select2-container--below .select2-selection {
-      @apply border-primary;
+      @apply border-primary dark:border-0;
     }
 
     &.select2-container--above .select2-selection {
-      @apply border-primary;
+      @apply border-primary dark:border-0;
     }
 
     .select2-dropdown--below {
-      @apply border-t border-white;
+      @apply border-t border-white dark:border-bordercolor;
     }
 
     .select2-dropdown--above {
@@ -143,12 +143,12 @@ select.select2 {
   @apply min-h-btn p-xs;
 }
 
-.select2-container .select2-search--inline .select2-search__field {
-  @apply bg-transparent m-0 p-xxs;
+.select2-container .select2-selection--multiple .select2-search.select2-search--inline {
+  @apply relative w-full m-0 p-0;
 }
 
-.select2-search.select2-search--inline {
-  @apply relative;
+.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
+  @apply m-0 px-sm py-xxs dark:bg-black;
 }
 
 .select2-container .select2-selection--multiple .select2-selection__rendered {
@@ -156,14 +156,14 @@ select.select2 {
 }
 
 .select2-container .select2-search--inline .select2-search__field {
-  @apply bg-petrol-dark text-white px-xs;
+  @apply bg-petrol-dark text-white px-xs dark:bg-transparent;
   width: 100% !important;
 }
 
 /*/ multi select items */
 
 .select2-container--testio li.select2-selection__choice {
-  @apply relative inline-flex flex-row-reverse flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+  @apply relative inline-flex flex-row-reverse flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded dark:text-white dark:bg-gray-600 dark:border-0;
 }
 
 .select2-selection__choice__display {
@@ -171,9 +171,7 @@ select.select2 {
 }
 
 .select2-selection__choice__remove {
-  @apply flex justify-center items-center w-btn-xs text-primary rounded-r bg-transparent border-0;
-  margin-top: -2px;
-  margin-bottom: -2px;
+  @apply flex justify-center items-center w-btn-xs text-primary rounded-r bg-transparent border-0 dark:text-white cursor-pointer;
   font-size: 0;
   &::after {
     @apply bg-primary;
@@ -195,7 +193,7 @@ select.select2 {
 /*///// Optgroups /////*/
 
 .select2-results__group {
-  @apply py-xs px-sm;
+  @apply py-xs px-sm dark:pb-sm dark:text-label dark:text-label-color dark:uppercase dark:font-normal;
 }
 
 .select2-results__option.select2-results__option--group {
@@ -209,8 +207,7 @@ select.select2 {
 /*///// Disabled /////*/
 
 .select2-container--disabled .select2-selection {
-  @apply border border-bordercolor text-disabled cursor-not-allowed bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+  @apply border border-bordercolor text-disabled cursor-not-allowed bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   &:hover {
     @apply text-disabled;

package/src/assets/stylesheets/plugin_themes/tom_select.css

@@ -108,7 +108,7 @@
   }
 
   a::after {
-    @apply inline-block w-xs h-xs bg-primary;
+    @apply inline-block w-xs h-xs bg-primary dark:bg-white;
     content: "";
     mask-image: url("/assets/images/icons/cross-thick.svg");
   }

package/src/pages/forms/uploads.pug

@@ -17,7 +17,7 @@ title: Uploads and attachments
     |  });
 
 .form-grid-single
-  form.form-group.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+  form.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
     .dz-default.dz-message
       p.dropzone-msg-title Click to upload a file or drag and drop
       p.dropzone-msg-desc Files up to 10MB
@@ -65,7 +65,7 @@ title: Uploads and attachments
 
 p.mt-3 Form errors example
 .form-grid-single
-  form.form-group.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+  form.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
     .dz-default.dz-message
       p.dropzone-msg-title Click to upload a file or drag and drop
       p.dropzone-msg-desc Files up to 10MB
@@ -74,7 +74,7 @@ p.mt-3 Form errors example
 
 .bg-black.p-md.mt-3
   .form-grid-single
-    form.form-group.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
+    form.dropzone.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
       .dz-default.dz-message
         p.dropzone-msg-title Click to upload a file or drag and drop
         p.dropzone-msg-desc Files up to 10MB