@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

package/dist/runtime/presets/default/assets/scss/css-variables.scss

@@ -0,0 +1,286 @@
+// Default Template - CSS Custom Properties
+// These are the base styles that apply when no specific template is selected
+// or when data-template="default" is set
+
+:root,
+[data-template="default"] {
+	// Primary Colors
+	--primary-100: #e0f2f7;
+	--primary-300: #a7d9ed;
+	--primary-500: #2196f3;
+	--primary-700: #1976d2;
+	--primary-900: #0d47a1;
+
+	// Accent Colors
+	--accent-100: #e8f5e9;
+	--accent-300: #c8e6c9;
+	--accent-500: #4caf50;
+	--accent-700: #388e3c;
+	--accent-900: #1b5e20;
+
+	// Neutral Colors
+	--neutral-50: #fafafa;
+	--neutral-100: #f5f5f5;
+	--neutral-200: #eeeeee;
+	--neutral-300: #e0e0e0;
+	--neutral-400: #bdbdbd;
+	--neutral-500: #9e9e9e;
+	--neutral-600: #757575;
+	--neutral-700: #616161;
+	--neutral-800: #424242;
+	--neutral-900: #212121;
+
+	// New Color Palettes
+	--yellow-100: #fef9c3;
+	--yellow-300: #fde047;
+	--yellow-500: #eab308;
+	--yellow-700: #a16207;
+	--yellow-900: #713f12;
+
+	--red-100: #fee2e2;
+	--red-300: #fca5a5;
+	--red-500: #ef4444;
+	--red-700: #b91c1c;
+	--red-900: #7f1d1d;
+
+	--blue-100: #dbeafe;
+	--blue-300: #93c5fd;
+	--blue-500: #3b82f6;
+	--blue-700: #1d4ed8;
+	--blue-900: #1e3a8a;
+
+	--pink-100: #fce7f3;
+	--pink-300: #f9a8d4;
+	--pink-500: #ec4899;
+	--pink-700: #be185d;
+	--pink-900: #831843;
+
+	--cyan-100: #cffafe;
+	--cyan-300: #67e8f9;
+	--cyan-500: #06b6d4;
+	--cyan-700: #0e7490;
+	--cyan-900: #164e63;
+
+	--green-100: #dcfce7;
+	--green-300: #86efac;
+	--green-500: #22c55e;
+	--green-700: #15803d;
+	--green-900: #14532d;
+
+	// Semantic Colors
+	--success-color: var(--accent-500);
+	--success-color-light: var(--accent-100);
+	--warning-color: var(--yellow-500);
+	--warning-color-light: var(--yellow-100);
+	--error-color: var(--red-500);
+	--error-color-light: var(--red-100);
+	--info-color: var(--cyan-500);
+	--info-color-light: var(--cyan-100);
+
+	// Font Colors
+	--font-color-primary: var(--neutral-800);
+	--font-color-secondary: var(--neutral-600);
+	--font-color-heading: var(--neutral-900);
+	--font-color-light: var(--neutral-50);
+
+	// Background Colors
+	--background-color: var(--neutral-50);
+	--background-color-light: var(--neutral-50);
+	--background-color-medium: var(--neutral-400);
+	--background-color-dark: var(--neutral-800);
+
+	// Border Colors
+	--border-color-light: var(--neutral-200);
+	--border-color-medium: var(--neutral-400);
+	--border-color-dark: var(--neutral-600);
+
+	// Spacing
+	--gap-sm: 10px;
+	--gap-md: 20px;
+	--gap-lg: 30px;
+	--gap-xl: 40px;
+
+	// Border Radius
+	--border-radius-sm: 4px;
+	--border-radius-md: 8px;
+	--border-radius-lg: 16px;
+	--border-radius-xl: 32px;
+	--border-radius-full: 9999px;
+
+	// Shadows
+	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+	// Typography
+	--font-size-xs: 10px;
+	--font-size-sm: 12px;
+	--font-size-md: 14px;
+	--font-size-lg: 16px;
+	--font-size-xl: 18px;
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-family: Roboto, sans-serif;
+
+	// Transitions
+	--transition-fast: 0.15s ease;
+	--transition-normal: 0.3s ease;
+	--transition-slow: 0.5s ease;
+	--transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+	// Button-specific
+	--button-border-radius: var(--border-radius-sm);
+	--button-font-size-sm: var(--font-size-sm);
+	--button-font-size-md: var(--font-size-md);
+	--button-font-size-lg: var(--font-size-lg);
+
+	// Button Colors - Default
+	--button-bg-default: var(--neutral-900);
+	--button-text-default: var(--font-color-light);
+	--button-hover-bg-default: var(--neutral-700);
+
+	// Button Colors - Primary
+	--button-bg-primary: var(--primary-500);
+	--button-text-primary: var(--font-color-light);
+	--button-hover-bg-primary: var(--primary-700);
+
+	// Button Colors - Success
+	--button-bg-success: var(--success-color);
+	--button-text-success: var(--font-color-light);
+	--button-hover-bg-success: var(--accent-700);
+
+	// Button Colors - Warning
+	--button-bg-warning: var(--warning-color);
+	--button-text-warning: var(--neutral-900);
+	--button-hover-bg-warning: var(--yellow-700);
+
+	// Button Colors - Danger/Error
+	--button-bg-danger: var(--error-color);
+	--button-text-danger: var(--font-color-light);
+	--button-hover-bg-danger: var(--red-700);
+
+	// Button Colors - Info
+	--button-bg-info: var(--info-color);
+	--button-text-info: var(--font-color-light);
+	--button-hover-bg-info: var(--cyan-700);
+
+	// Button Colors - Light
+	--button-bg-light: var(--neutral-50);
+	--button-text-light: var(--neutral-900);
+	--button-hover-bg-light: var(--neutral-200);
+
+	// Button Colors - Dark
+	--button-bg-dark: var(--neutral-900);
+	--button-text-dark: var(--font-color-light);
+	--button-hover-bg-dark: var(--neutral-700);
+
+	// Panel Colors - Default
+	--panel-bg-opacity: 1;
+	--panel-blur: 0px;
+	--panel-bg-default: var(--neutral-50);
+	--panel-header-bg-default: var(--neutral-100);
+	--panel-footer-bg-default: var(--neutral-100);
+
+	// Panel Colors - Primary
+	--panel-bg-primary: var(--blue-300);
+	--panel-header-bg-primary: var(--blue-500);
+	--panel-footer-bg-primary: var(--blue-100);
+
+	// Panel Colors - Success
+	--panel-bg-success: var(--green-300);
+	--panel-header-bg-success: var(--green-500);
+	--panel-footer-bg-success: var(--green-100);
+
+	// Panel Colors - Warning
+	--panel-bg-warning: var(--yellow-300);
+	--panel-header-bg-warning: var(--yellow-500);
+	--panel-footer-bg-warning: var(--yellow-100);
+
+	// Panel Colors - Danger/Error
+	--panel-bg-danger: var(--red-300);
+	--panel-header-bg-danger: var(--red-500);
+	--panel-footer-bg-danger: var(--red-100);
+
+	// Panel Colors - Info
+	--panel-bg-info: var(--cyan-300);
+	--panel-header-bg-info: var(--cyan-500);
+	--panel-footer-bg-info: var(--cyan-100);
+
+	// Input
+	--input-border-radius: var(--border-radius-sm);
+	--input-border-color: var(--border-color-medium);
+	--input-focus-border-color: var(--primary-500);
+	--input-focus-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
+
+	// Table
+	--table-header-bg: var(--neutral-100);
+	--table-header-color: var(--neutral-700);
+	--table-border-color: var(--neutral-300);
+	--table-row-hover: var(--neutral-100);
+	--table-row-selected: var(--blue-100);
+
+	// Checkbox
+	--checkbox-bg: var(--neutral-50);
+	--checkbox-checked-bg: var(--primary-500);
+	--checkbox-border-color: var(--border-color-medium);
+
+	// Missing Box Variables
+	--box-border-radius: var(--border-radius-md);
+	--box-border: 1px solid var(--border-color-medium);
+	--box-shadow: var(--shadow-md);
+	--box-padding: var(--gap-md);
+
+	// Missing Layout Variables
+	--grid-gap: var(--gap-md);
+	--component-gap: var(--gap-sm);
+	--layover: var(--neutral-600);
+	--modal-overlay-bg: rgba(0, 0, 0, 0.5);
+	--modal-backdrop-blur: 0px;
+
+	// Layout Variables
+	--layout-header-height: 60px;
+	--layout-header-bg: var(--background-color);
+	--layout-sidebar-width: 200px;
+	--layout-sidebar-bg: var(--background-color);
+	--layout-content-bg: var(--background-color-light);
+
+	// Missing Icon Variables
+	--icon-color-light: var(--neutral-200);
+	--icon-color-medium: var(--neutral-400);
+	--icon-color-dark: var(--neutral-600);
+
+	// Missing Input Variables
+	--input-border: 1px solid var(--border-color-medium);
+	--input-button-bg: var(--neutral-300);
+	--input-button-hover-bg: var(--neutral-400);
+	--input-button-font-color: var(--font-color-primary);
+	--input-focus-border-color: var(--primary-500);
+
+	// Button Hover Specifics
+	--button-hover-bg-danger: var(--red-700);
+	--button-hover-bg-info: var(--cyan-700);
+	--button-hover-bg-light: var(--neutral-200);
+	--button-hover-bg-primary: var(--primary-700);
+	--button-hover-bg-success: var(--accent-700);
+	--button-hover-bg-warning: var(--yellow-700);
+	--button-hover-bg-dark: var(--neutral-700);
+
+	--button-text-danger: var(--font-color-light);
+	--button-text-primary: var(--font-color-light);
+	--button-text-success: var(--font-color-light);
+	--button-text-warning: var(--neutral-900);
+	--button-text-info: var(--font-color-light);
+	--button-text-light: var(--neutral-900);
+	--button-text-dark: var(--font-color-light);
+
+	--button-hover-text-danger: var(--button-text-danger);
+	--button-hover-text-primary: var(--button-text-primary);
+	--button-hover-text-success: var(--button-text-success);
+	--button-hover-text-warning: var(--button-text-warning);
+	--button-hover-text-info: var(--button-text-info);
+	--button-hover-text-light: var(--button-text-light);
+	--button-hover-text-dark: var(--button-text-dark);
+}

