testio-tailwind 2.2.1 → 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.1",
+	"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/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 {

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

@@ -26,7 +26,7 @@
 
 .form-control,
 .form-control-static {
-  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded;
+  @apply h-btn w-full px-sm py-xxs text-base border border-bordercolor rounded dark:bg-card;
 }
 
 .form-check .field_with_errors input[type="checkbox"],
@@ -80,7 +80,7 @@ textarea.form-control {
 }
 
 .form-control::placeholder {
-  @apply text-disabled italic;
+  @apply text-placeholder italic;
 }
 
 .form-control:disabled,