@ship-ui/core 0.13.2

package/styles/core/core/typography.scss

@@ -0,0 +1,103 @@
+@use '../../helpers.scss' as *;
+
+body {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  .title-10,
+  .title-20B,
+  .title-20,
+  .title-30B,
+  .title-30B,
+  .title-30B,
+  .paragraph-10,
+  .paragraph-20 {
+    margin: 0;
+  }
+}
+
+body {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .title-10,
+  .title-20B,
+  .title-20,
+  .title-30B,
+  .title-30B,
+  .title-30B {
+    color: var(--base-12);
+  }
+}
+
+p,
+.paragraph-10,
+.paragraph-20,
+.paragraph-30,
+.paragraph-40,
+.paragraph-10B,
+.paragraph-20B,
+.paragraph-30B,
+.paragraph-40B {
+  color: var(--base-8);
+}
+
+p {
+  margin: 0;
+}
+
+strong {
+  font-weight: 600;
+}
+
+a {
+  color: var(--primary-8);
+}
+
+sup {
+  color: var(--error-8);
+  margin-left: -0.33em;
+  vertical-align: p2r(3);
+}
+
+body {
+  h3 {
+    font: var(--title-30);
+  }
+
+  $displaySizes: (10, 20, 30, 40, 50);
+  $titleSizes: (10, 20, 30, 10B, 20B, 30B);
+  $paragraphSizes: (10, 20, 30, 40, 10B, 20B, 30B, 40B);
+  $codeSizes: (10, 20, 30);
+
+  @each $displaySize in $displaySizes {
+    .display-#{$displaySize} {
+      font: var(--display-#{$displaySize});
+    }
+  }
+
+  @each $titleSize in $titleSizes {
+    .title-#{$titleSize} {
+      font: var(--title-#{$titleSize});
+    }
+  }
+
+  @each $paragraphSize in $paragraphSizes {
+    .paragraph-#{$paragraphSize} {
+      font: var(--paragraph-#{$paragraphSize});
+    }
+  }
+
+  @each $codeSize in $codeSizes {
+    .code-#{$codeSize} {
+      font: var(--code-#{$codeSize});
+    }
+  }
+}

package/styles/core/core/variables.scss

