@appscode/design-system 2.17.59 → 2.17.60-alpha-2

package/main.scss

@@ -1,39 +1,37 @@
-@charset "utf-8";
-// customize bulma css
-@import "@/components/vue-components/styles/base/utilities/_customize-bulma.scss";
+@use "@/components/vue-components/styles/base/utilities/_customize-bulma.scss" as *;
 
 // Third party CSS
-@import "bulma/bulma.sass";
-@import "font-awesome/css/font-awesome.min.css";
-@import "vue-multiselect/dist/vue-multiselect.css";
+@use "bulma/bulma.sass" as *;
+@use "font-awesome/css/font-awesome.min.css" as *;
+@use "vue-multiselect/dist/vue-multiselect.css" as *;
 
 // BASE
-@import "@/components/vue-components/styles/base/utilities/all";
+@use "@/components/vue-components/styles/base/utilities/all" as *;
 
 // LAYOUTS
-@import "@/components/vue-components/styles/layouts/all";
+@use "@/components/vue-components/styles/layouts/all" as *;
 
 // COMPONENTS
-// @import "@/components/vue-components/styles/components/all";
-@import "@/components/vue-components/styles/components/button";
-@import "@/components/vue-components/styles/components/table";
-@import "@/components/vue-components/styles/components/tabs";
-@import "@/components/vue-components/styles/components/avatar";
-@import "@/components/vue-components/styles/components/terminal";
-@import "@/components/vue-components/styles/components/steps";
-@import "@/components/vue-components/styles/components/code-preview/all";
-@import "@/components/vue-components/styles/components/form-fields/input";
-@import "@/components/vue-components/styles/components/form-fields/check-radio-switch";
-@import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
-@import "@/components/vue-components/styles/components/inbox/all";
-@import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
-@import "@/components/vue-components/styles/components/ui-builder/ui-builder";
-@import "@/components/vue-components/styles/components/dropdown";
-@import "@/components/vue-components/styles/components/badge-tags";
-@import "@/components/vue-components/styles/components/platform-design";
-@import "@/components/vue-components/styles/components/cards/cards-group";
-@import "@/components/vue-components/styles/components/file-explore";
-@import "@/components/vue-components/styles/components/ac-duration";
-@import "@/components/vue-components/styles/components/skeletons";
+// @use "@/components/vue-components/styles/components/all" as *;
+@use "@/components/vue-components/styles/components/button" as *;
+@use "@/components/vue-components/styles/components/table" as *;
+@use "@/components/vue-components/styles/components/tabs" as *;
+@use "@/components/vue-components/styles/components/avatar" as *;
+@use "@/components/vue-components/styles/components/terminal" as *;
+@use "@/components/vue-components/styles/components/steps" as *;
+@use "@/components/vue-components/styles/components/code-preview/all" as *;
+@use "@/components/vue-components/styles/components/form-fields/input" as *;
+@use "@/components/vue-components/styles/components/form-fields/check-radio-switch" as *;
+@use "@/components/vue-components/styles/components/form-fields/custom-selectbox" as *;
+@use "@/components/vue-components/styles/components/inbox/all" as *;
+@use "@/components/vue-components/styles/components/ui-builder/vue-open-api" as *;
+@use "@/components/vue-components/styles/components/ui-builder/ui-builder" as *;
+@use "@/components/vue-components/styles/components/dropdown" as *;
+@use "@/components/vue-components/styles/components/badge-tags" as *;
+@use "@/components/vue-components/styles/components/platform-design" as *;
+@use "@/components/vue-components/styles/components/cards/cards-group" as *;
+@use "@/components/vue-components/styles/components/file-explore" as *;
+@use "@/components/vue-components/styles/components/ac-duration" as *;
+@use "@/components/vue-components/styles/components/skeletons" as *;
 
-// @import "@/components/vue-components/styles/theme/appscode.scss";
+// @use "@/components/vue-components/styles/theme/appscode.scss" as *;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.59",
+  "version": "2.17.60-alpha-2",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/styles/base/utilities/_all.scss

