testio-tailwind 3.3.0 → 3.5.0

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

@@ -0,0 +1,107 @@
+
+/* 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;
+}
+
+.dz-preview {
+  @apply relative inline-flex flex-col h-auto w-xxl mr-0 border-0 bg-transparent overflow-hidden shadow-none;
+
+  & .dz-details {
+    @apply mt-xxs text-center text-xs text-black;
+    font-weight: normal;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  & .dz-remove {
+    @apply absolute flex justify-center items-center top-0 right-0 w-btn-sm h-btn-sm bg-danger rounded-tr hover:bg-link-hover;
+    z-index: 2;
+  }
+
+  & .dz-remove::after {
+    @apply inline-block h-icon-sm bg-white;
+    content: "";
+    width: 14px;
+    mask-image: url("/assets/images/icons/remove.svg");
+    mask-repeat: no-repeat;
+  }
+}
+
+.dz-preview .dz-image {
+  @apply relative flex justify-center items-center w-xxl h-xxl text-white bg-primary rounded overflow-hidden;
+  border-image-width: 0;
+}
+
+
+/*/// Fallback image  ///*/
+
+.dz-image::after {
+  @apply absolute block top-0 left-0 w-full h-full;
+  content: "";
+  background-image: url("/assets/images/icons/attachment-fallbackimage.svg");
+  background-size: cover;
+}
+
+.dz-preview .dz-image .icon {
+  @apply text-icon-lg;
+}
+
+.dz-preview .dz-image img {
+  @apply h-xxl min-w-full;
+  z-index: 1;
+}
+
+.dz-filename {
+  line-height: 1.1;
+}
+
+.dz-success-mark {
+  display: none;
+}
+
+.dz-error-mark {
+  display: none;
+}
+
+.dz-started {
+  justify-content: start;
+}
+
+.dz-message {
+  align-self: center;
+}
+
+.dz-started .dz-message {
+  display: none;
+}
+
+.dz-error-message {
+  @apply mt-xxs text-danger text-xs;
+}
+
+.dropzone-msg-title {
+  @apply text-center;
+}
+
+.dropzone-msg-desc {
+  @apply text-xs text-center;
+}
+
+.dz-size, .dz-size strong {
+  @apply text-xs;
+}
+
+.dropzone.inverted {
+  @apply text-white hover:text-link-hover;
+}
+
+.dropzone.inverted .dz-preview, 
+.dropzone.inverted .dz-preview .dz-image {
+  @apply text-white;
+}
+
+.dropzone.inverted .dz-details {
+  @apply text-white;
+}

package/src/assets/stylesheets/{components → plugin_themes}/tom_select.css

@@ -2,7 +2,7 @@
 /*///// Tom-Select theme https://tom-select.js.org /////*/
 
 .ts-control {
-  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded;
+  @apply relative overflow-hidden flex w-full justify-start items-stretch min-h-btn py-xs pl-sm text-base rounded text-white dark:text-white;
   padding-right: 40px !important;
 }
 
