Wrote a ton of color themes

src/components/LinkItems/Collapsable.vue

@@ -90,13 +90,11 @@ export default {
 @import '@/styles/media-queries.scss';
 
 .collapsable {
-    padding: 5px;
+    padding: var(--item-group-padding);
     margin: 10px;
     border-radius: var(--curve-factor);
     background: var(--primary);
-    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
-    box-shadow: 1px 1px 2px #130f23;
+    box-shadow: var(--item-group-shadow);
     height: fit-content;
     width: 100%;
     width: stretch;

src/components/LinkItems/Item.vue

@@ -82,7 +82,7 @@ export default {
         trigger: 'hover focus',
         hideOnTargetClick: true,
         html: false,
-        delay: { show: 350, hide: 200 },
+        delay: { show: 600, hide: 200 },
       };
     },
   },
@@ -100,17 +100,17 @@ export default {
   color: var(--primary);
   vertical-align: middle;
   margin: 0.5rem;
-  background: #607d8b33;
+  background: var(--item-background);
   text-align: center;
   padding: 2px;
   outline: 2px solid transparent;
   border: 1px solid var(--outline-color);
   border-radius: var(--curve-factor);
-  box-shadow: 1px 1px 2px #373737;
+  box-shadow: var(--item-shadow);
   cursor: pointer;
   &:hover {
-    box-shadow: 1px 2px 4px #373737;
-    background: #607d8b4d;
+    box-shadow: var(--item-hover-shadow);
+    background: var(--item-background-hover);
   }
   &:focus {
     outline: 2px solid var(--primary);
@@ -130,6 +130,7 @@ export default {
   overflow: hidden;
   position: relative;
   padding: 0;
+  z-index: 2;
   span.text {
     position: absolute;
     white-space: nowrap;
@@ -150,8 +151,7 @@ export default {
     .overflow-dots {
       display: block;
       opacity: 1;
-      // background: var(--background-transparent);
-      background: #283e51;
+      background: var(--item-background);
       position: absolute;
       z-index: 5;
       right: 0;
@@ -181,14 +181,9 @@ export default {
     }
   }
 
-  /* Colourize icons on hover */
-  .tile-svg {
-    filter: drop-shadow(4px 8px 3px var(--transparent-50));
-  }
-  .tile-icon {
-    filter:
-      drop-shadow(4px 8px 3px var(--transparent-50))
-      saturate(2);
+  /* Apply transofmation of icons on hover */
+  .tile-icon, .tile-svg  {
+    filter: var(--item-icon-transform-hover);
   }
 }
 

src/components/LinkItems/ItemGroup.vue

@@ -78,7 +78,7 @@ export default {
     border-radius: var(--curve-factor);
     background: #607d8b33;
     color: var(--primary);
-    box-shadow: 1px 1px 2px #373737;
+    box-shadow: var(--item-shadow);
 }
 
 .there-are-items {

src/components/LinkItems/ItemIcon.vue

@@ -85,6 +85,6 @@ export default {
 
 .tile-icon {
     width: 60px;
-    filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
+    filter: var(--item-icon-transform);
 }
 </style>