package/dist/runtime/presets/default/assets/scss/docs.scss

@@ -0,0 +1,52 @@
+// Documentation Styles using Existing Template Variables
+.content {
+	h2 {
+		margin-top: 2rem;
+		border-bottom: 1px solid var(--border-color-light);
+		padding-bottom: 0.5rem;
+		color: var(--font-color-heading);
+	}
+
+	pre {
+		background: var(--neutral-100);
+		color: var(--font-color-primary);
+		padding: 1rem;
+		border-radius: var(--border-radius-md);
+		overflow-x: auto;
+		margin: 0;
+		font-family: var(--font-family-mono, monospace);
+
+		code {
+			background: transparent;
+			padding: 0;
+			color: inherit;
+		}
+	}
+
+	.note {
+		background: var(--info-color-light);
+		border-left: 4px solid var(--info-color);
+		padding: 1rem;
+		margin-top: 2rem;
+		border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+		color: var(--font-color-primary);
+
+		p {
+			margin: 0;
+		}
+	}
+
+	.important {
+		background: var(--warning-color-light);
+		border-left: 4px solid var(--warning-color);
+		padding: 1rem;
+		margin: 1rem 0;
+		border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
+		color: var(--font-color-primary);
+
+		p {
+			margin: 0;
+		}
+	}
+
+}

