spoko-design-system 0.2.33 → 0.2.35

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1720769204543
+		"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.33",
+  "version": "0.2.35",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -27,67 +27,66 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^4.24.0",
-    "@astrojs/mdx": "^2.3.1",
-    "@astrojs/node": "^8.3.2",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/vue": "^4.5.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.36",
-    "@iconify-json/circle-flags": "^1.1.48",
-    "@iconify-json/el": "^1.1.8",
-    "@iconify-json/eos-icons": "^1.1.10",
-    "@iconify-json/flowbite": "^1.1.5",
-    "@iconify-json/fluent": "^1.1.58",
-    "@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.67",
-    "@iconify-json/noto-v1": "^1.1.11",
-    "@iconify-json/octicon": "^1.1.55",
-    "@iconify-json/ph": "^1.1.13",
-    "@iconify-json/simple-icons": "^1.1.109",
-    "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.226",
+    "@algolia/client-search": "^5.9.1",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/vue": "^4.5.2",
+    "@docsearch/css": "^3.6.2",
+    "@iconify-json/ant-design": "^1.2.2",
+    "@iconify-json/bi": "^1.2.1",
+    "@iconify-json/bx": "^1.2.1",
+    "@iconify-json/carbon": "^1.2.3",
+    "@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.4",
+    "@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.9",
+    "@iconify-json/uil": "^1.2.1",
+    "@iconify/json": "^2.2.262",
     "@iconify/vue": "^4.1.2",
-    "@playform/compress": "^0.0.3",
+    "@playform/compress": "^0.1.4",
     "@playform/inline": "github:playform/inline",
-    "@types/node": "^20.14.10",
-    "@unocss/astro": "^0.60.4",
-    "@unocss/preset-attributify": "^0.60.4",
-    "@unocss/preset-typography": "^0.60.4",
-    "@unocss/preset-uno": "^0.60.4",
-    "@unocss/preset-web-fonts": "^0.60.4",
-    "@unocss/preset-wind": "^0.60.4",
-    "@unocss/reset": "^0.60.4",
-    "@vite-pwa/astro": "^0.3.1",
-    "@vueuse/core": "^10.11.0",
+    "@types/node": "^22.7.7",
+    "@unocss/astro": "^0.63.4",
+    "@unocss/preset-attributify": "^0.63.4",
+    "@unocss/preset-typography": "^0.63.4",
+    "@unocss/preset-uno": "^0.63.4",
+    "@unocss/preset-web-fonts": "^0.63.4",
+    "@unocss/preset-wind": "^0.63.4",
+    "@unocss/reset": "^0.63.4",
+    "@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.3",
-    "astro-pagefind": "^1.5.0",
+    "astro-icon": "^1.1.1",
+    "astro-meta-tags": "^0.3.1",
+    "astro-navbar": "^2.3.4",
+    "astro-pagefind": "^1.6.0",
     "astro-remote": "^0.3.3",
-    "i18next": "^23.11.5",
-    "i18next-browser-languagedetector": "^7.2.1",
-    "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.5.2",
-    "i18next-vue": "^4.0.0",
-    "sass": "^1.77.8",
-    "swiper": "^11.1.4",
-    "unocss": "^0.60.4",
-    "vite": "^5.3.3",
-    "vue": "^3.4.31"
+    "i18next": "^23.16.2",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-fs-backend": "^2.3.2",
+    "i18next-http-backend": "^2.6.2",
+    "i18next-vue": "^5.0.0",
+    "swiper": "^11.1.14",
+    "unocss": "^0.63.4",
+    "vite": "^5.4.9",
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@unocss/transformer-variant-group": "^0.60.4",
-    "astro": "^4.11.5",
+    "@unocss/transformer-variant-group": "^0.63.4",
+    "astro": "^4.16.6",
     "unocss": "^0.60.0"
   },
-  "packageManager": "pnpm@9.0.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/styles/_variables.scss

@@ -1,4 +1,4 @@
-// Color system
+@use "sass:map";
 
 $white: #fff !default;
 $gray-100: #F3F4F6;
@@ -26,7 +26,9 @@ $ebay: #3665f3;
 
 $grays: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$grays: map-merge(("100": $gray-100,
+$grays: map.merge(
+    (
+        "100": $gray-100,
         "200": $gray-200,
         "300": $gray-300,
         "400": $gray-400,
@@ -34,8 +36,10 @@ $grays: map-merge(("100": $gray-100,
         "600": $gray-600,
         "700": $gray-700,
         "800": $gray-800,
-        "900": $gray-900),
-    $grays);
+        "900": $gray-900
+    ),
+    $grays
+);
 
 $lightblue: #ccecff;
 $vwblue: #0786ba;

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";