@@ -13,7 +13,7 @@
 .ts-control,
 .full .ts-control, 
 .ts-wrapper.single.input-active .ts-control {
-  @apply bg-primary dark:bg-card border-bordercolor cursor-pointer;
+  @apply bg-primary border-bordercolor cursor-pointer dark:text-white dark:bg-gray-700;
   &:hover {
     @apply bg-link-hover text-white;
   }
@@ -23,7 +23,7 @@
 }
 
 .ts-control input::placeholder {
-  @apply text-placeholder italic text-base;
+  @apply text-placeholder dark:text-label-color italic text-base;
 }
 
 .ts-control::before {
@@ -48,7 +48,7 @@
 .form-select.inverted .ts-control:hover, 
 .form-group.inverted .ts-control:hover, 
 .multi-select.inverted .ts-control:hover {
-  @apply bg-link-hover text-white cursor-pointer;
+  @apply bg-link-hover text-white dark:text-white cursor-pointer;
 
   &::before {
     @apply bg-link-hover;
@@ -64,7 +64,7 @@
 }
 
 .ts-wrapper .ts-dropdown {
-  @apply m-0 bg-petrol-500 text-white border-0 overflow-hidden rounded-b;
+  @apply m-0 bg-petrol-500 dark:bg-gray-700 text-white border-0 overflow-hidden rounded-b;
 }
 
 .ts-dropdown-content {
@@ -79,10 +79,10 @@
 }
 
 .ts-dropdown .option.selected {
-  @apply text-white bg-primary;
+  @apply text-white bg-primary dark:bg-gray-700;
 
   &::before {
-    @apply inline-block w-icon h-icon mr-icon-spacing bg-white;
+    @apply inline-block w-icon h-icon mr-icon-spacing bg-white dark:bg-primary;
     content: "";
     mask-image: url("/assets/images/icons/check-circle-filled.svg");
   } 
@@ -96,7 +96,9 @@
 /* Multi select item */
 
 .ts-wrapper.multi .ts-control div.item {
-  @apply relative flex-row flex-grow-0 items-stretch mr-xxs mb-xxs pl-xxs pr-0 text-sm text-black bg-white rounded;
+  @apply relative flex-row flex-grow-0 items-stretch mr-xs pl-xs pr-0 text-sm text-black bg-white dark:text-white dark:bg-gray-600 rounded;
+  margin-top: 2px;
+  margin-bottom: 2px;
   line-height: 25px;
 
   a {
@@ -120,6 +122,11 @@
   }
 }
 
+.ts-wrapper.multi.plugin-remove_button:not(.rtl) .item.active .remove,
+.ts-wrapper.multi.plugin-remove_button:not(.rtl) .item .remove {
+  @apply dark:border-gray-700
+}
+
 .ts-wrapper.multi .ts-control {
   padding-right: 40px !important;
 }
@@ -128,19 +135,40 @@
   @apply bg-link-hover;
 }
 
-
 .ts-wrapper .optgroup-header {
   @apply pt-xs px-sm pb-xxs text-sm text-gray-light bg-transparent;
 }
 
+.ts-wrapper.multi .ts-control div.item.active {
+  @apply bg-gray-500;
+}
+
 
 /*///// Validation errors /////*/
 
 .field_with_errors .ts-control,
 .field_with_errors .ts-wrapper.focus .ts-control,
 .form-select.inverted .field_with_errors .ts-control,
-.form-group.inverted .field_with_errors .ts-control {
-  @apply bg-danger;
+.form-group.inverted .field_with_errors .ts-control,
+.field_with_errors .ts-control, 
+.field_with_errors .full .ts-control, 
+.field_with_errors .ts-wrapper.single.input-active .ts-control {
+  @apply bg-danger dark:bg-danger text-white;
+}
+
+.field_with_errors .ts-control:hover,
+.field_with_errors .ts-wrapper.focus .ts-control:hover,
+.form-select.inverted .field_with_errors .ts-control:hover,
+.form-group.inverted .field_with_errors .ts-control:hover,
+.field_with_errors .ts-control:hover, 
+.field_with_errors .full .ts-control:hover, 
+.field_with_errors .ts-wrapper.single.input-active .ts-control:hover {
+  @apply bg-link-hover dark:bg-link-hover text-white;
+}
+
+
+.field_with_errors input::placeholder {
+  @apply text-white;
 }
 
 .field_with_errors .ts-wrapper .ts-dropdown,
@@ -166,12 +194,15 @@
 /*///// Disabled /////*/
 
 .ts-wrapper.disabled .ts-control,
-.ts-wrapper.locked .ts-control {
-  @apply text-disabled-dark border border-disabled cursor-not-allowed bg-transparent;
-  background-image: url("/assets/images/pattern-striped-bright.png");
+.ts-wrapper.locked .ts-control,
+.ts-wrapper.disabled .ts-control, 
+.ts-wrapper.disabled .full .ts-control,
+.ts-wrapper.single.input-active.disabled .ts-control,
+.ts-wrapper.tom-select.single.disabled.locked .ts-control {
+  @apply text-disabled-dark border border-disabled cursor-not-allowed bg-transparent bg-pattern-disabled-bright dark:bg-pattern-disabled-dark;
   background-repeat: repeat;
   &:hover{
-    @apply text-disabled;
+    @apply text-disabled bg-transparent cursor-not-allowed;
   }
   &::before {
     @apply bg-transparent;
@@ -179,6 +210,9 @@
   &::after {
     @apply bg-disabled-dark;
   }
+  & input {
+    @apply bg-transparent;
+  }
   & input::placeholder {
     @apply text-disabled-dark;
   }

package/src/assets/stylesheets/{components → plugin_themes}/trix_editor.css

@@ -46,7 +46,7 @@ trix-toolbar .trix-button-row {
 }
 
 trix-toolbar .trix-button {
-  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded bg-transparent;
+  @apply inline-flex justify-center items-center flex-shrink-0 w-btn-sm h-btn-sm min-w-btn-sm border-0 rounded-xs bg-transparent;
   font-size: 0; /* Fix for safari bug, we don't need to show any text in those buttons */
   &:hover,
   &:focus {

package/src/assets/stylesheets/tailwind_config.css

@@ -8,7 +8,7 @@
   --color-gray-200: #e6e6e6;
   --color-gray-300: #bfc1c5;
   --color-gray-400: #9fa2a8;
-  --color-gray-500: #7c8188;
+  --color-gray-500: #888888;
   --color-gray-600: #5f656d;
   --color-gray-700: #343A40;
   --color-gray-800: #262626;
@@ -17,7 +17,7 @@
   --color-gray-lighter: #e6e6e6;
   --color-gray-light: #bfc1c5;
   --color-gray-DEFAULT: #9fa2a8;
-  --color-gray-dark: #7c8188;
+  --color-gray-dark: #888888;
   --color-gray-darker: #5f656d;
   --color-gray-darkest: #262626;
   --color-red-200: #FF3131;
@@ -278,8 +278,6 @@
   --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;
@@ -304,3 +302,4 @@
   --breakpoint-2xl: 1600px;
   --breakpoint-3xl: 1930px;
 }
+

package/src/assets/stylesheets/tailwind_custom_utilities.css

@@ -265,4 +265,28 @@
 @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); }
+@utility grid-rows-auto-auto { grid-template-rows: var(--grid-rows-auto-auto); }
+
+
+/* Background image */
+@utility bg-pattern-disabled-bright { background-image: url('/assets/images/pattern-striped-bright.png'); }
+@utility bg-pattern-disabled-dark { background-image: url('/assets/images/pattern-striped-dark.png'); }
+
+
+/*
+  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.
+
+  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);
+  }
+}

package/src/assets/stylesheets/tailwind_theme_dark.css

@@ -11,10 +11,11 @@
     --color-link-hover: #7954ff;
     --color-bordercolor: #343A40;
     --color-card: #262626;
-    --color-disabled: #343A40;
+    --color-disabled: #5f656d;
     --color-listitem: #343A40;
     --color-placeholder: #5f656d;
     --color-tag: #5f656d;
+    --color-label-color: #bfc1c5;
 
     /*//// Border radius ////*/
     --radius: 12px;

package/src/pages/charts/area.haml

@@ -5,7 +5,7 @@ title: Area
 
 %details.listitem.mb-md
   %summary.listitem-header
-    .listitem-title
+    .listitem-title.flex.items-center
       %span.icon.icon-format-code.mr-xs
       Initialize area chart
     .listitem-metrics
@@ -20,13 +20,13 @@ title: Area
       %pre.code.break-spaces
         :plain
           import { createChartArea } from './modules/echarts_area';
-          createChartArea (target, targetDataX, targetDataY, chartColor);
+          createChartArea (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor)
     .listitem-subheadline echarts_area.js
     .listitem-card
       %pre.code.break-spaces
         :plain
           import * as echarts from 'echarts';
-          export function createChartArea (target, targetDataX, targetDataY, chartColor) {
+          export function createChartArea (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
             var chartHeight = 190;
             var dom = document.getElementById(target);
             var myChartArea = echarts.init(dom, null, {
@@ -53,7 +53,8 @@ title: Area
                 },
                 axisLabel: {
                   show: true,
-                  margin: 15
+                  margin: 15,
+                  color: labelColor,
                 },
                 axisTick: {
                   show: false
@@ -61,7 +62,8 @@ title: Area
                 splitLine: {
                   show: true,
                   lineStyle: {
-                    type: 'dashed'
+                    type: 'dashed',
+                    color: borderColor
                   }
                 }
               },
@@ -76,7 +78,8 @@ title: Area
                   type: 'line',
                   lineStyle: {
                     width: 1,
-                    color: chartColor
+                    color: chartColor,
+                    borderColor: borderColor
                   },
                   areaStyle: {
                     opacity: 1,
@@ -95,10 +98,11 @@ title: Area
                   itemStyle: {
                     borderWidth: 2,
                     color: chartColor,
-                    borderColor: '#ffffff'
+                    borderColor: borderColor
                   },
                   label: {
-                    show: true
+                    show: true,
+                    color: valueColor,
                   },
                   areaStyle: {
                     opacity: 0
@@ -112,13 +116,13 @@ title: Area
             }
             window.addEventListener('resize', myChartArea.resize);
           }
-.row
+.grid.gap-spacing{class:"lg:grid-cols-2"}
   .col-xl-6
     .card.p-md.mb-xs
       .echarts-container#echarts-area-1
-    %details.listitem.mb-md
+    %details.listitem
       %summary.listitem-header
-        .listitem-title
+        .listitem-title.flex.items-center
           %span.icon.icon-format-code.mr-xs
           Initialize area chart with blue light color
         .listitem-metrics
@@ -133,7 +137,7 @@ title: Area
           %pre.code.break-spaces
             :plain
               import { createChartArea } from './modules/echarts_area';
-              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight);
+              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
         .listitem-subheadline dataAreaMonths.js
         .listitem-card
           %pre.code.break-spaces
@@ -164,13 +168,13 @@ title: Area
             :plain
               export const colorBlueLight = '#21bef4';
   .col-xl-6
-    .card.mb-xs.p-xs
+    .card.mb-xs.p-md.bg-gray-800
       .echarts-container#echarts-area-2
-    %details.listitem.mb-md
+    %details.listitem
       %summary.listitem-header
-        .listitem-title
+        .listitem-title.flex.items-center
           %span.icon.icon-format-code.mr-xs
-          Initialize area chart with blue light color
+          Initialize darkmode area chart 
         .listitem-metrics
         .listitem-actions
           .btn.collapse-btn
@@ -183,7 +187,7 @@ title: Area
           %pre.code.break-spaces
             :plain
               import { createChartArea } from './modules/echarts_area';
-              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorInfo);
+              createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
         .listitem-subheadline dataAreaMonths.js
         .listitem-card
           %pre.code.break-spaces