@lavalogic/scoria 0.40.31 → 0.40.33

package/dist/scss/_colours.scss

@@ -1,140 +1,140 @@
-$transparent-0: rgba(0, 0, 0, 0);
-$transparent-10: rgba(0, 0, 0, 0.1);
-$transparent-20: rgba(0, 0, 0, 0.2);
-
-$ui-black: #000000;
-$ui-white: #ffffff;
-$purple: #9b51e0; // For Testing
-
-$ui-blue-1: #f4f7f9;
-$ui-blue-2: #e9ecf1;
-$ui-blue-3: #dae0e5;
-$ui-blue-4: #cbd4da; // Standard Border Colour
-$ui-blue-5: #bcc8d0;
-$ui-blue-6: #adbbc5;
-$ui-blue-7: #9eafba;
-$ui-blue-8: #8fa3b0;
-$ui-blue-9: #8096a5; // Font Disabled
-$ui-blue-10: #718a9b;
-$ui-blue-11: #647d8e; // Font Secondary
-$ui-blue-12: #5a707f;
-$ui-blue-13: #4f6370;
-$ui-blue-14: #455661;
-$ui-blue-15: #3a4952; // Font Primary
-$ui-blue-16: #2f3b43;
-$ui-blue-17: #252e34;
-$ui-blue-18: #1a2125;
-$ui-blue-19: #101416;
-$ui-blue-20: #050707;
-
-$primary-blue-1: #f4fbfd;
-$primary-blue-2: #e6f8fd;
-$primary-blue-3: #caeaf5;
-$primary-blue-4: #b4e2f0;
-$primary-blue-5: #9fdaec;
-$primary-blue-6: #8ad1e8;
-$primary-blue-7: #74c9e4;
-$primary-blue-8: #5fc1e0;
-$primary-blue-9: #49b8dc;
-$primary-blue-10: #34b0d8;
-$primary-blue-11: #259fc7; // Brand Primary
-$primary-blue-12: #2392b5;
-$primary-blue-13: #1f81a0; // Brand Dark
-$primary-blue-14: #1b708b;
-$primary-blue-15: #175f75;
-$primary-blue-16: #134d60;
-$primary-blue-17: #0f3c4b;
-$primary-blue-18: #0a2b35;
-$primary-blue-19: #061a20;
-$primary-blue-20: #02090b;
-
-$primary-background: #edfaff;
-$brand-primary: #259fc7;
-$brand-dark: #1f81a0;
-$brand-dark-transparent-20: rgba(31, 129, 160, 0.2);
-$brand-dark-transparent-40: rgba(31, 129, 160, 0.4);
-
-$font-primary: #3a4952;
-$font-secondary-heading: #46525b;
-$font-secondary: #647d8e;
-$font-disabled: #8096a5;
-
-$error: #c31818;
-$error-border: #aa1414;
-$error-background: #f9e9e9;
-$warning: #f8eab8;
-$warning-border: #e7b500;
-// Success / positive-confirmation state, mirroring the $error triplet.
-// Hue matches $despatched-background (#2f921d) so it sits in the existing
-// palette rather than introducing a new green.
-$success: #2f921d;
-$success-border: #277a18;
-$success-background: #eaf5e7;
-
-$allocated-background: #e7b100;
-$in-picking-background: #ec58c3;
-$in-picking-colour: #720653;
-$picked-background: #bd2e95;
-$in-sorting-background: #b259ea;
-$in-sorting-colour: #560985;
-$sorted-background: #9032ca;
-$in-kitting-background: #9d85fc;
-$in-kitting-colour: #4129a4;
-$kitted-background: #6e51e0;
-$in-packing-background: #8ab1df;
-$in-packing-colour: #103977;
-$packed-background: #3e6eb5;
-$in-marshalling-background: #8ad0df;
-$in-marshalling-colour: #13758a;
-$marshalled-background: #3ea0b5;
-$in-loading-background: #8adfc8;
-$in-loading-colour: #126a51;
-$loaded-background: #3eb592;
-$in-despatch-background: #7bbc6f;
-$in-despatch-colour: #104c05;
-$despatched-background: #2f921d;
-
-// Borders are $ui-blue-4
-
-// $ui-two: #ececec;
-// $ui-three: #c0c0c0;
-// $ui-four: #515b65;
-// $ui-four: #9B51E0;
-// $ui-seven: #d5dbe0;
-// $ui-eight: #fcfcfc;
-// $ui-grey: #c0c8ce;
-// $main: #54636d;
-$alt: #8f989e;
-// $background-light: #dce1e5;
-// $background: #f6f7f8;
-// $background-dark: #e8ebed;
-// $dark-blue: #3888c1;
-// $primary: #2f97ba;
-// $info-text: #0e82ae;
-// $info-light-text: #6ac1e8;
-// $primary-dark: #0e7598;
-// $primary-hover: hsl(205, 55%, 35%);
-// $brand-one: #4db0da;
-// $brand-two: #18769d;
-// $shipments: #129acd;
-// $progress: #259abf;
-
-// $dark-blue-transparent: rgba(56, 136, 193, 0.2);
-// $dark-blue-semi-transparent: rgba(56, 136, 193, 0.4);
-// $secondary: #4f5a63;
-// $info-background: #d6effa;
-// $info-light-background: #f3f9fb;
-// $hovered: rgba(166, 167, 168, 0.369);
-// $white: #fff;
-// $light-border: #ced2d6;
-// $state-info: #e8f6fd;
-// $state-info--alt: #f9fdff;
-// $ui-dark-opacity: rgba(0, 0, 0, 0.2);
-// $info-text-text: #525252;
-// $info-text-background: #f6fcfe;
-// $marked: #e8f6fd;
-// $marked: #f9fdff;
-// $side-menu-background: #eef1f3;
-// $label: #6d7883;
-// $warehouse-bubble: #c3cad3;
-// $warning: rgba(231, 181, 0, 0.228);
+$transparent-0: rgba(0, 0, 0, 0);
+$transparent-10: rgba(0, 0, 0, 0.1);
+$transparent-20: rgba(0, 0, 0, 0.2);
+
+$ui-black: #000000;
+$ui-white: #ffffff;
+$purple: #9b51e0; // For Testing
+
+$ui-blue-1: #f4f7f9;
+$ui-blue-2: #e9ecf1;
+$ui-blue-3: #dae0e5;
+$ui-blue-4: #cbd4da; // Standard Border Colour
+$ui-blue-5: #bcc8d0;
+$ui-blue-6: #adbbc5;
+$ui-blue-7: #9eafba;
+$ui-blue-8: #8fa3b0;
+$ui-blue-9: #8096a5; // Font Disabled
+$ui-blue-10: #718a9b;
+$ui-blue-11: #647d8e; // Font Secondary
+$ui-blue-12: #5a707f;
+$ui-blue-13: #4f6370;
+$ui-blue-14: #455661;
+$ui-blue-15: #3a4952; // Font Primary
+$ui-blue-16: #2f3b43;
+$ui-blue-17: #252e34;
+$ui-blue-18: #1a2125;
+$ui-blue-19: #101416;
+$ui-blue-20: #050707;
+
+$primary-blue-1: #f4fbfd;
+$primary-blue-2: #e6f8fd;
+$primary-blue-3: #caeaf5;
+$primary-blue-4: #b4e2f0;
+$primary-blue-5: #9fdaec;
+$primary-blue-6: #8ad1e8;
+$primary-blue-7: #74c9e4;
+$primary-blue-8: #5fc1e0;
+$primary-blue-9: #49b8dc;
+$primary-blue-10: #34b0d8;
+$primary-blue-11: #259fc7; // Brand Primary
+$primary-blue-12: #2392b5;
+$primary-blue-13: #1f81a0; // Brand Dark
+$primary-blue-14: #1b708b;
+$primary-blue-15: #175f75;
+$primary-blue-16: #134d60;
+$primary-blue-17: #0f3c4b;
+$primary-blue-18: #0a2b35;
+$primary-blue-19: #061a20;
+$primary-blue-20: #02090b;
+
+$primary-background: #edfaff;
+$brand-primary: #259fc7;
+$brand-dark: #1f81a0;
+$brand-dark-transparent-20: rgba(31, 129, 160, 0.2);
+$brand-dark-transparent-40: rgba(31, 129, 160, 0.4);
+
+$font-primary: #3a4952;
+$font-secondary-heading: #46525b;
+$font-secondary: #647d8e;
+$font-disabled: #8096a5;
+
+$error: #c31818;
+$error-border: #aa1414;
+$error-background: #f9e9e9;
+$warning: #f8eab8;
+$warning-border: #e7b500;
+// Success / positive-confirmation state, mirroring the $error triplet.
+// Hue matches $despatched-background (#2f921d) so it sits in the existing
+// palette rather than introducing a new green.
+$success: #2f921d;
+$success-border: #277a18;
+$success-background: #eaf5e7;
+
+$allocated-background: #e7b100;
+$in-picking-background: #ec58c3;
+$in-picking-colour: #720653;
+$picked-background: #bd2e95;
+$in-sorting-background: #b259ea;
+$in-sorting-colour: #560985;
+$sorted-background: #9032ca;
+$in-kitting-background: #9d85fc;
+$in-kitting-colour: #4129a4;
+$kitted-background: #6e51e0;
+$in-packing-background: #8ab1df;
+$in-packing-colour: #103977;
+$packed-background: #3e6eb5;
+$in-marshalling-background: #8ad0df;
+$in-marshalling-colour: #13758a;
+$marshalled-background: #3ea0b5;
+$in-loading-background: #8adfc8;
+$in-loading-colour: #126a51;
+$loaded-background: #3eb592;
+$in-despatch-background: #7bbc6f;
+$in-despatch-colour: #104c05;
+$despatched-background: #2f921d;
+
+// Borders are $ui-blue-4
+
+// $ui-two: #ececec;
+// $ui-three: #c0c0c0;
+// $ui-four: #515b65;
+// $ui-four: #9B51E0;
+// $ui-seven: #d5dbe0;
+// $ui-eight: #fcfcfc;
+// $ui-grey: #c0c8ce;
+// $main: #54636d;
+$alt: #8f989e;
+// $background-light: #dce1e5;
+// $background: #f6f7f8;
+// $background-dark: #e8ebed;
+// $dark-blue: #3888c1;
+// $primary: #2f97ba;
+// $info-text: #0e82ae;
+// $info-light-text: #6ac1e8;
+// $primary-dark: #0e7598;
+// $primary-hover: hsl(205, 55%, 35%);
+// $brand-one: #4db0da;
+// $brand-two: #18769d;
+// $shipments: #129acd;
+// $progress: #259abf;
+
+// $dark-blue-transparent: rgba(56, 136, 193, 0.2);
+// $dark-blue-semi-transparent: rgba(56, 136, 193, 0.4);
+// $secondary: #4f5a63;
+// $info-background: #d6effa;
+// $info-light-background: #f3f9fb;
+// $hovered: rgba(166, 167, 168, 0.369);
+// $white: #fff;
+// $light-border: #ced2d6;
+// $state-info: #e8f6fd;
+// $state-info--alt: #f9fdff;
+// $ui-dark-opacity: rgba(0, 0, 0, 0.2);
+// $info-text-text: #525252;
+// $info-text-background: #f6fcfe;
+// $marked: #e8f6fd;
+// $marked: #f9fdff;
+// $side-menu-background: #eef1f3;
+// $label: #6d7883;
+// $warehouse-bubble: #c3cad3;
+// $warning: rgba(231, 181, 0, 0.228);

