@ship-ui/core 0.13.32 → 0.14.1

package/styles/components/ship-chip.component.scss

@@ -7,10 +7,11 @@ $shipChipShadow: false !default;
   sh-chip {
     --chip-h: #{p2r(32)};
     --chip-s: calc(var(--chip-h) / 2);
-    --chip-c: var(--base-12);
-    --chip-ic: var(--base-12);
-    --chip-bg: var(--base-1);
-    --chip-bc: var(--base-4);
+
+    &.sh-sheet {
+      --sheet-c: var(--chip-c);
+      --sheet-s: var(--chip-s);
+    }
 
     @if $shipChipShadow != false {
       --chip-bs: var(--box-shadow-10);
@@ -25,10 +26,7 @@ $shipChipShadow: false !default;
 
     font: var(--paragraph-30B);
     height: var(--chip-h);
-    border-radius: var(--chip-s);
-    border: 1px solid var(--chip-bc);
     box-shadow: var(--chip-bs);
-    background: var(--chip-bg);
     white-space: nowrap;
 
     div {
@@ -38,41 +36,6 @@ $shipChipShadow: false !default;
       color: var(--chip-c);
     }
 
-    &.dynamic.simple,
-    &.dynamic {
-      // TODO investigate
-      // - if we can make the text if on a light colored background same color as the background but much darker
-      // - if we can make the text if on a dark colored background same color as the background but much lighter
-      // div {
-      //   color: var(--chip-bg);
-      //   filter: invert(1) grayscale(1) brightness(1.3) contrast(8000);
-      //   mix-blend-mode: luminosity;
-      //   opacity: 1;
-
-      //   sh-icon {
-      //     color: inherit;
-      //   }
-      // }
-
-      // position: relative;
-      // overflow: hidden;
-
-      // &:before {
-      //   content: '';
-      //   position: absolute;
-      //   inset: 0;
-      //   background-color: var(--chip-c);
-      //   opacity: 0.1;
-      //   z-index: 0;
-      // }
-      border-color: transparent;
-      --chip-bg: rgb(from var(--chip-c) r g b / 0.14);
-      color: var(--chip-c);
-      sh-icon {
-        color: inherit;
-      }
-    }
-
     &.sharp {
       --chip-s: calc(var(--chip-h) / 4);
       padding: p2r(0 8);
@@ -121,170 +84,5 @@ $shipChipShadow: false !default;
       pointer-events: none;
       user-select: none;
     }
-
-    &.primary {
-      --chip-ic: var(--primary-8);
-    }
-
-    &.accent {
-      --chip-ic: var(--accent-8);
-    }
-
-    &.warn {
-      --chip-ic: var(--warn-8);
-    }
-
-    &.error {
-      --chip-ic: var(--error-8);
-    }
-
-    &.success {
-      --chip-ic: var(--success-8);
-    }
-
-    &.simple,
-    &.outlined {
-      --chip-c: var(--base-12);
-      --chip-bg: var(--base-2);
-
-      transition: color 80ms linear;
-
-      &.primary {
-        --loader-c: var(--primary-8);
-
-        --chip-bg: var(--primary-1);
-        --chip-bc: var(--primary-4);
-      }
-
-      &.accent {
-        --loader-c: var(--accent-8);
-
-        --chip-bg: var(--accent-1);
-        --chip-bc: var(--accent-4);
-      }
-
-      &.warn {
-        --loader-c: var(--warn-8);
-
-        --chip-bg: var(--warn-1);
-        --chip-bc: var(--warn-4);
-      }
-
-      &.error {
-        --loader-c: var(--error-8);
-
-        --chip-bg: var(--error-1);
-        --chip-bc: var(--error-4);
-      }
-
-      &.success {
-        --loader-c: var(--success-8);
-
-        --chip-bg: var(--success-1);
-        --chip-bc: var(--success-4);
-      }
-    }
-
-    &.simple {
-      --chip-c: var(--base-12);
-      --chip-bg: var(--base-3);
-      --chip-bc: var(--chip-bg);
-
-      transition: color 80ms linear;
-
-      &.primary {
-        --chip-c: var(--primary-8);
-        --chip-bc: var(--chip-bg);
-      }
-
-      &.accent {
-        --chip-c: var(--accent-8);
-        --chip-bc: var(--chip-bg);
-      }
-
-      &.warn {
-        --chip-c: var(--warn-8);
-        --chip-bc: var(--chip-bg);
-      }
-
-      &.error {
-        --chip-c: var(--error-8);
-        --chip-bc: var(--chip-bg);
-      }
-
-      &.success {
-        --chip-c: var(--success-8);
-        --chip-bc: var(--chip-bg);
-      }
-    }
-
-    &.flat {
-      --loader-c: var(--base-1);
-      --chip-c: #fff;
-      --chip-ic: #fff;
-      --chip-bg: var(--base-8);
-
-      border: 0;
-
-      &.primary {
-        --chip-c: var(--primary-c8);
-        --chip-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --chip-c: var(--accent-c8);
-        --chip-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --chip-c: var(--warn-c8);
-        --chip-bg: var(--warn-8);
-      }
-
-      &.error {
-        --chip-c: var(--error-c8);
-        --chip-bg: var(--error-8);
-      }
-
-      &.success {
-        --chip-c: var(--success-c8);
-        --chip-bg: var(--success-8);
-      }
-    }
-
-    &.raised {
-      --loader-c: var(--base-1);
-      --chip-c: #fff;
-      --chip-ic: #fff;
-      --chip-bg: var(--base-g6);
-
-      border: 0;
-      box-shadow: none;
-
-      &.primary {
-        --chip-c: var(--primary-c8);
-        --chip-bg: var(--primary-g2);
-      }
-
-      &.accent {
-        --chip-c: var(--accent-c8);
-        --chip-bg: var(--accent-g2);
-      }
-
-      &.warn {
-        --chip-c: var(--warn-c8);
-        --chip-bg: var(--warn-g2);
-      }
-
-      &.error {
-        --chip-c: var(--error-c8);
-        --chip-bg: var(--error-g2);
-      }
-
-      &.success {
-        --chip-c: var(--success-c8);
-        --chip-bg: var(--success-g2);
-      }
-    }
   }
 }

