@signosoft/signpad-js 0.5.3 → 0.7.0

package/src/styles/signosoft-signpad.css

@@ -1,7 +1,12 @@
+@import "./primitive.css";
+@import "./semantic.css";
+@import "./semantic-dark.css";
 @import "./styles-variables.css";
 
-html {
-  font-family: var(--sign-font-family) !important;
+:host {
+  display: block;
+  width: var(--signpad-width);
+  height: var(--signpad-height);
 }
 
 .signpad-canvas-container {
@@ -41,7 +46,7 @@ html {
 .signpad-canvas-wrapper {
   position: relative;
   width: 100%;
-  padding-top: 1rem;
+  padding-top: var(--spacing-16);
   padding-bottom: 56.25%;
   height: 0;
   background-color: var(--sign-canvas-bg-base);
@@ -93,28 +98,25 @@ html {
   align-items: center;
   height: var(--sign-line-height);
   padding-top: 0;
-  border-top: 0.125rem solid var(--sign-line-border-base);
+  border-top: var(--borderWidth-m) solid var(--sign-line-border-base);
   box-sizing: border-box;
-  padding-top: 0.375rem;
+  padding-top: var(--spacing-4);
   margin: var(--sign-line-margin);
 }
 .signpad-canvas-line-additional-text,
-.signpad-canvas-line-state,
-.signpad-canvas-line-state.connected {
+.signpad-canvas-line-state {
   font-family: var(--sign-font-family);
   font-size: var(--sign-canvas-line-text-font-size);
+  user-select: none;
+  -webkit-user-select: none;
 }
 .signpad-canvas-line-additional-text {
   color: var(--sign-line-additional-text-color);
   margin: 0;
 }
 .signpad-canvas-line-state {
-  color: var(--sign-device-state-text-color-disconnected);
-  margin: 0;
-}
-
-.signpad-canvas-line-state.connected {
   color: var(--sign-device-state-text-color-connected);
+  margin: 0;
 }
 
 .signpad-bottom-bar {
@@ -138,16 +140,20 @@ html {
   width: 100%;
   font-size: var(--sign-button-font-size);
   border-radius: var(--sign-button-border-radius);
+}
+/* Animate only hover/press. Enabling a button (disabled -> enabled) must be instant,
+   otherwise it visibly fades through in-between colors when drawing starts. */
+.btn:hover:not(:disabled),
+.btn:active:not(:disabled) {
+  cursor: pointer;
   transition:
     background-color 0.3s ease,
     color 0.3s ease,
     transform 0.1s ease;
 }
-.btn:hover:not(:disabled) {
-  cursor: pointer;
-}
-.btn:focus:not(:disabled) {
-  outline: none;
+.btn:focus-visible:not(:disabled) {
+  outline: var(--borderWidth-m) solid var(--border-focus);
+  outline-offset: var(--unit-2);
 }
 
 .btn-primary {
@@ -160,28 +166,17 @@ html {
   color: var(--sign-button-primary-text-hover);
   border: var(--sign-button-primary-border-hover);
 }
+.btn-primary:active:not(:disabled) {
+  background-color: var(--sign-button-primary-bg-pressed);
+}
 .btn-primary:disabled {
   background-color: var(--sign-button-primary-bg-disabled);
   color: var(--sign-button-primary-text-disabled);
   border: var(--sign-button-primary-border-disabled);
 }
-.btn-link {
-  background-color: var(--sign-button-link-bg-base);
-  color: var(--sign-button-link-text-base);
-  border: var(--sign-button-link-border-base);
-}
-.btn-link:hover:not(:disabled) {
-  background-color: var(--sign-button-link-bg-hover);
-  color: var(--sign-button-link-text-hover);
-  border: var(--sign-button-link-border-hover);
-}
-.btn-link:disabled {
-  background-color: var(--sign-button-link-bg-disabled);
-  color: var(--sign-button-link-text-disabled);
-  border: var(--sign-button-link-border-disabled);
-}
 
 .signpad-loading-overlay {
+  cursor: default;
   position: absolute;
   top: 0;
   left: 0;
@@ -194,22 +189,107 @@ html {
   align-items: center;
   z-index: 10;
   text-align: center;
-  gap: 0.625rem;
 }
 .signpad-loading-overlay .spinner {
-  border: 0.25rem solid var(--sign-loading-overlay-spinner-border-color);
+  border: var(--borderWidth-l) solid
+    var(--sign-loading-overlay-spinner-border-color);
   border-left-color: var(--sign-loading-overlay-spinner-color);
   border-radius: 50%;
   width: var(--sign-loading-overlay-spinner-size);
   height: var(--sign-loading-overlay-spinner-size);
   animation: spin 1s linear infinite;
+  margin-bottom: var(--spacing-16);
+}
+
+.signpad-loading-overlay-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 90%;
+  /* Fixed slot for up to 2 lines so the text is centered in it and a longer
+     message does not push the code line / restart button around. */
+  min-height: calc(2 * var(--text-m-regular-lineHeight));
 }
 
 .signpad-loading-overlay-text {
   font-family: var(--sign-font-family);
   color: var(--sign-loading-overlay-text-color);
-  font-size: 0.875rem;
-  margin: 1rem 0 0 0;
+  font-size: var(--text-m-regular-fontSize);
+  line-height: var(--text-m-regular-lineHeight);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.signpad-restart-button {
+  width: auto;
+}
+
+.signpad-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .signpad-loading-overlay .spinner {
+    animation-duration: 3s;
+  }
+  .btn {
+    transition: none;
+  }
+  .btn:active {
+    transform: none;
+  }
+}
+
+/* High-contrast / forced-colors mode: system colors keep every control visible. */
+@media (forced-colors: active) {
+  /* Background colors are replaced by system colors, so outline the visible regions
+     (bars + canvas) instead of the container, which is taller than its content. */
+  .signpad-top-bar,
+  .signpad-bottom-bar {
+    border: 1px solid CanvasText;
+  }
+  .signpad-canvas-wrapper {
+    border-left: 1px solid CanvasText;
+    border-right: 1px solid CanvasText;
+    /* The ink is drawn in JS (black by default), so the signing surface must keep its own
+       light background; a forced dark Canvas would hide the signature. */
+    forced-color-adjust: none;
+  }
+  .signpad-canvas-container:not(:has(.signpad-top-bar))
+    .signpad-canvas-wrapper {
+    border-top: 1px solid CanvasText;
+  }
+  .signpad-canvas-container:not(:has(.signpad-bottom-bar))
+    .signpad-canvas-wrapper {
+    border-bottom: 1px solid CanvasText;
+  }
+  .btn {
+    border: 1px solid ButtonText;
+  }
+  .btn:disabled {
+    border-color: GrayText;
+    color: GrayText;
+  }
+  .btn:focus-visible:not(:disabled) {
+    outline-color: Highlight;
+  }
+  .signpad-loading-overlay {
+    forced-color-adjust: auto;
+    background-color: Canvas;
+    color: CanvasText;
+  }
+  .signpad-loading-overlay .spinner {
+    border-color: GrayText;
+    border-left-color: Highlight;
+  }
 }
 
 @keyframes spin {

package/src/styles/styles-variables.css

@@ -1,24 +1,19 @@
 :host {
-  /* Color Variables */
-  --primary-color-0: #4e56ea;
-  --primary-color-10: #7178ee;
-  --background-color-0: #f1f2fd;
-  --background-color-10: #e3e4fc;
-  --text-color-0: #333e4a;
-  --white-color: #ffffff;
-  --grey-color: #b5b9be;
-
   /* Constraints */
-  --min-height: 3rem;
-  --spacing-constraints: 1rem 1.5rem;
+  --min-height: var(--unit-48);
+  --spacing-constraints: var(--spacing-12) var(--spacing-16);
+
+  /* Host Sizing (override to make the component fluid, e.g. width: 100%; height: 100vh;) */
+  --signpad-width: 25rem;
+  --signpad-height: 31.25rem;
 
   /* CSS Variables */
-  --sign-font-family: Arial, Helvetica, sans-serif;
-  --sign-common-border-radius: 0.5rem;
+  --sign-font-family: var(--fontFamily-primary), Arial, Helvetica, sans-serif;
+  --sign-common-border-radius: var(--borderRadius-s);
 
   /* Top Bar */
-  --sign-top-bar-bg-base: var(--background-color-10);
-  --sign-top-bar-text-base: var(--primary-color-0);
+  --sign-top-bar-bg-base: var(--background-brandSubtle);
+  --sign-top-bar-text-base: var(--brand-650);
   --sign-top-bar-padding: var(--spacing-constraints);
   --sign-top-bar-min-height: var(--min-height);
   --sign-top-bar-border-top-left-radius: var(--sign-common-border-radius);
@@ -27,26 +22,27 @@
   --sign-top-bar-border-bottom-right-radius: 0;
 
   /* Canvas Area */
-  --sign-canvas-bg-base: var(--background-color-0);
+  --sign-canvas-bg-base: var(--brandBeige-100);
   --sign-canvas-wrapper-border-top-left-radius: 0;
   --sign-canvas-wrapper-border-top-right-radius: 0;
   --sign-canvas-wrapper-border-bottom-left-radius: 0;
   --sign-canvas-wrapper-border-bottom-right-radius: 0;
 
   /* Line */
-  --sign-line-height: 1.375rem;
-  --sign-line-margin-bottom: 1rem;
-  --sign-line-border-base: var(--primary-color-10);
-  --sign-line-additional-text-color: var(--text-color-0);
-  --sign-line-margin: 0rem 1.5rem var(--sign-line-margin-bottom) 1.5rem;
-  --sign-canvas-line-text-font-size: 0.75rem;
+  --sign-line-height: var(--unit-24);
+  --sign-line-margin-bottom: var(--spacing-16);
+  --sign-line-border-base: var(--border-secondary);
+  --sign-line-additional-text-color: var(--content-tertiary);
+  --sign-line-margin: 0 var(--spacing-16) var(--sign-line-margin-bottom)
+    var(--spacing-16);
+  --sign-canvas-line-text-font-size: var(--text-s-regular-fontSize);
   --sign-canvas-height-offset: var(--sign-line-height);
 
   /* Bottom Bar */
-  --sign-bottom-bar-bg-base: var(--background-color-10);
+  --sign-bottom-bar-bg-base: var(--background-brandSubtle);
   --sign-bottom-bar-padding: var(--spacing-constraints);
   --sign-bottom-bar-min-height: var(--min-height);
-  --sign-bottom-bar-gap: 0.75rem;
+  --sign-bottom-bar-gap: var(--spacing-8);
   --sign-bottom-bar-border-top-left-radius: 0;
   --sign-bottom-bar-border-top-right-radius: 0;
   --sign-bottom-bar-border-bottom-left-radius: var(--sign-common-border-radius);
@@ -55,42 +51,52 @@
   );
 
   /* Button general settings */
-  --sign-button-font-size: 1rem;
-  --sign-button-padding: 0.875rem 1rem;
-  --sign-button-min-height: var(--min-height);
-  --sign-button-border-radius: var(--sign-common-border-radius);
-  --sign-button-font-weight: 500;
+  --sign-button-font-size: var(--text-m-semibold-fontSize);
+  --sign-button-padding: var(--spacing-10);
+  --sign-button-min-height: var(--unit-48);
+  --sign-button-border-radius: var(--borderRadius-pill);
+  --sign-button-font-weight: var(--text-m-semibold-fontWeight);
 
   /* Primary Buttons (OK, Clear, Cancel) */
-  --sign-button-primary-bg-base: var(--primary-color-0);
-  --sign-button-primary-bg-hover: var(--primary-color-10);
-  --sign-button-primary-bg-disabled: var(--grey-color);
-  --sign-button-primary-text-base: var(--white-color);
-  --sign-button-primary-text-hover: var(--white-color);
-  --sign-button-primary-text-disabled: var(--white-color);
-  --sign-button-primary-border-base: 0.0625rem solid var(--primary-color-0);
-  --sign-button-primary-border-hover: 0.0625rem solid var(--primary-color-10);
-  --sign-button-primary-border-disabled: 0.0625rem solid var(--grey-color);
+  --sign-button-primary-bg-base: var(--background-brand);
+  --sign-button-primary-bg-hover: var(--background-brandHover);
+  --sign-button-primary-bg-pressed: var(--background-brandPressed);
+  --sign-button-primary-bg-disabled: var(--background-disabled);
+  --sign-button-primary-text-base: var(--content-primaryInverse);
+  --sign-button-primary-text-hover: var(--content-primaryInverse);
+  --sign-button-primary-text-disabled: var(--content-disabled);
+  --sign-button-primary-border-base: var(--borderWidth-xs) solid transparent;
+  --sign-button-primary-border-hover: var(--borderWidth-xs) solid transparent;
+  --sign-button-primary-border-disabled: var(--borderWidth-xs) solid transparent;
 
-  /* Link Buttons (Connect signpad) */
-  --sign-button-link-bg-base: transparent;
-  --sign-button-link-bg-hover: var(--background-color-10);
-  --sign-button-link-bg-disabled: transparent;
-  --sign-button-link-text-base: var(--primary-color-0);
-  --sign-button-link-text-hover: var(--primary-color-10);
-  --sign-button-link-text-disabled: var(--grey-color);
-  --sign-button-link-border-base: 0.0625rem solid var(--primary-color-0);
-  --sign-button-link-border-hover: 0.0625rem solid var(--primary-color-10);
-  --sign-button-link-border-disabled: 0.0625rem solid var(--grey-color);
 
   /* Device State Text Colors */
-  --sign-device-state-text-color-connected: green;
-  --sign-device-state-text-color-disconnected: red;
+  --sign-device-state-text-color-connected: var(--brand-650);
 
   /* Loading Overlay */
-  --sign-loading-overlay-bg-color: rgba(255, 255, 255, 0.8);
-  --sign-loading-overlay-text-color: var(--text-color-0);
-  --sign-loading-overlay-spinner-color: var(--primary-color-0);
-  --sign-loading-overlay-spinner-border-color: rgba(78, 86, 234, 0.1);
-  --sign-loading-overlay-spinner-size: 1.875rem;
+  --sign-loading-overlay-bg-color: color-mix(
+    in srgb,
+    var(--background-primary) 75%,
+    transparent
+  );
+  --sign-loading-overlay-text-color: var(--content-primary);
+  --sign-loading-overlay-spinner-color: var(--content-brand);
+  --sign-loading-overlay-spinner-border-color: var(--background-brandSubtle);
+  --sign-loading-overlay-spinner-size: var(--unit-32);
+}
+
+/* Dark theme (config.theme = "dark"). The signature canvas stays light on purpose: the default ink is
+   black, so a dark canvas would hide the signature. Bars, buttons and the overlay go dark. */
+:host([data-theme="dark"]) {
+  --sign-top-bar-text-base: var(--content-brand);
+  --sign-canvas-bg-base: var(--brandBeige-100);
+  --sign-line-border-base: var(--neutral-400);
+  --sign-line-additional-text-color: var(--neutral-600);
+  --sign-button-primary-bg-base: var(--brand-650);
+  --sign-button-primary-bg-hover: var(--brand-700);
+  --sign-button-primary-bg-pressed: var(--brand-750);
+  --sign-button-primary-text-base: var(--neutral-0);
+  --sign-button-primary-text-hover: var(--neutral-0);
+  --sign-button-primary-bg-disabled: var(--neutral-600);
+  --sign-button-primary-text-disabled: var(--neutral-200);
 }