spoko-design-system 0.2.85 → 0.2.87

package/astro.config.mjs

@@ -1,15 +1,15 @@
 import { defineConfig, sharpImageService } from "astro/config";
+import { iconConfig } from './icon.config';
 import vue from "@astrojs/vue";
 import mdx from '@astrojs/mdx';
 import UnoCSS from '@unocss/astro';
-// import Compress from "astro-compress";
-// https://github.com/yassinedoghri/astro-i18next#readme
 import astroI18next from "astro-i18next";
 import icon from "astro-icon";
 import sitemap from "@astrojs/sitemap";
 import pagefind from "astro-pagefind";
 import AstroPWA from '@vite-pwa/astro';
 import metaTags from "astro-meta-tags";
+import playformInline from "@playform/inline";
 
 // https://astro.build/config
 export default defineConfig({
@@ -74,70 +74,8 @@ export default defineConfig({
     }
   }), UnoCSS({
     injectReset: true
-  }), icon({
-    include: {
-      // mdi: ["*"], // (Default) Loads entire Material Design Icon set
-      mdi: ["npm", "github", "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"],
-      "ant-design": ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined", "cluster-outlined", "audit-outlined", "build-twotone", "home-outlined", "close-outlined"],
-      bi: ["envelope-open", "credit-card", "qr-code", "list-check", "list-task", "text-indent-left", "text-indent-right", "tag", "tags", "x"],
-      bx: ["arrow-back", "check", "detail", "file", "car", "credit-card", "barcode", "qr"],
-      carbon: ["language", "checkmark", "home", "dicom-overlay"],
-      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"]
-    }
-  }),   //   CSS: true,
-  //   HTML: {
-  //     caseSensitive: true,
-  //     collapseBooleanAttributes: true,
-  //     collapseInlineTagWhitespace: false,
-  //     collapseWhitespace: true,
-  //     conservativeCollapse: false,
-  //     continueOnParseError: false,
-  //     customAttrAssign: [],
-  //     customAttrCollapse: "",
-  //     customAttrSurround: [],
-  //     customEventAttributes: [/^on[a-z]{3,}$/],
-  //     decodeEntities: false,
-  //     html5: true,
-  //     ignoreCustomComments: [],
-  //     ignoreCustomFragments: [],
-  //     includeAutoGeneratedTags: true,
-  //     keepClosingSlash: true,
-  //     maxLineLength: null,
-  //     minifyCSS: true,
-  //     minifyJS: true,
-  //     minifyURLs: false,
-  //     preserveLineBreaks: false,
-  //     preventAttributesEscaping: false,
-  //     processConditionalComments: true,
-  //     processScripts: ["module"],
-  //     quoteCharacter: "",
-  //     removeAttributeQuotes: true,
-  //     removeComments: false,
-  //     removeEmptyAttributes: false,
-  //     removeEmptyElements: false,
-  //     removeOptionalTags: false,
-  //     removeRedundantAttributes: true,
-  //     removeScriptTypeAttributes: true,
-  //     removeStyleLinkTypeAttributes: true,
-  //     removeTagWhitespace: true,
-  //     sortAttributes: true,
-  //     sortClassName: true,
-  //     trimCustomFragments: false,
-  //     useShortDoctype: false
-  //   },
-  //   Image: false,
-  //   JavaScript: true,
-  //   SVG: true
-  // }),
+  }),
+  icon(iconConfig), 
   metaTags(),
   (await import("@playform/inline")).default(),
   pagefind(), 

package/icon.config.ts

@@ -0,0 +1,225 @@
+interface IconConfig {
+    include: {
+      [key: string]: string[];
+    }
+  }
+  
+  export const iconConfig: IconConfig = {
+    include: {
+      mdi: [
+        // Social
+        "npm", 
+        "github", 
+        "facebook", 
+        "instagram",
+        
+        // Notes & Content
+        "post-it-note-edit-outline",
+        
+        // Car related
+        "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",
+        
+        // Climate & Temperature
+        "fan",
+        "fan-off",
+        "air-conditioner",
+        "coolant-temperature",
+        
+        // Alerts & Warnings
+        "car-brake-alert",
+        "car-traction-control",
+        
+        // Other
+        "card-text-outline",
+        "fuel",
+        "oil",
+        "hazard-lights",
+        "credit-card-outline"
+      ],
+  
+      "ant-design": [
+        "menu-fold-outlined",
+        "menu-unfold-outlined",
+        "menu-outlined",
+        "bars-outlined",
+        "appstore-outlined",
+        "cluster-outlined",
+        "audit-outlined",
+        "build-twotone",
+        "home-outlined",
+        "close-outlined"
+      ],
+  
+      bi: [
+        "envelope-open",
+        "credit-card",
+        "qr-code",
+        "list-check",
+        "list-task",
+        "text-indent-left",
+        "text-indent-right",
+        "tag",
+        "tags",
+        "x",
+        "graph-up"
+      ],
+  
+      bx: [
+        "arrow-back",
+        "check",
+        "detail",
+        "file",
+        "car",
+        "credit-card",
+        "barcode",
+        "qr"
+      ],
+  
+      carbon: [
+        "language",
+        "checkmark",
+        "home",
+        "dicom-overlay"
+      ],
+  
+      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",
+        "carrd"
+      ],
+  
+      "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"
+      ],
+  
+      // Nowe kolekcje
+      ph: [
+        'images-light',
+        'image-square-thin',
+        'cat-thin',
+        'copy-simple-light'
+      ],
+  
+      ic: [
+        'sharp-photo-library'
+      ],
+  
+      'material-symbols-light': [
+        'broken-image-outline'
+      ],
+  
+      et: [
+        'documents'
+      ]
+    }
+  };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.85",
+  "version": "0.2.87",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -10,7 +10,9 @@
       "import": "./index.ts",
       "require": "./index.ts"
     },
