@onsvisual/svelte-components 1.0.23 → 1.0.25

package/dist/css/main.css

@@ -31,6 +31,9 @@ body {
 .ons-hero {
 	overflow: visible;
 }
+.ons-btn__inner .ons-icon {
+	fill: currentColor;
+}
 
 /* Backfills for legacy website */
 .primary-nav__item:hover > ul,

package/dist/inputs/Button/Button.stories.svelte

@@ -63,3 +63,9 @@
 	args={{ text: "Search", icon: "search", hideLabel: true }}
 	{template}
 />
+
+<Story
+	name="Custom colour button"
+	args={{ text: "Small button", icon: "cross", color: "#00a3a6", small: true }}
+	{template}
+/>

package/dist/inputs/Button/Button.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { createEventDispatcher } from "svelte";
 	import Icon from "../../decorators/Icon/Icon.svelte";
+	import { contrastColor, darkenColor } from "../../js/utils";
 
 	const dispatch = createEventDispatcher();
 
@@ -54,6 +55,11 @@
 	 * @type {string|null}
 	 */
 	export let download = null;
+	/**
+	 * Set a colour for the button
+	 * @type {string|null}
+	 */
+	export let color = null;
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -74,7 +80,12 @@
 		on:click={(e) => dispatch("click", e)}
 		aria-label={arialabel}
 	>
-		<span class="ons-btn__inner">
+		<span
+			class="ons-btn__inner"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
 			{#if iconPosition === "before"}
 				<slot name="icon">
 					{#if icon}
@@ -104,7 +115,12 @@
 		on:click={(e) => dispatch("click", e)}
 		aria-label={arialabel}
 	>
-		<span class="ons-btn__inner">
+		<span
+			class="ons-btn__inner"
+			style:background={color}
+			style:color={color ? contrastColor(color) : null}
+			style:box-shadow={color ? `0 0.1875rem 0 ${darkenColor(color)}` : null}
+		>
 			{#if iconPosition === "before"}
 				<slot name="icon">
 					{#if icon}

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

@@ -5,6 +5,7 @@ export default class Button extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     small?: boolean | undefined;
     href?: string | null | undefined;
+    color?: string | null | undefined;
     download?: string | null | undefined;
     type?: "button" | "reset" | "sumbit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
@@ -31,6 +32,7 @@ declare const __propDef: {
         cls?: string | null | undefined;
         small?: boolean | undefined;
         href?: string | null | undefined;
+        color?: string | null | undefined;
         download?: string | null | undefined;
         type?: "button" | "reset" | "sumbit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;

package/dist/js/utils.d.ts

@@ -16,6 +16,7 @@ export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
 export function sleep(ms?: number): Promise<any>;
 export function contrastColor(color: any): "black" | "white";
+export function darkenColor(color: any, factor?: number): any;
 export function lipsum(sentences?: number, offset?: number): string;
 export function matchMedia(query: any): MediaQueryList;
 export namespace matchMedia {

package/dist/js/utils.js

@@ -105,6 +105,16 @@ export const contrastColor = (color) => {
 	return "black";
 };
 
+export const darkenColor = (color, factor = 0.5) => {
+	if (!color || typeof color !== "string") return color;
+	const hsl = parse(color).hsl;
+	if (hsl) {
+		hsl[2] = hsl[2] * factor;
+		return `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
+	}
+	return color;
+};
+
 export const lipsum = (sentences = 4, offset = 0) => {
 	const texts = [
 		"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.23",
+	"version": "1.0.25",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",