@widgetic/design-system 0.5.10 → 0.5.11

package/dist/styles/global.css

@@ -11,13 +11,17 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
 /* Widgetic DS palette as TW4 theme tokens (enables bg-grey2, text-forest-green, etc.) */
 @theme {
+  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+
   --color-dark: hsl(var(--dark));
   --color-deep-forest-green: hsl(var(--deep-forest-green));
   --color-sage-green: hsl(var(--sage-green));
   --color-sunny-yellow: hsl(var(--sunny-yellow));
   --color-light-green: hsl(var(--light-green));
   --color-forest-green: hsl(var(--forest-green));
+  --color-forest-green-dark: hsl(var(--forest-green-dark));
   --color-error: hsl(var(--error));
+  --color-error-dark: hsl(var(--error-dark));
   --color-light-error: hsl(var(--light-error));
   --color-grey1: hsl(var(--grey1));
   --color-grey2: hsl(var(--grey2));
@@ -27,6 +31,19 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   --color-grey6: hsl(var(--grey6));
   --color-grey7: hsl(var(--grey7));
 
+  /* Figma Foundations Tokens (01 — Foundations 38:142) */
+  --color-ink-primary: hsl(var(--ink-primary));
+  --color-primary-green: hsl(var(--primary-green));
+  --color-ink-secondary: hsl(var(--ink-secondary));
+  --color-ink-muted: hsl(var(--ink-muted));
+  --color-ink-subtle: hsl(var(--ink-subtle));
+  --color-surface-canvas: hsl(var(--surface-canvas));
+  --color-surface-dark: hsl(var(--surface-dark));
+  --color-surface-ink-on-dark: hsl(var(--surface-ink-on-dark));
+  --color-accent-orange: hsl(var(--accent-orange));
+  --color-accent-green: hsl(var(--accent-green));
+  --color-primary-green-muted: hsl(var(--primary-green-muted));
+
   --radius-pill: 100px;
   --radius-large: 15px;
   --radius-medium: 12px;
@@ -53,6 +70,13 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   border-radius: var(--radius-small);
 }
 
+/* Native Scrollbar Customization Property */
+@property --scroll-thumb-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f0f0f0; /* Direct color value matching --grey2 */
+}
+
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
@@ -121,22 +145,37 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     
     /* Widgetic Color Variables (Moved from .widgetic-colors) */
     /* convert colors from hex to HSL (Hue, Saturation, Lightness) format */
-    --dark: 120 35.7% 9.4%;
-    --deep-forest-green: 115 24.1% 24.7%;
-    --sage-green: 108 25.4% 52.9%;
+    --dark: 124 36.2% 9.2%; /* #0F2010 */
+    --deep-forest-green: 116.3 25.4% 24.7%; /* #314F2F */
+    --sage-green: 101.6 25.8% 52.9%; /* #7BA668 */
     --sunny-yellow: 45 89% 65.7%;
-    --light-green: 83 45.5% 93.7%;
-    --forest-green: 90 16.7% 83.3%;
-    --error: 0 89% 65.7%;
+    --light-green: 88.2 20% 83.3%; /* #D5DDCC */
+    --forest-green: 88.2 20% 83.3%; /* #D5DDCC */
+    --forest-green-dark: 116.3 25.4% 24.7%; /* #314F2F */
+    --error: 0 88.6% 65.7%; /* #F55A5A */
+    --error-dark: 0 89% 55%;
     --light-error: 0 45.5% 93.7%;
     /* Greys */
     --grey1: 0 0% 96.1%;
     --grey2: 0 0% 94.1%;