@@ -0,0 +1,188 @@
+@use 'sass:list';
+@use '../../helpers.scss' as *;
+@use './palette-variables.scss' as palettes;
+
+@mixin palette($palette, $name) {
+  @each $key, $value in $palette {
+    --#{"" + $name}-#{$key}: #{list.nth($value, 1)};
+
+    @if ($key == 500) {
+      --#{"" + $name}-contrast-#{$key}: var(--#{list.nth($value, 3)}-primary-text);
+    }
+  }
+}
+
+:root {
+  --font-size: 16px;
+  font-size: var(--font-size);
+}
+
+html body {
+  --ship-light: initial;
+  --ship-dark: ;
+  color-scheme: light dark;
+
+  --primary-1: #{light-dark(hsl(217, 91%, 95%), hsl(217, 91%, 9.5%))};
+  --primary-2: #{light-dark(hsl(217, 91%, 90%), hsl(217, 91%, 15%))};
+  --primary-3: #{light-dark(hsl(217, 91%, 85%), hsl(217, 91%, 22.5%))};
+  --primary-4: #{light-dark(hsl(217, 91%, 80%), hsl(217, 91%, 30%))};
+  --primary-5: #{light-dark(hsl(217, 91%, 75%), hsl(217, 91%, 37.5%))};
+  --primary-6: #{light-dark(hsl(217, 91%, 70%), hsl(217, 91%, 45%))};
+  --primary-7: #{light-dark(hsl(217, 91%, 65%), hsl(217, 91%, 52.5%))};
+  --primary-8: #{light-dark(hsl(217, 91%, 60%), hsl(217, 91%, 60%))};
+  --primary-9: #{light-dark(hsl(217, 91%, 46.5%), hsl(217, 91%, 70%))};
+  --primary-10: #{light-dark(hsl(217, 91%, 33%), hsl(217, 91%, 80%))};
+  --primary-11: #{light-dark(hsl(217, 91%, 19.5%), hsl(217, 91%, 90%))};
+  --primary-12: #{light-dark(hsl(217, 91%, 6%), hsl(217, 91%, 100%))};
+  --primary-g2: linear-gradient(180deg, hsl(217, 91%, 70%) 0%, hsl(217, 91%, 60%) 50%);
+  --primary-g3: linear-gradient(180deg, hsl(217, 91%, 80%) 0%, hsl(217, 91%, 60%) 50%);
+
+  --accent-1: #{light-dark(hsl(258, 90%, 95.75%), hsl(258, 90%, 9.25%))};
+  --accent-2: #{light-dark(hsl(258, 90%, 91.5%), hsl(258, 90%, 16.5%))};
+  --accent-3: #{light-dark(hsl(258, 90%, 87.25%), hsl(258, 90%, 24.75%))};
+  --accent-4: #{light-dark(hsl(258, 90%, 83%), hsl(258, 90%, 33%))};
+  --accent-5: #{light-dark(hsl(258, 90%, 78.75%), hsl(258, 90%, 41.25%))};
+  --accent-6: #{light-dark(hsl(258, 90%, 74.5%), hsl(258, 90%, 49.5%))};
+  --accent-7: #{light-dark(hsl(258, 90%, 70.25%), hsl(258, 90%, 57.75%))};
+  --accent-8: #{light-dark(hsl(258, 90%, 66%), hsl(258, 90%, 66%))};
+  --accent-9: #{light-dark(hsl(258, 90%, 51.15%), hsl(258, 90%, 74.5%))};
+  --accent-10: #{light-dark(hsl(258, 90%, 36.3%), hsl(258, 90%, 83%))};
+  --accent-11: #{light-dark(hsl(258, 90%, 21.45%), hsl(258, 90%, 91.5%))};
+  --accent-12: #{light-dark(hsl(258, 90%, 6.6%), hsl(258, 90%, 100%))};
+  --accent-g2: linear-gradient(180deg, hsl(258, 90%, 74.5%) 0%, hsl(258, 90%, 66%) 50%);
+  --accent-g3: linear-gradient(180deg, hsl(258, 90%, 83%) 0%, hsl(258, 90%, 66%) 50%);
+
+  --warn-1: #{light-dark(hsl(37, 92%, 93.75%), hsl(37, 92%, 9.25%))};
+  --warn-2: #{light-dark(hsl(37, 92%, 87.5%), hsl(37, 92%, 12.5%))};
+  --warn-3: #{light-dark(hsl(37, 92%, 81.25%), hsl(37, 92%, 18.75%))};
+  --warn-4: #{light-dark(hsl(37, 92%, 75%), hsl(37, 92%, 25%))};
+  --warn-5: #{light-dark(hsl(37, 92%, 68.75%), hsl(37, 92%, 31.25%))};
+  --warn-6: #{light-dark(hsl(37, 92%, 62.5%), hsl(37, 92%, 37.5%))};
+  --warn-7: #{light-dark(hsl(37, 92%, 56.25%), hsl(37, 92%, 43.75%))};
+  --warn-8: #{light-dark(hsl(37, 92%, 50%), hsl(37, 92%, 50%))};
+  --warn-9: #{light-dark(hsl(37, 92%, 38.75%), hsl(37, 92%, 62.5%))};
+  --warn-10: #{light-dark(hsl(37, 92%, 27.5%), hsl(37, 92%, 75%))};
+  --warn-11: #{light-dark(hsl(37, 92%, 16.25%), hsl(37, 92%, 87.5%))};
+  --warn-12: #{light-dark(hsl(37, 92%, 5%), hsl(37, 92%, 100%))};
+  --warn-g2: linear-gradient(180deg, hsl(37, 92%, 62.5%) 0%, hsl(37, 92%, 50%) 50%);
+  --warn-g3: linear-gradient(180deg, hsl(37, 92%, 75%) 0%, hsl(37, 92%, 50%) 50%);
+
+  --error-1: #{light-dark(hsl(0, 84%, 95%), hsl(0, 84%, 7.5%))};
+  --error-2: #{light-dark(hsl(0, 84%, 90%), hsl(0, 84%, 15%))};
+  --error-3: #{light-dark(hsl(0, 84%, 85%), hsl(0, 84%, 22.5%))};
+  --error-4: #{light-dark(hsl(0, 84%, 80%), hsl(0, 84%, 30%))};
+  --error-5: #{light-dark(hsl(0, 84%, 75%), hsl(0, 27%, 10%))};
+  --error-6: #{light-dark(hsl(0, 84%, 70%), hsl(0, 84%, 45%))};
+  --error-7: #{light-dark(hsl(0, 84%, 65%), hsl(0, 84%, 52.5%))};
+  --error-8: #{light-dark(hsl(0, 84%, 60%), hsl(0, 84%, 60%))};
+  --error-9: #{light-dark(hsl(0, 84%, 46.5%), hsl(0, 84%, 70%))};
+  --error-10: #{light-dark(hsl(0, 84%, 33%), hsl(0, 84%, 80%))};
+  --error-11: #{light-dark(hsl(0, 84%, 19.5%), hsl(0, 84%, 90%))};
+  --error-12: #{light-dark(hsl(0, 84%, 6%), hsl(0, 84%, 100%))};
+  --error-g2: linear-gradient(180deg, hsl(0, 84%, 70%) 0%, hsl(0, 84%, 60%) 50%);
+  --error-g3: linear-gradient(180deg, hsl(0, 84%, 80%) 0%, hsl(0, 84%, 60%) 50%);
+
+  --success-1: #{light-dark(hsl(160, 84%, 92.38%), hsl(160, 84%, 7.88%))};
+  --success-2: #{light-dark(hsl(160, 84%, 84.75%), hsl(160, 3%, 17%))};
+  --success-3: #{light-dark(hsl(160, 84%, 77.13%), hsl(160, 84%, 14.63%))};
+  --success-4: #{light-dark(hsl(160, 84%, 69.5%), hsl(160, 84%, 19.5%))};
+  --success-5: #{light-dark(hsl(160, 84%, 61.88%), hsl(160, 84%, 24.38%))};
+  --success-6: #{light-dark(hsl(160, 84%, 54.25%), hsl(160, 84%, 29.25%))};
+  --success-7: #{light-dark(hsl(160, 84%, 46.63%), hsl(160, 84%, 34.13%))};
+  --success-8: #{light-dark(hsl(160, 84%, 39%), hsl(160, 84%, 39%))};
+  --success-9: #{light-dark(hsl(160, 84%, 30.23%), hsl(160, 84%, 54.25%))};
+  --success-10: #{light-dark(hsl(160, 84%, 21.45%), hsl(160, 84%, 69.5%))};
+  --success-11: #{light-dark(hsl(160, 84%, 12.67%), hsl(160, 84%, 84.75%))};
+  --success-12: #{light-dark(hsl(160, 84%, 3.9%), hsl(160, 84%, 100%))};
+  --success-g2: linear-gradient(180deg, hsl(160, 84%, 54.25%) 0%, hsl(160, 84%, 39%) 50%);
+  --success-g3: linear-gradient(180deg, hsl(160, 84%, 69.5%) 0%, hsl(160, 84%, 39%) 50%);
+
+  --base-1: #{light-dark(#fff, hsl(0, 0%, 5.75%))};
+  --base-2: #{light-dark(hsl(0, 0%, 98.05%), hsl(0, 0%, 8.75%))};
+  --base-3: #{light-dark(hsl(0, 0%, 94.5%), hsl(0, 0%, 11.5%))};
+  --base-4: #{light-dark(hsl(0, 0%, 84.75%), hsl(0, 0%, 17.25%))};
+  --base-5: #{light-dark(hsl(0, 0%, 79.75%), hsl(0, 0%, 17.25%))};
+  --base-6: #{light-dark(hsl(0, 0%, 66.25%), hsl(0, 0%, 28.75%))};
+  --base-7: #{light-dark(hsl(0, 0%, 54.5%), hsl(0, 0%, 34.5%))};
+  --base-8: #{light-dark(hsl(0, 0%, 46%), hsl(0, 0%, 46%))};
+  --base-9: #{light-dark(hsl(0, 0%, 35.65%), hsl(0, 0%, 59.5%))};
+  --base-10: #{light-dark(hsl(0, 0%, 25.3%), hsl(0, 0%, 73%))};
+  --base-11: #{light-dark(hsl(0, 0%, 14.95%), hsl(0, 0%, 86.5%))};
+  --base-12: #{light-dark(hsl(0, 0%, 4.6%), hsl(0, 0%, 100%))};
+
+  --base-g2: linear-gradient(180deg, hsl(0, 0%, 66.25%) 0%, hsl(0, 0%, 46%) 50%);
+  --base-g3: linear-gradient(180deg, hsl(0, 0%, 73%) 0%, hsl(0, 0%, 46%) 50%);
+  --base-g6: linear-gradient(180deg, hsl(0, 0%, 25.3%) 0%, hsl(0, 0%, 14.95%) 50%);
+  --base-g7: linear-gradient(180deg, hsl(0, 0%, 35.65%) 0%, hsl(0, 0%, 14.95%) 50%);
+
+  --primary-c8: var(--light-text);
+  --accent-c8: var(--light-text);
+  --warn-c8: var(--light-text);
+  --error-c8: var(--light-text);
+  --success-c8: var(--light-text);
+
+  --display-10: 600 #{p2r(80)} / normal Inter Tight, sans-serif;
+  --display-20: 600 #{p2r(72)} / normal Inter Tight, sans-serif;
+  --display-30: 600 #{p2r(64)} / normal Inter Tight, sans-serif;
+  --display-40: 600 #{p2r(56)} / normal Inter Tight, sans-serif;
+  --display-50: 600 #{p2r(48)} / normal Inter Tight, sans-serif;
+
+  --title-10: 500 #{p2r(40)} / normal Inter Tight, sans-serif;
+  --title-20: 500 #{p2r(32)} / normal Inter Tight, sans-serif;
+  --title-30: 500 #{p2r(24)} / normal Inter Tight, sans-serif;
+
+  --title-10B: 600 #{p2r(40)} / normal Inter Tight, sans-serif;
+  --title-20B: 600 #{p2r(32)} / normal Inter Tight, sans-serif;
+  --title-30B: 600 #{p2r(24)} / normal Inter Tight, sans-serif;
+
+  --paragraph-10: 500 #{p2r(18)} / normal Inter Tight, sans-serif;
+  --paragraph-20: 500 #{p2r(16)} / normal Inter Tight, sans-serif;
+  --paragraph-30: 500 #{p2r(14)} / normal Inter Tight, sans-serif;
+  --paragraph-40: 500 #{p2r(12)} / normal Inter Tight, sans-serif;
+
+  --paragraph-10B: 600 #{p2r(18)} / normal Inter Tight, sans-serif;
+  --paragraph-20B: 600 #{p2r(16)} / normal Inter Tight, sans-serif;
+  --paragraph-30B: 600 #{p2r(14)} / #{p2r(18)} Inter Tight, sans-serif;
+  --paragraph-40B: 600 #{p2r(12)} / normal Inter Tight, sans-serif;
+
+  --code-10: 500 #{p2r(16)} / normal monospace;
+  --code-20: 500 #{p2r(14)} / normal monospace;
+  --code-30: 500 #{p2r(12)} / normal monospace;
+
+  --shape-1: #{p2r(4)};
+  --shape-2: #{p2r(8)};
+  --shape-3: #{p2r(12)};
+  --shape-4: #{p2r(16)};
+  --shape-5: #{p2r(20)};
+
+  --box-shadow-10: 0 1px 2px 0 rgba(18, 18, 23, 0.07);
+  --box-shadow-20: 0 1px 3px 0 rgba(18, 18, 23, 0.1);
+  --box-shadow-30: 0 1px 4px -1px rgba(18, 18, 23, 0.08);
+  --box-shadow-35: 0 4px 6px -1px rgba(18, 18, 23, 0.08);
+  --box-shadow-40: 0 10px 15px -3px rgba(18, 18, 23, 0.08);
+  --box-shadow-50: 0 20px 25px -5px rgba(18, 18, 23, 0.1);
+  --box-shadow-60: 0 25px 50px -12px rgba(18, 18, 23, 0.25);
+
+  --dark-text: #000;
+  --light-text: #fff;
+
+  &.dark {
+    --ship-light: ;
+    --ship-dark: initial;
+    color-scheme: dark;
+  }
+
+  // TODO add a good way to toggle between light and dark mode served from the ui lib
+  //
+  // @media (prefers-color-scheme: dark) {
+  //   --ship-light: ;
+  //   --ship-dark: initial;
+  //   color-scheme: dark;
+
+  //   &.light {
+  //     --ship-light: initial;
+  //     --ship-dark: ;
+  //     color-scheme: light;
+  //   }
+  // }
+}

