spoko-design-system 1.1.0 → 1.1.2

package/src/pages/index.astro

@@ -1,31 +1,31 @@
 ---
-import { Icon } from "astro-icon/components";
-import { SITE } from "../config";
-import Jumbotron from "../components/Jumbotron.astro";
-import Layout from "../layouts/Layout.astro";
-import Headline from "../components/Headline.vue";
-import Button from "../components/Button.vue";
-import Quote from "../components/Quote.vue";
-import FeaturesList from "../components/FeaturesList.vue";
+import { Icon } from 'astro-icon/components';
+import { SITE } from '../config';
+import Jumbotron from '../components/Jumbotron.astro';
+import Layout from '../layouts/Layout.astro';
+import Headline from '../components/Headline.vue';
+import Button from '../components/Button.vue';
+import Quote from '../components/Quote.vue';
+import FeaturesList from '../components/FeaturesList.vue';
 
 const navItems = [
   {
-    title: "Core",
-    description: "Base colors, typography, shadows etc.",
-    url: "/core/introduction",
-    icon: "streamline-freehand-color:database",
+    title: 'Core',
+    description: 'Base colors, typography, shadows etc.',
+    url: '/core/introduction',
+    icon: 'streamline-freehand-color:database',
   },
   {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    icon: "streamline-freehand-color:module-building-blocks",
+    title: 'Components',
+    description: 'The building blocks for our UI.',
+    url: '/components/buttons',
+    icon: 'streamline-freehand-color:module-building-blocks',
   },
   {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    icon: "streamline-freehand-color:layouts-array-1",
+    title: 'Patterns',
+    description: 'Common patterns for building interfaces.',
+    url: '/patterns/introduction',
+    icon: 'streamline-freehand-color:layouts-array-1',
   },
 ];
 ---
