@appscode/design-system 2.0.41-alpha.9 → 2.0.41

package/vue-components/styles/components/bbum/_single-post-preview.scss

@@ -143,7 +143,7 @@
     }
 
     a {
-      color: $primary;
+      color: $ac-primary;
     }
 
     .count-like-share {
@@ -238,7 +238,7 @@
         }
 
         &:hover {
-          color: $primary;
+          color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/bbum/_user-profile.scss

@@ -88,7 +88,7 @@
         margin-top: 20px;
 
         a {
-          color: $primary;
+          color: $ac-primary;
           display: flex;
           align-items: center;
           margin-bottom: 10px;
@@ -117,7 +117,7 @@
     img {
       width: 120px;
       height: 120px;
-      border: 2px solid $primary;
+      border: 2px solid $ac-primary;
     }
 
     figcaption {

package/vue-components/styles/components/cards/_cluster.scss

@@ -1,4 +1,5 @@
 // cluster-card
+
 .card-details.cluster {
   border: 1px solid $color-border;
   padding: 24px 20px;
@@ -42,10 +43,10 @@
       h4 {
         font-size: 18px;
         line-height: 130%;
-        color: #030d17;
+        color: $color-heading;
       }
       .icon {
-        color: #0c365a;
+        color: $color-text;
         cursor: pointer;
         position: relative;
         z-index: 1;
@@ -84,11 +85,11 @@
 
       span {
         font-size: 11px;
-        color: #666666;
+        color: $color-label;
         display: block;
       }
       strong {
-        color: #061b2d;
+        color: $color-heading;
         font-size: 13px;
         font-weight: 400;
       }

package/vue-components/styles/components/cards/_info.scss

@@ -62,7 +62,13 @@
     bottom: 0;
     width: 100%;
     height: 1px;
-    background: linear-gradient(-45deg, $primary, $success, $warning, $danger);
+    background: linear-gradient(
+      -45deg,
+      $ac-primary,
+      $success,
+      $warning,
+      $danger
+    );
     background-size: 400% 400%;
     animation: gradient 3s ease infinite;
   }

package/vue-components/styles/components/cards/_monitoring.scss

@@ -5,6 +5,7 @@
   min-width: 290px;
   position: relative;
   border-radius: 2px;
+  background-color: $white-100;
 
   .required {
     position: absolute;

package/vue-components/styles/components/cards/_org.scss

@@ -13,7 +13,7 @@
   }
 
   button.ac-button.is-text {
-    color: $primary;
+    color: $ac-primary;
     transition: 0.3s ease-in-out;
     padding: 2px 0;
     height: auto;
@@ -23,7 +23,7 @@
   }
 
   &:hover:not(.no-data-available) {
-    // border: 1px solid $primary;
+    // border: 1px solid $ac-primary;
     button.ac-button.is-text {
       gap: 16px;
     }

package/vue-components/styles/components/cards/_payment-card.scss

@@ -55,7 +55,7 @@
       width: 14px;
       height: 14px;
       background-color: $white-100;
-      border: 1px solid $primary;
+      border: 1px solid $ac-primary;
       z-index: 1;
       border-radius: 50%;
     }
@@ -63,7 +63,7 @@
     &::before {
       width: 6px;
       height: 6px;
-      background-color: $primary;
+      background-color: $ac-primary;
       border: none;
       left: 9px;
       top: 9px;
@@ -163,7 +163,7 @@
                 color: $color-heading;
 
                 &:hover {
-                  background-color: $primary;
+                  background-color: $ac-primary;
                   color: $color-heading;
                 }
               }

package/vue-components/styles/components/cards/_vendor.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  background-color: $primary-97;
+  background-color: $primary-light-grey;
   min-width: 215px;
   padding: 30px 20px 20px;
   cursor: pointer;
@@ -19,7 +19,7 @@
       font-weight: 500;
 
       &.free {
-        color: $primary;
+        color: $ac-primary;
       }
     }
   }
@@ -42,15 +42,15 @@
     }
   }
   &.is-selected {
-    border: 1px solid $primary !important;
+    border: 1px solid $ac-primary !important;
   }
   &:hover {
-    border: 1px solid $primary;
+    border: 1px solid $ac-primary;
 
     .ac-card-title {
       h4 {
         a {
-          color: $primary;
+          color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/editor/_filtered-file-editor.scss

@@ -18,7 +18,7 @@
 //   }
 
 //   &:hover {
-//     background-color: $primary;
+//     background-color: $ac-primary;
 //   }
 // }
 
@@ -111,7 +111,7 @@
             li {
               &.is-active {
                 a {
-                  background-color: $primary;
+                  background-color: $ac-primary;
                   border-radius: 5px;
                   color: $white-100;
                   padding: 10px 10px;

package/vue-components/styles/components/form-fields/_input-card.scss

@@ -48,7 +48,7 @@
       border: none;
 
       label {
-        color: $primary !important;
+        color: $ac-primary !important;
       }
     }
 
@@ -72,7 +72,7 @@
     }
 
     .ac-single-radio .is-checkradio[type="radio"]:checked + label {
-      color: $primary;
+      color: $ac-primary;
     }
 
     .ac-single-radio {
@@ -97,7 +97,7 @@
   }
 
   &.is-selected {
-    border: 1px solid $primary;
+    border: 1px solid $ac-primary;
   }
 
   &:last-child {
@@ -188,7 +188,7 @@
         font-weight: 400;
 
         &:hover {
-          color: $primary;
+          color: $ac-primary;
         }
       }
     }

package/vue-components/styles/components/form-fields/_input.scss

@@ -31,11 +31,11 @@
     input,
     .ac-card,
     textarea {
-      border: 1px solid $primary !important;
+      border: 1px solid $ac-primary !important;
     }
 
     p {
-      color: $primary;
+      color: $ac-primary;
     }
   }
 
@@ -350,7 +350,7 @@
 
           &:hover {
             background-color: $primary-20;
-            color: $primary;
+            color: $ac-primary;
           }
         }
       }
@@ -378,7 +378,7 @@
 
       &:focus {
         outline: none;
-        border: 1px solid $primary;
+        border: 1px solid $ac-primary;
       }
     }
   }