package/dist/runtime/presets/default/assets/scss/index.css

@@ -37,14 +37,44 @@ li {
   --neutral-700: #616161;
   --neutral-800: #424242;
   --neutral-900: #212121;
+  --yellow-100: #fef9c3;
+  --yellow-300: #fde047;
+  --yellow-500: #eab308;
+  --yellow-700: #a16207;
+  --yellow-900: #713f12;
+  --red-100: #fee2e2;
+  --red-300: #fca5a5;
+  --red-500: #ef4444;
+  --red-700: #b91c1c;
+  --red-900: #7f1d1d;
+  --blue-100: #dbeafe;
+  --blue-300: #93c5fd;
+  --blue-500: #3b82f6;
+  --blue-700: #1d4ed8;
+  --blue-900: #1e3a8a;
+  --pink-100: #fce7f3;
+  --pink-300: #f9a8d4;
+  --pink-500: #ec4899;
+  --pink-700: #be185d;
+  --pink-900: #831843;
+  --cyan-100: #cffafe;
+  --cyan-300: #67e8f9;
+  --cyan-500: #06b6d4;
+  --cyan-700: #0e7490;
+  --cyan-900: #164e63;
+  --green-100: #dcfce7;
+  --green-300: #86efac;
+  --green-500: #22c55e;
+  --green-700: #15803d;
+  --green-900: #14532d;
   --success-color: var(--accent-500);
   --success-color-light: var(--accent-100);
-  --warning-color: #ffc107;
-  --warning-color-light: #fff3e0;
-  --error-color: #f44336;
-  --error-color-light: #fbe9e7;
-  --info-color: var(--primary-500);
-  --info-color-light: var(--primary-100);
+  --warning-color: var(--yellow-500);
+  --warning-color-light: var(--yellow-100);
+  --error-color: var(--red-500);
+  --error-color-light: var(--red-100);
+  --info-color: var(--cyan-500);
+  --info-color-light: var(--cyan-100);
   --font-color-primary: var(--neutral-800);
   --font-color-secondary: var(--neutral-600);
   --font-color-heading: var(--neutral-900);
@@ -98,19 +128,39 @@ li {
   --button-hover-bg-success: var(--accent-700);
   --button-bg-warning: var(--warning-color);
   --button-text-warning: var(--neutral-900);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-bg-danger: var(--error-color);
   --button-text-danger: var(--font-color-light);
-  --button-hover-bg-danger: #d32f2f;
+  --button-hover-bg-danger: var(--red-700);
   --button-bg-info: var(--info-color);
   --button-text-info: var(--font-color-light);
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-info: var(--cyan-700);
   --button-bg-light: var(--neutral-50);
   --button-text-light: var(--neutral-900);
   --button-hover-bg-light: var(--neutral-200);
   --button-bg-dark: var(--neutral-900);
   --button-text-dark: var(--font-color-light);
   --button-hover-bg-dark: var(--neutral-700);
+  --panel-bg-opacity: 1;
+  --panel-blur: 0px;
+  --panel-bg-default: var(--neutral-50);
+  --panel-header-bg-default: var(--neutral-100);
+  --panel-footer-bg-default: var(--neutral-100);
+  --panel-bg-primary: var(--blue-300);
+  --panel-header-bg-primary: var(--blue-500);
+  --panel-footer-bg-primary: var(--blue-100);
+  --panel-bg-success: var(--green-300);
+  --panel-header-bg-success: var(--green-500);
+  --panel-footer-bg-success: var(--green-100);
+  --panel-bg-warning: var(--yellow-300);
+  --panel-header-bg-warning: var(--yellow-500);
+  --panel-footer-bg-warning: var(--yellow-100);
+  --panel-bg-danger: var(--red-300);
+  --panel-header-bg-danger: var(--red-500);
+  --panel-footer-bg-danger: var(--red-100);
+  --panel-bg-info: var(--cyan-300);
+  --panel-header-bg-info: var(--cyan-500);
+  --panel-footer-bg-info: var(--cyan-100);
   --input-border-radius: var(--border-radius-sm);
   --input-border-color: var(--border-color-medium);
   --input-focus-border-color: var(--primary-500);
@@ -119,7 +169,7 @@ li {
   --table-header-color: var(--neutral-700);
   --table-border-color: var(--neutral-300);
   --table-row-hover: var(--neutral-100);
-  --table-row-selected: #e3f2fd;
+  --table-row-selected: var(--blue-100);
   --checkbox-bg: var(--neutral-50);
   --checkbox-checked-bg: var(--primary-500);
   --checkbox-border-color: var(--border-color-medium);
@@ -131,6 +181,7 @@ li {
   --component-gap: var(--gap-sm);
   --layover: var(--neutral-600);
   --modal-overlay-bg: rgba(0, 0, 0, 0.5);
+  --modal-backdrop-blur: 0px;
   --layout-header-height: 60px;
   --layout-header-bg: var(--background-color);
   --layout-sidebar-width: 200px;
@@ -144,12 +195,12 @@ li {
   --input-button-hover-bg: var(--neutral-400);
   --input-button-font-color: var(--font-color-primary);
   --input-focus-border-color: var(--primary-500);
-  --button-hover-bg-danger: #d32f2f;
-  --button-hover-bg-info: var(--primary-300);
+  --button-hover-bg-danger: var(--red-700);
+  --button-hover-bg-info: var(--cyan-700);
   --button-hover-bg-light: var(--neutral-200);
   --button-hover-bg-primary: var(--primary-700);
   --button-hover-bg-success: var(--accent-700);
-  --button-hover-bg-warning: #e6ac00;
+  --button-hover-bg-warning: var(--yellow-700);
   --button-hover-bg-dark: var(--neutral-700);
   --button-text-danger: var(--font-color-light);
   --button-text-primary: var(--font-color-light);
@@ -208,4 +259,12 @@ li {
 }
 .content .important p {
   margin: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--layout-content-bg);
+  font-family: var(--font-family);
+  color: var(--font-color-primary);
 }

package/dist/runtime/presets/default/assets/scss/index.scss

@@ -0,0 +1,12 @@
+@use "reset";
+@use "css-variables";
+@use "docs";
+@forward "mixins";
+
+body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--layout-content-bg);
+	font-family: var(--font-family);
+	color: var(--font-color-primary);
+}

package/dist/runtime/presets/default/assets/scss/mixins.scss

@@ -0,0 +1,94 @@
+//mixins
+
+//shadow
+//border
+//flex
+
+// Shadow Mixin
+@mixin shadow($elevation: 1, $shadow-color: rgba(0, 0, 0, 0.12)) {
+	@if $elevation ==1 {
+		box-shadow: 0 1px 3px $shadow-color, 0 1px 2px rgba(0, 0, 0, 0.24);
+	}
+
+	@else if $elevation ==2 {
+		box-shadow: 0 3px 6px $shadow-color, 0 3px 6px rgba(0, 0, 0, 0.23);
+	}
+
+	@else if $elevation ==3 {
+		box-shadow: 0 10px 20px $shadow-color, 0 6px 6px rgba(0, 0, 0, 0.23);
+	}
+
+	@else {
+		box-shadow: 0 1px 3px $shadow-color, 0 1px 2px rgba(0, 0, 0, 0.24);
+	}
+}
+
+// Border Mixin
+@mixin border($width: 1px, $style: solid, $color: var(--border-color-medium), $radius: 0) {
+	border: $width $style $color;
+	border-radius: $radius;
+}
+
+// Flex Mixin
+@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
+	display: flex;
+	flex-direction: $direction;
+	justify-content: $justify;
+	align-items: $align;
+	flex-wrap: $wrap;
+}
+
+@mixin loading-animation($size: 50px, $color: dark) {
+	display: inline-block;
+	width: $size;
+	height: $size;
+	border-radius: 50%;
+	position: relative;
+	animation: rotate 1s linear infinite;
+
+	&::before {
+		content: "";
+		box-sizing: border-box;
+		position: absolute;
+		inset: 0px;
+		border-radius: 50%;
+
+		@if $color ==dark {
+			border: 1px solid var(--neutral-800);
+		}
+
+		@if $color ==light {
+			border: 1px solid var(--neutral-50);
+		}
+
+		animation: prixClipFix 2s linear infinite;
+	}
+
+	@keyframes rotate {
+		100% {
+			transform: rotate(360deg)
+		}
+	}
+
+	@keyframes prixClipFix {
+		0% {
+			clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
+		}
+
+		25% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
+		}
+
+		50% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
+		}
+
+		75% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
+		}
+
+		100% {
+			clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
+		}
+	}
+}