@@ -61,11 +61,7 @@ const navItems = [
               class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
             >
               <Headline as="h2" textSize="2xl" underline={false}>
-                <Icon
-                  name={icon}
-                  aria-hidden="true"
-                  class="text-blue-400 mr-2"
-                />
+                <Icon name={icon} aria-hidden="true" class="text-blue-400 mr-2" />
                 {title}
               </Headline>
               <p class="text-slate-500 w-full">{description}</p>
@@ -82,57 +78,142 @@ const navItems = [
           Why Spoko Design System?
         </Headline>
         <p class="text-lg text-gray-600 max-w-2xl mx-auto">
-          A modern, comprehensive design system built with Astro and Vue, featuring consistent components and patterns for rapid development.
+          A modern, comprehensive design system built with Astro and Vue, featuring consistent
+          components and patterns for rapid development.
         </p>
       </div>
 
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="simple-icons:astro" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="simple-icons:astro"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Astro-Powered
           </Headline>
-          <p class="text-gray-600">Built with <a href="https://astro.build/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">Astro</a> for lightning-fast performance and seamless integration with modern frameworks.</p>
+          <p class="text-gray-600">
+            Built with <a
+              href="https://astro.build/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-600 hover:text-blue-800 underline transition-colors">Astro</a
+            > for lightning-fast performance and seamless integration with modern frameworks.
+          </p>
         </div>
 
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="streamline-freehand-color:data-transfer-document-module" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="streamline-freehand-color:data-transfer-document-module"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Rich Components
           </Headline>
-          <p class="text-gray-600">20+ production-ready components including buttons, modals, carousels, and specialized automotive elements.</p>
+          <p class="text-gray-600">
+            20+ production-ready components including buttons, modals, carousels, and specialized
+            automotive elements.
+          </p>
         </div>
 
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="vscode-icons:file-type-unocss" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="vscode-icons:file-type-unocss"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             UnoCSS Styling
           </Headline>
-          <p class="text-gray-600">Atomic CSS approach with <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">UnoCSS</a> for flexible, maintainable styling and consistent design tokens.</p>
+          <p class="text-gray-600">
+            Atomic CSS approach with <a
+              href="https://unocss.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-600 hover:text-blue-800 underline transition-colors">UnoCSS</a
+            > for flexible, maintainable styling and consistent design tokens.
+          </p>
         </div>
 
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="vscode-icons:file-type-vue" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="vscode-icons:file-type-vue"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Vue Integration
           </Headline>
-          <p class="text-gray-600">Seamless <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">Vue 3</a> component integration with TypeScript support for interactive elements.</p>
+          <p class="text-gray-600">
+            Seamless <a
+              href="https://vuejs.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-blue-600 hover:text-blue-800 underline transition-colors">Vue 3</a
+            > component integration with TypeScript support for interactive elements.
+          </p>
         </div>
 
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="streamline-freehand-color:design-process-drawing-board" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="streamline-freehand-color:design-process-drawing-board"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Design Patterns
           </Headline>
-          <p class="text-gray-600">Proven patterns and layouts for common use cases, from landing pages to product catalogs.</p>
+          <p class="text-gray-600">
+            Proven patterns and layouts for common use cases, from landing pages to product
+            catalogs.
+          </p>
         </div>
 
         <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
-          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
-            <Icon name="streamline-freehand-color:app-window-source-code" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+          <Headline
+            as="h3"
+            textSize="xl"
+            underline={false}
+            class="mb-3 text-gray-900 flex items-center justify-center"
+          >
+            <Icon
+              name="streamline-freehand-color:app-window-source-code"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Developer Ready
           </Headline>
-          <p class="text-gray-600">Complete documentation, TypeScript support, and easy npm installation for quick project setup.</p>
+          <p class="text-gray-600">
+            Complete documentation, TypeScript support, and easy npm installation for quick project
+            setup.
+          </p>
         </div>
       </div>
     </section>
@@ -151,11 +232,14 @@ const navItems = [
     <!-- Download & Examples Section -->
     <section class="py-16 px-4 max-w-6xl mx-auto">
       <div class="grid lg:grid-cols-2 gap-8 md:gap-12">
-
         <!-- Download Section -->
         <div class="text-center">
           <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
-            <Icon name="streamline-freehand-color:archive-box" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            <Icon
+              name="streamline-freehand-color:archive-box"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Get Started
           </Headline>
 
@@ -173,17 +257,21 @@ const navItems = [
 
           <!-- Download Links -->
           <div class="flex justify-center gap-6 mb-6">
-            <a href="https://www.npmjs.com/package/spoko-design-system"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors">
+            <a
+              href="https://www.npmjs.com/package/spoko-design-system"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors"
+            >
               <Icon name="mdi:npm" class="text-3xl" />
               <span class="font-semibold">npm Package</span>
             </a>
-            <a href="https://github.com/polo-blue/sds"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center gap-3 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg transition-colors">
+            <a
+              href="https://github.com/polo-blue/sds"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-3 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg transition-colors"
+            >
               <Icon name="mdi:github" class="text-2xl" />
               <span class="font-semibold">Source Code</span>
             </a>
@@ -197,27 +285,37 @@ const navItems = [
         <!-- Examples Section -->
         <div class="text-center">
           <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
-            <Icon name="streamline-freehand-color:app-window-source-code" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            <Icon
+              name="streamline-freehand-color:app-window-source-code"
+              aria-hidden="true"
+              class="text-3xl text-blue-400 mr-3"
+            />
             Live Examples
           </Headline>
 
           <!-- Example Sites Grid -->
           <div class="grid gap-4 mb-6">
-            <a href="https://catalog.polo.blue"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+            <a
+              href="https://catalog.polo.blue"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group"
+            >
               <div class="text-left">
-                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">catalog.polo.blue</h4>
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">
+                  catalog.polo.blue
+                </h4>
                 <p class="text-sm text-gray-600">Car parts catalog</p>
               </div>
               <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
             </a>
 
-            <a href="https://polo.blue"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+            <a
+              href="https://polo.blue"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group"
+            >
               <div class="text-left">
                 <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo.blue</h4>
                 <p class="text-sm text-gray-600">Polo 6R DIY workshop & guides</p>
@@ -225,21 +323,27 @@ const navItems = [
               <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
             </a>
 
-            <a href="https://sale.polo.blue/"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+            <a
+              href="https://sale.polo.blue/"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group"
+            >
               <div class="text-left">
-                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">sale.polo.blue</h4>
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">
+                  sale.polo.blue
+                </h4>
                 <p class="text-sm text-gray-600">Used car parts marketplace</p>
               </div>
               <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
             </a>
 
-            <a href="https://polo6r.pl"
-               target="_blank"
-               rel="noopener noreferrer"
-               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+            <a
+              href="https://polo6r.pl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group"
+            >
               <div class="text-left">
                 <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo6r.pl</h4>
                 <p class="text-sm text-gray-600">Polo V Manual</p>
@@ -252,7 +356,6 @@ const navItems = [
             See the design system in action across different project types
           </p>
         </div>
-
       </div>
     </section>
   </div>
@@ -262,4 +365,4 @@ const navItems = [
   .example-link {
     @apply transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white;
   }
-</style>
+</style>

package/src/pwa.ts

@@ -1,13 +1,13 @@
-import { registerSW } from 'virtual:pwa-register'
+import { registerSW } from 'virtual:pwa-register';
 
 registerSW({
   immediate: true,
   onRegisteredSW(swScriptUrl) {
     // eslint-disable-next-line no-console
-    console.log('SW registered: ', swScriptUrl)
+    console.log('SW registered: ', swScriptUrl);
   },
   onOfflineReady() {
     // eslint-disable-next-line no-console
-    console.log('PWA application ready to work offline')
+    console.log('PWA application ready to work offline');
   },
-})
+});

package/src/styles/base/base.css

@@ -1,11 +1,11 @@
 :root {
   --color-scheme: light;
-  
+
   --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
-  --secondary: #64748B;
-  --tertiary: #001E50;
+  --secondary: #64748b;
+  --tertiary: #001e50;
 
-  --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;;
+  --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;
 
   /* variables for future changes: */
 
@@ -29,7 +29,6 @@
   --clr-accent-300: hsl(358, 72%, 65%);
   --clr-accent-400: hsl(358, 72%, 50%);
   --clr-accent-500: hsl(358, 72%, 35%);
-
 }
 
 * {
@@ -56,7 +55,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1); 
+  background: rgba(0, 0, 0, 0.1);
   border-radius: 0;
 }
 
@@ -69,7 +68,7 @@ body {
 @supports not selector(::-webkit-scrollbar) {
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1)
+    scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -78,15 +77,13 @@ body {
 }
 
 .bg-spoko {
-  background: radial-gradient(circle at 50% 85%, #00437A 0%, #001E50 100%);
+  background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
   color: #fff;
   width: 100%;
 }
 
 .bg-vw {
-  background: radial-gradient(circle at 50% 85%,
-      #00437A 0%,
-      #001E50 100%);
+  background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
   color: #fff;
 }
 
@@ -102,12 +99,10 @@ code {
   @apply font-novamono;
 }
 
-
 html {
   scroll-behavior: smooth;
 }
 
-
 /* Swiper styles */
 :root {
   /* // --swiper-navigation-color: #0099da; */
@@ -118,7 +113,7 @@ html {
 }
 
 .swiper-horizontal {
-  &>.swiper-scrollbar {
+  & > .swiper-scrollbar {
     height: 1px;
   }
 }
@@ -134,10 +129,10 @@ html {
 }
 
 .items {
-  &>.item {
+  & > .item {
     &:not(:last-child) {
       &:after {
-        content: ', '
+        content: ', ';
       }
     }
   }
@@ -162,7 +157,7 @@ html {
   @apply mr-1;
 
   &:after {
-    content: ','
+    content: ',';
   }
 }
 
@@ -171,7 +166,7 @@ html {
     border-collapse: collapse;
     border-color: inherit;
     color: #212529;
-    margin-bottom: .875rem;
+    margin-bottom: 0.875rem;
     table-layout: fixed;
     text-indent: 0;
     width: 100%;
@@ -182,4 +177,4 @@ html {
       padding: 0.5em;
     }
   }
-}
+}

package/src/styles/base/grid.css

@@ -1,93 +1,89 @@
 .content-grid {
-    --padding-inline: 1rem;
-    --content-max-width: 900px;
-    --breakout-max-width: 1200px;
+  --padding-inline: 1rem;
+  --content-max-width: 900px;
+  --breakout-max-width: 1200px;
 
-    --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+  --breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);
+
+  display: grid;
+  grid-template-columns:
+    [full-width-start] minmax(var(--padding-inline), 1fr)
+    [breakout-start] minmax(0, var(--breakout-size))
+    [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width))
+    [content-end]
+    minmax(0, var(--breakout-size)) [breakout-end]
+    minmax(var(--padding-inline), 1fr) [full-width-end];
+
+  > :not(.breakout, .full-width),
+  .full-width > :not(.breakout, .full-width) {
+    grid-column: content;
+  }
+
+  > .breakout {
+    grid-column: breakout;
+  }
+
+  > .full-width {
+    grid-column: full-width;
 
     display: grid;
-    grid-template-columns:
-        [full-width-start] minmax(var(--padding-inline), 1fr)
-        [breakout-start] minmax(0, var(--breakout-size))
-        [content-start] min(
-            100% - (var(--padding-inline) * 2),
-            var(--content-max-width)
-        )
-        [content-end]
-        minmax(0, var(--breakout-size)) [breakout-end]
-        minmax(var(--padding-inline), 1fr) [full-width-end];
-
-    > :not(.breakout, .full-width),
-    .full-width> :not(.breakout, .full-width) {
-        grid-column: content;
-    }
-
-    >.breakout {
-        grid-column: breakout;
-    }
-
-    >.full-width {
-        grid-column: full-width;
-    
-        display: grid;
-        grid-template-columns: inherit;
-    }
-    
+    grid-template-columns: inherit;
+  }
 }
 
 img.full-width {
-    width: 100%;
-    max-height: 45vh;
-    object-fit: cover;
+  width: 100%;
+  max-height: 45vh;
+  object-fit: cover;
 }
 
 *,
 *::before,
 *::after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .article-title {
-    @apply font-textbold;
-    font-size: var(--fs-800);
-    line-height: 1.05;
-    text-transform: uppercase;
+  @apply font-textbold;
+  font-size: var(--fs-800);
+  line-height: 1.05;
+  text-transform: uppercase;
 }
 
 .section-title {
-    font-size: var(--fs-800);
-    line-height: 1.1;
+  font-size: var(--fs-800);
+  line-height: 1.1;
 }
 
 .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .call-to-action {
-    @apply px-8 py-6; 
+  @apply px-8 py-6;
 }
 
 .wrapper {
-    width: calc(100% - 3rem);
-    max-width: var(--content-max-width);
-    margin-inline: auto;
+  width: calc(100% - 3rem);
+  max-width: var(--content-max-width);
+  margin-inline: auto;
 }
 
-.flow>*+* {
-    margin-top: var(--flow-spacing, 1em);
+.flow > * + * {
+  margin-top: var(--flow-spacing, 1em);
 }
 
 .section-padding {
-    padding-block: 2.5rem;
+  padding-block: 2.5rem;
 }
 
 .even-columns {
-    display: flex;
-    gap: 1rem;
-}
+  display: flex;
+  gap: 1rem;
+}