@@ -397,7 +397,7 @@
     font-size: 13px;
 
     &:hover {
-      border-color: $primary;
+      border-color: $ac-primary;
     }
 
     &.bg-white {
@@ -405,11 +405,11 @@
     }
 
     &.StripeElement--focus {
-      border: 1px solid $primary;
+      border: 1px solid $ac-primary;
     }
 
     &:focus {
-      border: 1px solid $primary;
+      border: 1px solid $ac-primary;
       outline: none;
       background-color: $white-100;
     }
@@ -499,14 +499,14 @@
 
 .is-checkradio[type="radio"] + label::after,
 .is-checkradio[type="radio"] + label:after {
-  background: $primary;
+  background: $ac-primary;
 }
 
 .is-checkradio[type="checkbox"]:checked + label::before,
 .is-checkradio[type="checkbox"]:checked + label:before,
 .is-checkradio[type="radio"]:checked + label::before,
 .is-checkradio[type="radio"]:checked + label:before {
-  border: 0.2rem solid $primary;
+  border: 0.2rem solid $ac-primary;
 }
 
 .is-checkradio[type="checkbox"]:hover:not([disabled]) + label::before,
@@ -516,10 +516,15 @@
   border-color: $primary-30 !important;
 }
 
+.switch[type="checkbox"].is-primary:checked + label::before,
+.switch[type="checkbox"].is-primary:checked + label:before {
+  background-color: $ac-primary;
+}
+
 .is-checkradio[type="checkbox"] + label::after,
 .is-checkradio[type="checkbox"] + label:after {
   border-width: 0.2rem;
-  border-color: $primary;
+  border-color: $ac-primary;
 }
 
 // file upload