package/styles/core/core.scss

@@ -0,0 +1,4 @@
+@forward './core/variables';
+@forward './core/layout';
+@forward './core/loader';
+@forward './core/typography';

package/styles/core/fonts/_inter-tight.scss

@@ -0,0 +1,11 @@
+$useInterTight: true !default;
+
+@if ($useInterTight == true) {
+  @font-face {
+    font-family: 'Inter Tight';
+    src: url('/ship-ui-assets/fonts/InterTight-VariableFont_wght.woff2') format('woff2-variations');
+    font-weight: 100 900;
+    font-stretch: 75% 125%;
+    font-style: normal;
+  }
+}

package/styles/core/helpers/fn/color-mix.scss

@@ -0,0 +1,7 @@
+@function lighten($color, $percentage) {
+  @return color-mix(in srgb, $color, #fff $percentage);
+}
+
+@function darken($color, $percentage) {
+  @return color-mix(in srgb, $color, #000 $percentage);
+}

package/styles/core/helpers/fn/dp.scss

@@ -0,0 +1,14 @@
+@use 'sass:list';
+
+// Gutter
+$base-dp: 4px;
+
+@function dp($listTimes) {
+  $new-dp-list: ();
+
+  @each $times in $listTimes {
+    $new-dp-list: list.append($new-dp-list, $times * $base-dp, 'space');
+  }
+
+  @return $new-dp-list;
+}

package/styles/core/helpers/fn/p2r.scss

@@ -0,0 +1,23 @@
+@use 'sass:list' as list;
+@use 'sass:meta' as meta;
+@use 'sass:math' as math; // Include math module for division
+
+$base-font-size-in-px: 16 !default;
+
+@function p2r($pxValues) {
+  $remValues: ();
+
+  @each $pxValue in $pxValues {
+    @if $pxValue == auto {
+      $remValues: list.append($remValues, auto);
+    } @else if meta.type-of($pxValue) != number {
+      $pxValue: math.div($pxValue, 1px);
+    } @else if $pxValue == 0 {
+      $remValues: list.append($remValues, 0);
+    } @else {
+      $remValues: list.append($remValues, (math.div($pxValue, $base-font-size-in-px) * 1rem));
+    }
+  }
+
+  @return $remValues;
+}

package/styles/core/helpers/mixins/border-gradient.scss

@@ -0,0 +1,61 @@
+@use 'sass:list';
+@use 'sass:map';
+
+$palettes: 'primary', 'accent', 'grey', 'warn', 'success';
+$colors: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
+
+@mixin borderGradient($mode: light, $width: 1px, $direction: right) {
+  $opacity: 0.48;
+  $bgColor: #fff;
+
+  @if $mode == dark {
+    $opacity: 0.06;
+    $bgColor: #000;
+  }
+
+  @if $mode == flipLight {
+    $opacity: 0.15;
+    $bgColor: #fff;
+  }
+
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: calc(100% - #{$width * 2});
+    height: calc(100% - #{$width * 2});
+    border-width: $width;
+    border-style: solid;
+
+    @if $direction == right {
+      border-image: linear-gradient(
+          to $direction,
+          rgba($bgColor, 0),
+          rgba($bgColor, $opacity),
+          rgba($bgColor, 0)
+        )
+        100%
+        1;
+    }
+
+    @if $direction == bottom {
+      border-image: linear-gradient(
+          to $direction,
+          rgba($bgColor, 0),
+          rgba($bgColor, $opacity),
+          rgba($bgColor, 0)
+        )
+        1
+        100%;
+    }
+  }
+}
+
+@mixin noBorderGradient() {
+  &:before {
+    content: none;
+  }
+}

package/styles/core/helpers/mixins/breakpoint.scss

@@ -0,0 +1,217 @@
+@use 'sass:list' as list;
+@use 'sass:math' as math;
+@use 'sass:meta' as meta;
+@use 'sass:map' as map;
+@use 'sass:string' as string;
+
+/**
+ * $bp-giga:  2500px;
+ * $bp-mega:  1900px;
+ * $bp-kilo:  1360px;
+ * $bp-centi: 1024px;
+ * $bp-milli:  768px;
+ * $bp-nano:   480px;
+ * $bp-pico:   320px;
+  */
+
+$bp-giga: 2500px;
+$bp-mega: 1900px;
+$bp-kilo: 1360px;
+$bp-centi: 1024px;
+$bp-milli: 768px;
+$bp-nano: 480px;
+$bp-pico: 320px;
+
+$breakpoint-map: (
+  giga: (
+    $bp-giga,
+  ),
+  mega: (
+    $bp-mega,
+  ),
+  kilo: (
+    $bp-kilo,
+  ),
+  centi: (
+    $bp-centi,
+  ),
+  milli: (
+    $bp-milli,
+  ),
+  nano: (
+    $bp-nano,
+  ),
+  pico: (
+    $bp-pico,
+  ),
+);
+
+@function to-string($value) {
+  @return meta.inspect($value);
+}
+
+/**
+   *  First section controls media quries that contains from-to values
+   *  if numbers are parsed math.is-unitless it will default to px's, if you need to use em's just parse the unit in the end
+   *
+   *  Example:
+    @include breakpoint (0 nano) {
+      // @media only screen and (min-width: 0px) and (max-width: 480px) {}
+    }
+    @include breakpoint (nano milli) {
+      // @media only screen and (min-width: 480px) and (max-width: 768px) {}
+    }
+    @include breakpoint (1024 1360) {
+      // @media only screen and (min-width: 1024px) and (max-width: 1360px) {}
+    }
+    @include breakpoint (milli 1024) {
+      // @media only screen and (min-width: 768px) and (max-width: 1024px) {}
+    }
+   *  You can use this very simple and you can turn from min to max width
+   *  only by adding dash infront of your breakpoint keyword
+   *
+   *  Example:
+    @include breakpoint (milli) {
+      // @media only screen and (min-width: 768px) {}
+    }
+    @include breakpoint (-nano) {
+      // @media only screen and (max-width: 480px) {}
+    }
+   *  There is also support for writing strings, and printable breakpoint
+   *
+   *  Example:
+    @include breakpoint ('max-width: 700px') {
+      // @media only screen and (max-width: 700px) {}
+    }
+    @include breakpoint (print) {
+      // @media print {}
+    }
+   */
+@mixin breakpoint($point) {
+  @if list.length($point) > 1 {
+    $point1: list.nth($point, 1);
+    $point2: list.nth($point, 2);
+
+    @if meta.type-of($point1) == 'number' and math.is-unitless($point1) {
+      $point1: list.nth($point, 1) + 0px;
+    }
+
+    @if meta.type-of($point2) == 'number' and math.is-unitless($point2) {
+      $point2: list.nth($point, 2) + 0px;
+    }
+
+    @if meta.type-of($point1) == 'number' and meta.type-of($point2) == 'number' {
+      @media only screen and (min-width: $point1) and (max-width: $point2) {
+        @content;
+      }
+    } @else if meta.type-of($point1) == 'number' {
+      @media only screen and (min-width: $point1) and (max-width: map.map-get($breakpoint-map, $point2)) {
+        @content;
+      }
+    } @else if meta.type-of($point2) == 'number' {
+      @media only screen and (min-width: map.map-get($breakpoint-map, $point1)) and (max-width: $point2) {
+        @content;
+      }
+    } @else {
+      @media only screen and (min-width: map.map-get($breakpoint-map, $point1)) and (max-width: map.map-get($breakpoint-map, $point2)) {
+        @content;
+      }
+    }
+  } @else {
+    @if $point == giga or $point == -giga {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-giga) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-giga) {
+          @content;
+        }
+      }
+    } @else if $point == mega or $point == -mega {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-mega) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-mega) {
+          @content;
+        }
+      }
+    } @else if $point == kilo or $point == -kilo {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-kilo) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-kilo) {
+          @content;
+        }
+      }
+    } @else if $point == centi or $point == -centi {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-centi) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-centi) {
+          @content;
+        }
+      }
+    } @else if $point == milli or $point == -milli {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-milli) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-milli) {
+          @content;
+        }
+      }
+    } @else if $point == nano or $point == -nano {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-nano) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-nano) {
+          @content;
+        }
+      }
+    } @else if $point == pico or $point == -pico {
+      @if string.index(to-string($point), '-') == 1 {
+        @media only screen and (max-width: $bp-pico) {
+          @content;
+        }
+      } @else {
+        @media only screen and (min-width: $bp-pico) {
+          @content;
+        }
+      }
+    } @else if $point == iphoneX {
+      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
+        @content;
+      }
+    } @else if $point == iphoneX-portrait {
+      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
+        @content;
+      }
+    } @else if $point == iphoneX-landscape {
+      @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
+        @content;
+      }
+    } @else if $point == print {
+      @media print {
+        @content;
+      }
+    } @else if meta.type-of($point) == 'number' {
+      @media only screen and (min-width: $point) {
+        @content;
+      }
+    } @else if string.index($point, max) == 1 or string.index($point, min) == 1 {
+      @media only screen and (#{$point}) {
+        @content;
+      }
+    }
+  }
+}