-    "./styles/*": "./src/styles/*"
+    "./styles/*": "./src/styles/*",
+    "./icons": "./icon.config.ts",
+    "./uno-config": "./src/uno-config/index.ts"
   },
   "scripts": {
     "dev": "astro dev",
@@ -51,11 +53,14 @@
     "@iconify-json/circle-flags": "^1.2.6",
     "@iconify-json/el": "^1.2.1",
     "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.4",
     "@iconify-json/fluent": "^1.2.13",
     "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/ic": "^1.2.2",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify-json/la": "^1.2.1",
+    "@iconify-json/material-symbols-light": "^1.2.14",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.1",
     "@iconify-json/octicon": "^1.2.4",
@@ -65,7 +70,7 @@
     "@iconify/json": "^2.2.304",
     "@iconify/vue": "^4.3.0",
     "@playform/compress": "^0.1.7",
-    "@playform/inline": "github:playform/inline",
+    "@playform/inline": "^0.1.1",
     "@types/node": "^22.13.1",
     "@unocss/astro": "^65.4.3",
     "@unocss/preset-attributify": "^65.4.3",

package/src/components/Badges.vue

@@ -16,6 +16,6 @@ const props = defineProps({
 <template>
   <div v-if="(props.badges && props.badges.length > 0)" class="absolute z-2">
     <Badge v-for="(badge, index) in props.badges" :key="index" :badge="badge"
-      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-600' : 'bg-black')" />
+      :class="(badge.toLocaleLowerCase().includes('gti') ? 'bg-red-600' : badge.toLocaleLowerCase().includes('motorsport') ? 'bg-blue-wrc' : 'bg-black')" />
   </div>
 </template>

package/src/components/Category/CategoriesCarousel.astro

@@ -75,7 +75,7 @@ const activeIndex = activeCategorySlug && categories ? categories.map(a => a.slu
 
 <style >
 .active {
-  @apply bg-blue-700 text-white bg-opacity-100;
+  @apply bg-blue-darker text-white bg-opacity-100;
 
   &:not(:hover) .cats-img {
     filter: invert(100%);

package/src/components/Category/CategoryDetails.astro

@@ -2,25 +2,25 @@
 import CategorySidebarToggler from './CategorySidebarToggler.vue';
 import CategoryViewToggler from './CategoryViewToggler.astro';
 import { Icon } from 'astro-icon/components';
-const { category, subcategory, subtitle, subsubtitle, titleSmall, locale } = Astro.props;
+const { category, subcategory, subtitle, subsubtitle, titleSmall, locale, showViewToggler, viewerLabels } = Astro.props;
 import { t } from "i18next";
 
 // Compute base URL for localization
 const baseURL = locale === 'en' ? '' : `/${locale}`;
 
 // View toggler translations
-const viewerLabels = {
-  showText: t('category.view.show'),
-  listText: t('category.view.list'),
-  gridText: t('category.view.grid'),
-  listAriaLabel: t('category.view.listAriaLabel'),
-  gridAriaLabel: t('category.view.gridAriaLabel')
-};
+// const viewerLabels = {
+//   showText: t('category.view.show'),
+//   listText: t('category.view.list'),
+//   gridText: t('category.view.grid'),
+//   listAriaLabel: t('category.view.listAriaLabel'),
+//   gridAriaLabel: t('category.view.gridAriaLabel')
+// };
 ---
 
 <div 
   ref="el"
-  class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-gray-100 md:bg-white"
+  class="flex flex-nowrap items-center pr-3 sm:pb-3 sm:pt-4 md:pl-4 relative z-10-off bg-neutral-lightest md:bg-white"
   transition:name="category-details"
   transition:animate="fade"
 >
@@ -37,7 +37,7 @@ const viewerLabels = {
           {category.name}
           {titleSmall && <small>{titleSmall}</small>}
         </a>
-        <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
+        <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
         {!subsubtitle ? (
           <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
             {subtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
@@ -49,7 +49,7 @@ const viewerLabels = {
                 {subtitle}
               </a>
             </div>
-            <span class="text-gray-200 text-lg inline-block px-1 font-headlight">/</span>
+            <span class="text-neutral-lighter text-lg inline-block px-1 font-headlight">/</span>
             <h1 class="text-lg py-2.5 sm:py-0 whitespace-nowrap underline underline-offset-6 decoration-blue-300 decoration-0.5">
               {subsubtitle} <span class="sr-only"> {t('catalog.extra-short')}</span>
             </h1>
@@ -65,7 +65,7 @@ const viewerLabels = {
     )}
   </div>
 
-  <CategoryViewToggler {...viewerLabels} />
+  <CategoryViewToggler {...viewerLabels} showViewToggler={showViewToggler} />
 </div>
 
 <script is:inline>

package/src/components/Category/CategoryViewToggler.astro

@@ -7,6 +7,7 @@ interface Props {
   gridText: string;      // "Grid"
   listAriaLabel: string; // "List view"
   gridAriaLabel: string; // "Grid view"
+  showViewToggler: boolean;
 }
 
 const { 
@@ -14,12 +15,15 @@ const {
   listText, 
   gridText, 
   listAriaLabel, 
-  gridAriaLabel 
+  gridAriaLabel, 
+  showViewToggler
 } = Astro.props;
 ---
 
+{
+  showViewToggler && 
 <div class="flex items-center gap-2 ml-auto">
-  <span class="text-gray-600 text-sm">{showText}</span>
+  <span class="text-slate-default text-sm">{showText}</span>
   <div class="flex border rounded">
     <button 
       data-view="list"
@@ -39,8 +43,10 @@ const {
     </button>
   </div>
 </div>
+}
 
-<script>
+<script define:vars={{ showViewToggler }}>
+    
   // Initialize view state
   function initializeView() {
     const savedView = localStorage.getItem('categoryView') || 'list';
@@ -51,7 +57,7 @@ const {
     buttons.forEach(button => {
       if (button instanceof HTMLElement) {
         const isActive = button.dataset.view === savedView;
-        button.classList.toggle('bg-gray-100', isActive);
+        button.classList.toggle('bg-neutral-lightest', isActive);
       }
     });
 
@@ -78,8 +84,8 @@ const {
         localStorage.setItem('categoryView', view);
 
         // Update button states
-        buttons.forEach(btn => btn.classList.remove('bg-gray-100'));
-        clickedButton.classList.add('bg-gray-100');
+        buttons.forEach(btn => btn.classList.remove('bg-neutral-lightest'));
+        clickedButton.classList.add('bg-neutral-lightest');
 
         // Update products container
         const productsContainer = document.querySelector('.products-container');
@@ -93,7 +99,9 @@ const {
 
   // Setup on page load
   document.addEventListener('astro:page-load', () => {
-    initializeView();
-    setupViewToggle();
+    if (showViewToggler) {
+        initializeView();
+        setupViewToggle();
+    }
   });
 </script>

package/src/components/Header/Header.astro

@@ -6,7 +6,7 @@ import Search from "astro-pagefind/components/Search";
 ---
 
 <header
-  class="p-3 bg-blue-600 bg-opacity-10 backdrop-blur-md border-b text-slate-900"
+  class="p-3 bg-blue-medium bg-opacity-10 backdrop-blur-md border-b text-slate-900"
 >
   <SkipToContent />
   <nav

package/src/components/Modal.astro

@@ -8,7 +8,7 @@ import Button from "../components/Button.vue";
     @apply fixed top-0 left-0 right-0 bottom-0;
 
     &::backdrop {
-      @apply bg-gray-500/50 fixed;
+      @apply bg-slate-medium/50 fixed;
       top: 0px;
       right: 0px;
       bottom: 0px;

package/src/components/Product/ProductDetails.vue

@@ -33,7 +33,7 @@ const props = defineProps({
   <template v-for="(detail, index) in details" :key="index" class="" v-if="details && details.length">
     <!-- PDP PAGE - PRODUCT ROW -->
     <!-- <pre>{{  JSON.stringify(details) }}</pre> -->
-    <li v-if="props.small" class="text-xs md:text-sm text-gray-900 dark:text-gray-300 leading-tight font-textlight md:font-textregular">
+    <li v-if="props.small" class="text-xs md:text-sm text-slate-darkest dark:text-neutral-light leading-tight font-textlight md:font-textregular">
 
       <span v-if="detail.id" class="inline-block mr-1 items--0">
         {{ getTranslation(`detail.${detail.id}`) }}:

package/src/components/Product/ProductLink.astro

@@ -70,7 +70,7 @@ const nameFormatted = removeSemicolon(productName.toString());
         }}
       />
     ) : (
-      <img src="/1x1.png" class="bg-gray-100/70" alt={productName} />
+      <img src="/1x1.png" class="bg-neutral-lightest/70" alt={productName} />
     )}
   </div>
 

package/src/components/Product/ProductLink.vue

@@ -5,7 +5,7 @@
       ]">
         <!-- Slot na ProductImage z Astro -->
         <slot name="image">
-          <img src="/1x1.png" class="bg-gray-100/70" :alt="productName" />
+          <img src="/1x1.png" class="bg-neutral-lightest/70" :alt="productName" />
         </slot>
       </div>