spoko-design-system 0.2.6 → 0.2.8

package/.github/todo.yml

@@ -0,0 +1,3 @@
+              - name: todo-issue
+                uses: DerJuulsn/todo-issue@v1.1.4
+            

package/.github/workflows/deploy.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install, build, and upload your site
         uses: withastro/action@v1
         with:
@@ -37,4 +37,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

package/dev-dist/sw.js

@@ -79,7 +79,7 @@ define(['./workbox-c676b6d3'], (function (workbox) { 'use strict';
    */
   workbox.precacheAndRoute([{
     "url": "/",
-    "revision": "0.4ahhr8qv03"
+    "revision": "0.l72um16i6s"
   }], {
     "directoryIndex": "index.html"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -29,19 +29,19 @@
   "dependencies": {
     "@algolia/client-search": "^4.22.1",
     "@astrojs/mdx": "^2.1.1",
-    "@astrojs/node": "^7.0.4",
+    "@astrojs/node": "^8.2.0",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/vue": "^4.0.8",
     "@docsearch/css": "^3.5.2",
     "@iconify-json/ant-design": "^1.1.15",
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/bx": "^1.1.10",
-    "@iconify-json/carbon": "^1.1.28",
+    "@iconify-json/carbon": "^1.1.30",
     "@iconify-json/circle-flags": "^1.1.46",
     "@iconify-json/el": "^1.1.8",
     "@iconify-json/eos-icons": "^1.1.10",
     "@iconify-json/flowbite": "^1.1.1",
-    "@iconify-json/fluent": "^1.1.47",
+    "@iconify-json/fluent": "^1.1.48",
     "@iconify-json/fluent-emoji": "1.1.18",
     "@iconify-json/icon-park-outline": "^1.1.15",
     "@iconify-json/la": "^1.1.8",
@@ -49,11 +49,11 @@
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/octicon": "^1.1.52",
     "@iconify-json/ph": "^1.1.11",
-    "@iconify-json/simple-icons": "^1.1.90",
+    "@iconify-json/simple-icons": "^1.1.91",
     "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.180",
+    "@iconify/json": "^2.2.183",
     "@iconify/vue": "^4.1.1",
-    "@types/node": "^20.11.16",
+    "@types/node": "^20.11.19",
     "@unocss/astro": "^0.58.5",
     "@unocss/preset-attributify": "^0.58.5",
     "@unocss/preset-typography": "^0.58.5",
@@ -63,31 +63,33 @@
     "@unocss/reset": "^0.58.5",
     "@vite-pwa/astro": "^0.2.0",
     "@vueuse/core": "^10.7.2",
-    "astro-compress": "^2.2.9",
+    "astro-compress": "^2.2.10",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.1.0",
-    "astro-navbar": "^2.3.0",
+    "astro-navbar": "^2.3.1",
     "astro-pagefind": "^1.4.0",
     "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-fs-backend": "^2.3.1",
     "i18next-http-backend": "^2.4.3",
-    "i18next-vue": "^3.0.0",
+    "i18next-vue": "^4.0.0",
     "sass": "^1.70.0",
     "swiper": "^11.0.6",
-    "unocss": "^0.57.7",
-    "vite": "^5.0.12",
-    "vue": "^3.4.15"
+    "unocss": "^0.58.5",
+    "vite": "^5.1.3",
+    "vue": "^3.4.19"
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.58.5",
-    "astro": "^4.3.3",
+    "astro": "^4.4.0",
     "unocss": "^0.58.3"
   },
+  "packageManager": "pnpm@8.15.2",
   "pnpm": {
+    "default": "8.15.2",
     "overrides": {
       "file-type@>=17.0.0 <17.1.3": ">=17.1.3",
       "sharp@<0.30.5": ">=0.30.5"
     }
   }
-}
+}

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

package/src/components/Jumbatron.vue

@@ -16,22 +16,15 @@ const props = defineProps({
 
 <template>
   <div class="relative flex bg-vw " :class="props.small ? 'md:min-h-xs' : 'md:min-h-md'">
-    <div class="max-w-7xl mx-auto my-auto">
-      <div class="py-8 lg:w-full"
-        :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32'">
-        <header class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div class="text-center">
-            <h1 class="text-3xl  tracking-tight font-headlight text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl ">
-              <slot name="intro" />
-            </h1>
-            <slot name="subtitle" />
-            <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
-                <slot name="cta" />
-            </div>
-          </div>
-        </header>
-      </div>
-    </div>
+    <header class="max-w-7xl mx-auto my-auto py-8 lg:w-full px-6 lg:px-8 text-center"  :class="props.small ? 'sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'sm:py-16 md:py-20 lg:py-28 xl:py-32'">
+        <h1 class="text-3xl  tracking-tight font-headlight text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl ">
+          <slot name="intro" />
+        </h1>
+        <slot name="subtitle" />
+        <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
+            <slot name="cta" />
+        </div>
+      </header>
   </div>
 </template>
 <style lang="scss">

package/src/components/ProductNumber.astro

@@ -63,6 +63,13 @@ const niceName = (string: string, separator = "\u00A0") => {
       .replace(/(^\s+|\s+$)/, "");
   }
 
+  // remove single separator from the end of string:
+  let lastCharacter = word.split('').pop() || '';
+  
+  if (!Boolean(lastCharacter.match(/[a-zA-Z0-9]/))) {
+    word = word.slice(0, -1)
+  }
+
   return word.replace(" ", separator);
 };
 

package/uno.config.ts

@@ -51,7 +51,7 @@ export default defineConfig({
     ['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-text', 'text-gray-400 border border-transparent hover:underline transition-all'],
+    ['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'],
     ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
@@ -62,7 +62,7 @@ export default defineConfig({
     ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],
     ['cats-slide','transition duration-300 ease-linear mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black dark:text-white hover:(text-white even:bg-blue-600 odd:bg-lightBlue-500) cursor-pointer flex items-center flex-col justify-center transition ease-in-out duration-700 px-1.5 cursor-grab active:cursor-grabbing overflow-hidden'],
     ['cats-img','w-full h-8 md:h-icon group-hover:filter-invert dark:filter-invert relative'],
-    ['subcat', 'whitespace-nowrap cursor-pointer text-light-blue-600 dark:text-lightBlue-500 hover:text-lightBlue-600 font-light mb-1 py-2 md:py-0'],
+    ['subcat', 'cursor-pointer text-light-blue-700 hover:text-lightBlue-600 font-light mb-1 py-2 md:py-0'],
     ['product-row','bg-white flex flex-wrap  odd:(pr-2.5 pl-3.5 sm:px-0) even:(pl-2.5 pr-3.5 sm:px-0) w-1/2 sm:w-auto sm:grid sm:grid-cols-3 gap-x-1 gap-y-0 md:(grid-cols-product gap-x-4) justify-start content-start content-start  place-content-start py-4 pb-6 sm:pb-4'],
     ['product-row__photo','aspect-ratio-[4/3] mb-2 sm:mb-0 after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0) w-100 col-span-1 row-span-3 max-w-full text-left overflow-hidden relative bg-gray-100 md:(col-span-1 row-span-1) box-content'], //filter drop-shadow-sm
     ['product-row__description', 'text-xs text-gray-900 leading-tight mt-2 font-textlight line-clamp-3 whitespace-normal md:(text-sm mt-0 font-textregular whitespace-pre-wrap)'],
@@ -76,7 +76,7 @@ export default defineConfig({
     ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
     ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:(opacity-100 text-teal-600)'],
     ['sidebar-title','font-headregular text-light-blue-500 text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 flex items-center justify-center sm:justify-start py-3'],
-    ['product-info','text-gray-400 text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
+    ['product-info','text-gray-500 text-xxs font-textlight leading-none mt-0.5 md:(mt-0 text-xs)'],
     ['product-button', 'text-blue-500 cursor-pointer text-base leading-none  inline-flex items-center justify-center w-8 h-8 min-w-8 transition-colors duration-150 bg-white dark:bg-blue-901 focus:(text-blue-500) hover:(text-blue-500)'],
     ['pdp-headline','text-2xl sm:text-4xl 2xl:text-5xl font-headlight mb-6 font-bold sm:font-normal pr-7 lg:pr-0 pt-0 leading-none'],
     ['pdp-detail-row','text-sm mt-1 md:mt-4 mb-4 grid grid-cols-2 sm:(grid-cols-details-desktop grid-flow-col auto-cols-max) gap-4'],
@@ -94,7 +94,7 @@ export default defineConfig({
     ['cat-link','whitespace-nowrap cursor-pointer text-blue-901 dark:text-white hover:text-lightBlue-400 font-light uppercase py-2 md:py-0'],
     ['plp-name','flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
     ['plp-replacements','col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
-    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all '],
+    ['product-code','text-blue-600 mr-1 leading-none tracking-wide select-all'],
     ['code-formatted','font-novamono leading-none mt-0 relative text-xs'],
     ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
     ['btn-copy-text','shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
@@ -108,7 +108,7 @@ export default defineConfig({
     ['search-container', 'mb-2 sm:mb-0'],
     ['l-main', 'text-gray-700 dark:text-gray-200 pt-24 sm:pt-14 bg-white dark:bg-blue-901'],
     ['category-section', 'pb-4 w-full bg-white mb-4 overflow-x-hidden flex flex-wrap max-w-full'],
-    ['number-secondary', 'block absolute inset-0 text-gray-400 select-all bg-white dark:bg-blue-901'],
+    ['number-secondary', 'block absolute inset-0 text-gray-500 select-all bg-white dark:bg-blue-901'],
     ['product-list', 'flex flex-wrap sm:block bg-white dark:bg-blue-901 sm:divide-y-1 sm:divide-solid divide-gray-200 dark:divide-white dark:divide-opacity-10 md:px-2 md:pl-4 mb-4 w-full bg-gray-100 dark:bg-gray-700 mb-auto'],
     ['btn-prcode', 'relative inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-700 absolute w-4 pl-0.5)']
   ],
@@ -116,6 +116,7 @@ export default defineConfig({
     colors: {
       blue: {
         500: '#3b82f6',
+        550: '#0040c5',
         600: '#02307d',
         700: '#001e50',
         800: '#00437a',