@@ -1,12 +1,12 @@
-// @import "colors";
-@import "root-variables";
-@import "generate-color-classes";
-@import "typography";
-@import "mixin";
-@import "extended";
-@import "global";
-@import "animation";
-@import "grid";
-@import "spacing";
-@import "layouts";
-// @import "dark-theme";
+// @forward "colors";
+@forward "root-variables";
+@forward "generate-color-classes";
+@forward "typography";
+@forward "mixin";
+@forward "extended";
+@forward "global";
+@forward "animation";
+@forward "grid";
+@forward "spacing";
+@forward "layouts";
+// @forward "dark-theme";

package/vue-components/styles/base/utilities/_colors.scss

@@ -8,9 +8,10 @@ $white-100: hsl(0, 0%, 100%);
 $black-100: hsl(0, 0%, 0%);
 
 // primary color guides
-$primary-hue: var(--primary-hue);
-$primary-saturation: var(--primary-saturation);
-$primary-light: var(--primary-light);
+// Default values (can be overridden via CSS custom properties at runtime)
+$primary-hue: 149;
+$primary-saturation: 100%;
+$primary-light: 30%;
 // $theme-mode: var(--theme-mode);
 
 $primary-5: hsl($primary-hue, $primary-saturation, 5%);
@@ -33,9 +34,10 @@ $primary-dark-grey: hsl($primary-hue, 10%, 10%);
 $primary-light-gray: hsl($primary-hue, 10%, 96%);
 $primary-dark-gray: hsl($primary-hue, 10%, 10%);
 
-$secondary-hue: var(--secondary-hue);
-$secondary-saturation: var(--secondary-saturation);
-$secondary-light: var(--secondary-light);
+// Default values for secondary colors (can be overridden via CSS custom properties at runtime)
+$secondary-hue: 217;
+$secondary-saturation: 71%;
+$secondary-light: 50%;
 $secondary-5: hsl($secondary-hue, $secondary-saturation, 5%);
 $secondary-10: hsl($secondary-hue, $secondary-saturation, 10%);
 $ac-secondary: hsl($secondary-hue, $secondary-saturation, $secondary-light);

package/vue-components/styles/base/utilities/_customize-bulma.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 // Colors
 // $black:        hsl(0, 0%, 4%) !default;
 // $black-bis:    hsl(0, 0%, 7%) !default;

