comand-component-library 4.2.4 → 4.2.6

package/src/components/CmdMailToolFilter.vue

@@ -187,7 +187,7 @@ export default {
 .cmd-mail-tool-filter {
     display: flex;
     padding: var(--default-padding);
-    background: var(--light-gray);
+    background: var(--color-light-gray);
 
     & > * {
         flex: 1;

package/src/components/CmdMainNavigation.vue

@@ -438,7 +438,7 @@ export default {
                             left: 0;
                             height: 100dvh;
                             display: block;
-                            background: var(--pure-black-reduced-opacity);
+                            background: var(--color-black-reduced-opacity);
                         }
 
                         ul {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -144,14 +144,14 @@ export default {
             background: var(--primary-color-reduced-opacity);
 
             :is(span, [class*="icon-"]) {
-                color: var(--pure-white);
+                color: var(--color-white);
                 font-size: var(--icon-size-medium) !important;
 
                 & + [class*="icon-"] {
                     &:last-child {
                         border: var(--default-border);
                         border-radius: var(--full-circle);
-                        background: var(--pure-white);
+                        background: var(--color-white);
                         color: var(--color-scheme-text-color);
                         margin: 0;
                         position: absolute;
@@ -173,7 +173,7 @@ export default {
                 background: var(--primary-color);
 
                 :is(span, [class*="icon-"]) {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
 
                 .number {
@@ -191,8 +191,8 @@ export default {
                 justify-content: center;
                 border-radius: var(--full-circle);
                 border: var(--default-border);
-                border-color: var(--pure-white);
-                background: var(--pure-white);
+                border-color: var(--color-white);
+                background: var(--color-white);
                 color: var(--primary-color-reduced-opacity);
             }
         }
@@ -212,12 +212,12 @@ export default {
                 background: var(--primary-color);
 
                 span, [class*="icon-"] {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
 
                 &:hover, &:active, &:focus {
                     span, [class*="icon-"] {
-                        color: var(--pure-white);
+                        color: var(--color-white);
 
                         & + [class*="icon-"] {
                             &:last-child {
@@ -229,8 +229,8 @@ export default {
             }
 
             .number {
-                background: var(--pure-white);
-                border-color: var(--pure-white);
+                background: var(--color-white);
+                border-color: var(--color-white);
                 color: var(--hyperlink-color) !important;
             }
 
@@ -239,8 +239,7 @@ export default {
                 border-left-color: var(--border-color);
 
                 a {
-                    background: none;
-                    color: var(--color-scheme-text-color);
+                    color: var(--color-white);
 
                     span, span[class*='color'] {
                         color: inherit;
@@ -248,13 +247,15 @@ export default {
                         & + [class*="icon-"] {
                             &:last-child {
                                 border-color: var(--border-color);
-                                color: var(--pure-white);
+                                color: var(--color-white);
                                 background: var(--secondary-color);
                             }
                         }
                     }
 
                     &:hover, &:active, &:focus {
+                        background: var(--color-white);
+
                         span, [class*="icon-"] {
                             &:not(:last-child) {
                                 color: var(--hyperlink-color);

package/src/components/CmdOpeningHours.vue

@@ -465,7 +465,7 @@ export default {
         font-weight: bold;
         display: table;
         margin-bottom: var(--default-margin);
-        color: var(--pure-white);
+        color: var(--color-white);
         background: var(--success-color);
         border-radius: var(--default-border-radius);
 
@@ -477,7 +477,7 @@ export default {
     > a {
         &:hover, &:active, &:focus {
             text-decoration: underline;
-            color: var(--pure-white);
+            color: var(--color-white);
         }
     }
 

package/src/components/CmdSiteHeader.vue

@@ -217,6 +217,10 @@ export default {
         }
     }
 
+    li a {
+        text-decoration: none;
+    }
+
     header, .cmd-main-navigation nav, .cmd-list-of-links {
         max-width: var(--max-width);
         width: 100%; /* stretch flex-item */

package/src/components/CmdSlideshow.vue

@@ -347,7 +347,7 @@ export default {
         padding: var(--default-padding);
         line-height: 100%;
         font-size: 3rem;
-        color: var(--pure-white);
+        color: var(--color-white);
         background: var(--primary-color);
     }
 
@@ -375,7 +375,7 @@ export default {
                 border: var(--primary-border);
 
                 &:hover, &:active, &:focus {
-                    background: var(--pure-white);
+                    background: var(--color-white);
                     color: var(--hyperlink-color);
                 }
             }
@@ -420,7 +420,7 @@ export default {
                 list-style-type: none;
                 margin: 0;
                 border-radius: var(--full-circle);
-                background: var(--light-gray);
+                background: var(--color-light-gray);
                 border: var(--default-border-reduced-opacity);
 
                 a {
@@ -434,7 +434,7 @@ export default {
                     border-color: var(--hyperlink-color);
 
                     a {
-                        background: var(--pure-white);
+                        background: var(--color-white);
                         transition: var(--default-transition);
                     }
                 }
@@ -451,7 +451,7 @@ export default {
 
                     &:hover, &:active, &:focus, &.active {
                         border-color: var(--primary-color);
-                        background: var(--pure-white);
+                        background: var(--color-white);
 
                         a {
                             background: var(--primary-color);
@@ -472,7 +472,7 @@ export default {
             right: 5.5rem;
             padding: 0 0.2rem;
             border-radius: var(--default-border-radius);
-            background: var(--pure-white-reduced-opacity);
+            background: var(--color-white-reduced-opacity);
         }
     }
 

package/src/components/CmdSmartSearch.vue

@@ -183,7 +183,7 @@ export default {
                     background: var(--hyperlink-color);
 
                     span, span[class*="icon"] {
-                        color: var(--pure-white);
+                        color: var(--color-white);
                     }
                 }
             }

package/src/components/CmdSocialNetworks.vue

@@ -374,12 +374,12 @@ export default {
         border-color: var(--social-network-color);
 
         > span {
-            color: var(--pure-white);
+            color: var(--color-white);
         }
 
         &:hover, &:active, &:focus {
-            background: var(--pure-white);
-            color: var(--pure-white);
+            background: var(--color-white);
+            color: var(--color-white);
 
             > span {
                 color: var(--social-network-color);

package/src/components/CmdSocialNetworksItem.vue

@@ -164,11 +164,11 @@ export default {
 <style>
 .cmd-social-networks-item {
     .button {
-        --social-network-text-color: var(--pure-white);
+        --social-network-text-color: var(--color-white);
         --social-network-text-color-highlighted: var(--social-network-color);
         --social-network-border-color: var(--social-network-color);
         --social-network-background-color: var(--social-network-color);
-        --social-network-background-color-highlighted: var(--pure-white);
+        --social-network-background-color-highlighted: var(--color-white);
 
         background: var(--social-network-background-color);
         border-color: var(--social-network-border-color);

package/src/components/CmdSwitchLanguage.vue

@@ -30,7 +30,7 @@
 <script>
 import {getRoute} from '../utilities.js'
 import * as flags from "../assets/images/flags"
-import {switchLanguage} from "@/assets/data/export-data.js";
+import {switchLanguage} from "@/assets/data/export-example-data.js";
 
 export default {
     name: "CmdSwitchLanguage",

package/src/components/CmdSystemMessage.vue

@@ -179,7 +179,7 @@ export default {
         text-decoration: none;
         z-index: 100;
         line-height: 1;
-        background: var(--pure-white);
+        background: var(--color-white);
         border-radius: var(--full-circle);
 
         [class*="icon-"] {
@@ -190,7 +190,7 @@ export default {
             background: none;
 
             [class*="icon-"] {
-                color: var(--pure-white);
+                color: var(--color-white);
             }
         }
     }
@@ -207,7 +207,7 @@ export default {
                 border-color: var(--hyperlink-color);
 
                 [class*="icon-"] {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
             }
         }

package/src/components/CmdTable.vue

@@ -350,7 +350,7 @@ export default {
                 a[class*='icon-'] {
                     &, &:hover, &:active, &:focus {
                         font-size: var(--icon-size-small);
-                        color: var(--pure-white);
+                        color: var(--color-white);
                     }
                 }
             }

package/src/components/CmdTabs.vue

@@ -156,13 +156,13 @@ export default {
 
             &.active {
                 span, [class*="icon-"] {
-                    color: var(--pure-white);
+                    color: var(--color-white);
                 }
 
                 &:hover, &:active {
                     a, a:focus {
                         color: var(--hyperlink-color);
-                        background: var(--pure-white);
+                        background: var(--color-white);
 
                         span, [class*="icon-"] {
                             color: var(--hyperlink-color-highlighted);
@@ -171,7 +171,7 @@ export default {
                 }
                 
                 a:focus {
-                    color: var(--pure-white);
+                    color: var(--color-white);
 
                     span, span[class*="icon-"], .iconify {
                         color: inherit !important;

package/src/components/CmdThumbnailScroller.vue

@@ -448,7 +448,7 @@ export default {
                         figcaption {
                             background: var(--primary-color);
                             opacity: 1;
-                            color: var(--pure-white);
+                            color: var(--color-white);
                         }
                     }
 

package/src/components/CmdToggleDarkMode.vue

@@ -263,7 +263,7 @@ export default {
                 --yellow-hue: 60;
                 --yellow-saturation: 100%;
                 --yellow-lightness: 76.7%;
-                background: radial-gradient(ellipse at center, var(--pure-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%);
+                background: radial-gradient(ellipse at center, var(--color-white) 20%, hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness)) 30%, hsla(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness), 0) 100%);
                 border-color: transparent;
                 box-shadow: 0 0 1rem hsl(var(--yellow-hue), var(--yellow-saturation), var(--yellow-lightness));
             }
@@ -290,9 +290,9 @@ export default {
                 }
 
                 &::after {
-                    background: radial-gradient(ellipse at center, var(--pure-white) 50%, var(--medium-gray) 100%);
+                    background: radial-gradient(ellipse at center, var(--color-white) 50%, var(--color-medium-gray) 100%);
                     border-color: transparent;
-                    box-shadow: .2rem .1rem .2rem hsla(var(--pure-white-hue), var(--pure-white-saturation), var(--pure-white-lightness), .3);
+                    box-shadow: .2rem .1rem .2rem hsl(from var(--color-white) h s l / .3);
                 }
             }
 

package/src/components/EditComponentWrapper.vue

@@ -465,9 +465,9 @@ function buildComponentPath(component) {
             right: auto; /* avoids container to be stretched */
             flex-wrap: nowrap;
             border: var(--default-border);
-            border-color: var(--pure-white);
+            border-color: var(--color-white);
             border-bottom: 0;
-            background: var(--pure-white);
+            background: var(--color-white);
             border-radius: var(--default-border-radius);
 
             li {
@@ -542,8 +542,8 @@ function buildComponentPath(component) {
 
     &.active {
         //width: 100%; /* stretch inside flex-container */
-        background: var(--pure-white);
-        border-color: var(--pure-white);
+        background: var(--color-white);
+        border-color: var(--color-white);
         min-height: 2.5rem;
 
         .component-name {
@@ -554,7 +554,7 @@ function buildComponentPath(component) {
             &.cmd-form-element {
                 :is(input[type="checkbox"], input[type="radio"]):checked {
                     & ~ .label-text span {
-                        color: var(--pure-white);
+                        color: var(--color-white);
                     }
                 }
             }