@ship-ui/core 0.13.2

package/styles/components/sparkle-select.component.scss

@@ -0,0 +1,139 @@
+@use '../helpers.scss' as *;
+
+$shipSelect: false !default;
+
+@if $shipSelect == true {
+  sh-select {
+    --miw: #{p2r(210)};
+
+    display: flex;
+
+    sh-form-field {
+      display: flex;
+      --ff-mw: var(--miw);
+    }
+
+    sh-popover {
+      flex: 1 0;
+
+      &:has(.ship-options:empty) .popover {
+        opacity: 0;
+      }
+    }
+
+    .selected-value {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: p2r(4);
+      color: var(--base-8);
+
+      input {
+        margin: 0;
+      }
+
+      &.is-selected {
+        color: var(--base-12);
+      }
+    }
+
+    sh-form-field .input-wrap .input {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+
+      --ff-space: #{p2r(7 10)};
+
+      textarea,
+      input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+        position: absolute;
+      }
+
+      &.show-search-text {
+        input {
+          opacity: 1;
+          height: initial;
+          min-width: min-content;
+          field-sizing: content;
+          font: var(--paragraph-30);
+          position: relative;
+        }
+
+        textarea {
+          opacity: 1;
+          height: initial;
+          margin: p2r(4 0 0);
+        }
+      }
+    }
+
+    sh-form-field.small .input-wrap .input {
+      --ff-space: #{p2r(5 8)};
+
+      sh-chip {
+        --chip-h: #{p2r(20)};
+        font-size: 80%;
+      }
+    }
+  }
+
+  .ship-options {
+    padding: p2r(8 0);
+    display: flex;
+    flex-direction: column;
+    max-height: p2r(180);
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .option {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      min-height: p2r(32);
+      margin: p2r(0 8);
+      padding: p2r(0 8);
+      gap: p2r(8);
+      width: calc(100% - #{p2r(16)});
+      border-radius: var(--shape-2);
+      appearance: none;
+      background-color: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--base-12);
+      user-select: none;
+
+      &[disabled] {
+        opacity: 0.3;
+        cursor: initial;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      sh-icon {
+        font-size: p2r(16);
+      }
+
+      &.active,
+      &:checked,
+      &:hover {
+        background-color: var(--base-2);
+        color: var(--base-12);
+      }
+
+      &.focused {
+        background-color: var(--primary-1);
+        color: var(--base-12);
+
+        &:hover {
+          background-color: var(--primary-2);
+        }
+      }
+    }
+  }
+}

package/styles/core/apexcharts/apexcharts.scss

@@ -0,0 +1,58 @@
+$useApexcharts: true !default;
+
+@if $useApexcharts == true {
+  body {
+    .apexcharts-text {
+      fill: var(--base-12);
+
+      &.apexcharts-yaxis-label,
+      &.apexcharts-xaxis-label {
+        fill: var(--base-8);
+      }
+    }
+
+    .apexcharts-gridline,
+    .apexcharts-yaxis-tick,
+    .apexcharts-xaxis-tick {
+      stroke: var(--base-8);
+    }
+
+    .apexcharts-grid-borders {
+      line {
+        stroke: var(--base-8);
+      }
+    }
+
+    .apexcharts-tracks {
+      .apexcharts-radialbar-area {
+        stroke: var(--base-4);
+      }
+    }
+
+    .apexcharts-menu {
+      background-color: var(--base-1);
+      color: var(--base-12);
+      border: 1px solid var(--base-4);
+    }
+
+    .apexcharts-tooltip.apexcharts-theme-light {
+      background-color: var(--base-1);
+      border: 1px solid var(--base-4);
+      box-shadow: var(--base-2);
+      color: var(--base-8);
+
+      .apexcharts-tooltip-title {
+        background-color: var(--base-2);
+        border-bottom: 1px solid var(--base-4);
+      }
+    }
+
+    .apexcharts-xaxistooltip,
+    .apexcharts-yaxistooltip {
+      background-color: var(--base-1);
+      border: 1px solid var(--base-4);
+      box-shadow: var(--base-2);
+      color: var(--base-8);
+    }
+  }
+}

package/styles/core/core/layout.scss