-    --grey3: 0 0% 55.7%;
-    --grey4: 0 0% 46.1%;
-    --grey5: 0 0% 40%;
-    --grey6: 0 0% 26.7%;
-    --grey7: 0 0% 12.9%;
+    --grey3: 0 0% 45.9%; /* #757575 */
+    --grey4: 0 0% 45.9%; /* #757575 */
+    --grey5: 0 0% 40%; /* #666666 */
+    --grey6: 0 0% 26.7%; /* #444444 */
+    --grey7: 124 36.2% 9.2%; /* #0F2010 */
+
+    /* Figma Foundations Tokens (01 — Foundations 38:142) */
+    --ink-primary: 124 36.2% 9.2%; /* #0F2010 */
+    --primary-green: 116.3 25.4% 24.7%; /* #314F2F */
+    --ink-secondary: 0 0% 26.7%; /* #444444 */
+    --ink-muted: 0 0% 45.9%; /* #757575 */
+    --ink-subtle: 0 0% 40%; /* #666666 */
+    --surface-canvas: 0 0% 100%; /* #FFFFFF */
+    --surface-dark: 124 36.2% 9.2%; /* #0F2010 */
+    --surface-ink-on-dark: 0 0% 100%; /* #FFFFFF */
+    --accent-orange: 0 88.6% 65.7%; /* #F55A5A */
+    --accent-green: 101.6 25.8% 52.9%; /* #7BA668 */
+    --primary-green-muted: 88.2 20% 83.3%; /* #D5DDCC */
 
 
 
@@ -170,6 +209,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     height: 100vh;
     overflow: hidden; /* prevent scroll */
     margin: 0;
+    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
   }
@@ -191,14 +231,6 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     /* background-color: green; */
   }
 
-  /* Native Scrollbar Customization */
-  /* Use @property for transition */
-  @property --scroll-thumb-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #f0f0f0; /* Direct color value matching --grey2 */
-  }
-
   .native-scrollbar {
     width: calc(100% + var(--scrollbar-width));
     overflow-y: scroll;
@@ -442,7 +474,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   } */
 
   /* Tablet (744px and below) */
