@widgetic/design-system 0.3.68 → 0.3.71

package/dist/styles/fonts.css

@@ -1,3 +1,6 @@
+/* Tailwind config */
+/* @config "../../../tailwind.config.ts"; */
+
 /*** GLOBAL STYLE FONTS ***/
 
   /* BL MELODY FAMILY: rules and classes */
@@ -28,47 +31,48 @@
     font-display: swap;
   }
 
-  .h1 {
+/* Convert classes to utilities */
+@utility h1 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 144px;
     line-height: 0.85;
-  }
+}
 
-  .h2 {
+@utility h2 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 72px;
     line-height: 0.96;
-  }
+}
 
-  .h3 {
+@utility h3 {
     font-family: 'BL Melody';
     font-weight: 700;
     font-size: 56px;
     line-height: 1;
-  }
+}
 
-  .h4 {
+@utility h4 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 32px;
     line-height: 1.1;
-  }
+}
 
-  .h5 {
+@utility h5 {
     font-family: 'BL Melody';
     font-weight: 500;
     font-size: 24px;
     line-height: 1.2;
-  }
+}
 
-  .h6 {
+@utility h6 {
     font-family: 'BL Melody';
     font-weight: 600;
     font-size: 14px;
     line-height: 1;
-  }
+}
 
 
 
@@ -118,55 +122,62 @@
     font-display: swap;
   }
 
-  .subtitle1 {
+@utility subtitle1 {
     font-family: 'Riegla Regular';
     font-size: 32px;
     line-height: 1.2;
-  }
+}
 
-  .subtitle2 {
+@utility subtitle2 {
     font-family: 'Riegla Regular';
     font-size: 24px;
     line-height: 1.3;
-  }
+}
 
-  .body-medium {
-    font-family: 'Riegla Medium' !important;
-    font-size: 18px !important;
-    font-weight: 400 !important;
-    line-height: 1.4 !important;
-  }
+@utility body-medium {
+    font-family: 'Riegla Medium';
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.4;
+}
 
-  .body {
-    font-family: 'Riegla Regular' !important;
-    font-size: 18px !important;
-    line-height: 1.4 !important;
-  }
+@utility body {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+}
 
-  .subtext {
-    font-family: 'Riegla Regular' !important;
-    font-size: 16px !important;
-    line-height: 1.4 !important;
-  }
+@utility body-bold {
+    font-family: 'Riegla Regular';
+    font-size: 18px;
+    line-height: 1.4;
+    font-weight: 700;
+}
 
-  .caption {
+@utility subtext {
+    font-family: 'Riegla Regular';
+    font-size: 16px;
+    line-height: 1.4;
+}
+
+@utility caption {
     font-family: 'Riegla Medium';
-    font-weight: 400 !important;
+    font-weight: 400;
     font-size: 14px;
     line-height: 1.2;
-  }
+}
 
-  .link {
+@utility link {
     font-family: 'Riegla Medium';
     font-size: 14px;
     line-height: 1;
     text-decoration: underline;
-  }
+}
 
-  .tag {
+@utility tag {
     font-family: 'Riegla Medium';
     font-size: 11px;
     line-height: 16px;
     text-transform: uppercase;
-  }
+}
   

package/dist/styles/global.css

@@ -1,14 +1,48 @@
-/* Tailwind 4
-@import "tailwindcss"; */
-
-/* Taildind 3 imports */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+/* Tailwind import(v4) */
+@import 'tailwindcss';
 
 /* Import fonts css */
+/* @import './fonts.css' layer(utilities); */
 @import './fonts.css';
 