@@ -0,0 +1,74 @@
+@use '../../helpers.scss' as *;
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+app-root {
+  width: 100vw;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--base-2);
+}
+
+body {
+  margin: 0;
+  font: var(--paragraph-30);
+  color: var(--base-12);
+
+  &.dragging {
+    overflow: hidden;
+  }
+}
+
+// *::-webkit-scrollbar {
+//   width: 8px;
+//   height: 12px;
+//   background: transparent;
+//   scrollbar-width: thin;
+// }
+
+// *::-webkit-scrollbar-track {
+//   background: transparent;
+// }
+
+// *::-webkit-scrollbar-thumb {
+//   background: #acacac;
+//   background: light-dark(#acacac, #4f4f4f);
+//   border-radius: 50px;
+//   border: 3px solid transparent;
+//   border-left-width: 1px;
+//   border-right-width: 2px;
+//   background-clip: content-box;
+// }
+
+// *::-webkit-scrollbar-thumb:hover {
+//   background-color: #888888;
+// }
+
+.spacer {
+  flex: 1 0;
+}
+
+.sh-primary {
+  color: var(--primary-8);
+}
+
+.sh-accent {
+  color: var(--accent-8);
+}
+
+.sh-warn {
+  color: var(--warn-8);
+}
+
+.sh-error {
+  color: var(--error-500);
+}
+
+.sh-success {
+  color: var(--success-500);
+}

package/styles/core/core/loader.scss

@@ -0,0 +1,63 @@
+@use '../../helpers.scss' as *;
+
+.loader {
+  width: p2r(48);
+  height: p2r(48);
+  display: grid;
+  place-content: center;
+  color: var(--base-8);
+}
+
+.loader,
+.loading {
+  position: relative;
+
+  &:before {
+    content: '';
+    width: p2r(16);
+    height: p2r(16);
+    border: 2px solid var(--loader-c);
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: flex;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    margin: auto;
+    inset: 0;
+    position: absolute;
+  }
+}
+
+// .loading {
+//   &.outlined:before {
+//     &.primary {
+//       border-color: var(--primary-8);
+//     }
+//     &.accent {
+//       border-color: var(--accent-8);
+//     }
+//     &.warn {
+//       border-color: var(--warn-8);
+//     }
+//     &.error {
+//       border-color: var(--error-8);
+//     }
+//     &.success {
+//       border-color: var(--success-8);
+//     }
+//   }
+
+//   .raised:before,
+//   .flat:before {
+//     border-color: #fff;
+//   }
+// }
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/styles/core/core/palette-variables.scss