package/styles/components/ship-event-card.component.scss

@@ -4,19 +4,10 @@ $shipEventCard: true !default;
 
 @if $shipEventCard == true {
   sh-event-card {
-    --ec-c: var(--base-12);
-    --ec-bg: var(--base-1);
-    --ec-bc: var(--base-4);
-    --ec-s: var(--shape-2);
-
     display: flex;
     gap: p2r(8);
     width: 100%;
     padding: p2r(16);
-    border-radius: var(--ec-s);
-    background: var(--ec-bg);
-    border: 1px solid var(--ec-bc);
-    color: var(--ec-c);
 
     .content {
       display: flex;
@@ -25,7 +16,7 @@ $shipEventCard: true !default;
       flex: 1;
 
       > * {
-        color: var(--ec-c);
+        color: var(--sheet-c);
       }
 
       h1,
@@ -54,155 +45,7 @@ $shipEventCard: true !default;
       display: block;
       border-radius: p2r(3);
       width: p2r(6);
-      background: var(--ec-c);
-    }
-
-    &.dynamic {
-      --ec-bg: rgb(from var(--ec-c) r g b / 0.14);
-      color: var(--ec-c);
-      border: 0;
-
-      .content {
-        p {
-          --ec-pc: rgb(from var(--ec-c) r g b / 0.65);
-          color: var(--ec-pc);
-        }
-      }
-
-      sh-icon {
-        color: inherit;
-      }
-    }
-
-    &.primary {
-      --ec-c: var(--primary-8);
-    }
-
-    &.accent {
-      --ec-c: var(--accent-8);
-    }
-
-    &.warn {
-      --ec-c: var(--warn-8);
-    }
-
-    &.error {
-      --ec-c: var(--error-8);
-    }
-
-    &.success {
-      --ec-c: var(--success-8);
-    }
-
-    &.simple,
-    &.outlined {
-      --ec-c: var(--base-12);
-      --ec-bg: var(--base-2);
-
-      &.primary {
-        --ec-c: var(--primary-8);
-        --ec-bg: var(--primary-1);
-        --ec-bc: var(--primary-4);
-      }
-
-      &.accent {
-        --ec-c: var(--accent-8);
-        --ec-bg: var(--accent-1);
-        --ec-bc: var(--accent-4);
-      }
-
-      &.warn {
-        --ec-c: var(--warn-8);
-        --ec-bg: var(--warn-1);
-        --ec-bc: var(--warn-4);
-      }
-
-      &.error {
-        --ec-c: var(--error-8);
-        --ec-bg: var(--error-1);
-        --ec-bc: var(--error-4);
-      }
-
-      &.success {
-        --ec-c: var(--success-8);
-        --ec-bg: var(--success-1);
-        --ec-bc: var(--success-4);
-      }
-    }
-
-    &.simple,
-    &.simple.primary,
-    &.simple.accent,
-    &.simple.warn,
-    &.simple.error,
-    &.simple.success {
-      --ec-bc: var(--ec-bg);
-    }
-
-    &.flat {
-      --ec-c: #fff;
-      --ec-ic: #fff;
-      --ec-bg: var(--base-8);
-
-      border: 0;
-
-      &.primary {
-        --ec-c: var(--primary-c8);
-        --ec-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --ec-c: var(--accent-c8);
-        --ec-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --ec-c: var(--warn-c8);
-        --ec-bg: var(--warn-8);
-      }
-
-      &.error {
-        --ec-c: var(--error-c8);
-        --ec-bg: var(--error-8);
-      }
-
-      &.success {
-        --ec-c: var(--success-c8);
-        --ec-bg: var(--success-8);
-      }
-    }
-
-    &.raised {
-      --ec-c: #fff;
-      --ec-ic: #fff;
-      --ec-bg: var(--base-g6);
-
-      border: 0;
-
-      &.primary {
-        --ec-c: var(--primary-c8);
-        --ec-bg: var(--primary-g2);
-      }
-
-      &.accent {
-        --ec-c: var(--accent-c8);
-        --ec-bg: var(--accent-g2);
-      }
-
-      &.warn {
-        --ec-c: var(--warn-c8);
-        --ec-bg: var(--warn-g2);
-      }
-
-      &.error {
-        --ec-c: var(--error-c8);
-        --ec-bg: var(--error-g2);
-      }
-
-      &.success {
-        --ec-c: var(--success-c8);
-        --ec-bg: var(--success-g2);
-      }
+      background: var(--sheet-ic);
     }
   }
 }

