webcoreui 0.10.0 → 1.0.0

package/scss/global/theme.scss

@@ -34,24 +34,24 @@
             --w-color-scheme: light;
             --w-color-primary: #000;
             --w-color-primary-10: #111;
-            --w-color-primary-20: #333;
-            --w-color-primary-30: #555;
-            --w-color-primary-40: #EEE;
+            --w-color-primary-20: #252525;
+            --w-color-primary-30: #757575;
+            --w-color-primary-40: #BBB;
             --w-color-primary-50: #DDD;
-            --w-color-primary-60: #FAFAFA;
+            --w-color-primary-60: #EEE;
             --w-color-primary-70: #FFF;
-        
-            --w-color-info: #0ABDE3;
-            --w-color-info-accent: #48DBFB;
-            --w-color-info-fg: #000;
-            --w-color-success: #10AC84;
-            --w-color-success-accent: #1DD1A1;
-            --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #f7AA61;
-            --w-color-warning-fg: #000;
-            --w-color-alert: #de3233;
-            --w-color-alert-accent: #EE5253;
+
+            --w-color-info: #0073A8;
+            --w-color-info-accent: #009FCC;
+            --w-color-info-fg: #FFF;
+            --w-color-success: #0A754D;
+            --w-color-success-accent: #16A062;
+            --w-color-success-fg: #FFF;
+            --w-color-warning: #C76D00;
+            --w-color-warning-accent: #E3861D;
+            --w-color-warning-fg: #FFF;
+            --w-color-alert: #A51415;
+            --w-color-alert-accent: #C62828;
             --w-color-alert-fg: #FFF;
             --w-color-overlay: #0000009e;
         }
@@ -87,29 +87,29 @@
 
     @if $theme == 'vintage' {
         #{$selector} {
-            --w-color-scheme: dark;
-            --w-color-primary: #000;
-            --w-color-primary-10: #111;
-            --w-color-primary-20: #6b4430;
-            --w-color-primary-30: #d6ccc2;
-            --w-color-primary-40: #cbb39a;
-            --w-color-primary-50: #e8d0b7;
-            --w-color-primary-60: #f5e6d5;
-            --w-color-primary-70: #f5ebe0;
-
-            --w-color-info: #6d95d1;
-            --w-color-info-accent: #48DBFB;
-            --w-color-info-fg: #000;
-            --w-color-success: #85c8ba;
-            --w-color-success-accent: #1DD1A1;
-            --w-color-success-fg: #000;
-            --w-color-warning: #e79d6b;
-            --w-color-warning-accent: #f7AA61;
+            --w-color-scheme: light;
+            --w-color-primary: #1A110D;
+            --w-color-primary-10: #2C1F18; 
+            --w-color-primary-20: #8B5A3C; 
+            --w-color-primary-30: #c09d82;
+            --w-color-primary-40: #B89678;
+            --w-color-primary-50: #D8BFA5;
+            --w-color-primary-60: #F0DCC4;
+            --w-color-primary-70: #F6E8DA;
+
+            --w-color-info: #3F73B7;
+            --w-color-info-accent: #4992f0; 
+            --w-color-info-fg: #FFF;
+            --w-color-success: #33907f;
+            --w-color-success-accent: #1BB890;
+            --w-color-success-fg: #FFF;
+            --w-color-warning: #e08447;
+            --w-color-warning-accent: #f1985c;
             --w-color-warning-fg: #000;
-            --w-color-alert: #bf6170;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #923B46;
+            --w-color-alert-accent: #C33F50;
             --w-color-alert-fg: #FFF;
-            --w-color-overlay: #0000009e;
+            --w-color-overlay: #33211B9E;
         }
     }
 
@@ -145,29 +145,57 @@
         #{$selector} {
             --w-color-scheme: dark;
             --w-color-primary: #FFF;
-            --w-color-primary-10: #EEE;
-            --w-color-primary-20: #fad5c0;
-            --w-color-primary-30: #eabfff;
-            --w-color-primary-40: #8212ba;
-            --w-color-primary-50: #9D2BD6;
+            --w-color-primary-10: #F0F0F0;
+            --w-color-primary-20: #F6C8A9;
+            --w-color-primary-30: #E5B1FF;
+            --w-color-primary-40: #761EAA;
+            --w-color-primary-50: #912BCE;
             --w-color-primary-60: #0f1b33;
-            --w-color-primary-70: #030d1e;
+            --w-color-primary-70: #060E21;
 
             --w-color-info: #1c98ff;
             --w-color-info-accent: #6be4ff;
             --w-color-info-fg: #000;
-            --w-color-success: #83e300;
-            --w-color-success-accent: #b7ff51;
+            --w-color-success: #7ADA00;
+            --w-color-success-accent: #A8FF4D;
             --w-color-success-fg: #000;
-            --w-color-warning: #FF9F43;
-            --w-color-warning-accent: #ffb672;
+            --w-color-warning: #FF912F;
+            --w-color-warning-accent: #FFA95A;
             --w-color-warning-fg: #000;
-            --w-color-alert: #ff3333;
-            --w-color-alert-accent: #EE5253;
+            --w-color-alert: #F63131;
+            --w-color-alert-accent: #E84647;
             --w-color-alert-fg: #FFF;
             --w-color-overlay: #13002cc2;
         }
     }