package/dist/scss/_motion.scss

@@ -1,57 +1,57 @@
-// Motion helpers for honouring `prefers-reduced-motion`.
-//
-// Two complementary mixins are exported so that component authors can pick
-// whichever phrasing reads more naturally at the call site.
-//
-// `motion-safe` wraps a block in `@media (prefers-reduced-motion: no-preference)`.
-// Anything inside is only applied when the user has NOT asked the OS to reduce
-// motion. Use it to gate keyframe animations and decorative transitions:
-//
-//   .spinner {
-//     transform-origin: center;
-//
-//     @include motion.motion-safe {
-//       animation: spin 1.5s forwards infinite linear;
-//     }
-//   }
-//
-// `motion-reduce` emits a `@media (prefers-reduced-motion: reduce)` block whose
-// body short-circuits `animation` and `transition` to a near-zero duration. The
-// near-zero (not `none`) is deliberate: a single tick lets transitionend / Svelte
-// transition lifecycle hooks still fire, which keeps component state machines
-// (e.g. AccordionGroup, Toast) honest. Use it at the end of a style block when
-// you want to disable existing motion without restructuring the selectors:
-//
-//   .toast {
-//     @include motion.motion-reduce {
-//       animation-duration: 0.001ms !important;
-//       transition-duration: 0.001ms !important;
-//     }
-//   }
-//
-// Both mixins are zero-arg and emit only the wrapping media query plus the
-// content block (or the safe defaults for `motion-reduce`).
-
-@mixin motion-safe {
-	@media (prefers-reduced-motion: no-preference) {
-		@content;
-	}
-}
-
-@mixin motion-reduce {
-	@media (prefers-reduced-motion: reduce) {
-		@content;
-	}
-}
-
-// Convenience: emit the reduce-motion safety net for a selector that already
-// declares an `animation` or `transition`. Drop this at the end of a style
-// block when there is no need to customise the override.
-@mixin respect-reduced-motion {
-	@media (prefers-reduced-motion: reduce) {
-		animation-duration: 0.001ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.001ms !important;
-		scroll-behavior: auto !important;
-	}
-}
+// Motion helpers for honouring `prefers-reduced-motion`.
+//
+// Two complementary mixins are exported so that component authors can pick
+// whichever phrasing reads more naturally at the call site.
+//
+// `motion-safe` wraps a block in `@media (prefers-reduced-motion: no-preference)`.
+// Anything inside is only applied when the user has NOT asked the OS to reduce
+// motion. Use it to gate keyframe animations and decorative transitions:
+//
+//   .spinner {
+//     transform-origin: center;
+//
+//     @include motion.motion-safe {
+//       animation: spin 1.5s forwards infinite linear;
+//     }
+//   }
+//
+// `motion-reduce` emits a `@media (prefers-reduced-motion: reduce)` block whose
+// body short-circuits `animation` and `transition` to a near-zero duration. The
+// near-zero (not `none`) is deliberate: a single tick lets transitionend / Svelte
+// transition lifecycle hooks still fire, which keeps component state machines
+// (e.g. AccordionGroup, Toast) honest. Use it at the end of a style block when
+// you want to disable existing motion without restructuring the selectors:
+//
+//   .toast {
+//     @include motion.motion-reduce {
+//       animation-duration: 0.001ms !important;
+//       transition-duration: 0.001ms !important;
+//     }
+//   }
+//
+// Both mixins are zero-arg and emit only the wrapping media query plus the
+// content block (or the safe defaults for `motion-reduce`).
+
+@mixin motion-safe {
+	@media (prefers-reduced-motion: no-preference) {
+		@content;
+	}
+}
+
+@mixin motion-reduce {
+	@media (prefers-reduced-motion: reduce) {
+		@content;
+	}
+}
+
+// Convenience: emit the reduce-motion safety net for a selector that already
+// declares an `animation` or `transition`. Drop this at the end of a style
+// block when there is no need to customise the override.
+@mixin respect-reduced-motion {
+	@media (prefers-reduced-motion: reduce) {
+		animation-duration: 0.001ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.001ms !important;
+		scroll-behavior: auto !important;
+	}
+}

