spoko-design-system 0.2.32 → 0.2.34

package/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1727944915761
+	}
+}

package/.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/README.md

@@ -87,7 +87,7 @@ Feel free to add new pages to the Core section
 
 ### Customizing the page layout
 
-You can find the css for the pages in `src/styles/content.scss`.
+You can find the css for the pages in `src/styles/content.css`.
 
 
 ### Adding your components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.2.32",
+  "version": "0.2.34",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -27,67 +27,66 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^4.23.3",
-    "@astrojs/mdx": "^2.3.1",
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/sitemap": "^3.1.4",
-    "@astrojs/vue": "^4.1.0",
-    "@docsearch/css": "^3.6.0",
-    "@iconify-json/ant-design": "^1.1.16",
-    "@iconify-json/bi": "^1.1.23",
-    "@iconify-json/bx": "^1.1.10",
-    "@iconify-json/carbon": "^1.1.31",
-    "@iconify-json/circle-flags": "^1.1.47",
-    "@iconify-json/el": "^1.1.8",
-    "@iconify-json/eos-icons": "^1.1.10",
-    "@iconify-json/flowbite": "^1.1.3",
-    "@iconify-json/fluent": "^1.1.52",
-    "@iconify-json/fluent-emoji": "1.1.18",
-    "@iconify-json/icon-park-outline": "^1.1.15",
-    "@iconify-json/la": "^1.1.8",
-    "@iconify-json/mdi": "^1.1.66",
-    "@iconify-json/noto-v1": "^1.1.11",
-    "@iconify-json/octicon": "^1.1.53",
-    "@iconify-json/ph": "^1.1.12",
-    "@iconify-json/simple-icons": "^1.1.99",
-    "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.202",
+    "@algolia/client-search": "^5.7.0",
+    "@astrojs/mdx": "^3.1.7",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/sitemap": "^3.1.6",
+    "@astrojs/vue": "^4.5.1",
+    "@docsearch/css": "^3.6.2",
+    "@iconify-json/ant-design": "^1.2.1",
+    "@iconify-json/bi": "^1.2.0",
+    "@iconify-json/bx": "^1.2.0",
+    "@iconify-json/carbon": "^1.2.1",
+    "@iconify-json/circle-flags": "^1.2.0",
+    "@iconify-json/el": "^1.2.0",
+    "@iconify-json/eos-icons": "^1.2.0",
+    "@iconify-json/flowbite": "^1.2.0",
+    "@iconify-json/fluent": "^1.2.2",
+    "@iconify-json/fluent-emoji": "1.2.1",
+    "@iconify-json/icon-park-outline": "^1.2.0",
+    "@iconify-json/la": "^1.2.0",
+    "@iconify-json/mdi": "^1.2.0",
+    "@iconify-json/noto-v1": "^1.2.0",
+    "@iconify-json/octicon": "^1.2.0",
+    "@iconify-json/ph": "^1.2.0",
+    "@iconify-json/simple-icons": "^1.2.5",
+    "@iconify-json/uil": "^1.2.0",
+    "@iconify/json": "^2.2.256",
     "@iconify/vue": "^4.1.2",
-    "@playform/compress": "^0.0.2",
+    "@playform/compress": "^0.1.1",
     "@playform/inline": "github:playform/inline",
-    "@types/node": "^20.12.7",
-    "@unocss/astro": "^0.58.9",
-    "@unocss/preset-attributify": "^0.58.9",
-    "@unocss/preset-typography": "^0.58.9",
-    "@unocss/preset-uno": "^0.58.9",
-    "@unocss/preset-web-fonts": "^0.58.9",
-    "@unocss/preset-wind": "^0.58.9",
-    "@unocss/reset": "^0.58.9",
-    "@vite-pwa/astro": "^0.3.1",
-    "@vueuse/core": "^10.9.0",
+    "@types/node": "^22.7.4",
+    "@unocss/astro": "^0.63.2",
+    "@unocss/preset-attributify": "^0.63.2",
+    "@unocss/preset-typography": "^0.63.2",
+    "@unocss/preset-uno": "^0.63.2",
+    "@unocss/preset-web-fonts": "^0.63.2",
+    "@unocss/preset-wind": "^0.63.2",
+    "@unocss/reset": "^0.63.2",
+    "@vite-pwa/astro": "^0.4.3",
+    "@vueuse/core": "^11.1.0",
     "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.1.0",
-    "astro-meta-tags": "^0.2.2",
-    "astro-navbar": "^2.3.2",
-    "astro-pagefind": "^1.5.0",
-    "astro-remote": "^0.3.2",
-    "i18next": "^23.11.2",
-    "i18next-browser-languagedetector": "^7.2.1",
-    "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.5.1",
-    "i18next-vue": "^4.0.0",
-    "sass": "^1.75.0",
-    "swiper": "^11.1.1",
-    "unocss": "^0.58.9",
-    "vite": "^5.2.10",
-    "vue": "^3.4.23"
+    "astro-icon": "^1.1.1",
+    "astro-meta-tags": "^0.3.1",
+    "astro-navbar": "^2.3.3",
+    "astro-pagefind": "^1.6.0",
+    "astro-remote": "^0.3.3",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-fs-backend": "^2.3.2",
+    "i18next-http-backend": "^2.6.1",
+    "i18next-vue": "^5.0.0",
+    "swiper": "^11.1.14",
+    "unocss": "^0.63.2",
+    "vite": "^5.4.8",
+    "vue": "^3.5.10"
   },
   "devDependencies": {
-    "@unocss/transformer-variant-group": "^0.58.9",
-    "astro": "^4.6.3",
-    "unocss": "^0.58.3"
+    "@unocss/transformer-variant-group": "^0.63.2",
+    "astro": "^4.15.10",
+    "unocss": "^0.60.0"
   },
