spoko-design-system 0.2.85 → 0.2.87

package/src/design.config.ts

@@ -1,48 +1,68 @@
 export const COLORS = {
-  gray: [
-    { name: "100", value: "#f3f4f6" },
-    { name: "200", value: "#e5e7eb" },
-    { name: "300", value: "#b5bbc5" },
-    { name: "400", value: "#9ca3af" },
-    { name: "500", value: "#64748B" },
-    { name: "600", value: "#475569" },
-    { name: "700", value: "#334155" },
-    { name: "800", value: "#1e293b" },
-    { name: "900", value: "#0f172a" },
+  // Brand Colors
+  brand: [
+    { name: "primary", value: "#0040c5" },
+    { name: "secondary", value: "#00b0f0" }
   ],
+
+  // Primary Blues 
   blue: [
-    { name: "50", value: "#eff6ff" },
-    { name: "100", value: "#dbeafe" },
-    { name: "200", value: "#bfdbfe" },
-    { name: "300", value: "#93c5fd" },
-    { name: "400", value: "#60a5fa" },
-    { name: "500", value: "#3b82f6" },
-    { name: "540", value: '#0069ff'},
-    { name: "545", value: '#005ad7'},
-    { name: "550", value: '#0040c5'},
-    { name: "600", value: "#02307d" },
-    { name: "601", value: '#002059'},
-    { name: "700", value: "#001e50" },
-    { name: "800", value: "#00437a" },
-    { name: "900", value: "#000f28" },
-    { name: "901", value: "#0c1a32" },
-    { name: "wrc", value: "#0000c8" },
+    { name: "ultralight", value: "#dbeafe" },  
+    { name: "lightest", value: "#3b82f6" },
+    { name: "light", value: "#0069ff" },
+    { name: "default", value: "#005ad7" }, 
+    { name: "medium", value: "#02307d" },
+    { name: "darker", value: "#001e50" },
+    { name: "darkest", value: "#000f28" },
+    { name: "wrc", value: "#0000c8" }
+  ],
+
+  // Accent Colors
+  accent: [
+    { name: "lightest", value: "#00b0f0" },
+    { name: "light", value: "#0099da" },
+    { name: "default", value: "#0087c1" },
+    { name: "dark", value: "#006ea6" },
+    { name: "darker", value: "#00437a" },
+    { name: "deepBlue", value: "#0c1a32" }
+  ],
+
+  // Neutral Colors
+  neutral: [
+    { name: "lightest", value: "#f3f4f6" },
+    { name: "lighter", value: "#e5e7eb" },
+    { name: "light", value: "#b5bbc5" },
+    { name: "default", value: "#9ca3af" },
+    { name: "dark", value: "#6a767d" },
+    { name: "darker", value: "#4b5563"},
+    { name: "black", value: "#000000" }
   ],
-  lightBlue: [
-    { name: "400", value: "#00b0f0" },
-    { name: "500", value: "#0099da" },
-    { name: "600", value: "#0087c1" },
-    { name: "700", value: "#006ea6" },
+
+  // Slate Colors  
+  slate: [
+    { name: "light", value: "#64748B" },
+    { name: "default", value: "#475569" },
+    { name: "dark", value: "#334155" },
+    { name: "darker", value: "#1e293b" },  // Previously 'darkest'
+    { name: "darkest", value: "#0f172a" }  // New shade added
   ],
-  red: [
-    { name: "400", value: "#f8b5b5" },
-    { name: "500", value: "#f49f9f" },
-    { name: "600", value: "#e57373" },
+
+  // System Colors
+  system: [
+    { name: "success", value: "#10B981" },
+    { name: "warning", value: "#FBBF24" },
+    { name: "error", value: "#EF4444" }, 
+    { name: "info", value: "#3B82F6" }
   ],
+
+  // State Colors
+  state: [
+    { name: "overlay", value: "rgb(0 0 0 / 0.06)" },
+    { name: "disabled", value: "rgb(0 0 0 / 0.12)" }, 
+  ]
 };
 
 export const TYPOGRAPHY = {
-  fontFamily: "Inter, system",
   scale: [
     { name: "h1", size: "22pt", weight: "400" },
     { name: "h2", size: "17pt", weight: "500" },
@@ -50,32 +70,30 @@ export const TYPOGRAPHY = {
     { name: "h4", size: "13pt", weight: "500" },
     { name: "body", size: "13pt", weight: "400" },
     { name: "button", size: "13pt", weight: "400" },
-    { name: "caption", size: "10pt", weight: "400" },
-  ],
+    { name: "caption", size: "10pt", weight: "400" }
+  ]
+};
+
+export const FONTS = {
+  types: [
+    { name: "sans", value: "font-textregular" },
+    { name: "text-regular", value: "font-textregular" },
+    { name: "text-bold", value: "font-textbold" },
+    { name: "head-bold", value: "font-headbold" },
+    { name: "head-regular", value: "font-headregular" },
+    { name: "head-light", value: "font-headlight" },
+    { name: "text-light", value: "font-textlight" },
+    { name: "mono", value: "font-novamono" }
+  ]
 };
 
-export const SHADOWS = {
+export const SHADOWS = {  
   types: [
     { name: "xs", value: "0px 2px 4px rgba(0, 0, 0, 0.08)" },
     { name: "sm", value: "0px 4px 8px rgba(0, 0, 0, 0.125)" },
     { name: "md", value: "0px 8px 16px rgba(0, 0, 0, 0.125)" },
     { name: "lg", value: "0px 16px 32px rgba(0, 0, 0, 0.125)" },
-    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },
-    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" },
-  ],
-};
-
-
-export const FONTS = {
-types: [
-    { name: "vw_textregular", value: "font-textregular" },
-    { name: "vw_textregular", value: "font-sans" },
-    { name: "vw_textbold", value: "font-textbold" },
-    { name: "vw_headbold", value: "font-headbold" },
-    { name: "vw_headregular", value: "font-headregular" },
-    { name: "vw_headlight", value: "font-headlight" },
-    { name: "vw_textlight", value: "font-textlight" },
-    { name: "Nova Mono", value: "font-novamono" },
-    { name: "Nova Mono", value: "font-mono" }
-  ],
-};
+    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },    
+    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" }
+  ]
+};