package/vue-components/styles/base/utilities/_extended.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 .has-hover-style:not(.is-disabled) {
   cursor: pointer;
 

package/vue-components/styles/base/utilities/_generate-color-classes.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 // classes
 @mixin generate-color-classes($type, $color, $h, $s, $from, $to, $step) {
   $i: $from;

package/vue-components/styles/base/utilities/_global.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 // border left, right, top, bottom none
 $positions: (
   "b": "bottom",
@@ -87,6 +89,7 @@ $radius-values: (0, 2, 4, 8, 12, 16, 50);
 // color swatch start
 input[type="color"] {
   -webkit-appearance: none;
+  appearance: none;
   border: none;
   width: 20px;
   height: 20px;

package/vue-components/styles/base/utilities/_index.scss

@@ -0,0 +1,10 @@
+// This file forwards all commonly used utilities
+// Import this file in any component that needs access to colors, mixins, etc.
+
+@forward "colors";
+@forward "typography";
+@forward "mixin";
+@forward "customize-bulma";
+@forward "bulma/sass/utilities/_all" hide $purple, $red, $green, $blue, $yellow, $orange, $primary, $info, $success,
+  $warning, $danger, $white, $black, $light, $dark, $primary-light, $size-1, $size-2, $size-3, $size-4, $size-5,
+  $size-6, $size-7, $weight-light, $weight-normal, $weight-medium, $weight-semibold, $weight-bold;

package/vue-components/styles/base/utilities/_mixin.scss

@@ -1,3 +1,5 @@
+@use "colors" as *;
+
 // ac-buttons
 @mixin ac-button($colorName) {
   background-color: $colorName;

package/vue-components/styles/base/utilities/_typography.scss

@@ -1,3 +1,6 @@
+@use "colors" as *;
+@use "customize-bulma" as *;
+
 @import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
 
 $font-heading: "Roboto", sans-serif;

package/vue-components/styles/components/_ac-calendar.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // for calendar scss
 .ac-date-picker {
   .vc-day-content {

package/vue-components/styles/components/_ac-code-highlight.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-code-highlight {
   pre {
     font-size: 1rem;

package/vue-components/styles/components/_ac-drag.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-drag-option-wrapper {
   display: grid;
   grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);

package/vue-components/styles/components/_ac-duration.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-duration-wrapper {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/_accordion.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .single-accordion-item {
   background-color: $white-100;
   margin-bottom: 16px;

package/vue-components/styles/components/_add-card.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // .add-card-form {
 //   .card-title {
 //     display: grid;

package/vue-components/styles/components/_avatar.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 .avatar {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/_badge-tags.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 @mixin badge($text-color, $bg-color, $text-dark, $bg-light) {
   color: $text-color;
   background-color: $bg-color;

package/vue-components/styles/components/_breadcrumb.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-breadcrumb {
   padding: 8px 20px;
   border-bottom: 1px solid $color-border;

package/vue-components/styles/components/_breadcumb.scss

@@ -0,0 +1 @@
+@use "../base/utilities/index" as *;

package/vue-components/styles/components/_button.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 .button {
   color: $color-text;
   background-color: $white-100;

package/vue-components/styles/components/_card-body-wrapper.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // .card-body-wrapper {
 //   background-color: $white-100;
 //   border-radius: 4px;

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

@@ -0,0 +1 @@
+@use "../base/utilities/index" as *;

package/vue-components/styles/components/_direct-deploy.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // .direct-deploy {
 //   h5 {
 //     font-weight: 500;

package/vue-components/styles/components/_dropdown.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .dropdown-group {
   margin-bottom: 8px;
 }

package/vue-components/styles/components/_file-explore.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .file-explore {
   .content-sidebar {
     width: 220px;

package/vue-components/styles/components/_getkeeper.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .getkeeper {
   .ac-vscrollbar {
     padding: 0;

package/vue-components/styles/components/_go-to-top.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 //  go to top area start
 .go-to-top {
   position: fixed;

package/vue-components/styles/components/_graph.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .graph-tooltip-wrapper {
   background-color: $white-100;
   border: 1px solid $color-border;

package/vue-components/styles/components/_lightweight-editor.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .lightweight-editor {
   border-radius: 4px;
   overflow: hidden;

package/vue-components/styles/components/_modal.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // modal start
 .ac-modal {
   // position: relative;

package/vue-components/styles/components/_nested-list.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .nested-list {
   ul {
     li {

package/vue-components/styles/components/_options.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-options {
   border-radius: 50%;
   width: 32px;

package/vue-components/styles/components/_overview-info.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .cluster-overview {
   background-color: $white-100;
   height: calc(100vh - 80px);

package/vue-components/styles/components/_overview-page.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // overview-content  start
 .overview-content {
   padding: 20px;

package/vue-components/styles/components/_pagination.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // .inner-table-pagination {
 //   padding: 5px 20px;
 // }

package/vue-components/styles/components/_platform-design.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .profile-banner {
   background-color: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-light));
   // background-image: url("../../images/banners/banner-background.png");

package/vue-components/styles/components/_preloader.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .spinner {
   position: relative;
 }

package/vue-components/styles/components/_preview-modal.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .preview-icon {
   width: 60px;
   height: 60px;

package/vue-components/styles/components/_pricing-table.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .pricing-table {
   border: 1px solid $color-border;
   background-color: $color-border;

package/vue-components/styles/components/_progress-bar.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 @keyframes ac-move-infinity {
   from {
     background-position: 200% 0;

package/vue-components/styles/components/_report.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .report-charts {
   display: flex;
   flex-direction: row;

package/vue-components/styles/components/_skeletons.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .skeletons {
   display: flex;
   flex-direction: column;

package/vue-components/styles/components/_steps.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 .steps-wrapper {
   --size: 32px;
   --line: 4px;

package/vue-components/styles/components/_table-of-content.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .ac-accordion-wrapper {
   &.table-of-content {
     background-color: $color-border;

package/vue-components/styles/components/_table.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 // INFO TABLE END
 // GENERAL TABLE START
 

package/vue-components/styles/components/_tabs.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 // .tabs {
 //   &.ac-tabs {
 //     ul {

package/vue-components/styles/components/_terminal.scss

@@ -1,3 +1,4 @@
+@use "../base/utilities/colors" as *;
 // terminal scss start
 :root {
   --terminal-bg: rgb(28, 28, 28);

package/vue-components/styles/components/_tfa.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .qr-code-wrapper {
   background: $info-light;
   width: 240px;

package/vue-components/styles/components/_time-picker.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 /* ========== Variables ========== */
 $cool-gray: #eff1f1;
 $secondary-light-gray: #f7f9fa;

package/vue-components/styles/components/_transitions.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 .sidebar-appear-enter-active,
 .sidebar-appear-leave-active {
   position: absolute;

package/vue-components/styles/components/_widget-menu.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // widget menu start
 // .widget-menu {
 //   &.style-2 {

package/vue-components/styles/components/_wizard.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/index" as *;
+
 // .single-wizard-section {
 //   padding: 20px;
 //   background-color: $white-100;

package/vue-components/styles/components/ac-toaster/_ac-toasted.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-toast {
   line-height: 1.5 !important;
   min-width: 350px !important;

package/vue-components/styles/components/alert/_alert-message.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .message {
   &.is-primary {
     background-color: $primary-95;

package/vue-components/styles/components/alert/_alert.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-notification {
   background-color: #f1f1f1;
   font-size: 1rem;

package/vue-components/styles/components/alert/_toast.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-toast {
   width: 350px;
   display: flex;

package/vue-components/styles/components/bbum/_activities-header.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .activities-header {
   padding-bottom: 10px;
 

package/vue-components/styles/components/bbum/_card-team.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .single-team-card {
   border: 1px solid $color-border;
   background-color: hsla(var(--hsl-hue), var(--hsl-saturation), var(--hsl-lightness), 0.03);

package/vue-components/styles/components/bbum/_information-center.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .information-center {
   .information-center-inner {
     background-color: $white-100;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .left-sidebar {
   background-color: $white-100;
   border-radius: 4px;

package/vue-components/styles/components/bbum/_mobile-desktop.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-mobile {
   position: relative;
   width: 360px;

package/vue-components/styles/components/bbum/_post.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-post {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/bbum/_sign-up-notification.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .sign-up-notification {
   background-color: $white-100;
   border-radius: 8px;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .single-post-preview {
   background-color: $white-100;
   border: 1px solid $color-border;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-system-body.bb-user-management {
   .user-profile-wrapper {
     padding: 20px;

package/vue-components/styles/components/cards/_cards-group.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .card-group {
   background-color: #f4f5f6;
   border: 1px solid $color-border;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // cluster-card
 
 .card-details.cluster {

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // features card
 .card-basic.feature-card {
   padding: 20px;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // info cards start
 .info-card {
   border: 1px solid $color-border;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .card-basic {
   padding: 20px;
   width: calc(25% - 8px);

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .card-details {
   display: flex;
   align-items: flex-end;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .payment-bg-1 {
   background: linear-gradient(148.66deg, #fc00ff -21.45%, #21d4fd 100%);
 }

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .subscription-card-wrapper {
   display: flex;
 }

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .cards-bg {
   background-color: $primary-light-gray;
   border: 1px solid $color-border;

package/vue-components/styles/components/cards/_usage-table-card.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .usage-table-card {
   display: flex;
   flex-direction: column;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // vendor cards start
 .ac-single-card.vendor-card {
   outline: 1px solid $color-border;

package/vue-components/styles/components/code-preview/_all.scss

@@ -1 +1 @@
-@import "./_code-preview.scss";
+@forward "./_code-preview.scss";

package/vue-components/styles/components/code-preview/_code-preview.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/colors" as *;
+
 .code-container {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/content/_content-header.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-content-header {
   display: flex;
   align-items: center;

package/vue-components/styles/components/content/_content-layout.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-content-layout {
   margin-bottom: 16px;
   border-radius: 4px;

package/vue-components/styles/components/editor/_customize-editor.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-editor-wrapper {
   border: 1px solid $color-border;
   border-radius: 4px;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // .preview-icon {
 //   width: 60px;
 //   height: 60px;

package/vue-components/styles/components/editor/_monaco-editor.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .editor {
   border: none;
   background-color: $white-100 !important;

package/vue-components/styles/components/footer/_footer-area.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .footer-area {
   position: fixed;
   bottom: 0;

package/vue-components/styles/components/footer/_footer-item.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .footer-item {
   display: flex;
   align-items: center;

package/vue-components/styles/components/footer/_footer-items.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .footer-items {
   display: flex;
   align-items: center;

package/vue-components/styles/components/form-fields/_check-radio-switch.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // Old Third party dependency modification | Remove it, when 2024 AppsCode Custom Checkbox, Radio, Switch used everywhere
 .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label::before,
 .is-checkradio.is-primary[type="checkbox"].is-primary:checked.has-background-color + label:before,

package/vue-components/styles/components/form-fields/_custom-selectbox.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .is-selectbox {
   position: relative;
   z-index: 9;

package/vue-components/styles/components/form-fields/_file-upload.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .file-upload {
   border: 1px dashed $color-border-dark;
   border-radius: 4px;

package/vue-components/styles/components/form-fields/_form-footer.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .form-footer {
   display: flex;
   align-items: center;

package/vue-components/styles/components/form-fields/_image-upload.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-upload-image {
   background-color: transparent;
   border: 1px dashed $primary-10;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // card select
 .card-select {
   min-height: 98px;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/colors" as *;
+
 .ac-single-input {
   position: relative;
   z-index: 1;

package/vue-components/styles/components/form-fields/_range-slider.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .threshold-field {
   animation: slideIn 0.3s ease-out;
 }

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .header-item {
   display: inline-block;
   margin-left: 8px;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .inner-header {
   padding: 6px 20px;
   border-bottom: 1px solid $color-border;

package/vue-components/styles/components/inbox/all.scss

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .mail-details {
   display: grid;
   grid-template-columns: 360px calc(100% - 360px);

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // menu content
 
 .ac-menu-item {

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 @import "./menu-content";
 .ac-navbar-area {
   position: fixed;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .notification-count {
   position: absolute;
   background-color: $ac-primary;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 // .ac-select-box {
 //   select {
 //     background-color: $info-light;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .multiselect {
   .multiselect__tags {
     background-color: $white-100;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .ac-system-left-sidebar {
   &.is-light {
     .ac-left-sidebar-wrapper {

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .sidebar-tabs-layout {
   .sidebar-tabs-wrapper {
     position: fixed;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .sidebar-tabs {
   width: 220px;
   border-right: 1px solid $color-border;

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

@@ -1,4 +1,6 @@
-@import "../../components/form-fields/input-card";
+@use "../../base/utilities/index" as *;
+
+@use "../../components/form-fields/input-card" as *;
 
 .ac-object-field-wrapper {
   display: grid;

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

@@ -1,3 +1,5 @@
+@use "../../base/utilities/index" as *;
+
 .vue-schema-form-array {
   .nested-body {
     // margin-bottom: 15px;

package/vue-components/styles/layouts/_all.scss

@@ -1,2 +1,2 @@
-// @import "404";
-@import "code-preview";
+// @forward "404";
+@forward "code-preview";

package/vue-components/styles/layouts/_code-preview.scss

@@ -1,3 +1,5 @@
+@use "../base/utilities/colors" as *;
+@use "../base/utilities/typography" as *;
 .component-wrapper {
   .component-inner {
     margin: 20px;

package/vue-components/v3/avatar/Avatar.vue

@@ -28,5 +28,5 @@ withDefaults(defineProps<Props>(), {
   </figure>
 </template>
 <style lang="scss">
-@import "../../../vue-components/styles/components/_avatar.scss";
+@use "../../../vue-components/styles/components/avatar";
 </style>

package/vue-components/v3/time/AcDurationNew.vue

@@ -92,10 +92,11 @@ useDraggable(".picker-minute");
   </div>
 </template>
 <style lang="scss" scoped>
+@use "sass:color";
 /* ========== Variables ========== */
 $cool-gray: #eff1f1;
 $secondary-light-gray: #f7f9fa;
-$scroll-highlight: darken($cool-gray, 10);
+$scroll-highlight: color.adjust($cool-gray, $lightness: -10%);
 
 /* ========== Mixins ========== */
 @mixin hide-scrollbars {