+/* Tailwind config load *after* main imports */
+@config "../../../tailwind.config.ts";
+
+/* Utility classes for border radius - Moved to top level */
+@utility rounded-pill {
+  border-radius: var(--radius-pill);
+}
+
+@utility rounded-large {
+  border-radius: var(--radius-large);
+}
+
+@utility rounded-medium {
+  border-radius: var(--radius-medium);
+}
+
+@utility rounded-small {
+  border-radius: var(--radius-small);
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
 @layer base {
   /* CSS Variables Here at the top of the base layer */
   :root {
@@ -58,7 +92,7 @@
     --icon-error: 0 84% 60%;
   }
 
-  /* CLASSES FOR WIDGETIC COMPONENTS */
+  /* CLASSES FOR WIDGETIC COMPONENTS - Keep variable definitions inside layer */
   /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
   .widgetic-colors {
     --dark: 120 35.7% 9.4%;
@@ -94,22 +128,6 @@
     --breakpoint-tablet: 744px;
     --breakpoint-desktop: 1156px;
   }
-  /* Utility classes for border radius */
-  .rounded-pill {
-    border-radius: var(--radius-pill);
-  }
-
-  .rounded-large {
-    border-radius: var(--radius-large);
-  }
-
-  .rounded-medium {
-    border-radius: var(--radius-medium);
-  }
-
-  .rounded-small {
-    border-radius: var(--radius-small);
-  }
 
   /*** GLOBAL STYLE CLASSES ***/
   * {
@@ -126,18 +144,18 @@
 
   /* This is the root container of the website(app.html) */
   .root-ct {
-    @apply min-h-screen;
+    @apply w-full h-screen;
     display: block !important;
   }
 
   /* This is the root layout container of the website pages */
   .layout-ct {
-    @apply min-h-screen w-full;
+    @apply w-full h-full;
   }
 
   .page-ct {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     /* background-color: green; */
   }
 
@@ -164,6 +182,7 @@
   }
 
   .native-scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-muted;
     cursor: pointer;
     
     border: calc(var(--scrollbar-width) / 3) solid transparent;
@@ -551,7 +570,7 @@
 
   /* Modal Button Styles */
   .modal-btn-primary {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -567,7 +586,7 @@
   }
 
   .modal-btn-secondary {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
     padding: 0 16px !important;
     min-height: 34px !important;
     border-radius: var(--radius-pill) !important;
@@ -585,9 +604,9 @@
   }
 
   .modal-btn-attention {
-    @apply h6 inline-flex items-center justify-center !important;
+    @apply !h6 !inline-flex !items-center !justify-center;
     padding: 0 16px !important;
-    height: 34px;
+    height: 34px !important;
     border-radius: var(--radius-pill) !important;
     background-color: hsl(var(--error)) !important;
     color: white !important;
@@ -604,7 +623,7 @@
 
   /* Primary Button - Base styfles */
   .btn-primary {
-    @apply inline-flex items-center justify-center gap-2 !important;
+    @apply !inline-flex !items-center !justify-center !gap-2;
     padding: 8px 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -624,7 +643,7 @@
 
   /* Primary Button sizes */
   .btn-primary-small {
-    @apply body-medium inline-flex items-center justify-center gap-1 !important;
+    @apply !body-medium !inline-flex !items-center !justify-center !gap-1;
     padding: 4px 12px 6px 12px !important;
     border-radius: var(--radius-medium) !important;
     background-color: hsl(var(--deep-forest-green)) !important;
@@ -632,7 +651,7 @@
   }
 
   .btn-primary-large {
-    @apply body-medium inline-flex items-center justify-center gap-3 !important;
+    @apply !body-medium !inline-flex !items-center !justify-center !gap-3;
     padding: 16px 32px !important;
     min-height: 56px !important;
     border-radius: var(--radius-medium) !important;
@@ -652,7 +671,7 @@
 
   /* Secondary Button */
   .btn-secondary {
-    @apply h6 inline-flex items-center justify-center gap-2 !important;
+    @apply !h6 !inline-flex !items-center !justify-center !gap-2;
     padding: 0 16px !important;
     height: 34px !important;
     border-radius: var(--radius-small) !important;
@@ -691,7 +710,7 @@
   }
 
   .dropdown-menu-item {
-    @apply flex items-center gap-2 w-full text-left h6 text-[hsl(var(--grey7))] whitespace-nowrap;
+    @apply !flex !items-center !gap-2 !w-full !text-left !h6 !text-[hsl(var(--grey7))] !whitespace-nowrap;
     padding: 8px 16px;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.3.68",
+	"version": "0.3.71",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -14,7 +14,7 @@
 		"**/*.ts"
 	],
 	"scripts": {
-		"i": "rm -rf node_modules && npm i && npm link",
+		"i": "rm -rf node_modules && rm -rf package-lock.json && npm i && npm link",
 		"unlink": "rm -rf \"$(npm root -g)/@widgetic/design-system\" 2>/dev/null || true",
 		"clean-modules": "rm -rf node_modules",
 		"llinks": "ls -la node_modules/@widgetic",
@@ -36,7 +36,7 @@
 		"i-shadcn": "npm run clean-shadcn && npm run i-shadcn-init && npm run i-shadcn-comps",
 		"clean-shadcn": "rm -rf ./src/lib/components/ui",
 		"i-shadcn-init": "npx shadcn-svelte@next init",
-		"i-shadcn-comps": "npx shadcn-svelte@next add accordion badge button calendar range-calendar card checkbox collapsible dialog drawer dropdown-menu input input-otp label popover progress radio-group scroll-area select separator slider switch table tabs textarea tooltip",
+		"i-shadcn-comps": "npx shadcn-svelte@next add accordion badge breadcrumb button calendar card checkbox collapsible command dialog drawer dropdown-menu hover-card input input-otp label popover progress radio-group range-calendar scroll-area select separator slider sonner switch table tabs textarea toogle toggle-group tooltip",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"prepublishOnly": "npm run package",
@@ -106,13 +106,10 @@
 	"peerDependencies": {
 		"@internationalized/date": "^3.6.0",
 		"@sveltejs/kit": "^2.20.2",
-		"@tabler/icons-svelte": "^3.30.0",
-		"bits-ui": "^1.3.0",
-		"lucide-svelte": "^0.468.0",
-		"shadcn-svelte": "latest",
+		"bits-ui": "^1.3.19",
+		"shadcn-svelte": "1.0.0-next.9",
 		"svelte": "^5.25.6",
-		"svelte-sonner": "^0.3.28",
-		"tailwindcss": "^3.4.16"
+		"tailwindcss": "^4.1.4"
 	},
 	"devDependencies": {
 		"@internationalized/date": "^3.6.0",
@@ -120,7 +117,33 @@
 		"@sveltejs/kit": "^2.20.2",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@tailwindcss/postcss": "^4.1.4",
 		"@tailwindcss/typography": "^0.5.15",
+		"@types/node": "^22.10.1",
+		"bits-ui": "^1.3.19",
+		"concurrently": "^9.1.0",
+		"eslint": "^9.7.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"lucide-svelte": "^0.468.0",
+		"mode-watcher": "^0.5.0",
+		"postcss": "^8.5.3",
+		"prettier": "^3.3.2",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"shadcn-svelte": "1.0.0-next.9",
+		"svelte": "^5.25.6",
+		"svelte-check": "^4.1.0",
+		"svelte-sonner": "^0.3.28",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
+		"vite": "^6.0.1"
+	},
+	"dependencies": {
+		"@hirasso/thumbhash-custom-element": "^0.5.5",
+		"@tabler/icons-svelte": "^3.30.0",
 		"@tiptap/core": "^2.9.1",
 		"@tiptap/extension-bubble-menu": "^2.9.1",
 		"@tiptap/extension-code-block-lowlight": "^2.9.1",
@@ -143,41 +166,19 @@
 		"@tiptap/extension-underline": "^2.9.1",
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
-		"@types/node": "^22.10.1",
-		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.3.0",
 		"clsx": "^2.1.1",
-		"concurrently": "^9.1.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
 		"lowlight": "^3.2.0",
-		"lucide-svelte": "^0.468.0",
-		"mode-watcher": "^0.5.0",
-		"prettier": "^3.3.2",
-		"prettier-plugin-svelte": "^3.2.6",
-		"prettier-plugin-tailwindcss": "^0.6.5",
-		"svelte": "^5.25.6",
+		"pdfjs-dist": "^4.10.38",
 		"svelte-awesome-color-picker": "^3.1.4",
-		"svelte-check": "^4.1.0",
 		"svelte-sonner": "^0.3.28",
 		"svelte-tiptap": "^2.0.3",
 		"tailwind-merge": "^2.5.5",
 		"tailwind-variants": "^0.3.0",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.0.0",
-		"vaul-svelte": "^1.0.0-next.3",
-		"vite": "^6.0.1"
+		"vaul-svelte": "^1.0.0-next.3"
 	},
 	"volta": {
 		"node": "22.14.0",
 		"npm": "11.1.0"
-	},
-	"dependencies": {
-		"@hirasso/thumbhash-custom-element": "^0.5.5",
-		"@tabler/icons-svelte": "^3.30.0",
-		"pdfjs-dist": "^4.10.38"
 	}
 }

package/tailwind.config.ts

@@ -1,12 +1,10 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
 import type { Config } from "tailwindcss";
 import tailwindcssAnimate from "tailwindcss-animate";
 import tailwindcssTypography from '@tailwindcss/typography';
 
 const config: Config = {
-	darkMode: ["class"],
+	darkMode: "class",
 	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
 	theme: {
 		container: {
 			center: true,
@@ -67,9 +65,6 @@ const config: Config = {
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)"
 			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
-			},
 			keyframes: {
 				"accordion-down": {
 					from: { height: "0" },