package/src/pages/components/card.mdx

@@ -221,7 +221,7 @@ Skewed background with CSS & SVG.
 
 <div class="columns-3 gap-8">
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
@@ -232,7 +232,7 @@ Skewed background with CSS & SVG.
     </blockquote>
 </div>
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
@@ -243,7 +243,7 @@ Skewed background with CSS & SVG.
     </blockquote>
 </div>
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
@@ -254,7 +254,7 @@ Skewed background with CSS & SVG.
     </blockquote>
 </div>
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
@@ -265,7 +265,7 @@ Skewed background with CSS & SVG.
     </blockquote>
 </div>
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>
@@ -276,7 +276,7 @@ Skewed background with CSS & SVG.
     </blockquote>
 </div>
 
-<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-600 break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
+<div class="relative flex flex-col min-w-0 break-words w-full mb-8 shadow-lg rounded-lg bg-blue-medium break-inside-avoid-column duration-300 hover:scale-105 hover:shadow-xl">
     <img alt="..." src="https://picsum.photos/900/600/?random" class="w-full align-middle rounded-t-lg img--16/9" />
     <blockquote class="relative p-8 mb-4 text-white/90">
     <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="absolute left-0 w-full block" style="height:95px;top:-94px"><polygon points="-30,95 583,95 583,65" class="text-blue-600 fill-current"></polygon></svg>

package/src/pages/components/icons.astro

@@ -1,48 +1,136 @@
 ---
 import MainLayout from "../../layouts/MainLayout.astro";
 import { Icon } from "astro-icon/components";
-
+import { iconConfig } from '../../../icon.config';
 
 const iconifyUrl = "https://icon-sets.iconify.design/";