package/styles/components/ship-sheet.utility.scss

@@ -0,0 +1,298 @@
+@use '../helpers.scss' as *;
+
+$shipSheet: true !default;
+
+@if $shipSheet == true {
+  .sh-sheet-h,
+  .sh-sheet {
+    --sheet-c: var(--base-12);
+    --sheet-bg: var(--base-1);
+    --sheet-bc: var(--base-4);
+    --sheet-s: var(--shape-2);
+    --sheet-ic: var(--base-12);
+    --loader-c: var(--sheet-ic);
+
+    border-radius: var(--sheet-s);
+    background: var(--sheet-bg);
+    border: 1px solid var(--sheet-bc);
+    color: var(--sheet-c);
+
+    &.sharp {
+      --sheet-s: var(--shape-1);
+    }
+
+    &.dynamic {
+      --sheet-bg: rgb(from var(--sheet-c) r g b / 0.14);
+      --sheet-p-c: rgb(from var(--sheet-c) r g b / 0.65);
+      --sheet-ic: var(--sheet-c);
+
+      color: var(--sheet-c);
+      border: 0;
+
+      p {
+        color: var(--sheet-p-c);
+      }
+
+      sh-icon {
+        color: inherit;
+      }
+    }
+
+    &.loading.outlined,
+    &.loading.simple,
+    &.loading.flat,
+    &.loading.raised,
+    &.loading {
+      color: transparent;
+
+      &:hover,
+      &.primary,
+      &.accent,
+      &.warn,
+      &.error,
+      &.success {
+        color: transparent;
+      }
+
+      > * {
+        opacity: 0;
+      }
+
+      &:before {
+        opacity: 0;
+      }
+    }
+
+    &.primary {
+      --sheet-ic: var(--primary-8);
+    }
+
+    &.accent {
+      --sheet-ic: var(--accent-8);
+    }
+
+    &.warn {
+      --sheet-ic: var(--warn-8);
+    }
+
+    &.error {
+      --sheet-ic: var(--error-8);
+    }
+
+    &.success {
+      --sheet-ic: var(--success-8);
+    }
+
+    sh-icon {
+      color: var(--sheet-ic);
+    }
+
+    &.simple,
+    &.outlined {
+      --sheet-c: var(--base-12);
+      --sheet-bg: var(--base-2);
+
+      transition:
+        color 80ms linear,
+        background 80ms linear;
+
+      &.primary {
+        --sheet-c: var(--primary-8);
+        --sheet-bg: var(--primary-1);
+        --sheet-bc: var(--primary-4);
+      }
+
+      &.accent {
+        --sheet-c: var(--accent-8);
+        --sheet-bg: var(--accent-1);
+        --sheet-bc: var(--accent-4);
+      }
+
+      &.warn {
+        --sheet-c: var(--warn-8);
+        --sheet-bg: var(--warn-1);
+        --sheet-bc: var(--warn-4);
+      }
+
+      &.error {
+        --sheet-c: var(--error-8);
+        --sheet-bg: var(--error-1);
+        --sheet-bc: var(--error-4);
+      }
+
+      &.success {
+        --sheet-c: var(--success-8);
+        --sheet-bg: var(--success-1);
+        --sheet-bc: var(--success-4);
+      }
+    }
+
+    &.simple,
+    &.simple.primary,
+    &.simple.accent,
+    &.simple.warn,
+    &.simple.error,
+    &.simple.success {
+      --sheet-bc: var(--sheet-bg);
+    }
+    &.outlined,
+    &.outlined.primary,
+    &.outlined.accent,
+    &.outlined.warn,
+    &.outlined.error,
+    &.outlined.success {
+      --sheet-c: var(--base-12);
+    }
+
+    &.flat {
+      --sheet-c: var(--base-1);
+      --sheet-ic: var(--base-1);
+      --sheet-bg: var(--base-8);
+
+      border: 0;
+
+      &.primary {
+        --sheet-c: var(--primary-c8);
+        --sheet-bg: var(--primary-8);
+      }
+
+      &.accent {
+        --sheet-c: var(--accent-c8);
+        --sheet-bg: var(--accent-8);
+      }
+
+      &.warn {
+        --sheet-c: var(--warn-c8);
+        --sheet-bg: var(--warn-8);
+      }
+
+      &.error {
+        --sheet-c: var(--error-c8);
+        --sheet-bg: var(--error-8);
+      }
+
+      &.success {
+        --sheet-c: var(--success-c8);
+        --sheet-bg: var(--success-8);
+      }
+    }
+
+    &.raised {
+      --sheet-c: var(--base-1);
+      --sheet-ic: var(--base-1);
+      --sheet-bg: var(--base-g6);
+
+      border: 0;
+
+      &.primary {
+        --sheet-c: var(--primary-c8);
+        --sheet-bg: var(--primary-g2);
+      }
+
+      &.accent {
+        --sheet-c: var(--accent-c8);
+        --sheet-bg: var(--accent-g2);
+      }
+
+      &.warn {
+        --sheet-c: var(--warn-c8);
+        --sheet-bg: var(--warn-g2);
+      }
+
+      &.error {
+        --sheet-c: var(--error-c8);
+        --sheet-bg: var(--error-g2);
+      }
+
+      &.success {
+        --sheet-c: var(--success-c8);
+        --sheet-bg: var(--success-g2);
+      }
+    }
+  }
+
+  .sh-sheet-h {
+    --sheet-bg-h: var(--base-2);
+
+    transition:
+      background 75ms linear,
+      transform 125ms linear;
+
+    &:hover {
+      --sheet-bg: var(--base-2);
+
+      &.simple,
+      &.outlined {
+        --sheet-bg: var(--base-3);
+
+        &.primary {
+          --sheet-bg: var(--primary-2);
+        }
+
+        &.accent {
+          --sheet-bg: var(--accent-2);
+        }
+
+        &.warn {
+          --sheet-bg: var(--warn-2);
+        }
+
+        &.error {
+          --sheet-bg: var(--error-2);
+        }
+
+        &.success {
+          --sheet-bg: var(--success-2);
+        }
+      }
+
+      &.flat {
+        --sheet-bg: var(--base-7);
+
+        &.primary {
+          --sheet-bg: var(--primary-7);
+        }
+
+        &.accent {
+          --sheet-bg: var(--accent-7);
+        }
+
+        &.warn {
+          --sheet-bg: var(--warn-7);
+        }
+
+        &.error {
+          --sheet-bg: var(--error-7);
+        }
+
+        &.success {
+          --sheet-bg: var(--success-7);
+        }
+      }
+
+      &.raised {
+        --sheet-bg: var(--base-g7);
+
+        &.primary {
+          --sheet-bg: var(--primary-g3);
+        }
+
+        &.accent {
+          --sheet-bg: var(--accent-g3);
+        }
+
+        &.warn {
+          --sheet-bg: var(--warn-g3);
+        }
+
+        &.error {
+          --sheet-bg: var(--error-g3);
+        }
+
+        &.success {
+          --sheet-bg: var(--success-g3);
+        }
+      }
+    }
+  }
+}

package/styles/core/core/loader.scss

@@ -12,7 +12,7 @@
 .loading {
   position: relative;
 
-  &:before {
+  &:after {
     content: '';
     width: p2r(16);
     height: p2r(16);