package/vue-components/styles/components/header/_header.scss

@@ -1,6 +1,6 @@
 .inner-header {
   padding: 6px 20px;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid $color-border-light;
   position: sticky;
   background: $white-100;
   z-index: 99;

package/vue-components/styles/components/navbar/_menu-content.scss

@@ -183,7 +183,7 @@
             font-size: 13px;
 
             &.is-active {
-              background-color: $primary;
+              background-color: $ac-primary;
               color: $white-100;
 
               img {
@@ -192,7 +192,7 @@
             }
 
             &:hover {
-              background-color: $primary;
+              background-color: $ac-primary;
               color: $white-100;
 
               img {
@@ -278,7 +278,7 @@
             background-color: $primary-95;
 
             p {
-              color: $primary !important;
+              color: $ac-primary !important;
             }
           }
         }
@@ -375,7 +375,7 @@
 
             &:hover {
               background-color: $primary-97;
-              color: $primary;
+              color: $ac-primary;
             }
           }
         }

package/vue-components/styles/components/navbar/_notification.scss

@@ -1,6 +1,6 @@
 .notification-count {
   position: absolute;
-  background-color: $primary;
+  background-color: $ac-primary;
   color: $white-100;
   padding: 4px;
   font-size: 11px;
@@ -55,7 +55,7 @@
       width: 36px;
       height: 36px;
       background-color: $primary-95;
-      color: $primary;
+      color: $ac-primary;
       font-size: 14px;
       display: flex;
       align-items: center;
@@ -93,7 +93,7 @@
     justify-content: center;
     width: 100%;
     padding: 8px;
-    color: $primary;
+    color: $ac-primary;
     cursor: pointer;
     transition: 0.3s ease-in-out;
     &:hover {

package/vue-components/styles/components/select-box/_ac-select-box.scss

@@ -17,7 +17,7 @@
 //     &:focus {
 //       outline: none;
 //       box-shadow: none;
-//       border: 1px solid $primary;
+//       border: 1px solid $ac-primary;
 //     }
 //   }
 

package/vue-components/styles/components/select-box/_multi-select.scss

@@ -118,12 +118,12 @@
             var(--hsl-lightness),
             0.2
           );
-          color: $primary;
+          color: $ac-primary;
         }
 
         &.multiselect__option--highlight {
           background-color: $white-100;
-          color: $primary;
+          color: $ac-primary;
           &:hover {
             background-color: $primary-97;
           }
@@ -135,7 +135,7 @@
               var(--hsl-lightness),
               0.2
             );
-            color: $primary;
+            color: $ac-primary;
           }
         }
       }

package/vue-components/styles/components/sidebar/_left-sidebar.scss

@@ -66,7 +66,7 @@
             top: 0;
             width: calc(100% - 20px);
             height: 100%;
-            background: $primary;
+            background: $ac-primary;
             border-radius: 4px;
             z-index: -1;
             transition: 0.3s ease-in-out;
@@ -109,7 +109,7 @@
             background-color: transparent;
 
             &:after {
-              color: $primary;
+              color: $ac-primary;
               opacity: 0.2;
               visibility: visible;
             }

package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs.scss

