@winchsa/ui 0.1.0

package/dist/styles/@core/scss/template/index.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../base';
+
+// Layout
+@use 'vertical-nav';
+@use 'default-layout-w-vertical-nav';
+
+// Skins
+@use 'skins';
+
+// Components
+@use 'components';
+
+// Utilities
+@use 'utilities';

package/dist/styles/@core/scss/template/libs/apex-chart.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+/** if false, disabled buttons will be greyed out */
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+/*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+*/
+.v-application .apexcharts-canvasline[stroke=transparent] {
+  display: "none";
+}
+.v-application .apexcharts-canvas .apexcharts-tooltip {
+  box-shadow: 0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14), 0 0 transparent, 0 0 transparent;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgb(var(--v-theme-surface));
+}
+.v-application .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgb(var(--v-theme-surface));
+  font-weight: 500;
+}
+.v-application .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-light {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+.v-application .apexcharts-canvas .apexcharts-tooltip.apexcharts-theme-dark {
+  color: white;
+}
+.v-application .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-series-group:first-of-type {
+  padding-block-end: 0;
+}
+.v-application .apexcharts-canvas .apexcharts-xaxistooltip {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgb(var(--v-theme-gray-50));
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+.v-application .apexcharts-canvas .apexcharts-xaxistooltip::after {
+  border-block-end-color: rgb(var(--v-theme-gray-50));
+}
+.v-application .apexcharts-canvas .apexcharts-xaxistooltip::before {
+  border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-application .apexcharts-canvas .apexcharts-yaxistooltip {
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  background: rgb(var(--v-theme-gray-50));
+}
+.v-application .apexcharts-canvas .apexcharts-yaxistooltip::after {
+  border-inline-start-color: rgb(var(--v-theme-gray-50));
+}
+.v-application .apexcharts-canvas .apexcharts-yaxistooltip::before {
+  border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+}
+.v-application .apexcharts-canvas .apexcharts-xaxistooltip-text,
+.v-application .apexcharts-canvas .apexcharts-yaxistooltip-text {
+  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+}
+[dir=rtl] .v-application .apexcharts-canvas .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+  text-anchor: start;
+}
+.v-application .apexcharts-canvas .apexcharts-text,
+.v-application .apexcharts-canvas .apexcharts-tooltip-text,
+.v-application .apexcharts-canvas .apexcharts-datalabel-label,
+.v-application .apexcharts-canvas .apexcharts-datalabel,
+.v-application .apexcharts-canvas .apexcharts-xaxistooltip-text,
+.v-application .apexcharts-canvas .apexcharts-yaxistooltip-text,
+.v-application .apexcharts-canvas .apexcharts-legend-text {
+  font-family: "Public Sans", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+.v-application .apexcharts-canvas .apexcharts-pie-label {
+  fill: white;
+  filter: none;
+}
+.v-application .apexcharts-canvas .apexcharts-marker {
+  box-shadow: none;
+}
+.v-application .apexcharts-canvas .apexcharts-legend-marker {
+  margin-inline-end: 0.3875rem !important;
+}
+[dir=rtl] .v-application .apexcharts-canvas .apexcharts-legend-marker {
+  margin-inline-end: 0.75rem !important;
+}

package/dist/styles/@core/scss/template/libs/apex-chart.scss

@@ -0,0 +1,99 @@
+@use '../../../../assets/scss/variables/_vuetify.scss' as vuetify;
+@use '../../../../@layouts/styles/mixins' as layoutsMixins;
+@use '../../base/mixins';
+
+.v-application .apexcharts-canvas {
+  &line[stroke='transparent'] {
+    display: 'none';
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-gray-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-gray-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-gray-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-gray-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}

package/dist/styles/@core/scss/template/libs/shepherd.css

@@ -0,0 +1,82 @@
+/** if false, disabled buttons will be greyed out */
+.shepherd-button {
+  border-radius: 6px;
+  block-size: 1.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin-inline-end: 0.75rem;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-footer {
+  background: rgb(var(--v-theme-background));
+  padding-block: 0.5rem 1rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header {
+  background: rgb(var(--v-theme-background));
+  padding-block: 1rem 0;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
+  color: rgb(var(--v-theme-on-background));
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.shepherd-text {
+  padding: 1rem;
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+  font-size: 0.9375rem;
+}
+
+.shepherd-cancel-icon {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important;
+  font-size: 1.5rem;
+}
+
+.shepherd-element[data-popper-placement^=bottom] {
+  margin-block-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^=top] {
+  margin-block-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^=right] {
+  margin-inline-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^=left] {
+  margin-inline-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement] .shepherd-arrow::before {
+  background: rgb(var(--v-theme-background)) !important;
+}
+
+.shepherd-element {
+  border-radius: 6px;
+  background: transparent;
+}
+
+.nextBtnClass,
+.nextBtnClass:not(:disabled):hover {
+  background: rgb(var(--v-theme-primary));
+}
+
+.backBtnClass,
+.backBtnClass:not(:disabled):hover {
+  background: rgba(var(--v-theme-secondary), var(--v-activated-opacity));
+  color: rgb(var(--v-theme-secondary));
+}
+
+@media screen and (max-width: 600px) {
+  .shepherd-element {
+    max-inline-size: 75vw;
+  }
+}

package/dist/styles/@core/scss/template/libs/shepherd.scss

@@ -0,0 +1,88 @@
+// commented out because it's not used
+// @use 'shepherd.js/dist/css/shepherd.css';
+
+@use '../../../../assets/scss/variables/vuetify.scss' as variables;
+
+.shepherd-button {
+  border-radius: variables.$button-border-radius;
+  block-size: 1.75rem;
+  font-size: 0.8125rem;
+  font-weight: variables.$button-font-weight;
+  margin-inline-end: 0.75rem;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-footer {
+  background: rgb(var(--v-theme-background));
+  padding-block: 0.5rem 1rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header {
+  background: rgb(var(--v-theme-background));
+  padding-block: 1rem 0;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
+  color: rgb(var(--v-theme-on-background));
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.shepherd-text {
+  padding: 1rem;
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+  font-size: variables.$card-text-font-size;
+}
+
+.shepherd-cancel-icon {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important;
+  font-size: 1.5rem;
+}
+
+.shepherd-element[data-popper-placement^='bottom'] {
+  margin-block-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='top'] {
+  margin-block-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='right'] {
+  margin-inline-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='left'] {
+  margin-inline-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement] {
+  .shepherd-arrow::before {
+    background: rgb(var(--v-theme-background)) !important;
+  }
+}
+
+.shepherd-element {
+  border-radius: variables.$card-border-radius;
+  background: transparent;
+}
+
+.nextBtnClass,
+.nextBtnClass:not(:disabled):hover {
+  background: rgb(var(--v-theme-primary));
+}
+
+.backBtnClass,
+.backBtnClass:not(:disabled):hover {
+  background: rgba(var(--v-theme-secondary), var(--v-activated-opacity));
+  color: rgb(var(--v-theme-secondary));
+}
+
+@media screen and (max-width: 600px) {
+  .shepherd-element {
+    max-inline-size: 75vw;
+  }
+}