-const ICONS = {
-    mdi: ["facebook", "instagram", "post-it-note-edit-outline", "car-hatchback", "car-door", "car-side", "car-windshield-outline", "car-light-alert", "car-tire-alert", "car-light-dimmed", "car-light-fog", "car-light-high", "car-parking-lights", "car-esp", "car-brake-abs", "car-horn", "engine-outline", "fan", "fan-off", "air-conditioner", "coolant-temperature", "car-brake-alert", "car-traction-control", "card-text-outline", "fuel", "oil", "hazard-lights", "credit-card-outline"],
-    el: ["star-empty", "star",  "heart-empty",  "heart", "map-marker", "fire", "quote-right", "qrcode", "car", "indent-left", "indent-right", "ok"],    'eos-icons': ["three-dots-loading", "bubble-loading", "loading", "installing"],
-    fluent: ["share-android-24-regular", "checkmark-24-filled", "tag-24-regular", "tag-multiple-24-regular" ],
-    "fluent-emoji": ["cookie", "construction", "warning", "wrench"],
-    la: ["arrow-right", "arrow-left", "car", "car-side"],
-    octicon: ["chevron-left-24", "x-24", "alert-24", "graph-24", "comment-24", "comment-discussion-24", "clock-24", "star-24", "star-fill-24", "file-media-24", "heart-24", "heart-fill-24", "project-roadmap-24", "location-24", "info-24", "mark-github-16"],
-    uil: ["map-marker", "envelope", "phone", "tag-alt"],
-    "simple-icons": ["ebay", "allegro", "volkswagen", "audi", "skoda", "seat", "whatsapp", "x", "facebook", "messenger", "instagram", "telegram"],
-    "icon-park-outline": ["shopping-bag", "comment", "comments", "tag-one"],
-    flowbite: ["arrow-left-outline", "arrow-right-outline", "angle-left-outline", "angle-right-outline", "chevron-left-outline", "chevron-right-outline","map-location-outline", "map-pin-alt-solid", "x-outline", "messages-outline", "arrow-down-to-bracket-outline", "check-outline"]
+const ICONS = iconConfig.include;
 
+type IconGroup = {
+ name: string;
+ icons: string[];
+ url: string;
 };
+
+const sortedIconCollections = Object.entries(ICONS)
+ .sort(([a], [b]) => a.localeCompare(b))
+ .map(([name, icons]) => ({
+   name,
+   icons,
+   url: `${iconifyUrl}${name}/`
+ }));
 ---
 
 <MainLayout>
-    <h1>Icons</h1>
-    <p>Astro Icon is a straightforward icon system for the Astro framework.</p>
-
-    <a href="https://www.astroicon.dev/">https://www.astroicon.dev/</a>
-
-        <pre  class="mt-6 astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
-        <div class="">
-            {Object.keys(ICONS).map((key) => (
-                <h2 class="mt-6 mx-2">
-                    <a href={`${iconifyUrl}${key}/`} target="_blank">
-                        {key}
-                    </a>
-                </h2>
-                <div class="inline-grid grid-cols-2 md:grid-cols-4 gap-0 w-full">
-                    {ICONS[key].map((value) => (
-                        <div class="mx-1 mb-2">
-                            <div class="component-preview ">
-                                <Icon name={`${key}:${value}`} class="text-3xl mx-auto text-light-blue-400" />
-                            </div>
-                            <pre class="astro-code bg-slate-800 text-white text-sm text-center">&lt;Icon name={`"${key}:${value}"`} /&gt;</pre>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </div>
-</MainLayout>
+   <div class="max-w-7xl mx-auto px-4 py-8">
+       <h1 class="text-2xl font-bold mb-4">Icons</h1>
+       <p class="mb-4">Astro Icon is a straightforward icon system for the Astro framework.</p>
+
+       <a href="https://www.astroicon.dev/" 
+          class="text-blue-600 hover:text-blue-800 underline"
+          target="_blank" 
+          rel="noopener noreferrer">
+           https://www.astroicon.dev/
+       </a>
+
+       <pre class="mt-6 p-4 rounded bg-slate-800 text-white overflow-x-auto">
+           import &#123; Icon &#125; from 'astro-icon/components';
+       </pre>
+
+       <div class="mt-8 space-y-12">
+           {sortedIconCollections.map(({ name, icons, url }) => (
+               <div>
+                   <h2 class="text-xl font-semibold mb-4">
+                       <a href={url} 
+                          class="text-blue-600 hover:text-blue-800 inline-flex items-center gap-2"
+                          target="_blank" 
+                          rel="noopener noreferrer">
+                           {name}
+                           <span class="text-sm text-gray-500">({icons.length} icons)</span>
+                       </a>
+                   </h2>
+                   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                       {icons.map((iconName) => (
+                           <div class="group relative p-4 border rounded-lg hover:shadow-md transition-shadow cursor-pointer icon-card"
+                                data-icon-name={`${name}:${iconName}`}>
+                               <div class="flex flex-col items-center">
+                                   <div class="p-4 bg-gray-50 rounded-lg mb-2 w-full flex justify-center items-center min-h-[64px]">
+                                       <Icon 
+                                           name={`${name}:${iconName}`} 
+                                           class="text-3xl text-blue-600" 
+                                       />
+                                   </div>
+                                   <code class="text-sm text-gray-600 text-center break-all">
+                                       {name}:{iconName}
+                                   </code>
+                               </div>
+                               <div class="tooltip opacity-0 invisible absolute left-1/2 -translate-x-1/2 -top-10 bg-gray-800 text-white px-3 py-1.5 rounded text-sm whitespace-nowrap transition-all z-10">
+                                   Copied!
+                               </div>
+                           </div>
+                       ))}
+                   </div>
+               </div>
+           ))}
+       </div>
+
+       <div class="fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg opacity-0 invisible transition-all duration-300" id="globalNotification">
+           Icon code copied to clipboard!
+       </div>
+   </div>
+
+   <script>
+       document.addEventListener('astro:page-load', () => {
+           const cards = document.querySelectorAll('.icon-card');
+           const globalNotification = document.getElementById('globalNotification');
+           
+           cards.forEach(card => {
+               card.addEventListener('click', async () => {
+                   const iconName = card.getAttribute('data-icon-name');
+                   if (!iconName) return;
+
+                   try {
+                       await navigator.clipboard.writeText(`<Icon name="${iconName}" />`);
+                       
+                       // Show tooltip
+                       const tooltip = card.querySelector('.tooltip');
+                       if (tooltip) {
+                           tooltip.classList.remove('opacity-0', 'invisible');
+                           tooltip.classList.add('opacity-100', 'visible');
+                           
+                           // Hide tooltip after 2 seconds
+                           setTimeout(() => {
+                               tooltip.classList.add('opacity-0', 'invisible');
+                               tooltip.classList.remove('opacity-100', 'visible');
+                           }, 2000);
+                       }
+
+                       // Show global notification
+                       if (globalNotification) {
+                           globalNotification.classList.remove('opacity-0', 'invisible');
+                           globalNotification.classList.add('opacity-100', 'visible');
+                           
+                           setTimeout(() => {
+                               globalNotification.classList.add('opacity-0', 'invisible');
+                               globalNotification.classList.remove('opacity-100', 'visible');
+                           }, 2000);
+                       }
+                   } catch (err) {
+                       console.error('Failed to copy:', err);
+                   }
+               });
+           });
+       });
+   </script>
+
+   <style>
+       .tooltip {
+           transition: all 0.2s ease-in-out;
+       }
+       
+       #globalNotification {
+           transition: all 0.3s ease-in-out;
+           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+       }
+   </style>
+</MainLayout>

package/src/pages/components/input.mdx

@@ -21,12 +21,12 @@ import MainInput from '../../components/MainInput.vue'
 <div class="bg-white grid items-end w-full gap-6 md:grid-cols-3 px-4 py-6">
     <div class="relative">
         <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+        <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
     </div>
 
     <div class="relative z-0">
         <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-        <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+        <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
     </div>
 </div>
 
@@ -36,11 +36,11 @@ import MainInput from '../../components/MainInput.vue'
 ```js
 <div class="relative">
     <input type="text" id="floating_filled" class="block rounded-t-lg px-2.5 pb-2.5 pt-5 w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_filled" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
+    <label for="floating_filled" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] start-2.5 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating filled</label>
 </div>
 
 <div class="relative z-0">
     <input type="text" id="floating_standard" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " />
-    <label for="floating_standard" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
+    <label for="floating_standard" class="absolute text-sm text-slate-medium dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto">Floating standard</label>
 </div>
 ```

package/src/styles/_variables.scss

@@ -5,7 +5,7 @@ $gray-100: #F3F4F6;
 $gray-200: #E5E7EB;
 $gray-300: #B5BBC5;
 $gray-400: #9CA3AF;
-$gray-500: #64748B!default;
+$slate-medium: #64748B!default;
 $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
@@ -32,7 +32,7 @@ $grays: map.merge(
         "200": $gray-200,
         "300": $gray-300,
         "400": $gray-400,
-        "500": $gray-500,
+        "500": $slate-medium,
         "600": $gray-600,
         "700": $gray-700,
         "800": $gray-800,

package/src/styles/content.css

@@ -43,7 +43,7 @@
   }
 
   .component-preview {
-    @apply bg-blue-600 bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
+    @apply bg-blue-medium bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
     gap: 1rem;
     border-radius: 0.33rem;
     border: 1px solid theme("colors.slate.200");

package/src/uno-config/index.ts

@@ -0,0 +1,59 @@
+// uno-config/index.ts
+import type { UserConfig, UserShortcuts } from 'unocss'
+import { defineConfig } from 'unocss';
+import {
+  transformerDirectives,
+  transformerVariantGroup,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+} from 'unocss';
+
+import { shortcuts } from './theme/shortcuts';
+import { theme } from './theme';
+
+interface CustomConfig extends Partial<UserConfig> {
+  shortcuts?: UserShortcuts;
+  theme?: Partial<typeof theme>;
+}
+
+export function createSdsConfig(customConfig: CustomConfig = {}) {
+  return defineConfig({
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+    shortcuts: {
+      ...shortcuts,
+      ...(customConfig.shortcuts || {})
+    },
+    theme: {
+      ...theme,
+      ...(customConfig.theme || {})
+    },
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+        warn: true,
+        prefix: 'i-',
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+      presetTypography(),
+      presetWebFonts({
+        provider: 'none',
+        fonts: theme.fontFamily
+      })
+    ],
+    ...customConfig
+  });
+}
+
+export * from './theme';
+export * from './theme/shortcuts';

package/src/uno-config/theme/breakpoints.ts

@@ -0,0 +1,10 @@
+// theme/breakpoints.ts
+export const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1920px',
+    '4xl': '2400px',
+  };

package/src/uno-config/theme/colors.ts

@@ -0,0 +1,67 @@
+// theme/colors.ts
+export const colors = {
+    // Brand colors - core identity colors
+    brand: {
+        primary: '#0040c5',    // Main brand color
+        secondary: '#00b0f0',  // Supporting brand color
+    },
+
+    // Primary blues - main blue palette
+    blue: {
+        ultralight: '#dbeafe',
+        lightest: '#3b82f6',   // Lightest shade
+        light: '#0069ff',
+        default: '#005ad7',    // Default/base blue
+        medium: '#02307d',
+        darker: '#001e50',
+        darkest: '#000f28',    // Darkest shade
+        wrc: '#0000c8',        // Special WRC color
+    },
+
+    // Secondary colors - accent palette
+    accent: {
+        lightest: '#00b0f0',
+        light: '#0099da',
+        default: '#0087c1',    // Default accent
+        dark: '#006ea6',
+        darker: '#00437a',
+        deepBlue: '#0c1a32',
+    },
+
+    // Neutral colors - grayscale
+    neutral: {
+        lightest: '#f3f4f6',   // Lightest gray 
+        lighter: '#e5e7eb',
+        light: '#b5bbc5',
+        default: '#9ca3af',    // Base gray
+        dark: '#6a767d',       
+        darker: '#4b5563',
+        black: '#000000',      // Pure black
+    },
+      
+    // Slate colors - gray-blue palette
+    slate: {
+        light: '#64748B',
+        default: '#475569',
+        dark: '#334155',    
+        darkest: '#1e293b',
+    },
+
+    // System colors - functional colors
+    system: {
+        success: '#10B981',    // Green - success state
+        warning: '#FBBF24',    // Yellow - warning state
+        error: '#EF4444',      // Red - error state 
+        info: '#3B82F6',       // Blue - information state
+    },
+
+    // States - interaction states
+    state: {
+        overlay: 'rgb(0 0 0 / 0.06)',    // Overlay & Hover state
+        disabled: 'rgb(0 0 0 / 0.12)',  // Disabled state
+    }
+};
+
+// Export types for TypeScript
+export type Colors = typeof colors;
+export type ColorShade = keyof typeof colors;

package/src/uno-config/theme/dimensions.ts

@@ -0,0 +1,18 @@
+// theme/dimensions.ts
+export const dimensions = {
+    height: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
+      'icon': '46px',
+    },
+    maxHeight: {
+      'icon': '46px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+    },
+    minHeight: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+    }
+  };

package/src/uno-config/theme/effects.ts

@@ -0,0 +1,15 @@
+// theme/effects.ts
+export const effects = {
+    filter: {
+      blur: 'blur(5px)',
+    },
+    backgroundSize: {
+      full: '100% 100%',
+    },
+    aspectRatio: {
+      '4/3': '4 / 3',
+    },
+    cursor: {
+      'zoom-in': 'zoom-in',
+    },
+  };

package/src/uno-config/theme/grid.ts

@@ -0,0 +1,11 @@
+// theme/grid.ts
+export const gridTemplates = {
+    columns: {
+      16: 'repeat(16, minmax(0, 1fr))',
+      product: '15rem 20rem minmax(15rem, 1fr)',
+      productGrid: '15rem minmax(20rem, 1fr)',
+      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
+      replacement: '6.25rem 12rem auto',
+      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
+    }
+  };