flowbite-svelte 0.24.13 → 0.24.14

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.24.14](https://github.com/themesberg/flowbite-svelte/compare/v0.24.13...v0.24.14) (2022-08-16)
+
+
+### Features
+
+* add custom color to Alert component and update props ([2e2a71b](https://github.com/themesberg/flowbite-svelte/commit/2e2a71b4fb83bca28a1bf6b107f4163acbb6b011))
+
 ### [0.24.13](https://github.com/themesberg/flowbite-svelte/compare/v0.24.12...v0.24.13) (2022-08-16)
 
 

package/alerts/Alert.svelte

@@ -9,6 +9,9 @@ export let icon = null;
 export let dismissable = false;
 export let rounded = true;
 export let accent = false;
+export let customBgClasses = '';
+export let customBorderAccentClasses = '';
+export let customTextColors = '';
 let hidden = false;
 const handleAlert = () => {
     dispatch('handleAlert');
@@ -25,7 +28,8 @@ const bgClasses = {
     purple: 'bg-purple-100 dark:bg-purple-200 ',
     pink: 'bg-pink-100 dark:bg-pink-200 ',
     blue: 'bg-blue-100 dark:bg-blue-200 ',
-    dark: 'bg-gray-100 dark:bg-gray-700'
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    custom: customBgClasses
 };
 const borderAccentClasses = {
     gray: 'border-gray-500 dark:bg-gray-200 ',
@@ -36,7 +40,8 @@ const borderAccentClasses = {
     purple: 'border-purple-500 dark:bg-purple-200 ',
     pink: 'border-pink-500 dark:bg-pink-200 ',
     blue: 'border-blue-500 dark:bg-blue-200 ',
-    dark: 'border-gray-500'
+    dark: 'border-gray-500',
+    custom: customBorderAccentClasses
 };
 const textColors = {
     gray: 'text-gray-700 dark:text-gray-800',
@@ -47,7 +52,8 @@ const textColors = {
     purple: 'text-purple-700 dark:text-purple-800',
     pink: 'text-pink-700 dark:text-pink-800',
     blue: 'text-blue-700 dark:text-blue-800',
-    dark: 'text-gray-700  dark:text-gray-300'
+    dark: 'text-gray-700  dark:text-gray-300',
+    custom: customTextColors
 };
 let divClass;
 $: divClass = classNames('flex flex-col p-4 mb-4 gap-2 text-sm', bgClasses[color] ?? bgClasses.blue, accent && (borderAccentClasses[color] ?? borderAccentClasses.blue), rounded && 'rounded-lg ', accent && 'border-t-4 ', textColors[color], $$props.class);

package/alerts/Alert.svelte.d.ts

@@ -9,6 +9,9 @@ declare const __propDef: {
         dismissable?: boolean;
         rounded?: boolean;
         accent?: boolean;
+        customBgClasses?: string;
+        customBorderAccentClasses?: string;
+        customTextColors?: string;
     };
     events: {
         click: MouseEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.24.13",
+  "version": "0.24.14",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {

package/types.d.ts

@@ -57,7 +57,7 @@ export interface CheckboxType {
     disabled?: boolean;
     helper?: string;
 }
-export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white';
+export declare type Colors = 'blue' | 'gray' | 'red' | 'yellow' | 'purple' | 'green' | 'indigo' | 'pink' | 'white' | 'custom';
 export declare type CrumbType = {
     label: string;
     href: string;