@@ -32,7 +32,7 @@
           transition: 0.3s ease-in-out;
         }
         &:hover {
-          color: $primary;
+          color: $ac-primary;
 
           &:after {
             opacity: 1;
@@ -41,7 +41,7 @@
           }
         }
         &.is-active {
-          color: $primary;
+          color: $ac-primary;
           &:hover {
             &::after {
               background-color: $color-border;
@@ -169,7 +169,7 @@
               width: 8px;
               height: 8px;
               border-radius: 50%;
-              background-color: $primary;
+              background-color: $ac-primary;
               transition: 0.3s ease-in-out;
               opacity: 0;
               visibility: hidden;

package/vue-components/styles/components/ui-builder/_ui-builder.scss

@@ -67,18 +67,18 @@
 
   &.is-active {
     &::after {
-      border: 1px dashed $primary;
+      border: 1px dashed $ac-primary;
     }
 
     &::before {
-      background-color: $primary;
+      background-color: $ac-primary;
     }
 
     .nested-header {
       h6 {
         .collaps-icon {
-          border: 1px solid $primary !important;
-          color: $primary !important;
+          border: 1px solid $ac-primary !important;
+          color: $ac-primary !important;
         }
       }
     }
@@ -199,8 +199,8 @@
 //   }
 
 //   .is-selected {
-//     border: 1px solid $primary;
-//     border-bottom: 1px solid $primary !important;
+//     border: 1px solid $ac-primary;
+//     border-bottom: 1px solid $ac-primary !important;
 //     border-radius: 4px;
 //   }
 // }
@@ -223,7 +223,7 @@
 //     &.is-selected {
 //       background-color: $primary-97;
 //       strong {
-//         color: $primary;
+//         color: $ac-primary;
 //       }
 //     }
 //   }
@@ -383,14 +383,14 @@
     height: 18px;
     cursor: pointer;
     border: none;
-    color: $primary;
+    color: $ac-primary;
     background-color: $color-border;
     transition: 0.3s ease-in-out;
     &:hover {
       background-color: $primary-80;
     }
     &.is-primary {
-      background-color: $primary;
+      background-color: $ac-primary;
       color: $white-100;
       &:hover {
         background-color: $primary-30;

package/vue-components/styles/components/ui-builder/_vue-open-api.scss

@@ -133,11 +133,11 @@
       input,
       .ac-card,
       textarea {
-        border: 1px solid $primary !important;
+        border: 1px solid $ac-primary !important;
       }
 
       p {
-        color: $primary;
+        color: $ac-primary;
       }
     }
 
@@ -485,7 +485,7 @@
                 var(--hsl-lightness),
                 0.2
               );
-              color: $primary;
+              color: $ac-primary;
             }
           }
         }
@@ -513,7 +513,7 @@
 
         &:focus {
           outline: none;
-          border: 1px solid $primary;
+          border: 1px solid $ac-primary;
         }
       }
     }

package/vue-components/styles/theme/_appscode.scss

@@ -1,28 +1,13 @@
-$primary-hue: 149;
-$primary-saturation: 100%;
-$primary-5: hsl($primary-hue, $primary-saturation, 5%);
-$primary-10: hsl($primary-hue, $primary-saturation, 10%);
-$primary-20: hsl($primary-hue, $primary-saturation, 20%);
-$primary: hsl($primary-hue, $primary-saturation, 30%);
-$primary-30: hsl($primary-hue, $primary-saturation, 30%);
-$primary-40: hsl($primary-hue, $primary-saturation, 40%);
-$primary-50: hsl($primary-hue, $primary-saturation, 50%);
-$primary-60: hsl($primary-hue, $primary-saturation, 60%);
-$primary-70: hsl($primary-hue, $primary-saturation, 70%);
-$primary-80: hsl($primary-hue, $primary-saturation, 80%);
-$primary-90: hsl($primary-hue, $primary-saturation, 90%);
-$primary-93: hsl($primary-hue, $primary-saturation, 93%);
-$primary-95: hsl($primary-hue, $primary-saturation, 95%);
-$primary-97: hsl($primary-hue, $primary-saturation, 97%);
+:root {
+  --primary-hue: 149;
+  --primary-saturation: 100%;
+  --primary-light: 30%;
+}
+$primary-hue: var(--primary-hue);
+$primary-saturation: var(--primary-saturation);
+$primary-light: var(--primary-light);
 
-$primary-light-grey: hsl($primary-hue, 30%, 96%);
-$primary-dark-grey: hsl($primary-hue, 30%, 10%);
+$ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
 
