@lavalogic/scoria 0.0.1

package/dist/Components/Button.svelte

@@ -0,0 +1,540 @@
+<svelte:options runes />
+
+<script module lang="ts">
+	import type { PartialIconProps } from './Icon.svelte';
+	import Icon from './Icon.svelte';
+
+	import { getContext, type Snippet } from 'svelte';
+
+	import { dev } from '$app/environment';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { Variant } from '../Types/Internal/Variant.js';
+	import { Side } from '../Types/Internal/Side.js';
+	import { TooltipContext } from '../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../Delay/Delay.js';
+	import { passthrough } from '../Helpers/Helpers.svelte.js';
+
+	const paddingSizesVertical: Record<Size, string> = {
+		[Size.Tiny]: '0.25rem',
+		[Size.Small]: '0.375rem',
+		[Size.MediumSmall]: '0.5rem',
+		// [Size.Medium]: '0.625rem',
+		[Size.Medium]: '0.90625rem',
+		[Size.MediumLarge]: '0.90625rem',
+		[Size.Large]: '0.925rem',
+		[Size.XLarge]: '1.0125rem',
+		[Size.DoubleXLarge]: '1.1rem',
+		[Size.TripleXLarge]: '1.2975rem',
+		[Size.FillWidth]: '0.75rem', // TODO decide
+		[Size.FillHeight]: '0' // TODO decide
+	};
+
+	// TODO alter the values for these if required
+	const paddingSizesHorizontal: Record<Size, string> = {
+		[Size.Tiny]: '0.4875rem',
+		[Size.Small]: '0.8rem',
+		[Size.MediumSmall]: '0.6625rem',
+		[Size.Medium]: '0.75rem',
+		[Size.MediumLarge]: '0.8375rem',
+		[Size.Large]: '0.925rem',
+		[Size.XLarge]: '1.0125rem',
+		[Size.DoubleXLarge]: '1.1rem',
+		[Size.TripleXLarge]: '1.2975rem',
+		[Size.FillWidth]: '0.75rem', // TODO decide
+		[Size.FillHeight]: '0.75rem' // TODO decide
+	};
+
+	const fontSizes: Record<Size, string> = {
+		[Size.Tiny]: '0.8rem',
+		[Size.Small]: '0.85rem',
+		[Size.MediumSmall]: '0.94rem',
+		[Size.Medium]: '1rem',
+		[Size.MediumLarge]: '1rem',
+		[Size.Large]: '1.16rem',
+		[Size.XLarge]: '1.32rem',
+		[Size.DoubleXLarge]: '1.48rem',
+		[Size.TripleXLarge]: '1.64rem',
+		[Size.FillWidth]: '1rem', // TODO decide
+		[Size.FillHeight]: '1rem' // TODO decide
+	};
+
+	// TODO
+	const borderSizes: Record<Size, string> = {
+		[Size.Tiny]: '0.1875rem',
+		[Size.Small]: '0.1875rem',
+		[Size.MediumSmall]: '0.1875rem',
+		[Size.Medium]: '0.1875rem',
+		[Size.MediumLarge]: '0.1875rem',
+		[Size.Large]: '0.1875rem',
+		[Size.XLarge]: '0.1875rem',
+		[Size.DoubleXLarge]: '0.1875rem',
+		[Size.TripleXLarge]: '0.1875rem',
+		[Size.FillWidth]: '0.1875rem', // TODO decide
+		[Size.FillHeight]: '0.1875rem' // TODO decide
+	};
+
+	const iconColours: Record<ColourSet, Colour | undefined> = {
+		[ColourSet.Primary]: Colour['$ui-white'],
+		[ColourSet.CallToAction]: Colour['$ui-white'],
+		[ColourSet.Secondary]: undefined,
+		[ColourSet.Auxiliary]: undefined,
+		[ColourSet.Warning]: Colour['$error-border'],
+		[ColourSet.Error]: Colour['$error-border'],
+		[ColourSet.Info]: Colour['$error-border']
+	};
+
+	export interface ButtonProps {
+		type?: 'button' | 'submit' | 'reset' | undefined;
+		variant?: Variant | undefined;
+		toggled?: boolean | undefined;
+		iconLeft?: PartialIconProps | undefined;
+		iconTop?: PartialIconProps | undefined;
+		iconRight?: PartialIconProps | undefined;
+		iconBottom?: PartialIconProps | undefined;
+		nowrap?: boolean | undefined;
+		side?: Side | undefined;
+		size?: Size | undefined;
+		dashed?: boolean | undefined;
+		disabled?: boolean | undefined;
+		fullWidth?: boolean | undefined;
+		label?: string | null | undefined;
+		colourSet?: ColourSet | undefined;
+		onclick?: ((e: MouseEvent) => void) | undefined;
+		onfocus?: ((e: FocusEvent) => void) | undefined;
+		onblur?: ((e: FocusEvent) => void) | undefined;
+
+		children?: Snippet;
+
+		relative?: boolean;
+
+		noninteractive?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	const {
+		type = 'button',
+		variant = Variant.Default,
+		toggled = false,
+		iconLeft,
+		iconTop,
+		iconRight,
+		iconBottom,
+		nowrap = false,
+		side,
+		size = Size.Medium,
+		label,
+		colourSet = ColourSet.Secondary,
+		dashed = false,
+		disabled = false,
+		fullWidth = false,
+		onclick,
+		onfocus,
+		onblur,
+		children,
+		relative,
+		noninteractive
+	}: ButtonProps = $props();
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+</script>
+
+<!-- title={label} -->
+<!-- style="--font-size: {fontSizes[
+		size
+	]};" -->
+<button
+	onmouseenter={(e) => {
+		if (label) {
+			const rect = (e.target as HTMLButtonElement).getBoundingClientRect();
+			tooltipContext.showTooltip({
+				text: label,
+				arrow: side ?? Side.Left,
+				delay: Delay.Default,
+				rect
+			});
+		}
+	}}
+	onmouseleave={(e) => {
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+	}}
+	class:noninteractive
+	class:relative
+	class:default={variant === Variant.Default}
+	class:card-inner={variant === Variant.CardInner}
+	class:card={variant === Variant.Card}
+	class:call-to-action={colourSet === ColourSet.CallToAction}
+	class:primary={colourSet === ColourSet.Primary}
+	class:secondary-colour={colourSet === ColourSet.Secondary}
+	class:secondary-variant={variant === Variant.Secondary}
+	class:warning={colourSet === ColourSet.Warning}
+	class:error={colourSet === ColourSet.Error}
+	class:info={colourSet === ColourSet.Info}
+	class:fill-height={size === Size.FillHeight}
+	class:fill-width={size === Size.FillWidth}
+	style="--fallback-padding-horizontal: {paddingSizesHorizontal[
+		size
+	]}; --fallback-padding-vertical: {paddingSizesVertical[size]}; --border-width: {borderSizes[
+		size
+	]};"
+	class:dashed
+	class:full-width={fullWidth}
+	class:toolbar={variant === Variant.Toolbar}
+	class:left={side === Side.Left}
+	class:right={side === Side.Right}
+	class:top={side === Side.Top}
+	class:bottom={side === Side.Bottom}
+	class:toggled
+	class:nowrap
+	{type}
+	aria-label={label}
+	{disabled}
+	onclick={(e) => {
+		// e.stopImmediatePropagation();
+		// if (dev) {
+		// 	// console.trace();
+		// }
+		if (label) {
+			tooltipContext.hideTooltip(label);
+		}
+		onclick?.(e);
+	}}
+	{onfocus}
+	{onblur}
+	onkeydown={passthrough}
+>
+	<div class="icon-container">
+		{#if iconLeft}
+			<Icon {...iconLeft} colour={iconColours[colourSet]} size={iconLeft.size ?? size} />
+		{/if}
+		{#if iconTop}
+			<Icon {...iconTop} />
+		{/if}
+		{#if children}
+			<span>{@render children()}</span>
+		{/if}
+		{#if iconBottom}
+			<Icon {...iconBottom} />
+		{/if}
+		{#if iconRight}
+			<Icon {...iconRight} colour={iconColours[colourSet]} size={iconRight.size ?? size} />
+		{/if}
+	</div>
+</button>
+
+<style>.card {
+  color: #3a4952;
+  fill: #3a4952;
+  padding: var(--padding-size, 0.76rem);
+  border-radius: var(--border-radius, 0);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border: solid 1px #cbd4da;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  align-items: stretch;
+  cursor: pointer;
+}
+.card:disabled {
+  background-color: var(--background-colour, #e9ecf1);
+  color: #8096a5;
+  --colour: #8096a5;
+  cursor: default;
+}
+.card:not([disabled]):hover {
+  background-color: var(--hover-background-colour, rgba(0, 0, 0, 0.1));
+  --background-colour: var(--hover-background-colour, colours.$transparent-10) !important;
+}
+.card:not([disabled]):focus, .card:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+}
+.card:not([disabled]).ticked, .card:not([disabled]).primary {
+  color: #ffffff;
+  background-color: var(--background-colour, #259fc7);
+  border-color: var(--border-colour, #259fc7);
+}
+.card:not([disabled]).ticked:focus, .card:not([disabled]).ticked:focus-visible, .card:not([disabled]).primary:focus, .card:not([disabled]).primary:focus-visible {
+  outline-color: #259fc7;
+}
+.card:not([disabled]).ticked:hover, .card:not([disabled]).primary:hover {
+  background-color: var(--hover-background-colour, #1f81a0);
+}
+.card * {
+  user-select: none;
+}
+.card {
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  font-size: var(--font-size, 1.33rem);
+  color: #3a4952;
+  font-weight: 600;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+button {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  color: #3a4952;
+  padding-left: var(--button-padding-left, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
+  padding-right: var(--button-padding-right, var(--button-padding-horizontal, var(--button-padding, var(--fallback-padding-horizontal, 0))));
+  padding-top: var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
+  padding-bottom: var(--button-padding-bottom, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0))));
+  font-size: var(--font-size, 0.9375rem);
+}
+button.noninteractive {
+  cursor: not-allowed !important;
+}
+button.relative {
+  position: relative;
+}
+button:not([disabled]) {
+  cursor: pointer;
+}
+button.fill-height {
+  height: 100%;
+}
+button.fill-width {
+  width: 100%;
+}
+button div.icon-container {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.64rem;
+  width: 100%;
+}
+button.full-width {
+  width: 100%;
+}
+button.full-width div.icon-container {
+  justify-content: center;
+}
+button.default {
+  font-weight: 600;
+  border-radius: 4px;
+  font-style: normal;
+}
+button.default:disabled {
+  color: #8096a5;
+  --colour: #8096a5;
+  fill: #8096a5;
+}
+button.default.secondary-colour {
+  border: solid 1px #cbd4da;
+  padding-top: calc(var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0)))) + 0.1875rem - 1px);
+  border-bottom: solid 0.1875rem #dae0e5;
+  z-index: 1;
+  position: relative;
+}
+button.default.primary {
+  border: solid 1px #f4f4f6;
+  padding-top: calc(var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0)))));
+  border-bottom: solid 0.1875rem #dae0e5;
+}
+button.default.primary:focus, button.default.primary:focus-visible {
+  outline-color: #259fc7;
+}
+button.default.primary:not([disabled]) {
+  border-color: #259fc7;
+  color: #ffffff;
+  --colour: #ffffff;
+  background-color: #259fc7;
+  border-bottom-color: #1f81a0;
+}
+button.default.call-to-action {
+  border: solid 1px #f4f4f6;
+  padding-top: calc(var(--button-padding-top, var(--button-padding-vertical, var(--button-padding, var(--fallback-padding-vertical, 0)))));
+  border-bottom: solid 0.1875rem #dae0e5;
+}
+button.default.call-to-action:not([disabled]) {
+  border-color: #1f81a0;
+  color: #ffffff;
+  --colour: #ffffff;
+  border-bottom-color: #1f81a0;
+}
+button.nowrap {
+  white-space: nowrap;
+}
+button.primary, button.secondary-variant, button.toolbar {
+  font-weight: 600;
+  border-radius: 4px;
+  font-style: normal;
+}
+button.secondary-colour {
+  color: #8096a5;
+  --colour: #8096a5;
+}
+button.secondary-colour:not([disabled]) {
+  color: #455661;
+  --colour: #455661;
+  background-color: #ffffff;
+}
+button.secondary-colour:not([disabled]):hover {
+  background-color: #e9ecf1;
+}
+button.secondary-variant, button.secondary-colour {
+  border: solid 1px #cbd4da;
+  position: relative;
+  z-index: 1;
+}
+button.secondary-variant:not([disabled]), button.secondary-colour:not([disabled]) {
+  color: #455661;
+  --colour: #455661;
+  background-color: #ffffff;
+}
+button.secondary-variant:not([disabled]):hover, button.secondary-colour:not([disabled]):hover {
+  background-color: #e9ecf1;
+}
+button.primary {
+  border: none;
+}
+button.primary:not([disabled]) {
+  border-color: #259fc7;
+  background-color: #259fc7;
+}
+button.primary:not([disabled]):hover {
+  background-color: #1f81a0;
+  border-color: #1f81a0;
+  border-bottom-color: #175f75;
+}
+button.secondary {
+  background-color: #ffffff;
+}
+button.secondary:not([disabled]):hover {
+  background-color: rgba(31, 129, 160, 0.4);
+}
+button.info {
+  color: #1f81a0;
+  background-color: #e6f8fd;
+}
+button.card-inner {
+  height: 34px;
+  box-sizing: border-box;
+  font-size: var(--font-size, 0.9375rem);
+  border: solid 1px #cbd4da;
+  font-weight: 600;
+  border-radius: 4px;
+  padding: 4px 12px;
+  fill: #3a4952;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+button.card-inner:not([disabled]).primary {
+  color: #fff;
+  border-color: #1f81a0;
+}
+button.card-inner:not([disabled]).primary:focus, button.card-inner:not([disabled]).primary:focus-visible {
+  outline-color: #1f81a0;
+}
+button.card-inner:disabled {
+  background-color: #f4f7f9;
+  color: #8096a5;
+  cursor: not-allowed;
+}
+button.card-inner-primary {
+  border: none;
+}
+button.card-inner-primary:not([disabled]) {
+  background-color: #1f81a0;
+  color: #ffffff;
+}
+button.card-inner-primary:not([disabled]):focus, button.card-inner-primary:not([disabled]):focus-visible {
+  outline-color: #1f81a0;
+}
+button.card-inner-primary:not([disabled]):hover {
+  background-color: #1f81a0;
+}
+button.call-to-action:not([disabled]) {
+  background-color: #259fc7;
+  color: #ffffff;
+  fill: #ffffff;
+  border-color: #259fc7;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+button.call-to-action:not([disabled]):hover {
+  background-color: #1f81a0;
+  border-color: #1f81a0;
+}
+button.call-to-action:not([disabled]):focus, button.call-to-action:not([disabled]):focus-visible {
+  outline: solid 1px #1f81a0;
+  outline-color: #3a4952 !important;
+}
+button.call-to-action:not([disabled]):focus {
+  outline-offset: -2px;
+}
+button.toolbar {
+  font-size: var(--font-size, 0.9375rem);
+  font-weight: 600;
+  border-radius: 0;
+  border: none;
+  gap: 0.5rem;
+  background-color: #ffffff;
+  display: flex;
+  white-space: nowrap;
+  flex-flow: row nowrap;
+  align-items: center;
+}
+button.toolbar:not([disabled]) {
+  color: #3a4952;
+  --colour: #3a4952;
+  fill: #adbbc5;
+}
+button.toolbar.right, button.toolbar.left {
+  width: 3rem;
+  writing-mode: vertical-lr;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+button.toolbar.right {
+  border-left: solid 3px #ffffff;
+  border-right: solid 3px #ffffff;
+}
+button.toolbar.left {
+  border-right: solid 3px #ffffff;
+  border-left: solid 3px #ffffff;
+}
+button.toolbar.top {
+  border-top: solid 3px #ffffff;
+  border-bottom: solid 3px #ffffff;
+}
+button.toolbar.bottom {
+  border-bottom: solid 3px #ffffff;
+  border-top: solid 3px #ffffff;
+}
+button.toolbar:not([disabled]) {
+  fill: #9eafba;
+}
+button.toolbar:not([disabled]):hover.secondary {
+  background-color: #f4f7f9;
+}
+button.toolbar:not([disabled]):hover {
+  color: #259fc7;
+  background-color: #e9ecf1;
+  border-color: #e9ecf1;
+}
+button.toolbar:not([disabled]):focus, button.toolbar:not([disabled]):focus-visible {
+  outline-color: #1f81a0;
+}
+button.toolbar:not([disabled]).toggled.right {
+  border-left-color: #259fc7;
+}
+button.toolbar:not([disabled]).toggled.left {
+  border-right-color: #259fc7;
+}
+button.toolbar:not([disabled]).toggled.top {
+  border-top-color: #259fc7;
+}
+button.toolbar:not([disabled]).toggled.bottom {
+  border-bottom-color: #259fc7;
+}
+button.toolbar:not([disabled]).toggled svg {
+  fill: #259fc7;
+}</style>

package/dist/Components/Button.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { PartialIconProps } from './Icon.svelte';
+import { type Snippet } from 'svelte';
+import { Size } from '../Types/Internal/Size.js';
+import { ColourSet } from '../scss/colours.js';
+import { Variant } from '../Types/Internal/Variant.js';
+import { Side } from '../Types/Internal/Side.js';
+export interface ButtonProps {
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    variant?: Variant | undefined;
+    toggled?: boolean | undefined;
+    iconLeft?: PartialIconProps | undefined;
+    iconTop?: PartialIconProps | undefined;
+    iconRight?: PartialIconProps | undefined;
+    iconBottom?: PartialIconProps | undefined;
+    nowrap?: boolean | undefined;
+    side?: Side | undefined;
+    size?: Size | undefined;
+    dashed?: boolean | undefined;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    label?: string | null | undefined;
+    colourSet?: ColourSet | undefined;
+    onclick?: ((e: MouseEvent) => void) | undefined;
+    onfocus?: ((e: FocusEvent) => void) | undefined;
+    onblur?: ((e: FocusEvent) => void) | undefined;
+    children?: Snippet;
+    relative?: boolean;
+    noninteractive?: boolean;
+}
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;