-  "packageManager": "pnpm@8.15.5",
+  "packageManager": "pnpm@9.8.0",
   "pnpm": {
     "default": "8.15.2",
     "overrides": {

package/src/layouts/Layout.astro

@@ -4,7 +4,7 @@ import FooterCommon from "./partials/FooterCommon.astro";
 import HeadSEO from "../layouts/partials/HeadSEO.astro";
 import * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
-import "../styles/main.scss";
+import "../styles/main.css";
 import Copyright from "../components/Copyright.astro";
 const locale = "en";
 changeLanguage(locale);

package/src/layouts/MainLayout.astro

@@ -6,7 +6,7 @@ import PageContent from "../components/PageContent.astro";
 import LeftSidebar from "../components/LeftSidebar.astro";
 import * as CONFIG from "../config";
 import { t, changeLanguage } from "i18next";
-import "../styles/main.scss";
+import "../styles/main.css";
 import Copyright from "../components/Copyright.astro";
 const locale = "en";
 changeLanguage(locale);

package/src/pages/core/introduction.mdx

@@ -53,7 +53,7 @@ Feel free to add new pages to the Core section
 
 ### Customizing the page layout
 
-You can find the css for the pages in `src/styles/content.scss`.
+You can find the css for the pages in `src/styles/content.css`.
 
 ### Adding mew components
 

package/src/pages/index.astro

@@ -33,9 +33,7 @@ const navItems = [
 
 <Layout>
   <div class="bg-slate-100 min-h-screen text-center">
-    <Jumbatron class="w-full">
-      <span slot="intro" set:html={SITE.title} />
-
+    <Jumbatron class="w-full" intro={SITE.title}>
       <p
         slot="subtitle"
         class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
@@ -115,6 +113,9 @@ const navItems = [
         <li class="leading-5 me-6 mb-4 lg:mb-0">
           <a href="https://spoko.space" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank"> spoko.space</a>
         </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://sale.polo.blue/" class="transition ease-in-out delay-200 duration-300 text-blue-600 hover:(text-light-blue-500 decoration-blue-600) underline decoration-white" target="_blank">sale.polo.blue</a>
+        </li>
       </ul>
      </div>
 

package/src/styles/base/{_base.scss → base.css}

@@ -2,14 +2,14 @@
   --color-scheme: light;
   
   --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
-  --secondary: #{$gray-500};
-  --tertiary: #{$verydarkblue};
+  --secondary: #64748B;
+  --tertiary: #001E50;
 
   --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;;
 
-  // variables for future changes:
+  /* variables for future changes: */
 
-  // font sies
+  /* font sies */
   --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
   --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
   --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
@@ -18,7 +18,7 @@
   --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
   --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
 
-  // colors
+  /* colors */
   --clr-primary-300: rgb(53, 114, 227);
   --clr-primary-400: hsl(198, 100%, 43%);
   --clr-primary-500: hsl(219, 76%, 25%);
@@ -56,7 +56,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1); //$secondary;
+  background: rgba(0, 0, 0, 0.1); 
   border-radius: 0;
 }
 
@@ -65,7 +65,7 @@ body {
   background-color: var(--clr-primary-400);
 }
 
-// Fallback to browsers without webkit-scrollbar support
+/* Fallback to browsers without webkit-scrollbar support */
 @supports not selector(::-webkit-scrollbar) {
   * {
     scrollbar-width: thin;
@@ -108,9 +108,9 @@ html {
 }
 
 
-//Swiper styles
+/* Swiper styles */
 :root {
-  // --swiper-navigation-color: #0099da;
+  /* // --swiper-navigation-color: #0099da; */
   --swiper-navigation-size: 22px;
   --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
   --swiper-scrollbar-size: 1px;

package/src/styles/base/{grid.scss → grid.css}

@@ -17,16 +17,16 @@
         minmax(0, var(--breakout-size)) [breakout-end]
         minmax(var(--padding-inline), 1fr) [full-width-end];
 
-    &> :not(.breakout, .full-width),
+    > :not(.breakout, .full-width),
     .full-width> :not(.breakout, .full-width) {
         grid-column: content;
     }
 
-    &>.breakout {
+    &.breakout {
         grid-column: breakout;
     }
 
-    &>.full-width {
+    >.full-width {
         grid-column: full-width;
     
         display: grid;
@@ -70,8 +70,7 @@ img.full-width {
 }
 
 .call-to-action {
-    @apply px-8 py-6    ; //border-2 border-black;
-    // background: var(--clr-primary-400);
+    @apply px-8 py-6; 
 }
 
 .wrapper {

package/src/styles/base/{_typography.scss → typography.css}

@@ -53,7 +53,7 @@
     src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
     font-weight: normal;
     font-style: normal;
-    font-display: swap; //fallback;
+    font-display: swap; 
 }
 
 @font-face {
@@ -64,7 +64,7 @@
     font-display: swap;
 }
 
-// for some content which don't need to index in Google
+/* for some content which don't need to index in Google */
 [data-text]:before {
     content: attr(data-text);
 }

package/src/styles/{main.scss → main.css}

@@ -1,7 +1,7 @@
 
-@import "variables";
+/* @import "variables"; */
 @import "base/typography";
 @import "base/base";
 @import "base/grid";
   
-@import "content.scss";
+@import "content.css";