sk-clib 1.8.1 → 1.10.0

package/dist/styles.css

@@ -310,6 +310,14 @@
   .italic {
     font-style: italic;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .data-\[state\=toggled\]\:bg-black {
     &[data-state="toggled"] {
       background-color: var(--color-black);
@@ -473,6 +481,9 @@
   .bg-background > * {
     color: var(--color-on-background);
   }
+  .bg-primary > * {
+    color: var(--color-primary);
+  }
   .bg-primary-container > * {
     color: var(--color-on-primary-container);
   }
@@ -1026,10 +1037,95 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
     }
   }
 }

package/dist/theme/theme-init/components/theme-init.svelte

@@ -43,7 +43,11 @@
 		const built = build(theme.seedColor, theme.mode, theme.variant);
 
 		// Create css variables object and save to body
-		const applied = applyScheme(built);
+		let applied = applyScheme(built);
+
+		// Inject Seed Color
+		applied["--color-primary-fallback"] = applied["--color-primary"]
+		applied["--color-primary"] = theme.seedColor
 
 		// Save the theme to the user's cookies
 		saveTheme(applied);

package/dist/ui/frame/components/frame.svelte

@@ -6,20 +6,51 @@
 	let {
 		children,
 		class: className,
+
+		// Flex Box
 		flex = $bindable(undefined),
 		row = $bindable(undefined),
 		col = $bindable(undefined),
+
+		// Positioning
 		center = $bindable(undefined),
 		centerx = $bindable(undefined),
 		centery = $bindable(undefined),
+
+		// Size Fillings
 		fill = $bindable(undefined),
 		fillw = $bindable(undefined),
 		fillh = $bindable(undefined),
+
+		// Flex Config
 		noshrink = $bindable(undefined),
+
+		// Aspect Ratios
 		aspectSquare = $bindable(undefined),
+
+		// Cursor options
 		cursorAuto = $bindable(undefined),
 		cursorDefault = $bindable(undefined),
 		cursorPointer = $bindable(undefined),
+
+		// Theme Colors
+		background = $bindable(undefined),
+		primary = $bindable(undefined),
+		primaryContainer = $bindable(undefined),
+		secondary = $bindable(undefined),
+		secondaryContainer = $bindable(undefined),
+		tertiary = $bindable(undefined),
+		tertiaryContainer = $bindable(undefined),
+		error = $bindable(undefined),
+		surface = $bindable(undefined),
+		surfaceVariant = $bindable(undefined),
+		outline = $bindable(undefined),
+		outlineVariant = $bindable(undefined),
+		shadow = $bindable(undefined),
+		scrim = $bindable(undefined),
+		inverseSurface = $bindable(undefined),
+		inversePrimary = $bindable(undefined),
+
 		...rest
 	}: Props = $props();
 
@@ -57,6 +88,25 @@
 	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
 	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
 	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
+
+	// Background Options
+	tokenInstance.addTokenIf(background, 'bg-background');
+	tokenInstance.addTokenIf(primary, 'bg-primary');
+	tokenInstance.addTokenIf(primaryContainer, 'bg-primary-container');
+	tokenInstance.addTokenIf(secondary, 'bg-secondary');
+	tokenInstance.addTokenIf(secondaryContainer, 'bg-secondary-container');
+	tokenInstance.addTokenIf(tertiary, 'bg-tertiary');
+	tokenInstance.addTokenIf(tertiaryContainer, 'bg-tertiary-container');
+	tokenInstance.addTokenIf(error, 'bg-error');
+	tokenInstance.addTokenIf(surface, 'bg-surface');
+	tokenInstance.addTokenIf(surfaceVariant, 'bg-surface-variant');
+	tokenInstance.addTokenIf(outline, 'bg-outline');
+	tokenInstance.addTokenIf(outlineVariant, 'bg-outline-variant');
+	tokenInstance.addTokenIf(shadow, 'bg-shadow');
+	tokenInstance.addTokenIf(scrim, 'bg-scrim');
+	tokenInstance.addTokenIf(inverseSurface, 'bg-inverse-surface');
+	tokenInstance.addTokenIf(inversePrimary, 'bg-inverse-primary');
+
 </script>
 
 <div class={cn(tokenInstance.className)} {...rest}>

package/dist/ui/frame/components/frame.svelte.d.ts

@@ -17,6 +17,6 @@ import type { Props } from '..';
  * This will create a flex container that is a row, centered, and fills the available space.
  * The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
  */
-declare const Frame: import("svelte").Component<Props, {}, "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fill" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer">;
+declare const Frame: import("svelte").Component<Props, {}, "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fill" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer" | "background" | "primary" | "primaryContainer" | "secondary" | "secondaryContainer" | "tertiary" | "tertiaryContainer" | "error" | "surface" | "surfaceVariant" | "outline" | "outlineVariant" | "shadow" | "scrim" | "inverseSurface" | "inversePrimary">;
 type Frame = ReturnType<typeof Frame>;
 export default Frame;

package/dist/ui/frame/types.d.ts

@@ -14,4 +14,20 @@ export type tFrameProps = HTMLAttributes<HTMLDivElement> & {
     cursorAuto?: boolean;
     cursorDefault?: boolean;
     cursorPointer?: boolean;
+    background?: boolean;
+    primary?: boolean;
+    primaryContainer?: boolean;
+    secondary?: boolean;
+    secondaryContainer?: boolean;
+    tertiary?: boolean;
+    tertiaryContainer?: boolean;
+    error?: boolean;
+    surface?: boolean;
+    surfaceVariant?: boolean;
+    outline?: boolean;
+    outlineVariant?: boolean;
+    shadow?: boolean;
+    scrim?: boolean;
+    inverseSurface?: boolean;
+    inversePrimary?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "1.8.1",
+	"version": "1.10.0",
 	"type": "module",
 	"files": [
 		"dist",