testio-tailwind 2.2.0 → 3.0.0

package/.eleventy.js

@@ -6,11 +6,9 @@ const markdownIt = require('./utils/markdown.js');
 module.exports = function (eleventyConfig) {
     // Folders to copy to build dir (See. 1.1)
     eleventyConfig.addPassthroughCopy({
-        "src/static/site.webmanifest": ".", 
-        "src/static/*": "static", 
-        "src/assets/fonts/*": "assets/fonts",
-        "src/static/downloads/*": "downloads",
-        "src/assets/images/*": "assets/images"
+        "src/static/site.webmanifest": "./",
+        "src/static/*": "static",
+        "src/static/downloads/*": "downloads"
     })
 
     // Filters 
@@ -45,7 +43,7 @@ module.exports = function (eleventyConfig) {
             includes: "_includes",
             layouts: "_layouts"
         },
-        templateFormats: ["html", "md", "njk", "pug", "haml", "png", "svg", "eot", "ttf", "woff", "woff2", "jpg", "otf"],
+        templateFormats: ["html", "md", "njk", "pug", "haml"],
         htmlTemplateEngine: "njk",
 
         // 1.1 Enable eleventy to pass dirs specified above

package/package.json

@@ -1,19 +1,20 @@
 {
 	"name": "testio-tailwind",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",
+		"create-dist": "mkdirp dist",
+		"create-static": "mkdirp dist/static",
 		"dev:11ty": "eleventy --serve --watch",
-		"dev:tailwind": "npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --watch",
 		"dev:scripts": "webpack --watch --config webpack.config.js",
-		"build:tailwind": " npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --minify",
+		"dev:tailwind": "npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --watch",
 		"build:11ty": "eleventy",
-		"build:scripts": "webpack --mode production --config webpack.config.js",
+		"build:tailwind": "npx @tailwindcss/cli -i ./src/assets/stylesheets/app.css -o dist/static/app.compiled.css --minify",
+		"build:scripts": "webpack --config webpack.config.js --mode production ",
 		"build:icon-page": "node icon-classes-extractor.js",
-		"build:copy_entry_file": "cp index.html dist",
-		"start": "cross-env run-p dev:* --print-label",
-		"build": "cross-env run-s clean build:* --print-label"
+		"start": "run-s clean create-dist && cross-env run-p dev:* --print-label",
+		"build": "cross-env run-s clean create-dist create-static build:* --print-label"
 	},
 	"author": "test IO",
 	"license": "",

package/src/_includes/header.njk

@@ -31,8 +31,6 @@
     </details>
   </div>
 
-
-  <!-- Mobile menu button-->
   <details class="mobile-links">
     <summary class="mobile-menu-btn"><div class="navlink"><span class="sr-only">Open main menu</span><!-- Icon when menu is closed.--><span class="icon icon-menu" aria-hidden="true"></span></div></summary>
     <div class="mobile-menu sidebar">
@@ -62,4 +60,18 @@
     </div>
   </details>
 
+  <div class="navlinks right">
+    <button onclick="(() => document.body.classList.toggle('dark'))()"
+          class="navlink">
+          <svg class="w-icon h-icon fill-purple hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+          </svg>
+          <svg class="w-icon h-icon fill-purple block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                  d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                  fill-rule="evenodd" clip-rule="evenodd"></path>
+          </svg>
+      </button>
+  </div>
+
 </header>

package/src/_includes/page-with-sidebar-nocode.njk

@@ -1,7 +1,8 @@
 
 <nav class="sidebar manager">
   <div class="navlinks">
-  {% for section in collection %}
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
     <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
   {% endfor %}
   </div>
@@ -12,11 +13,12 @@
 
     {% for item in navigation.items %}
       {% if page.url == item.url %}
-        <h1>{{ item.text }}</h1>
+        <h1 class="mb-heading">{{ item.text }}</h1>
       {% endif %}
     {% endfor %}
 
-    {%- for section in collection -%}
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
       <section class="section" id="{{ section.data.title }}">
         <div class="section-header">
           <h4 class="section-title">{{ section.data.title }}</h2>

package/src/_includes/page-with-sidebar.njk

@@ -1,9 +1,10 @@
 
 <nav class="sidebar manager">
   <div class="navlinks">
-  {% for section in collection %}
-    <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
-  {% endfor %}
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
+      <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
+    {% endfor %}
   </div>
 </nav>
 
@@ -12,11 +13,12 @@
 
     {% for item in navigation.items %}
       {% if page.url == item.url %}
-        <h1>{{ item.text }}</h1>
+        <h1 class="mb-heading">{{ item.text }}</h1>
       {% endif %}
     {% endfor %}
 
-    {%- for section in collection -%}
+    {% set sortedSections = collection | sort(attribute='data.title') %}
+    {% for section in sortedSections %}
       <section class="section" id="{{ section.data.title }}">
         <div class="section-header">
           <h4 class="section-title">{{ section.data.title }}</h2>
@@ -30,12 +32,11 @@
         {{ section.templateContent | safe }}
 
         <details class="mt-3">
-          <summary class="btn btn-sm btn-gray">
-            <span class="icon icon-format-code mr-icon-spacing"></span>
-            <span>Show source</span>
+          <summary class="btn btn-sm btn-secondary inline-block cursor-pointer mb-2">
+            Show source
           </summary>
-          <div class="ds-code-preview">
-            <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
+          <div class="prose max-w-none bg-gray-light p-2 rounded mb-1">
+            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
           </div>
         </details>
       </section>
@@ -44,3 +45,4 @@
 </main>
 
 
+

package/src/assets/images/assets_issuing/logo_bancontact.svg

@@ -0,0 +1,3 @@
+<svg width="49" height="30" viewBox="0 0 49 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.65137 24.666C9.1168 24.666 9.84473 25.4442 9.84473 26.79V29.5615C9.43599 29.7708 8.66849 30 7.67188 30C6.30612 30 5.61816 29.3318 5.61816 28.4346C5.61829 27.4477 6.42589 26.8693 7.62207 26.8594C7.91917 26.8648 8.21549 26.8918 8.50879 26.9395V26.7002C8.50879 26.0921 8.1601 25.8027 7.49219 25.8027C7.04242 25.7971 6.59578 25.8784 6.17676 26.042L5.92676 24.9658C6.35534 24.7864 7.04334 24.6661 7.65137 24.666ZM18.6611 24.666C19.1779 24.6635 19.6904 24.7659 20.167 24.9658L19.9072 26.0518C19.5513 25.8976 19.169 25.8131 18.7812 25.8027C17.9738 25.8027 17.5352 26.3715 17.5352 27.3086C17.5352 28.335 17.9936 28.8631 18.8506 28.8633C19.2332 28.8528 19.6106 28.765 19.958 28.6045L20.1768 29.7109C19.7254 29.9118 19.2351 30.0105 18.7412 30C17.0864 30 16.1299 28.9726 16.1299 27.3477C16.1301 25.7331 17.0765 24.6662 18.6611 24.666ZM23.1387 24.666C24.6838 24.666 25.6211 25.7331 25.6211 27.3281C25.6211 28.9332 24.6839 30 23.1387 30C21.6036 29.9999 20.6465 28.9331 20.6465 27.3281C20.6465 25.7332 21.6036 24.6661 23.1387 24.666ZM33.6465 24.7861H34.7539V25.8828H33.6465V28.0156C33.6465 28.5938 33.8864 28.8633 34.335 28.8633C34.5127 28.8628 34.69 28.843 34.8633 28.8037L34.9326 29.9102C34.648 29.9732 34.3569 30.0035 34.0654 30C32.8793 29.9999 32.2715 29.3519 32.2715 28.0361V25.8828H31.5938V24.7861H32.2715V23.6797L33.6465 23.6094V24.7861ZM37.5176 24.666C38.983 24.666 39.7109 25.4442 39.7109 26.79V29.5615C39.3022 29.7708 38.5347 30 37.5381 30C36.1723 30 35.4844 29.3318 35.4844 28.4346C35.4845 27.4477 36.2921 26.8693 37.4883 26.8594C37.7854 26.8648 38.0817 26.8918 38.375 26.9395V26.7002C38.375 26.0921 38.0263 25.8027 37.3584 25.8027C36.9086 25.7971 36.462 25.8784 36.043 26.042L35.793 24.9658C36.2215 24.7864 36.9096 24.6661 37.5176 24.666ZM42.9131 24.666C43.4297 24.6635 43.9415 24.766 44.418 24.9658L44.1592 26.0518C43.8031 25.8974 43.4202 25.8131 43.0322 25.8027C42.2248 25.8028 41.7861 26.3715 41.7861 27.3086C41.7862 28.3352 42.2453 28.8633 43.1025 28.8633C43.485 28.8528 43.8617 28.765 44.209 28.6045L44.4277 29.7109C43.9764 29.9117 43.4861 30.0105 42.9922 30C41.3375 29.9999 40.3809 28.9726 40.3809 27.3477C40.381 25.7329 41.3282 24.666 42.9131 24.666ZM47.0244 24.7861H48.1309V25.8828H47.0244V28.0156C47.0244 28.5938 47.2633 28.8633 47.7119 28.8633C47.8897 28.8628 48.0669 28.843 48.2402 28.8037L48.3096 29.9102C48.025 29.9732 47.7338 30.0035 47.4424 30C46.2563 29.9999 45.6485 29.3519 45.6484 28.0361V25.8828H44.9707V24.7861H45.6484V23.6797L47.0244 23.6094V24.7861ZM2.15332 22.9023C3.71831 22.9024 4.72543 23.49 4.72559 24.7061C4.72559 25.3937 4.40637 25.8722 3.95801 26.1514C4.60584 26.4504 4.98428 27.029 4.98438 27.8164C4.98438 29.2221 3.95733 29.8799 2.3623 29.8799H0V22.9023H2.15332ZM13.0664 24.666C14.5218 24.666 15.3593 25.3841 15.3594 26.71V29.8799H13.9834V26.8096C13.9833 26.1219 13.6645 25.8028 13.0566 25.8027C12.7547 25.7985 12.4547 25.8599 12.1787 25.9824V29.8799H10.8135V25.1055C11.5299 24.8177 12.2944 24.668 13.0664 24.666ZM28.6699 24.666C30.1253 24.666 30.9628 25.3841 30.9629 26.71V29.8799H29.5869V26.8096C29.5868 26.1219 29.2682 25.8027 28.6602 25.8027C28.3583 25.7985 28.0592 25.86 27.7832 25.9824V29.8799H26.417V25.1055C27.1333 24.8177 27.898 24.6681 28.6699 24.666ZM7.80078 27.7266C7.34242 27.7267 6.9834 27.9066 6.9834 28.375C6.9834 28.7937 7.28318 29.0127 7.81152 29.0127C8.05165 29.0205 8.29014 28.9726 8.50879 28.873V27.8066C8.27645 27.755 8.03879 27.7279 7.80078 27.7266ZM37.668 27.7266C37.2094 27.7266 36.8506 27.9064 36.8506 28.375C36.8506 28.7937 37.1494 29.0127 37.6777 29.0127C37.9179 29.0205 38.1563 28.9726 38.375 28.873V27.8066C38.1428 27.755 37.9058 27.7279 37.668 27.7266ZM23.1387 25.8027C22.441 25.8028 22.0518 26.3911 22.0518 27.3281C22.0518 28.2751 22.441 28.8632 23.1387 28.8633C23.8465 28.8633 24.2158 28.2752 24.2158 27.3281C24.2158 26.3911 23.8465 25.8027 23.1387 25.8027ZM1.38574 28.6641H2.24316C3.08042 28.664 3.56929 28.4547 3.56934 27.7969C3.56934 27.1489 3.14986 26.8799 2.3623 26.8799H1.38574V28.6641ZM1.38574 25.8027H2.41211C3.04009 25.8027 3.30953 25.4939 3.30957 24.9258C3.30957 24.3176 2.82104 24.1182 2.16309 24.1182H1.38574V25.8027ZM24.1553 9.70605C20.5155 14.5592 16.8753 19.4131 9.5957 19.4131H0V9.70605H24.1553ZM48.3096 0V9.70605H24.1553C27.7949 4.85304 31.4346 8.37558e-05 38.7139 0H48.3096Z" fill="white"/>
+</svg>

package/src/assets/scripts/modules/echarts_gauge.js

@@ -52,7 +52,8 @@ export function createChartGauge (target, targetData) {
           top: 0,
           offsetCenter: [0, 35],
           fontSize: 11,
-          lineHeight: 12
+          lineHeight: 12,
+          color: inherit,
         },
         detail: {
           top: 10,

package/src/assets/stylesheets/app.css

@@ -4,6 +4,7 @@
 
 @import "tailwindcss";
 @import './tailwind_config.css';
+@import './tailwind_theme_dark.css';
 @import './tailwind_custom_utilities.css';
 
 @import './components/reset.css' layer(base);
@@ -15,6 +16,7 @@
 
 @import './components/actionbar.css' layer(components);
 @import './components/buttons.css' layer(components);
+@import './components/badges.css' layer(components);
 @import './components/cards.css' layer(components);
 @import './components/header.css' layer(components);
 @import './components/layout.css' layer(components);
@@ -65,6 +67,7 @@
 @import './components/select.css' layer(components);
 @import './components/test_header.css' layer(components);
 @import './components/ratingscale.css' layer(components);
+@import './components/scrollbars.css' layer(components);
 
 @import './components/customer/customer_header.css' layer(components);
 @import './components/customer/customer_sidebar.css' layer(components);

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

@@ -13,7 +13,7 @@ footer.actionbar,
 footer.actionbar .btn-primary,
 .splitview-list-actionbar .btn-primary,
 .splitview-details-actionbar .btn-primary {
-  @apply text-primary bg-white border-white hover:text-white hover:bg-link-hover hover:border-link-hover;
+  @apply text-primary dark:text-appbody bg-white border-white hover:text-white hover:bg-link-hover hover:border-link-hover;
 }
 
 footer.actionbar .btn-secondary,

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

@@ -0,0 +1,56 @@
+/*/// Card badges ///*/
+
+.card .card-badge {
+  @apply absolute top-0 right-0 overflow-hidden;
+  width: 65px;
+  height: 65px;
+}
+
+.card .card-badge::before {
+  @apply absolute block bg-gray-darker;
+  content: "";
+  transform: rotate(45deg);
+  width: 100px;
+  height: 25px;
+  right: -25px;
+  top: 10px;
+}
+
+.card .card-badge::after {
+  @apply absolute inline-block w-icon-xs h-icon-xs bg-white;
+  content: "";
+  right: 14px;
+  top: 17px;
+  mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
+  mask-repeat: no-repeat;
+}
+
+.card .card-badge.success {
+  &::before {
+    @apply bg-success;
+  }
+  &::after {
+    mask-image: url("/assets/images/icons/check-thick.svg");
+    right: 16px;
+  }
+}
+
+.card .card-badge.danger,
+.card .card-badge.high-priority {
+  &::before {
+    @apply bg-danger;
+  }
+  &::after {
+    mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
+  }
+}
+
+.card .card-badge.info, 
+.card .card-badge.opportunity {
+  &::before {
+    @apply bg-info;
+  }
+  &::after {
+    mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
+  }
+}

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

@@ -1,5 +1,5 @@
 .banner-card {
-  @apply flex flex-row mb-md w-full rounded overflow-hidden bg-gray-lightest border border-bordercolor;
+  @apply flex flex-row mb-md w-full rounded overflow-hidden bg-card border border-bordercolor;
 }
 
 .banner-card.welcome {

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

@@ -16,7 +16,7 @@ input[type="submit"].btn {
 .btn-primary,
 input.btn-primary,
 input[type="submit"].btn-primary {
-  @apply text-white bg-primary;
+  @apply text-appbody bg-primary;
 }
 
 .btn-secondary,
@@ -83,10 +83,10 @@ input[type="submit"].btn-success {
 input[type="submit"].btn-inverted,
 .btn-primary-inverted,
 input[type="submit"].btn-primary-inverted {
-  @apply text-primary bg-white;
+  @apply text-primary bg-white dark:text-appbody;
 
   .icon {
-    @apply text-primary;
+    @apply text-primary dark:text-appbody;
   }
 }
 
@@ -172,7 +172,7 @@ input[type="submit"].btn[disabled],
 input.btn[disabled],
 input.btn-sm[disabled],
 input.btn-lg[disabled] {
-  @apply text-disabled border border-disabled bg-pattern-disabled-bright hover:bg-pattern-disabled-bright bg-transparent hover:bg-transparent hover:text-disabled shadow-none cursor-not-allowed;
+  @apply text-disabled border border-bordercolor bg-pattern-disabled-bright bg-transparent hover:bg-transparent hover:text-disabled hover:border-bordercolor shadow-none cursor-not-allowed dark:bg-pattern-disabled-dark dark:border-bordercolor;
 
   &:hover .icon,
   &:focus .icon,

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

@@ -122,11 +122,11 @@
 }
 
 .card-footer .btn {
-  @apply m-0 px-sm rounded-none border-l border-white first:border-l-0 first:rounded-bl last:rounded-br;
+  @apply m-0 px-sm rounded-none border-l border-appbody first:border-l-0 first:rounded-bl last:rounded-br;
 }
 
 .card-footer .dropdown-actions .btn {
-  @apply border-l border-white rounded-bl-none;
+  @apply border-l border-appbody rounded-bl-none;
 }
 
 .card-footer .btn-primary {
@@ -134,7 +134,7 @@
 }
 
 .card-footer .btn-secondary {
-  @apply flex-1 text-white bg-primary hover:bg-link-hover border-t-0 border-r-0 border-b-0;
+  @apply flex-1 text-appbody bg-primary hover:bg-link-hover border-t-0 border-r-0 border-b-0;
 }
 
 .card-footer .btn-square {
@@ -142,11 +142,11 @@
 }
 
 .card-icon-header {
-  @apply h-lg mb-xs text-center border-b border-bordercolor;
+  @apply h-lg mb-xs text-center border-b border-gray-light dark:border-bordercolor;
 }
 
 .card-icon-header .icon {
-  @apply absolute h-icon-lg top-spacing px-xs text-icon-lg;
+  @apply absolute h-icon-lg top-spacing px-xs text-icon-lg bg-card;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -156,59 +156,3 @@
   z-index: 1;
 }
 
-/*/// Card badges ///*/
-
-.card .card-badge {
-  @apply absolute top-0 right-0 overflow-hidden;
-  width: 65px;
-  height: 65px;
-}
-
-.card .card-badge::before {
-  @apply absolute block bg-gray-darker;
-  content: "";
-  transform: rotate(45deg);
-  width: 100px;
-  height: 25px;
-  right: -25px;
-  top: 10px;
-}
-
-.card .card-badge::after {
-  @apply absolute inline-block w-icon-xs h-icon-xs bg-white;
-  content: "";
-  right: 14px;
-  top: 17px;
-  mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
-  mask-repeat: no-repeat;
-}
-
-.card .card-badge.success {
-  &::before {
-    @apply bg-success;
-  }
-  &::after {
-    mask-image: url("/assets/images/icons/check-thick.svg");
-    right: 16px;
-  }
-}
-
-.card .card-badge.danger,
-.card .card-badge.high-priority {
-  &::before {
-    @apply bg-danger;
-  }
-  &::after {
-    mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
-  }
-}
-
-.card .card-badge.info, 
-.card .card-badge.opportunity {
-  &::before {
-    @apply bg-info;
-  }
-  &::after {
-    mask-image: url("/assets/images/icons/exclamation-circle-filled.svg");
-  }
-}

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

@@ -30,7 +30,7 @@ img.chat-avatar {
 }
 
 .chat-message {
-  @apply p-xs rounded bg-gray-lightest;
+  @apply p-xs rounded bg-card dark:bg-gray-800;
   grid-area: chat-message;
   min-width: 0;
 }
@@ -121,7 +121,7 @@ img.chat-avatar {
 }
 
 .chat-message-item.your-message .chat-message {
-  @apply text-white bg-primary;
+  @apply text-white bg-primary dark:bg-gray-600;
 }
 
 .chat-message-item.your-message .chat-message-addons .btn {
@@ -171,13 +171,13 @@ img.chat-avatar {
 }
 
 .chat-window {
-  @apply w-spacing-5xl bg-petrol-800 rounded-t;
+  @apply w-spacing-5xl bg-petrol-800 dark:bg-gray-800 rounded-t-sm;
   z-index: 10;
   box-shadow: rgba(0,0,0,0.2) 0 0 10px 5px;
 }
 
 .chat-window-header {
-  @apply flex flex-row justify-between items-center p-xxs pl-sm text-white border-b border-primary rounded-t select-none cursor-pointer;
+  @apply flex flex-row justify-between items-center p-xxs pl-sm text-white border-b border-appbody rounded-t select-none cursor-pointer;
 }
 
 .chat-window-header a {
@@ -192,7 +192,7 @@ img.chat-avatar {
 }
 
 .chat-window[open] .chat-window-header {
-  @apply bg-primary;
+  @apply bg-primary dark:bg-gray-700;
 }
 
 .chat-message-counter {
@@ -226,18 +226,18 @@ img.chat-avatar {
 }
 
 .chat-window-actions {
-  @apply relative p-xs bg-primary;
+  @apply relative p-xs bg-primary dark:bg-gray-700;
 }
 
 .chat-window-actions .form-control {
-  @apply pr-lg;
+  @apply pr-lg rounded-sm;
 }
 
 .chat-window-actions .btn-send-message {
-  @apply absolute right-sm bottom-md;
-  position: absolute;
+  @apply absolute right-sm rounded-sm;
+  bottom: 22px;
   &::before {
-    @apply inline-block h-icon-sm w-icon bg-white;
+    @apply inline-block h-icon-sm w-icon bg-appbody;
     content: "";
     mask-image: url("/assets/images/icons/sendmessage.svg");
     mask-repeat: no-repeat;
@@ -255,7 +255,7 @@ img.chat-avatar {
 /*///// Floating chat input /////*/
 
 .floating-chatinput {
-  @apply sticky left-0 right-spacing -bottom-body-padding-mobile sm:-bottom-body-padding-tablet xl:-bottom-body-padding-desktop w-full pt-xxs pb-body-padding-mobile sm:pb-body-padding-tablet bg-white;
+  @apply sticky left-0 right-spacing -bottom-body-padding-mobile sm:-bottom-body-padding-tablet xl:-bottom-body-padding-desktop w-full pt-xxs pb-body-padding-mobile sm:pb-body-padding-tablet bg-appbody;
   z-index: 1;
 }
 

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

@@ -10,24 +10,20 @@
 
 .form-radio label, 
 .form-check label  {
-  @apply relative ml-xs font-normal text-black;
+  @apply relative ml-xs font-normal text-appbody-textcolor;
   padding-top: 0.25rem;
   cursor: pointer;
   &:hover, &:focus {
-    @apply text-label-color;
+    @apply text-link-hover;
   }
 }
 
 .form-check input {
-  @apply rounded bg-transparent;
+  @apply h-btn-sm w-btn-sm border border-primary dark:border-appbody-textcolor rounded-sm bg-transparent;
   cursor: pointer;
   flex-shrink: 0;
 }
 
-.form-check input {
-  @apply h-btn-sm w-btn-sm border border-primary rounded;
-}
-
 .form-check.sm input {
   @apply w-md h-md;
 }
@@ -43,7 +39,7 @@
 }
 
 .form-check input[type=checkbox]:checked {
-  @apply text-white border-info bg-info overflow-hidden;
+  @apply text-white border-info bg-info dark:bg-purple overflow-hidden;
   background-image: none;
 
   &::after {
@@ -66,8 +62,7 @@
 .form-check input:disabled,
 .form-check input.disabled,
 .form-check input.disabled[type=checkbox]:checked {
-  @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;
@@ -128,7 +123,7 @@
 
 
 .form-radio input {
-  @apply w-btn-sm h-btn-sm border border-primary;
+  @apply w-btn-sm h-btn-sm border border-primary dark:border-appbody-textcolor;
 
   &:disabled {
     @apply border-disabled;

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

@@ -16,11 +16,11 @@
 }
 
 .product-card .card-header {
-  @apply flex flex-row pl-0 py-0 bg-card border-0;
+  @apply flex flex-row pl-0 py-0 border-0;
 }
 
 .product-card .card-icon {
-  @apply flex justify-center items-center flex-shrink-0 w-xxl min-h-xxl bg-primary rounded-tl text-white;
+  @apply flex justify-center items-center flex-shrink-0 w-xxl min-h-xxl bg-primary rounded-tl text-appbody;
 
   & .icon {
     @apply text-icon-lg h-icon-lg;
@@ -65,7 +65,7 @@
 }
 
 .product-card .card-title {
-  @apply mb-xxs p-0 text-black overflow-hidden;
+  @apply mb-xxs p-0 text-appbody-textcolor overflow-hidden;
   vertical-align: auto;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -84,7 +84,7 @@
 }
 
 .product-card .card-content {
-  @apply relative p-sm bg-card border-t border-white;
+  @apply relative p-sm border-t border-appbody;
 }
 
 .product-card .card-test-item {
@@ -117,7 +117,7 @@
 /*/ Product sections */
 
 .card-section {
-  @apply relative flex flex-col flex-shrink-0 bg-card border-t border-white;
+  @apply relative flex flex-col flex-shrink-0 border-t border-appbody;
 }
 
 .card-section:last-child {

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

@@ -44,7 +44,7 @@
 }
 
 .clouddevice-info::before {
-  @apply inline-block bg-black h-icon mr-icon-spacing;
+  @apply inline-block bg-appbody-textcolor h-icon mr-icon-spacing;
   content: "";
   mask-image: url("/assets/images/icons/logo-mobile-cloud.svg");
   mask-repeat: no-repeat;
@@ -58,19 +58,19 @@
 }
 
 .device-wrapper .device {
-  @apply p-sm m-0 text-white border-0 rounded-l bg-primary;
+  @apply p-sm m-0 text-appbody border-0 rounded-l bg-primary;
   & .clouddevice-info::before {
     @apply bg-white;
   }
 }
 
 .device-wrapper .device-actions {
-  @apply flex flex-col flex-shrink-0 w-spacing ml-1px text-white bg-primary rounded-r;
+  @apply flex flex-col flex-shrink-0 w-spacing ml-1px text-appbody bg-primary rounded-r;
 
 }
 
 .device-wrapper .device-actions a {
-  @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 first:border-t-0 rounded-none first:rounded-tr last:rounded-br border-white;
+  @apply flex items-center justify-center flex-1 min-h-spacing text-appbody border-t-1 first:border-t-0 rounded-none first:rounded-tr last:rounded-br border-appbody;
 
   &:hover {
     @apply bg-link-hover;

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

@@ -15,7 +15,7 @@ details.dropdown-actions[open] summary:after,
 
 .popover-menu, 
 .dropdown-menu {
-  @apply flex-col overflow-hidden w-popover-width p-xxs bg-primary text-white rounded;
+  @apply flex-col overflow-hidden w-popover-width p-xxs bg-primary text-appbody rounded;
   box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
 }
 
@@ -43,7 +43,7 @@ details.dropdown-actions[open].dropright .popover-menu,
 
 .popover-menu .popover-action, 
 .dropdown-menu .dropdown-action {
-  @apply relative flex items-center justify-start mb-1px p-xs text-base text-white rounded;
+  @apply relative flex items-center justify-start mb-1px p-xs text-base text-appbody rounded;
   font-weight: 600;
   line-height: 1.2;
 
@@ -67,26 +67,3 @@ details.dropdown-actions[open].dropright .popover-menu,
     @apply mb-0;
   }
 }
-
-/*/// Info popover  ///*/
-
-.popover-menu.info, 
-.dropdown-menu.info {
-  @apply p-sm bg-petrol-800;
-}
-
-.popover-menu.info .popover-title, 
-.dropdown-menu.info .popover-title {
-  @apply text-base font-semibold mb-xxs;
-  line-height: 1.1;
-}
-
-.popover-menu.info .popover-content, 
-.dropdown-menu.info .popover-content {
-  @apply text-sm;
-}
-
-.popover-menu.info .popover-actions, 
-.dropdown-menu.info .popover-actions {
-  @apply mt-xs;
-}

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

@@ -1,5 +1,5 @@
 .form-card {
-  @apply p-sm bg-gray-lighter rounded;
+  @apply p-sm bg-card rounded;
 }
 
 .form-card-heading {