-  @media (max-width: var(--breakpoint-tablet)) {
+  @media (max-width: 744px) {
     .dashboard-grid {
       grid-template-columns: 
         var(--dashboard-margin)
@@ -464,7 +496,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Mobile (393px and below) */
-  @media (max-width: var(--breakpoint-mobile)) {
+  @media (max-width: 393px) {
     .dashboard-grid {
       grid-template-columns: 
         var(--dashboard-margin)
@@ -537,7 +569,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Tablet (744px and below) */
-  @media (max-width: var(--breakpoint-tablet)) {
+  @media (max-width: 744px) {
     .app-grid {
         grid-template-columns: 
             24px
@@ -552,7 +584,7 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   }
 
   /* Mobile (393px and below) */
-  @media (max-width: var(--breakpoint-mobile)) {
+  @media (max-width: 393px) {
     .app-grid {
         grid-template-columns: 
             16px
@@ -676,10 +708,10 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     border-radius: var(--radius-small) !important;
     background-color: hsl(var(--deep-forest-green)) !important;
     color: hsl(var(--light-green)) !important;
-    font-family: 'Riegla Medium' !important;
-    font-size: 18px !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+    font-size: 16px !important;
     line-height: 1.4 !important;
-    font-weight: 400 !important;
+    font-weight: 600 !important;
   }
 
   /* Add hover state for primary button */
@@ -704,10 +736,10 @@ go 3 levels up in development mode, 2 levels up in production mode*/
     border-radius: var(--radius-medium) !important;
     background-color: hsl(var(--deep-forest-green)) !important;
     color: hsl(var(--light-green)) !important;
-    font-family: 'Riegla Medium' !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
     font-size: 18px !important;
     line-height: 1.4 !important;
-    font-weight: 400 !important;
+    font-weight: 600 !important;
   }
 
   /* Add hover state for large primary button */
@@ -889,10 +921,10 @@ go 3 levels up in development mode, 2 levels up in production mode*/
 
   /* Add H5 text style */
   .h5 {
-    font-family: 'Riegla Medium';
+    font-family: 'Inter', system-ui, sans-serif;
     font-size: 16px;
     line-height: 1.4;
-    font-weight: 400;
+    font-weight: 500;
   }
 
   /* Update the Breadcrumbs specific styles */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.10",
+	"version": "0.5.11",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -8,10 +8,7 @@
 	"types": "./dist/index.d.ts",
 	"sideEffects": [
 		"**/*.css",
-		"**/*.scss",
-		"**/*.svelte",
-		"**/*.js",
-		"**/*.ts"
+		"**/*.scss"
 	],
 	"scripts": {
 		"i": "rm -rf node_modules && rm -rf package-lock.json && npm i && npm link && npm run set-git",
@@ -22,7 +19,7 @@
 		"llinks": "ls -la node_modules/@widgetic",
 		"glinks": "npm ls --global | grep widgetic",
 		"set-git": "git config core.ignorecase false",
-		"ensure-fonts": "mkdir -p static/fonts && ln -sfn ../../src/lib/fonts/BLMelody static/fonts/BLMelody && ln -sfn ../../src/lib/fonts/Riegla static/fonts/Riegla",
+		"ensure-fonts": "mkdir -p static/fonts && ln -sfn ../../src/lib/fonts/Inter static/fonts/Inter && ln -sfn ../../src/lib/fonts/JetBrainsMono static/fonts/JetBrainsMono && ln -sfn ../../src/lib/fonts/Cousine static/fonts/Cousine",
 		"predev": "npm run ensure-fonts && npx svelte-kit sync",
 		"predev-sv": "npm run ensure-fonts && npx svelte-kit sync",
 		"dev": "npm run dev-sv",
@@ -181,12 +178,6 @@
 		"@tabler/icons-svelte": "^3.33.0",
 		"bits-ui": "^2.16.3",
 		"clsx": "^2.1.1",
-		"concurrently": "^9.1.0",
-		"eslint": "^9.7.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-import": "^2.29.1",
-		"eslint-plugin-svelte": "^2.36.0",
-		"globals": "^15.0.0",
 		"lucide-svelte": "^0.546.0",
 		"mode-watcher": "^0.5.0",
 		"pdfjs-dist": "^4.10.38",
@@ -196,6 +187,8 @@
 		"vaul-svelte": "^1.0.0-next.3"
 	},
 	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@tiptap/core": "^2.9.1",
 		"@tiptap/extension-bubble-menu": "^2.9.1",
 		"@tiptap/extension-code-block-lowlight": "^2.9.1",
@@ -223,6 +216,9 @@
 		"svelte-tiptap": "^2.0.3"
 	},
 	"peerDependenciesMeta": {
+		"@sveltejs/kit": {
+			"optional": true
+		},
 		"@tiptap/core": {
 			"optional": true
 		},

package/tailwind.config.ts

@@ -64,12 +64,34 @@ const config: Config = {
 				"sage-green": "hsl(var(--sage-green) / <alpha-value>)",
 				"light-green": "hsl(var(--light-green) / <alpha-value>)",
 				"forest-green": "hsl(var(--forest-green) / <alpha-value>)",
+				"forest-green-dark": "hsl(var(--forest-green-dark) / <alpha-value>)",
 				error: "hsl(var(--error) / <alpha-value>)",
+				"error-dark": "hsl(var(--error-dark) / <alpha-value>)",
 				grey1: "hsl(var(--grey1) / <alpha-value>)",
 				grey2: "hsl(var(--grey2) / <alpha-value>)",
 				grey3: "hsl(var(--grey3) / <alpha-value>)",
 				grey5: "hsl(var(--grey5) / <alpha-value>)",
 				grey7: "hsl(var(--grey7) / <alpha-value>)",
+
+				// Figma Foundations Tokens (01 — Foundations 38:142)
+				"ink-primary": "hsl(var(--ink-primary) / <alpha-value>)",
+				"primary-green": "hsl(var(--primary-green) / <alpha-value>)",
+				"ink-secondary": "hsl(var(--ink-secondary) / <alpha-value>)",
+				"ink-muted": "hsl(var(--ink-muted) / <alpha-value>)",
+				"ink-subtle": "hsl(var(--ink-subtle) / <alpha-value>)",
+				"surface-canvas": "hsl(var(--surface-canvas) / <alpha-value>)",
+				"surface-dark": "hsl(var(--surface-dark) / <alpha-value>)",
+				"surface-ink-on-dark": "hsl(var(--surface-ink-on-dark) / <alpha-value>)",
+				"accent-orange": "hsl(var(--accent-orange) / <alpha-value>)",
+				"accent-green": "hsl(var(--accent-green) / <alpha-value>)",
+				"primary-green-muted": "hsl(var(--primary-green-muted) / <alpha-value>)",
+			},
+			fontFamily: {
+				sans: ["Inter", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "sans-serif"],
+				inter: ["Inter", "sans-serif"],
+				mono: ["JetBrains Mono", "Cousine", "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "monospace"],
+				"jetbrains-mono": ["JetBrains Mono", "monospace"],
+				cousine: ["Cousine", "monospace"],
 			},
 			borderRadius: {
 				xl: "calc(var(--radius) + 4px)",