+
+    @if $theme == 'velvet' {
+        #{$selector} {
+            --w-color-scheme: dark;
+            --w-color-primary: #EDE0E0;
+            --w-color-primary-10: #D6C1C1;
+            --w-color-primary-20: #fab6b6;
+            --w-color-primary-30: #c47272;
+            --w-color-primary-40: #661B1B;
+            --w-color-primary-50: #520F0F;
+            --w-color-primary-60: #2E0B0B;
+            --w-color-primary-70: #180505;
+
+            --w-color-info: #36587A;
+            --w-color-info-accent: #4F7BAF;
+            --w-color-info-fg: #FFF;
+            --w-color-success: #f2b900;
+            --w-color-success-accent: #ffd341;
+            --w-color-success-fg: #000;
+            --w-color-warning: #e5601e;
+            --w-color-warning-accent: #E4783D;
+            --w-color-warning-fg: #000;
+            --w-color-alert: #B8001F;
+            --w-color-alert-accent: #E00028;
+            --w-color-alert-fg: #FFF;
+            --w-color-overlay: #13050599;
+        }
+    }
 }
 
 

package/svelte.d.ts

@@ -26,6 +26,7 @@ import type { SvelteListProps as WSvelteListProps } from './components/List/list
 import type { SvelteMasonryProps as WSvelteMasonryProps } from './components/Masonry/masonry'
 import type { SvelteMenuProps as WSvelteMenuProps } from './components/Menu/menu'
 import type { SvelteModalProps as WSvelteModalProps } from './components/Modal/modal'
+import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
 import type { SveltePaginationProps as WSveltePaginationProps } from './components/Pagination/pagination'
 import type { SveltePopoverProps as WSveltePopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
@@ -37,6 +38,7 @@ import type { SvelteSheetProps as WSvelteSheetProps } from './components/Sheet/s
 import type { SvelteSidebarProps as WSvelteSidebarProps } from './components/Sidebar/sidebar'
 import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SvelteSliderProps as WSvelteSliderProps } from './components/Slider/slider'
+import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { SvelteSpoilerProps as WSvelteSpoilerProps } from './components/Spoiler/spoiler'
 import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
@@ -82,6 +84,7 @@ declare module 'webcoreui/svelte' {
 	export const Masonry: Component<WSvelteMasonryProps>
 	export const Menu: Component<WSvelteMenuProps>
 	export const Modal: Component<WSvelteModalProps>
+	export const OTPInput: Component<WOTPInputProps>
 	export const Pagination: Component<WSveltePaginationProps>
 	export const Popover: Component<WSveltePopoverProps>
 	export const Progress: Component<WProgressProps>
@@ -93,6 +96,7 @@ declare module 'webcoreui/svelte' {
 	export const Sidebar: Component<WSvelteSidebarProps>
 	export const Skeleton: Component<WSkeletonProps>
 	export const Slider: Component<WSvelteSliderProps>
+	export const SpeedDial: Component<WSpeedDialProps>
 	export const Spinner: Component<WSpinnerProps>
 	export const Spoiler: Component<WSvelteSpoilerProps>
 	export const Stepper: Component<WStepperProps>
@@ -132,6 +136,7 @@ declare module 'webcoreui/svelte' {
 	export type MasonryProps = WSvelteMasonryProps
 	export type MenuProps = WSvelteMenuProps
 	export type ModalProps = WSvelteModalProps
+	export type OTPInputProps = WOTPInputProps
 	export type PaginationProps = WSveltePaginationProps
 	export type PopoverProps = WSveltePopoverProps
 	export type ProgressProps = WProgressProps
@@ -143,6 +148,7 @@ declare module 'webcoreui/svelte' {
 	export type SidebarProps = WSvelteSidebarProps
 	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSvelteSliderProps
+	export type SpeedDialProps = WSpeedDialProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WSvelteSpoilerProps
 	export type StepperProps = WStepperProps

package/svelte.js

@@ -25,6 +25,7 @@ import ListComponent from './components/List/List.svelte'
 import MasonryComponent from './components/Masonry/Masonry.svelte'
 import MenuComponent from './components/Menu/Menu.svelte'
 import ModalComponent from './components/Modal/Modal.svelte'
+import OTPInputComponent from './components/OTPInput/OTPInput.svelte'
 import PaginationComponent from './components/Pagination/Pagination.svelte'
 import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
@@ -36,6 +37,7 @@ import SheetComponent from './components/Sheet/Sheet.svelte'
 import SidebarComponent from './components/Sidebar/Sidebar.svelte'
 import SkeletonComponent from './components/Skeleton/Skeleton.svelte'
 import SliderComponent from './components/Slider/Slider.svelte'
+import SpeedDialComponent from './components/SpeedDial/SpeedDial.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SpoilerComponent from './components/Spoiler/Spoiler.svelte'
 import StepperComponent from './components/Stepper/Stepper.svelte'
@@ -75,6 +77,7 @@ export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
 export const Modal = ModalComponent
+export const OTPInput = OTPInputComponent
 export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
@@ -86,6 +89,7 @@ export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
 export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
+export const SpeedDial = SpeedDialComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent