spoko-design-system 0.2.82 → 0.2.83

package/.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

package/.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

package/.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.2.5","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"img.freepik.com\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":\"shiki\",\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"serializeConfig\":false},\"legacy\":{\"collections\":false}}"]

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1730933717958
+		"lastUpdateCheck": 1738837064987
 	}
 }

package/.github/workflows/deploy.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Checkout your repository using git
         uses: actions/checkout@v4
       - name: Install, build, and upload your site
-        uses: withastro/action@v2
+        uses: withastro/action@v3
         with:
             pnpm@latest
           # path: . # The root location of your Astro project inside the repository. (optional)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.82",
+  "version": "0.2.83",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -37,69 +37,69 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.15.0",
-    "@astrojs/mdx": "^4.0.1",
-    "@astrojs/node": "^9.0.0",
+    "@algolia/client-search": "^5.20.1",
+    "@astrojs/mdx": "^4.0.8",
+    "@astrojs/node": "^9.0.2",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.0.1",
-    "@docsearch/css": "^3.8.0",
-    "@iconify-json/ant-design": "^1.2.3",
-    "@iconify-json/bi": "^1.2.1",
-    "@iconify-json/bx": "^1.2.1",
-    "@iconify-json/carbon": "^1.2.4",
-    "@iconify-json/circle-flags": "^1.2.1",
-    "@iconify-json/el": "^1.2.0",
-    "@iconify-json/eos-icons": "^1.2.1",
-    "@iconify-json/flowbite": "^1.2.2",
-    "@iconify-json/fluent": "^1.2.8",
-    "@iconify-json/fluent-emoji": "1.2.1",
-    "@iconify-json/icon-park-outline": "^1.2.1",
-    "@iconify-json/la": "^1.2.0",
-    "@iconify-json/mdi": "^1.2.1",
-    "@iconify-json/noto-v1": "^1.2.0",
-    "@iconify-json/octicon": "^1.2.1",
-    "@iconify-json/ph": "^1.2.1",
-    "@iconify-json/simple-icons": "^1.2.14",
-    "@iconify-json/uil": "^1.2.1",
-    "@iconify/json": "^2.2.279",
-    "@iconify/vue": "^4.1.2",
-    "@playform/compress": "^0.1.6",
+    "@astrojs/vue": "^5.0.6",
+    "@docsearch/css": "^3.8.3",
+    "@iconify-json/ant-design": "^1.2.5",
+    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/bx": "^1.2.2",
+    "@iconify-json/carbon": "^1.2.6",
+    "@iconify-json/circle-flags": "^1.2.6",
+    "@iconify-json/el": "^1.2.1",
+    "@iconify-json/eos-icons": "^1.2.2",
+    "@iconify-json/flowbite": "^1.2.4",
+    "@iconify-json/fluent": "^1.2.13",
+    "@iconify-json/fluent-emoji": "1.2.3",
+    "@iconify-json/icon-park-outline": "^1.2.2",
+    "@iconify-json/la": "^1.2.1",
+    "@iconify-json/mdi": "^1.2.3",
+    "@iconify-json/noto-v1": "^1.2.1",
+    "@iconify-json/octicon": "^1.2.3",
+    "@iconify-json/ph": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.23",
+    "@iconify-json/uil": "^1.2.3",
+    "@iconify/json": "^2.2.303",
+    "@iconify/vue": "^4.3.0",
+    "@playform/compress": "^0.1.7",
     "@playform/inline": "github:playform/inline",
-    "@types/node": "^22.10.1",
-    "@unocss/astro": "^0.65.1",
-    "@unocss/preset-attributify": "^0.65.1",
-    "@unocss/preset-typography": "^0.65.1",
-    "@unocss/preset-uno": "^0.65.1",
-    "@unocss/preset-web-fonts": "^0.65.1",
-    "@unocss/preset-wind": "^0.65.1",
-    "@unocss/reset": "^0.65.1",
-    "@vite-pwa/astro": "^0.4.3",
-    "@vueuse/core": "^12.0.0",
+    "@types/node": "^22.13.1",
+    "@unocss/astro": "^65.4.3",
+    "@unocss/preset-attributify": "^65.4.3",
+    "@unocss/preset-typography": "^65.4.3",
+    "@unocss/preset-uno": "^65.4.3",
+    "@unocss/preset-web-fonts": "^65.4.3",
+    "@unocss/preset-wind": "^65.4.3",
+    "@unocss/reset": "^65.4.3",
+    "@vite-pwa/astro": "^0.5.0",
+    "@vueuse/core": "^12.5.0",
     "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.4",
+    "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.3.1",
-    "astro-navbar": "^2.3.7",
-    "astro-pagefind": "^1.6.0",
+    "astro-navbar": "^2.3.9",
+    "astro-pagefind": "^1.8.0",
     "astro-remote": "^0.3.3",
     "dotenv": "^16.4.7",
-    "i18next": "^24.0.5",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.2",
     "i18next-fs-backend": "^2.6.0",
-    "i18next-http-backend": "^3.0.1",
+    "i18next-http-backend": "^3.0.2",
     "i18next-vue": "^5.0.0",
-    "swiper": "^11.1.15",
-    "unocss": "^0.65.1",
-    "vite": "^6.0.2",
+    "swiper": "^11.2.2",
+    "unocss": "^65.4.3",
+    "vite": "^6.1.0",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@unocss/transformer-variant-group": "^0.65.1",
+    "@unocss/transformer-variant-group": "^65.4.3",
     "@vitejs/plugin-vue": "^5.2.1",
-    "astro": "^5.0.2",
-    "unocss": "^0.60.0"
+    "astro": "^5.2.5",
+    "unocss": "^0.65.0"
   },
-  "packageManager": "pnpm@9.8.0",
+  "packageManager": "pnpm@9.15.3",
   "pnpm": {
     "default": "8.15.2",
     "overrides": {

package/src/components/Button.vue

@@ -14,6 +14,10 @@ const props = defineProps<{
   small?: boolean;
   medium?: boolean;
   rounded?: boolean;
+  whiteHover?: boolean;
+  lightHover?: boolean;
+  mediumHover?: boolean;
+  darkHover?: boolean;
 }>();
 
 const tag = props.href && props.href.length ? 'a' : 'button'
@@ -29,7 +33,11 @@ const classes = {
   "btn-sm": props.medium,
   "btn-xs": props.small,
   "btn-normal": !props.small && !props.medium,
-  "rounded-full": props.rounded
+  "rounded-full": props.rounded,
+  "btn-white-hover": props.whiteHover,
+  "btn-light-hover": props.lightHover,
+  "btn-medium-hover": props.mediumHover,
+  "btn-dark-hover": props.darkHover
 };
 </script>
 

package/src/components/Category/CategoryDetails.astro

@@ -57,23 +57,47 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
 
 <script is:inline>
   function toggleSidebar() {
-    function handleToggle(x) {
-      const sidebar = document.getElementById('sidebar');
-      if (x.matches) { // Mobile view
+    const sidebar = document.getElementById('sidebar');
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
+    if (sidebar) {
+      if (isMobile) {
         document.body.classList.toggle('overflow-hidden');
         sidebar.classList.toggle('show');
+        localStorage.setItem('sidebarState', sidebar.classList.contains('show') ? 'open' : 'closed');
       } else {
         document.body.classList.remove('overflow-hidden');
         sidebar.classList.toggle('collapsed');
+        localStorage.setItem('sidebarState', sidebar.classList.contains('collapsed') ? 'closed' : 'open');
       }
     }
-
-    var x = window.matchMedia("(max-width: 768px)");
-    handleToggle(x); // Call listener at runtime
-    x.addListener(handleToggle); // Attach listener for state changes
   }
+
+  // Read status from localStorage on page load
+  document.addEventListener('DOMContentLoaded', () => {
+    const sidebar = document.getElementById('sidebar');
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const savedState = localStorage.getItem('sidebarState');
+
+    if (sidebar) {
+      if (savedState === 'open') {
+        if (isMobile) {
+          sidebar.classList.add('show');
+        } else {
+          sidebar.classList.remove('collapsed');
+        }
+      } else if (savedState === 'closed') {
+        if (isMobile) {
+          sidebar.classList.remove('show');
+        } else {
+          sidebar.classList.add('collapsed');
+        }
+      }
+    }
+  });
 </script>
 
+
 <style>
   .category-toggler {
     right: -1px;

package/src/pages/components/buttons.mdx

@@ -222,6 +222,23 @@ Text buttons are used for actions that do not require a primary or secondary but
     <Button tertiary-outline rounded title="Title">Text button</Button>
 ```
 
+### Outline button - custom hover
+
+<div class="component-preview">
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+</div>
+
+```js
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+    
+```
+
 
 ## Link button `<a>`
 

package/uno.config.ts

@@ -10,24 +10,17 @@ import {
    transformerDirectives,
   } from 'unocss'
 
-
-// import transformerVariantGroup from '@unocss/transformer-variant-group'
-
-// import presetWind from '@unocss/preset-wind';
-// import presetUno from '@unocss/preset-uno';
-// import presetAttributify from '@unocss/preset-attributify';
-// import presetTypography from '@unocss/preset-typography';
-// import presetWebFonts from '@unocss/preset-web-fonts';
-
-
-
 export default defineConfig({
-  // ...
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),
   ],
   shortcuts: [
+    ['btn-white-hover', 'hover:(text-blue-700 bg-white border-blue-700)'],
+    ['btn-light-hover', 'hover:(text-blue-700 bg-lightBlue-400 border-lightBlue-400)'],
+    ['btn-medium-hover', 'hover:(text-white bg-blue-400 border-blue-700)'],
+    ['btn-dark-hover', 'hover:(bg-blue-700 text-white border-blue-700)'],
+    ['img-base', 'relative object-cover bg-gray-100 h-auto max-w-full'],
     ['close-light','@apply before:bg-white after:bg-white'],
     ['close-dark','@apply before:bg-black after:bg-black'],
     ['headline-light', 'font-headlight font-300 tracking-tight'],
@@ -37,13 +30,13 @@ export default defineConfig({
     ['headline','font-headlight font-bold	'],
     ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
     ['img--overlay','after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],
-    ['img--4/3', 'aspect-[4/3] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/4', 'aspect-[3/4] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--1/1', 'aspect-square relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/2', 'aspect-[3/2] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
+    ['img--4/3', 'aspect-[4/3] img-base'],
+    ['img--3/4', 'aspect-[3/4] img-base'],
+    ['img--1/1', 'aspect-square img-base'],
+    ['img--3/2', 'aspect-[3/2] img-base'],
+    ['img--2/3', 'aspect-[2/3] img-base'],
+    ['img--3/1', 'aspect-[3/1] img-base'],
+    ['img--16/9', 'aspect-video img-base'],
     ['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
     ['img--medium', 'h-full w-60'],
     ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px  after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
@@ -53,7 +46,7 @@ export default defineConfig({
     ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
     ['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
     ['btn-tertiary', 'inline-flex border border-transparent items-center font-medium text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300'],
-    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-700 border-blue-700 transition-all hover:(bg-blue-700 text-white) focus:ring-4 focus:outline-none focus:ring-blue-300 '],
+    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-700 border-blue-700 transition-colors focus:(ring-2 outline-none ring-blue-300)'],
     ['btn-text', 'text-gray-500 border border-transparent hover:underline transition-all'],
     ['btn-tag', 'bg-blue-100 text-blue-800 font-medium mr-2 dark:bg-gray-700 dark:text-blue-400 border border-blue-400 hover:border-blue-600 justify-center'],
     ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
@@ -118,6 +111,7 @@ export default defineConfig({
   theme: {
     colors: {
       blue: {
+        400: '#0040c5',
         500: '#3b82f6',
         540: '#0069ff',
         545: '#005ad7',