package/dist/scss/_sizing.scss

@@ -1,85 +1,85 @@
-$input-height: 3rem;
-$input-width: 12rem;
-
-$text-xx-large: 2rem;
-$text-x-large: 1.75rem;
-$text-large: 1.5rem;
-$text-medium-large: 1.25rem;
-$text-medium: 1.1875rem; //19 px. not ideal
-$text-small-medium: 1.125rem;
-$text-medium-small-medium: 1.0625rem;
-$text-regular: 1rem;
-$text-small-small-medium: 0.875rem;
-$text-small: 0.8125rem;
-$text-extra-small: 0.75rem;
-
-$font-weight-touch: 600;
-
-$text-table: 0.9375rem;
-$text-table-footer: 0.8125rem;
-
-$border-width-double: 2px;
-$border-width: 1px;
-
-$button-padding-xl: 2rem;
-$button-padding-lg-wide: 1rem 2rem;
-$button-padding-lg: 1rem;
-
-$column-1-width: 25rem;
-$column-2-width: 1fr;
-$column-3-width: 25rem;
-
-$row-1-width: 4rem;
-$row-2-width: 1fr;
-
-$double-padding: 3rem;
-$double-gap: 3rem;
-$five-quarters-padding: 1.875rem;
-$five-quarters-gap: 1.875rem;
-$regular-padding: 1.5rem;
-$regular-gap: 1.5rem;
-$two-thirds-gap: 1.25rem;
-$two-thirds-padding: 1.25rem;
-$half-gap: 0.75rem;
-$half-padding: 0.75rem;
-$third-gap: 0.5rem;
-$third-padding: 0.5rem;
-$quarter-gap: 0.375rem;
-$quarter-padding: 0.375rem;
-
-$circular-button-padding: 0.52rem;
-$card-half-padding: 0.38rem;
-// $card-padding: 0.76rem;
-$card-padding: 0.76rem;
-$card-gap: 0.76rem;
-$card-gap-half: 0.38rem;
-$card-detail-padding: 4px 12px;
-$card-title: $text-large;
-$card-inner-gap: 0.25rem;
-$button-card-inner-gap: 0.5rem;
-
-$border-radius: 4px;
-$thick-border-radius: 5px;
-$pill-border-radius: 12px;
-
-$switch-track-width: 4rem;
-$switch-thumb-container-width: 2.5rem;
-$switch-thumb-container-height: 1.5rem;
-$switch-thumb-container-radius: 0.9375rem;
-$switch-thumb-size: 1rem;
-
-$min-modal-width: 40.25rem;
-$max-modal-width: 1728px;
-
-$table-header-height: 3rem;
-
-$nav-height: 3.25rem;
-
-$dial-option-height: 50px;
-
-$big-radio-min-width: 271px;
-$big-radio-max-width: 400px;
-
-// z-index scale. Higher values render above lower ones.
-$z-index-overlay: 99998;
-$z-index-overlay-text: 99999;
+$input-height: 3rem;
+$input-width: 12rem;
+
+$text-xx-large: 2rem;
+$text-x-large: 1.75rem;
+$text-large: 1.5rem;
+$text-medium-large: 1.25rem;
+$text-medium: 1.1875rem; //19 px. not ideal
+$text-small-medium: 1.125rem;
+$text-medium-small-medium: 1.0625rem;
+$text-regular: 1rem;
+$text-small-small-medium: 0.875rem;
+$text-small: 0.8125rem;
+$text-extra-small: 0.75rem;
+
+$font-weight-touch: 600;
+
+$text-table: 0.9375rem;
+$text-table-footer: 0.8125rem;
+
+$border-width-double: 2px;
+$border-width: 1px;
+
+$button-padding-xl: 2rem;
+$button-padding-lg-wide: 1rem 2rem;
+$button-padding-lg: 1rem;
+
+$column-1-width: 25rem;
+$column-2-width: 1fr;
+$column-3-width: 25rem;
+
+$row-1-width: 4rem;
+$row-2-width: 1fr;
+
+$double-padding: 3rem;
+$double-gap: 3rem;
+$five-quarters-padding: 1.875rem;
+$five-quarters-gap: 1.875rem;
+$regular-padding: 1.5rem;
+$regular-gap: 1.5rem;
+$two-thirds-gap: 1.25rem;
+$two-thirds-padding: 1.25rem;
+$half-gap: 0.75rem;
+$half-padding: 0.75rem;
+$third-gap: 0.5rem;
+$third-padding: 0.5rem;
+$quarter-gap: 0.375rem;
+$quarter-padding: 0.375rem;
+
+$circular-button-padding: 0.52rem;
+$card-half-padding: 0.38rem;
+// $card-padding: 0.76rem;
+$card-padding: 0.76rem;
+$card-gap: 0.76rem;
+$card-gap-half: 0.38rem;
+$card-detail-padding: 4px 12px;
+$card-title: $text-large;
+$card-inner-gap: 0.25rem;
+$button-card-inner-gap: 0.5rem;
+
+$border-radius: 4px;
+$thick-border-radius: 5px;
+$pill-border-radius: 12px;
+
+$switch-track-width: 4rem;
+$switch-thumb-container-width: 2.5rem;
+$switch-thumb-container-height: 1.5rem;
+$switch-thumb-container-radius: 0.9375rem;
+$switch-thumb-size: 1rem;
+
+$min-modal-width: 40.25rem;
+$max-modal-width: 1728px;
+
+$table-header-height: 3rem;
+
+$nav-height: 3.25rem;
+
+$dial-option-height: 50px;
+
+$big-radio-min-width: 271px;
+$big-radio-max-width: 400px;
+
+// z-index scale. Higher values render above lower ones.
+$z-index-overlay: 99998;
+$z-index-overlay-text: 99999;

package/dist/scss/_transitions.scss

@@ -1,8 +1,8 @@
-$transition-length: 0.15s;
-$transition-delay: 0s;
-
-$colours:
-	border-color ease-out $transition-length $transition-delay,
-	background-color ease-out $transition-length $transition-delay,
-	color ease-out $transition-length $transition-delay,
-	fill ease-out $transition-length $transition-delay;
+$transition-length: 0.15s;
+$transition-delay: 0s;
+
+$colours:
+	border-color ease-out $transition-length $transition-delay,
+	background-color ease-out $transition-length $transition-delay,
+	color ease-out $transition-length $transition-delay,
+	fill ease-out $transition-length $transition-delay;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.31",
+  "version": "0.40.33",
   "publishConfig": {
     "access": "restricted"
   },