-$color-text: hsl($primary-hue, 10%, 35%);
-$color-heading: hsl($primary-hue, 10%, 10%);
-$color-label: hsl($primary-hue, 20%, 50%);
-$color-link: hsl($primary-hue, 40%, 20%);
-$color-border-light: hsl($primary-hue, 30%, 95%);
 $color-border: hsl($primary-hue, 30%, 90%);
-$color-border-dark: hsl($primary-hue, 10%, 80%);
 $color-sidebar: hsl($primary-hue, $primary-saturation, 5%);

package/vue-components/styles/theme/_dark.scss

@@ -0,0 +1,48 @@
+// :root {
+//   --primary-hue: 208;
+//   --primary-saturation: 77%;
+//   --primary-light: 40%;
+// }
+// :root {
+//   --theme-mode: dark;
+// }
+// // primary color guides
+// $primary-hue: var(--primary-hue);
+// $primary-saturation: var(--primary-saturation);
+// $primary-light: var(--primary-light);
+// $theme-mode: var(--theme-mode);
+
+// $primary-5: hsl($primary-hue, $primary-saturation, 95%);
+// $primary-10: hsl($primary-hue, $primary-saturation, 90%);
+// $primary-20: hsl($primary-hue, $primary-saturation, 80%);
+// $primary-30: hsl($primary-hue, $primary-saturation, 70%);
+// $primary-40: hsl($primary-hue, $primary-saturation, 60%);
+// $ac-primary: hsl($primary-hue, $primary-saturation, $primary-light);
+// $primary-50: hsl($primary-hue, $primary-saturation, 50%);
+// $primary-60: hsl($primary-hue, $primary-saturation, 40%);
+// $primary-70: hsl($primary-hue, $primary-saturation, 30%);
+// $primary-80: hsl($primary-hue, $primary-saturation, 20%);
+// $primary-90: hsl($primary-hue, $primary-saturation, 10%);
+// $primary-93: hsl($primary-hue, $primary-saturation, 7%);
+// $primary-95: hsl($primary-hue, $primary-saturation, 5%);
+// $primary-97: hsl($primary-hue, $primary-saturation, 3%);
+
+// $primary-light-grey: hsl($primary-hue, 30%, 20%);
+// $primary-dark-grey: hsl($primary-hue, 30%, 90%);
+
+// // white and black
+// $white-100: hsl($primary-hue, 50%, 5%);
+// $black-100: hsl(0, 0%, 90%);
+
+// $color-text: hsl($primary-hue, 10%, 80%);
+// $color-heading: hsl($primary-hue, 10%, 90%);
+// $color-label: hsl($primary-hue, 20%, 50%);
+// $color-link: hsl($primary-hue, 40%, 80%);
+// $color-border-light: hsl($primary-hue, 30%, 20%);
+// $color-border: hsl($primary-hue, 30%, 20%);
+// $color-border-dark: hsl($primary-hue, 10%, 30%);
+// $color-sidebar: hsl($primary-hue, $primary-saturation, 10%);
+
+// .ac-left-sidebar .menu-list.ac-menu-list li a {
+//   color: $color-text;
+// }

package/vue-components/v2/pagination/Pagination.vue

@@ -184,11 +184,11 @@ export default {
         font-weight: 500;
         border-radius: 4px;
         border: 1px solid $color-border;
-        color: $primary;
+        color: $ac-primary;
         margin-left: 4px;
 
         &:hover {
-          background-color: $primary !important;
+          background-color: $ac-primary !important;
           color: $white-100;
           border: 1px solid $color-border;
         }
@@ -199,7 +199,7 @@ export default {
           background-color: $primary-97;
         }
         &.is-current {
-          background-color: $primary;
+          background-color: $ac-primary;
           color: $white-100;
         }
       }
@@ -227,7 +227,7 @@ export default {
     &:focus,
     &:active,
     &:focus-visible {
-      border: 1px solid $primary;
+      border: 1px solid $ac-primary;
       outline: none;
     }
   }