@ship-ui/core 0.13.32 → 0.14.2

package/index.d.ts

@@ -38,7 +38,7 @@ declare class ShipAlertComponent {
     alertClasses: _angular_core.Signal<any>;
     removeAlert(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipAlertComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipAlertComponent, "sh-alert", never, { "alertService": { "alias": "alertService"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "[title]", "*", "[content]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipAlertComponent, "sh-alert", never, { "alertService": { "alias": "alertService"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, ["[icon]", "sh-icon", "[title]", "*", "[content]", "p"], true, never>;
 }
 
 declare class ShipAlertContainerComponent {
@@ -139,7 +139,8 @@ declare class ShipCardComponent {
 }
 
 declare class ShipCheckboxComponent {
-    #private;
+    currentClassList: _angular_core.Signal<string>;
+    showClasses: _angular_core.Signal<string[] | "">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ShipCheckboxComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ShipCheckboxComponent, "sh-checkbox", never, {}, {}, never, ["*"], true, never>;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ship-ui/core",
   "license": "MIT",
-  "version": "0.13.32",
+  "version": "0.14.2",
   "peerDependencies": {
     "@angular/common": ">=19",
     "@angular/core": ">=19"

package/styles/components/ship-alert-container.component.scss

@@ -37,8 +37,8 @@ $shipAlert: true !default;
       justify-content: center;
       width: p2r(24);
       height: p2r(24);
-      background-color: var(--grey-500);
-      color: var(--grey-contrast-500);
+      background-color: var(--base-8);
+      color: var(--base-1);
       position: absolute;
       bottom: 0;
       right: 0;

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

@@ -4,13 +4,6 @@ $shipAlert: true !default;
 @if $shipAlert == true {
   sh-alert {
     --alert-ad: 400ms;
-    --alert-bg: var(--base-2);
-
-    --alert-bc: var(--base-4);
-    --alert-state-ic: var(--base-12);
-    --alert-close-ic: var(--base-8);
-    --alert-title-c: var(--base-12);
-    --alert-content-c: var(--base-8);
     --alert-bs: var(--box-shadow-10);
     --alert-p: #{p2r(8 12)};
 
@@ -30,6 +23,23 @@ $shipAlert: true !default;
     transform: translateY(0);
     box-shadow: var(--alert-bs);
 
+    &.simple {
+      .content > * {
+        color: var(--sheet-c);
+        opacity: 0.7;
+      }
+    }
+
+    &.flat,
+    &.raised {
+      --sheet-c: #fff;
+
+      .content > * {
+        color: var(--sheet-c);
+        opacity: 0.8;
+      }
+    }
+
     .alert {
       display: grid;
       grid-template-columns: auto 1fr auto;
@@ -40,9 +50,6 @@ $shipAlert: true !default;
       padding: var(--alert-p);
       align-items: flex-start;
       gap: p2r(4 8);
-      border: 1px solid var(--alert-bc);
-      border-radius: var(--shape-2);
-      background: var(--alert-bg);
     }
 
     .icon {
@@ -72,14 +79,12 @@ $shipAlert: true !default;
 
     .title {
       grid-area: title;
-      color: var(--alert-title-c);
       padding-top: p2r(2);
       font-weight: 500;
     }
 
     .content {
       grid-area: content;
-      color: var(--alert-content-c);
 
       &:empty {
         display: none;
@@ -127,131 +132,6 @@ $shipAlert: true !default;
       }
     }
 
-    &.primary {
-      --alert-state-ic: var(--primary-8);
-      --alert-close-ic: var(--primary-8);
-      --alert-title-c: var(--primary-8);
-      --alert-content-c: var(--primary-8);
-      --alert-bg: var(--primary-1);
-      --alert-bc: var(--primary-4);
-    }
-
-    &.accent {
-      --alert-state-ic: var(--accent-8);
-      --alert-close-ic: var(--accent-8);
-      --alert-title-c: var(--accent-8);
-      --alert-content-c: var(--accent-8);
-      --alert-bg: var(--accent-1);
-      --alert-bc: var(--accent-4);
-    }
-
-    &.warn {
-      --alert-state-ic: var(--warn-8);
-      --alert-close-ic: var(--warn-8);
-      --alert-title-c: var(--warn-8);
-      --alert-content-c: var(--warn-8);
-      --alert-bg: var(--warn-1);
-      --alert-bc: var(--warn-4);
-    }
-
-    &.error {
-      --alert-state-ic: var(--error-8);
-      --alert-close-ic: var(--error-8);
-      --alert-title-c: var(--error-8);
-      --alert-content-c: var(--error-8);
-      --alert-bg: var(--error-1);
-      --alert-bc: var(--error-4);
-    }
-
-    &.success {
-      --alert-state-ic: var(--success-8);
-      --alert-close-ic: var(--success-8);
-      --alert-title-c: var(--success-8);
-      --alert-content-c: var(--success-8);
-      --alert-bg: var(--success-1);
-      --alert-bc: var(--success-4);
-    }
-
-    &.simple {
-      --alert-bc: var(--alert-bg);
-
-      &.primary {
-        --alert-content-c: var(--primary-6);
-      }
-
-      &.accent {
-        --alert-content-c: var(--accent-6);
-      }
-
-      &.warn {
-        --alert-content-c: var(--warn-6);
-      }
-
-      &.error {
-        --alert-content-c: var(--error-6);
-      }
-
-      &.success {
-        --alert-content-c: var(--success-7);
-      }
-    }
-
-    &.raised,
-    &.flat {
-      --alert-title-c: #fff;
-      --alert-content-c: #fff;
-      --alert-bg: var(--base-8);
-      --alert-bc: var(--alert-bg);
-      --alert-state-ic: #fff;
-      --alert-close-ic: #fff;
-      --alert-bs: none;
-
-      &.primary {
-        --alert-bg: var(--primary-8);
-      }
-
-      &.accent {
-        --alert-bg: var(--accent-8);
-      }
-
-      &.warn {
-        --alert-bg: var(--warn-8);
-      }
-
-      &.error {
-        --alert-bg: var(--error-8);
-      }
-
-      &.success {
-        --alert-bg: var(--success-8);
-      }
-    }
-
-    &.raised {
-      --alert-bg: var(--base-g6);
-      --alert-p: #{p2r(9 12)};
-
-      &.primary {
-        --alert-bg: var(--primary-g2);
-      }
-
-      &.accent {
-        --alert-bg: var(--accent-g2);
-      }
-
-      &.warn {
-        --alert-bg: var(--warn-g2);
-      }
-
-      &.error {
-        --alert-bg: var(--error-g2);
-      }
-
-      &.success {
-        --alert-bg: var(--success-g2);
-      }
-    }
-
     &:has(.content:empty) .alert {
       grid-template-rows: auto;
       grid-template-areas: 'stateIcon title closeIcon';
@@ -260,14 +140,5 @@ $shipAlert: true !default;
     &:has([content]) .alert {
       --alert-p: #{p2r(12)};
     }
-
-    &.outlined {
-      --alert-bg: var(--base-1);
-      --alert-bc: var(--base-4);
-      --alert-title-c: var(--base-12);
-      --alert-content-c: var(--base-8);
-      --alert-close-ic: var(--base-8);
-      --alert-bs: var(--box-shadow-20);
-    }
   }
 }

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

@@ -5,15 +5,7 @@ $shipButtonShadow: false !default;
 @if $shipButton == true {
   [shButton] {
     --btn-h: #{p2r(40)};
-    --btn-s: var(--shape-2);
     --btn-f: var(--paragraph-20);
-    --loader-c: var(--base-8);
-    --btn-c: var(--base-12);
-    --btn-ic: var(--base-12);
-    --btn-ir: var(0deg);
-    --btn-bg: var(--base-1);
-    --btn-bg-h: var(--base-2);
-    --btn-bc: var(--base-4);
 
     @if $shipButtonShadow != false {
       --btn-bs: var(--box-shadow-10);
@@ -37,18 +29,11 @@ $shipButtonShadow: false !default;
     overflow: visible;
     vertical-align: middle;
     text-decoration: none;
-
-    border-radius: var(--btn-s);
     height: var(--btn-h);
-    border: 1px solid var(--btn-bc);
     box-shadow: var(--btn-bs);
     font: var(--btn-f);
 
-    background: var(--btn-bg);
-    color: var(--btn-c);
-    transition:
-      background 75ms linear,
-      transform 125ms linear;
+    transition: transform 125ms linear;
     transform: scale(1);
 
     &:active {
@@ -56,41 +41,16 @@ $shipButtonShadow: false !default;
     }
 
     sh-icon {
-      color: var(--btn-ic);
       rotate: var(--btn-ir);
       transition: rotate 125ms ease-in-out;
     }
 
-    &:has(sh-icon:only-child),
-    &:has(sh-icon:first-child + sh-icon:last-child) {
-      padding: p2r(0 9);
+    &:has(sh-icon:first-child) {
+      padding-left: p2r(10);
     }
 
-    &:hover {
-      --btn-c: var(--base-12);
-      background: var(--btn-bg-h);
-    }
-
-    &.loader.outlined,
-    &.loader.simple,
-    &.loader.flat,
-    &.loader.raised,
-    &.loader {
-      color: transparent;
-      width: auto;
-
-      &:hover,
-      &.primary,
-      &.accent,
-      &.warn,
-      &.error,
-      &.success {
-        color: transparent;
-      }
-
-      > * {
-        opacity: 0;
-      }
+    &:has(sh-icon:last-child) {
+      padding-right: p2r(10);
     }
 
     &.rotated-icon sh-icon {
@@ -108,10 +68,13 @@ $shipButtonShadow: false !default;
         font-size: p2r(16);
       }
 
-      &:has(sh-icon:only-child),
-      &:has(sh-icon:first-child + sh-icon:last-child) {
-        padding: p2r(0 7);
-      }
+      // &:has(sh-icon:first-child) {
+      //   padding-left: p2r(8);
+      // }
+
+      // &:has(sh-icon:last-child) {
+      //   padding-right: p2r(8);
+      // }
     }
 
     &[disabled] {
@@ -128,216 +91,5 @@ $shipButtonShadow: false !default;
       pointer-events: none;
       user-select: none;
     }
-
-    // Base
-    &.primary {
-      --btn-ic: var(--primary-8);
-    }
-
-    &.accent {
-      --btn-ic: var(--accent-8);
-    }
-
-    &.warn {
-      --btn-ic: var(--warn-8);
-    }
-
-    &.error {
-      --btn-ic: var(--error-8);
-    }
-
-    &.success {
-      --btn-ic: var(--success-8);
-    }
-
-    &.simple,
-    &.outlined {
-      --btn-c: var(--base-12);
-      --btn-bg: var(--base-2);
-      --btn-bg-h: var(--base-3);
-
-      transition:
-        color 80ms linear,
-        background 80ms linear;
-
-      &.primary {
-        --loader-c: var(--primary-8);
-
-        --btn-bg: var(--primary-1);
-        --btn-bg-h: var(--primary-2);
-        --btn-bc: var(--primary-4);
-      }
-
-      &.accent {
-        --loader-c: var(--accent-8);
-
-        --btn-bg: var(--accent-1);
-        --btn-bg-h: var(--accent-2);
-        --btn-bc: var(--accent-4);
-      }
-
-      &.warn {
-        --loader-c: var(--warn-8);
-
-        --btn-bg: var(--warn-1);
-        --btn-bg-h: var(--warn-2);
-        --btn-bc: var(--warn-4);
-      }
-
-      &.error {
-        --loader-c: var(--error-8);
-
-        --btn-bg: var(--error-1);
-        --btn-bg-h: var(--error-2);
-        --btn-bc: var(--error-4);
-      }
-
-      &.success {
-        --loader-c: var(--success-8);
-
-        --btn-bg: var(--success-1);
-        --btn-bg-h: var(--success-2);
-        --btn-bc: var(--success-4);
-      }
-    }
-
-    &.simple,
-    &.simple.primary,
-    &.simple.accent,
-    &.simple.warn,
-    &.simple.error,
-    &.simple.success {
-      --btn-bc: var(--btn-bg);
-    }
-
-    &.simple {
-      &.primary {
-        --btn-c: var(--primary-8);
-      }
-
-      &.accent {
-        --btn-c: var(--accent-8);
-      }
-
-      &.warn {
-        --btn-c: var(--warn-8);
-      }
-
-      &.error {
-        --btn-c: var(--error-8);
-      }
-
-      &.success {
-        --btn-c: var(--success-8);
-      }
-    }
-
-    &.flat {
-      --loader-c: var(--base-1);
-      --btn-c: #fff;
-      --btn-ic: #fff;
-      --btn-bg: var(--base-8);
-      --btn-bg-h: #{lighten(var(--base-8), 10%)};
-
-      border: 0;
-
-      &:has(sh-icon:only-child) {
-        padding: p2r(0 10);
-      }
-
-      &.small:has(sh-icon:only-child) {
-        padding: p2r(0 8);
-      }
-
-      &.primary {
-        --btn-c: var(--primary-c8);
-        --btn-bg: var(--primary-8);
-        --btn-bg-h: var(--primary-6);
-      }
-
-      &.accent {
-        --btn-c: var(--accent-c8);
-        --btn-bg: var(--accent-8);
-        --btn-bg-h: var(--accent-6);
-      }
-
-      &.warn {
-        --btn-c: var(--warn-c8);
-        --btn-bg: var(--warn-8);
-        --btn-bg-h: var(--warn-6);
-      }
-
-      &.error {
-        --btn-c: var(--error-c8);
-        --btn-bg: var(--error-8);
-        --btn-bg-h: var(--error-6);
-      }
-
-      &.success {
-        --btn-c: var(--success-c8);
-        --btn-bg: var(--success-8);
-        --btn-bg-h: var(--success-6);
-      }
-    }
-
-    &.raised {
-      --loader-c: var(--base-1);
-      --btn-c: #fff;
-      --btn-ic: #fff;
-      --btn-bg: var(--base-g6);
-      --btn-bg-h: var(--base-g7);
-
-      border: 0;
-      // &:before {
-      //   content: '';
-      //   position: absolute;
-      //   inset: 0;
-      //   border-radius: inherit;
-      //   background: linear-gradient(to bottom, #fff, #000);
-      //   mask:
-      //     linear-gradient(to bottom, #fff 0 0) content-box,
-      //     linear-gradient(to bottom, #fff 0 0);
-      //   // -webkit-mask: linear-gradient(to bottom, #fff 0 0) content-box, linear-gradient(to bottom, #fff 0 0);
-      //   mask-composite: exclude;
-      // }
-
-      &:has(sh-icon:only-child) {
-        padding: p2r(0 10);
-      }
-
-      &.small:has(sh-icon:only-child) {
-        padding: p2r(0 8);
-      }
-
-      &.primary {
-        --btn-c: var(--primary-c8);
-        --btn-bg: var(--primary-g2);
-        --btn-bg-h: var(--primary-g3);
-      }
-
-      &.accent {
-        --btn-c: var(--accent-c8);
-        --btn-bg: var(--accent-g2);
-        --btn-bg-h: var(--accent-g3);
-      }
-
-      &.warn {
-        --btn-c: var(--warn-c8);
-        --btn-bg: var(--warn-g2);
-        --btn-bg-h: var(--warn-g3);
-      }
-
-      &.error {
-        --btn-c: var(--error-c8);
-        --btn-bg: var(--error-g2);
-        --btn-bg-h: var(--error-g3);
-      }
-
-      &.success {
-        --btn-c: var(--success-c8);
-        --btn-bg: var(--success-g2);
-        --btn-bg-h: var(--success-g3);
-      }
-    }
   }
 }