package/dist/runtime/presets/default/assets/scss/reset.scss

@@ -0,0 +1,16 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin: 0;
+	padding: 0;
+}
+
+ul,
+li {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}

package/dist/runtime/presets/default/components/KAccordion/KAccordion.vue

@@ -4,6 +4,9 @@
 		slot
 </template>
 
-<script setup>
-
+<script lang="ts" setup>
+// Default template for KAccordion
 </script>
+
+<style lang="scss" scoped>
+</style>

package/dist/runtime/presets/default/components/KAccordion/KAccordionItem.vue

@@ -7,44 +7,47 @@
 		slot
 </template>
 
-<script setup>
-const props = defineProps({
-  title: { type: String, required: true },
-  isOpen: { type: Boolean, required: true },
-  toggleAccordion: { type: Function, required: true }
-});
+<script lang="ts" setup>
+const props = defineProps<{
+	title: string
+	isOpen: boolean
+	toggleAccordion: () => void
+}>()
 </script>
 
-<style scoped>
-.accordion-item__header {
-  padding: var(--component-gap);
-  background-color: var(--background-color-medium);
-  cursor: pointer;
-  border-radius: var(--box-border-radius);
-}
-.isOpen .accordion-item__header {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.accordion-item__title {
-  flex-grow: 1;
-}
-.accordion-item__chevron {
-  transform: rotate(90deg);
-  transition: transform 0.3s ease-in-out;
-}
-.accordion-item__chevron.open {
-  transform: rotate(270deg);
-}
-.accordion-item__content {
-  display: none;
-  padding-top: var(--box-padding);
-  padding-bottom: var(--box-padding);
-}
-.accordion-item__content.open {
-  border-bottom: var(--box-border);
-}
-.isOpen .accordion-item__content {
-  display: block;
+<style lang="scss" scoped>
+.accordion-item {
+	&__header {
+		padding: var(--component-gap);
+		background-color: var(--background-color-medium);
+		cursor: pointer;
+		border-radius: var(--box-border-radius);
+
+		.isOpen & {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+	&__title {
+		flex-grow: 1;
+	}
+	&__chevron {
+		transform: rotate(90deg);
+		transition: transform 0.3s ease-in-out;
+		&.open {
+			transform: rotate(270deg);
+		}
+	}
+	&__content {
+		display: none;
+		padding-top: var(--box-padding);
+		padding-bottom: var(--box-padding);
+		&.open {
+			border-bottom: var(--box-border);
+		}
+		.isOpen & {
+			display: block;
+		}
+	}
 }
 </style>