package/styles/core/helpers/mixins/ellipsis.scss

@@ -0,0 +1,7 @@
+@mixin ellipsis() {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  word-wrap: break-word;
+}

package/styles/core/helpers/mixins/overflow-scrolling.scss

@@ -0,0 +1,18 @@
+@mixin overflowScrolling($dir: y) {
+  @if $dir == y {
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: auto;
+  }
+
+  @if $dir == x {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: auto;
+  }
+
+  @if $dir == xy or $dir == yx {
+    overflow: auto;
+    -webkit-overflow-scrolling: auto;
+  }
+}

package/styles/core/helpers/mixins/wrapper.scss

@@ -0,0 +1,16 @@
+@use '../mixins/breakpoint.scss' as *;
+@use '../fn/p2r.scss' as *;
+@use 'sass:math' as mat;
+
+@mixin wrapper($gap: p2r(32), $padding: p2r(32)) {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: $gap;
+  padding: $padding;
+
+  @include breakpoint(-milli) {
+    gap: calc(#{$gap} / 2);
+    padding: calc(#{$padding} / 2);
+  }
+}

package/styles/core/polyfill/light-dark.scss

@@ -0,0 +1,3 @@
+@function light-dark($light, $dark) {
+  @return var(--ship-light, $light) var(--ship-dark, $dark);
+}

package/styles/helpers.scss

@@ -0,0 +1,13 @@
+// Functions
+@forward './core/helpers/fn/p2r';
+@forward './core/helpers/fn/color-mix';
+
+// light-dark polyfill
+@forward './core/polyfill/light-dark.scss';
+
+// Mixins
+@forward './core/helpers/mixins/breakpoint';
+@forward './core/helpers/mixins/wrapper';
+@forward './core/helpers/mixins/ellipsis';
+@forward './core/helpers/mixins/overflow-scrolling';
+// @forward './core/helpers/mixins/border-gradient';