@@ -0,0 +1,352 @@
+$violet-palette: (
+  50: (
+    #f5f3ff,
+    '245,243,255',
+    dark,
+  ),
+  100: (
+    #ede9fe,
+    '237,233,254',
+    dark,
+  ),
+  200: (
+    #ddd6fe,
+    '221,214,254',
+    dark,
+  ),
+  300: (
+    #c4b5fd,
+    '196,181,253',
+    dark,
+  ),
+  400: (
+    #a78bfa,
+    '167,139,250',
+    dark,
+  ),
+  500: (
+    #8b5cf6,
+    '139,92,246',
+    light,
+  ),
+  600: (
+    #7c3aed,
+    '124,58,237',
+    light,
+  ),
+  700: (
+    #6d28d9,
+    '109,40,217',
+    light,
+  ),
+  800: (
+    #5b21b6,
+    '91,33,182',
+    light,
+  ),
+  900: (
+    #4c1d95,
+    '76,29,149',
+    light,
+  ),
+  950: (
+    #2e1065,
+    '46,16,101',
+    light,
+  ),
+);
+
+$topaz-palette: (
+  50: (
+    #eff6ff,
+    '239,246,255',
+    dark,
+  ),
+  100: (
+    #dbeafe,
+    '219,234,254',
+    dark,
+  ),
+  200: (
+    #bfdbfe,
+    '191,219,254',
+    dark,
+  ),
+  300: (
+    #93c5fd,
+    '147,197,253',
+    dark,
+  ),
+  400: (
+    #60a5fa,
+    '96,165,250',
+    dark,
+  ),
+  500: (
+    #3b82f6,
+    '59,130,246',
+    light,
+  ),
+  600: (
+    #2563eb,
+    '37,99,235',
+    light,
+  ),
+  700: (
+    #1d4ed8,
+    '29,78,216',
+    light,
+  ),
+  800: (
+    #1e40af,
+    '30,64,175',
+    light,
+  ),
+  900: (
+    #1e3a8a,
+    '30,58,138',
+    light,
+  ),
+  950: (
+    #172554,
+    '23,37,84',
+    light,
+  ),
+);
+
+$ruby-palette: (
+  50: (
+    #fef2f2,
+    '254,242,242',
+    dark,
+  ),
+  100: (
+    #fee2e2,
+    '254,226,226',
+    dark,
+  ),
+  200: (
+    #fecaca,
+    '254,202,202',
+    dark,
+  ),
+  300: (
+    #fca5a5,
+    '252,165,165',
+    dark,
+  ),
+  400: (
+    #f87171,
+    '248,113,113',
+    light,
+  ),
+  500: (
+    #ef4444,
+    '239,68,68',
+    light,
+  ),
+  600: (
+    #dc2626,
+    '220,38,38',
+    light,
+  ),
+  700: (
+    #b91c1c,
+    '185,28,28',
+    light,
+  ),
+  800: (
+    #991b1b,
+    '153,27,27',
+    light,
+  ),
+  900: (
+    #7f1d1d,
+    '127,29,29',
+    light,
+  ),
+  950: (
+    #450a0a,
+    '69,10,10',
+    light,
+  ),
+);
+
+$mono-palette: (
+  50: (
+    #fafafa,
+    '250,250,250',
+    dark,
+  ),
+  100: (
+    #f4f4f5,
+    '244,244,245',
+    dark,
+  ),
+  200: (
+    #e4e4e7,
+    '228,228,231',
+    dark,
+  ),
+  300: (
+    #d4d4d8,
+    '212,212,216',
+    dark,
+  ),
+  400: (
+    #a1a1aa,
+    '161,161,170',
+    dark,
+  ),
+  500: (
+    #71717a,
+    '113,113,122',
+    light,
+  ),
+  600: (
+    #52525b,
+    '82,82,91',
+    light,
+  ),
+  700: (
+    #3f3f46,
+    '63,63,70',
+    light,
+  ),
+  750: (
+    #2f2f31,
+    '47,47,49',
+    light,
+  ),
+  800: (
+    #27272a,
+    '39,39,42',
+    light,
+  ),
+  900: (
+    #18181b,
+    '24,24,27',
+    light,
+  ),
+  950: (
+    #09090b,
+    '9,9,11',
+    light,
+  ),
+);
+
+$emerald-palette: (
+  50: (
+    #ecfdf5,
+    '236,253,245',
+    dark,
+  ),
+  100: (
+    #d1fae5,
+    '209,250,229',
+    dark,
+  ),
+  200: (
+    #a7f3d0,
+    '167,243,208',
+    dark,
+  ),
+  300: (
+    #6ee7b7,
+    '110,231,183',
+    dark,
+  ),
+  400: (
+    #34d399,
+    '52,211,153',
+    light,
+  ),
+  500: (
+    #10b981,
+    '16,185,129',
+    light,
+  ),
+  600: (
+    #059669,
+    '5,150,105',
+    light,
+  ),
+  700: (
+    #047857,
+    '4,120,87',
+    light,
+  ),
+  800: (
+    #065f46,
+    '6,95,70',
+    light,
+  ),
+  900: (
+    #064e3b,
+    '6,78,59',
+    light,
+  ),
+  950: (
+    #022c22,
+    '2,44,34',
+    light,
+  ),
+);
+
+$amber-palette: (
+  50: (
+    #fffbeb,
+    '255,251,235',
+    dark,
+  ),
+  100: (
+    #fef3c7,
+    '254,243,199',
+    dark,
+  ),
+  200: (
+    #fde68a,
+    '253,230,138',
+    dark,
+  ),
+  300: (
+    #fcd34d,
+    '252,211,77',
+    dark,
+  ),
+  400: (
+    #fbbf24,
+    '251,191,36',
+    light,
+  ),
+  500: (
+    #f59e0b,
+    '245,158,11',
+    light,
+  ),
+  600: (
+    #d97706,
+    '217,119,6',
+    light,
+  ),
+  700: (
+    #b45309,
+    '180,83,9',
+    light,
+  ),
+  800: (
+    #92400e,
+    '146,64,14',
+    light,
+  ),
+  900: (
+    #78350f,
+    '120,53,15',
+    light,
+  ),
+  950: (
+    #451a03,
+    '69,26,3',
+    light,
+  ),
+);