spoko-design-system 1.1.1 → 1.1.2

package/src/config.ts

@@ -1,56 +1,56 @@
 export const SITE = {
-  title: "Spoko Design System",
-  description: "The Astro design system which facilitates the development of websites.",
-  defaultLanguage: "en_US",
-  twitter: "@spokospace",
-  github: "spokospace",
-  linkedin: "szymonberski",
+  title: 'Spoko Design System',
+  description: 'The Astro design system which facilitates the development of websites.',
+  defaultLanguage: 'en_US',
+  twitter: '@spokospace',
+  github: 'spokospace',
+  linkedin: 'szymonberski',
 };
 
 export const OPEN_GRAPH = {
   image: {
-    src: "",
-    alt: "",
+    src: '',
+    alt: '',
   },
-  twitter: "",
+  twitter: '',
 };
 
 export const SIDEBAR = [
-  { text: "Core", header: true },
-  { text: "Introduction", link: "/core/introduction/" },
-  { text: "Colors", link: "/core/colors/" },
-  { text: "Typography", link: "/core/typography/" },
-  { text: "Shadows", link: "/core/shadows/" },
-  { text: "Grid", link: "/core/grid/" },
+  { text: 'Core', header: true },
+  { text: 'Introduction', link: '/core/introduction/' },
+  { text: 'Colors', link: '/core/colors/' },
+  { text: 'Typography', link: '/core/typography/' },
+  { text: 'Shadows', link: '/core/shadows/' },
+  { text: 'Grid', link: '/core/grid/' },
 
-  { text: "Components", header: true },
-  { text: "Badges", link: "/components/badges/" },
-  { text: "Breadcrumbs", link: "/components/breadcrumbs/" },
-  { text: "Buttons", link: "/components/buttons/" },
-  { text: "Card", link: "/components/card/" },
-  { text: "Carousel", link: "/components/carousel/" },
-  { text: "Copyright", link: "/components/copyright/" },
-  { text: "Details List", link: "/components/details-list/" },
-  { text: "Features List", link: "/components/features-list/"},
-  { text: "HandDrive", link: "/components/hand-drive/" },
-  { text: "Headline", link: "/components/headline/" },
-  { text: "Icons", link: "/components/icons/" },
-  { text: "Image", link: "/components/image/" },
-  { text: "Input", link: "/components/input/" },
-  { text: "Jumbotron", link: "/components/jumbotron/" },
-  { text: "Modal", link: "/components/modal/" },
-  { text: "PostHeader", link: "/components/post-header/" },
-  { text: "PR-Code", link: "/components/pr-code/" },
-  { text: "Product Number", link: "/components/product-number/" },
-  { text: "Product Tile", link: "/components/product-tile/" },
-  { text: "Quote", link: "/components/quote/" },
-  { text: "Table", link: "/components/table/" },
+  { text: 'Components', header: true },
+  { text: 'Badges', link: '/components/badges/' },
+  { text: 'Breadcrumbs', link: '/components/breadcrumbs/' },
+  { text: 'Buttons', link: '/components/buttons/' },
+  { text: 'Card', link: '/components/card/' },
+  { text: 'Carousel', link: '/components/carousel/' },
+  { text: 'Copyright', link: '/components/copyright/' },
+  { text: 'Details List', link: '/components/details-list/' },
+  { text: 'Features List', link: '/components/features-list/' },
+  { text: 'HandDrive', link: '/components/hand-drive/' },
+  { text: 'Headline', link: '/components/headline/' },
+  { text: 'Icons', link: '/components/icons/' },
+  { text: 'Image', link: '/components/image/' },
+  { text: 'Input', link: '/components/input/' },
+  { text: 'Jumbotron', link: '/components/jumbotron/' },
+  { text: 'Modal', link: '/components/modal/' },
+  { text: 'PostHeader', link: '/components/post-header/' },
+  { text: 'PR-Code', link: '/components/pr-code/' },
+  { text: 'Product Number', link: '/components/product-number/' },
+  { text: 'Product Tile', link: '/components/product-tile/' },
+  { text: 'Quote', link: '/components/quote/' },
+  { text: 'Table', link: '/components/table/' },
 
-  { text: "Extras", header: true },
-  { text: "Flags", link: "/components/flags/" },
-  { text: "SlimBanner", link: "/components/slimbanner/" },
-  { text: "FuckRussia", link: "/components/fuck-russia/" },
+  { text: 'Extras', header: true },
+  { text: 'Flags', link: '/components/flags/' },
+  { text: 'SlimBanner', link: '/components/slimbanner/' },
+  { text: 'FuckRussia', link: '/components/fuck-russia/' },
 
-  { text: "Patterns", header: true },
-  { text: "Introduction", link: "/patterns/introduction/" },
+  { text: 'Patterns', header: true },
+  { text: 'Introduction', link: '/patterns/introduction/' },
 ];

package/src/design.config.ts

@@ -1,99 +1,99 @@
 export const COLORS = {
   // Brand Colors
   brand: [
-    { name: "primary", value: "#0040c5" },
-    { name: "secondary", value: "#00b0f0" }
+    { name: 'primary', value: '#0040c5' },
+    { name: 'secondary', value: '#00b0f0' },
   ],
 
-  // Primary Blues 
+  // Primary Blues
   blue: [
-    { name: "ultralight", value: "#dbeafe" },  
-    { name: "lightest", value: "#3b82f6" },
-    { name: "light", value: "#0069ff" },
-    { name: "default", value: "#005ad7" }, 
-    { name: "medium", value: "#02307d" },
-    { name: "darker", value: "#001e50" },
-    { name: "darkest", value: "#000f28" },
-    { name: "wrc", value: "#0000c8" }
+    { name: 'ultralight', value: '#dbeafe' },
+    { name: 'lightest', value: '#3b82f6' },
+    { name: 'light', value: '#0069ff' },
+    { name: 'default', value: '#005ad7' },
+    { name: 'medium', value: '#02307d' },
+    { name: 'darker', value: '#001e50' },
+    { name: 'darkest', value: '#000f28' },
+    { name: 'wrc', value: '#0000c8' },
   ],
 
   // Accent Colors
   accent: [
-    { name: "lightest", value: "#00b0f0" },
-    { name: "light", value: "#0099da" },
-    { name: "default", value: "#0087c1" },
-    { name: "dark", value: "#006ea6" },
-    { name: "darker", value: "#00437a" },
-    { name: "deepBlue", value: "#0c1a32" }
+    { name: 'lightest', value: '#00b0f0' },
+    { name: 'light', value: '#0099da' },
+    { name: 'default', value: '#0087c1' },
+    { name: 'dark', value: '#006ea6' },
+    { name: 'darker', value: '#00437a' },
+    { name: 'deepBlue', value: '#0c1a32' },
   ],
 
   // Neutral Colors
   neutral: [
-    { name: "lightest", value: "#f3f4f6" },
-    { name: "lighter", value: "#e5e7eb" },
-    { name: "light", value: "#b5bbc5" },
-    { name: "default", value: "#9ca3af" },
-    { name: "dark", value: "#6a767d" },
-    { name: "darker", value: "#4b5563"},
-    { name: "black", value: "#000000" }
+    { name: 'lightest', value: '#f3f4f6' },
+    { name: 'lighter', value: '#e5e7eb' },
+    { name: 'light', value: '#b5bbc5' },
+    { name: 'default', value: '#9ca3af' },
+    { name: 'dark', value: '#6a767d' },
+    { name: 'darker', value: '#4b5563' },
+    { name: 'black', value: '#000000' },
   ],
 
-  // Slate Colors  
+  // Slate Colors
   slate: [
-    { name: "light", value: "#64748B" },
-    { name: "default", value: "#475569" },
-    { name: "dark", value: "#334155" },
-    { name: "darker", value: "#1e293b" },  // Previously 'darkest'
-    { name: "darkest", value: "#0f172a" }  // New shade added
+    { name: 'light', value: '#64748B' },
+    { name: 'default', value: '#475569' },
+    { name: 'dark', value: '#334155' },
+    { name: 'darker', value: '#1e293b' }, // Previously 'darkest'
+    { name: 'darkest', value: '#0f172a' }, // New shade added
   ],
 
   // System Colors
   system: [
-    { name: "success", value: "#10B981" },
-    { name: "warning", value: "#FBBF24" },
-    { name: "error", value: "#EF4444" }, 
-    { name: "info", value: "#3B82F6" }
+    { name: 'success', value: '#10B981' },
+    { name: 'warning', value: '#FBBF24' },
+    { name: 'error', value: '#EF4444' },
+    { name: 'info', value: '#3B82F6' },
   ],
 
   // State Colors
   state: [
-    { name: "overlay", value: "rgb(0 0 0 / 0.06)" },
-    { name: "disabled", value: "rgb(0 0 0 / 0.12)" }, 
-  ]
+    { name: 'overlay', value: 'rgb(0 0 0 / 0.06)' },
+    { name: 'disabled', value: 'rgb(0 0 0 / 0.12)' },
+  ],
 };
 
 export const TYPOGRAPHY = {
   scale: [
-    { name: "h1", size: "22pt", weight: "400" },
-    { name: "h2", size: "17pt", weight: "500" },
-    { name: "h3", size: "13pt", weight: "600" },
-    { name: "h4", size: "13pt", weight: "500" },
-    { name: "body", size: "13pt", weight: "400" },
-    { name: "button", size: "13pt", weight: "400" },
-    { name: "caption", size: "10pt", weight: "400" }
-  ]
+    { name: 'h1', size: '22pt', weight: '400' },
+    { name: 'h2', size: '17pt', weight: '500' },
+    { name: 'h3', size: '13pt', weight: '600' },
+    { name: 'h4', size: '13pt', weight: '500' },
+    { name: 'body', size: '13pt', weight: '400' },
+    { name: 'button', size: '13pt', weight: '400' },
+    { name: 'caption', size: '10pt', weight: '400' },
+  ],
 };
 
 export const FONTS = {
   types: [
-    { name: "sans", value: "font-textregular" },
-    { name: "text-regular", value: "font-textregular" },
-    { name: "text-bold", value: "font-textbold" },
-    { name: "head-bold", value: "font-headbold" },
-    { name: "head-regular", value: "font-headregular" },
-    { name: "head-light", value: "font-headlight" },
-    { name: "text-light", value: "font-textlight" },
-    { name: "mono", value: "font-novamono" }
-  ]
+    { name: 'sans', value: 'font-textregular' },
+    { name: 'text-regular', value: 'font-textregular' },
+    { name: 'text-bold', value: 'font-textbold' },
+    { name: 'head-bold', value: 'font-headbold' },
+    { name: 'head-regular', value: 'font-headregular' },
+    { name: 'head-light', value: 'font-headlight' },
+    { name: 'text-light', value: 'font-textlight' },
+    { name: 'mono', value: 'font-novamono' },
+  ],
 };
 
-export const SHADOWS = {  
+export const SHADOWS = {
   types: [
-    { name: "xs", value: "0px 2px 4px rgba(0, 0, 0, 0.08)" },
-    { name: "sm", value: "0px 4px 8px rgba(0, 0, 0, 0.125)" },
-    { name: "md", value: "0px 8px 16px rgba(0, 0, 0, 0.125)" },
-    { name: "lg", value: "0px 16px 32px rgba(0, 0, 0, 0.125)" },
-    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },    
-    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" }
-  ]
-};
+    { name: 'xs', value: '0px 2px 4px rgba(0, 0, 0, 0.08)' },
+    { name: 'sm', value: '0px 4px 8px rgba(0, 0, 0, 0.125)' },
+    { name: 'md', value: '0px 8px 16px rgba(0, 0, 0, 0.125)' },
+    { name: 'lg', value: '0px 16px 32px rgba(0, 0, 0, 0.125)' },
+    { name: 'xl', value: '0px 32px 64px rgba(0, 0, 0, 0.125)' },
+    { name: '2xl', value: '0px 64px 128px rgba(0, 0, 0, 0.125)' },
+  ],
+};

package/src/env.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 declare module '*.vue' {
-    import type { DefineComponent } from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
-  }
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/src/layouts/Layout.astro

@@ -1,24 +1,20 @@
 ---
-import HeadCommon from "./partials/HeadCommon.astro";
-import FooterCommon from "./partials/FooterCommon.astro";
-import HeadSEO from "../layouts/partials/HeadSEO.astro";
-import * as CONFIG from "../config";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
+import HeadCommon from './partials/HeadCommon.astro';
+import FooterCommon from './partials/FooterCommon.astro';
+import HeadSEO from '../layouts/partials/HeadSEO.astro';
+import * as CONFIG from '../config';
+import '../styles/main.css';
+import Copyright from '../components/Copyright.astro';
 const { content = {} } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---
 
-<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
   <head>
     <HeadCommon />
     <HeadSEO {content} canonicalURL={canonicalURL} />
     <title>
-      {
-        content.title
-          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
+      {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
   </head>
 
@@ -34,13 +30,9 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
           target="_blank"
           rel="follow noopener"
           class="flex my-auto items-center mx-auto"
-          title={`Proudly made in Poland by ${
-            import.meta.env.COPYRIGHT_DOMAIN
-          }`}
+          title={`Proudly made in Poland by ${import.meta.env.COPYRIGHT_DOMAIN}`}
         >
-          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
-            createdy by
-          </div>
+          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
           <img
             class="h-4 w-min md:h-5"
             src="spoko.space.svg"
@@ -55,4 +47,3 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
     </footer>
   </body>
 </html>
-

package/src/layouts/MainLayout.astro

@@ -1,12 +1,12 @@
 ---
-import HeadCommon from "./partials/HeadCommon.astro";
-import HeadSEO from "../layouts/partials/HeadSEO.astro";
-import Header from "../components/Header/Header.astro";
-import PageContent from "../components/PageContent.astro";
-import LeftSidebar from "../components/LeftSidebar.astro";
-import * as CONFIG from "../config";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
+import HeadCommon from './partials/HeadCommon.astro';
+import HeadSEO from '../layouts/partials/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar.astro';
+import * as CONFIG from '../config';
+import '../styles/main.css';
+import Copyright from '../components/Copyright.astro';
 const { content = {} } = Astro.props;
 const currentPage = Astro.url.pathname;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
@@ -14,22 +14,18 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 
 <script>
   // Swiper Element
-  import { register } from "swiper/element/bundle";
-  document.addEventListener("astro:page-load", () => {
+  import { register } from 'swiper/element/bundle';
+  document.addEventListener('astro:page-load', () => {
     register();
   });
 </script>
 
-<html dir={content.dir ?? "ltr"} lang={content.lang ?? "en-us"} class="initial">
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
   <head>
     <HeadCommon />
     <HeadSEO content={content} canonicalURL={canonicalURL} />
     <title>
-      {
-        content.title
-          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
+      {content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
     </title>
   </head>
 
@@ -60,9 +56,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
           class="flex my-auto items-center mx-auto"
           title={`Proudly made in Poland by spoko.space`}
         >
-          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">
-            createdy by
-          </div>
+          <div class="text-xxs md:text-xs mr-1 mt-0.5 whitespace-nowrap">createdy by</div>
           <img
             class="h-4 md:h-5 w-min"
             src="/spoko.space.svg"

package/src/layouts/partials/FooterCommon.astro

@@ -1,5 +1,5 @@
 ---
-import ReloadPrompt from "../../components/ReloadPrompt.astro";
+import ReloadPrompt from '../../components/ReloadPrompt.astro';
 ---
 
-<ReloadPrompt />
+<ReloadPrompt />

package/src/layouts/partials/HeadCommon.astro

@@ -1,5 +1,5 @@
 ---
-import { ViewTransitions } from "astro:transitions";
+import { ViewTransitions } from 'astro:transitions';
 import { pwaInfo } from 'virtual:pwa-info';
 ---
 
@@ -22,13 +22,13 @@ import { pwaInfo } from 'virtual:pwa-info';
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
-	// const root = document.documentElement;
-	// const theme = localStorage.getItem('theme');
-	// if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-	// 	root.classList.add('dark');
-	// } else {
-	// 	root.classList.remove('dark');
-	// }
+  // const root = document.documentElement;
+  // const theme = localStorage.getItem('theme');
+  // if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+  // 	root.classList.add('dark');
+  // } else {
+  // 	root.classList.remove('dark');
+  // }
 </script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
@@ -41,4 +41,4 @@ import { pwaInfo } from 'virtual:pwa-info';
 </script> -->
 
 <ViewTransitions />
-{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}

package/src/layouts/partials/HeadSEO.astro

@@ -1,9 +1,9 @@
 ---
 import { SITE, OPEN_GRAPH } from '../../config';
 export interface Props {
-	content: any;
-	// site: any;
-	canonicalURL: URL | string;
+  content: any;
+  // site: any;
+  canonicalURL: URL | string;
 }
 const { content = {}, canonicalURL } = Astro.props;
 const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
@@ -22,14 +22,21 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage} />
 <!-- <meta property="og:image" content={canonicalImageSrc} /> -->
 <meta property="og:image:alt" content={imageAlt} />
-<meta name="description" property="og:description" content={content.description ? content.description : SITE.description} />
+<meta
+  name="description"
+  property="og:description"
+  content={content.description ? content.description : SITE.description}
+/>
 <meta property="og:site_name" content={SITE.title} />
 
 <!-- Twitter Tags -->
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
 <meta name="twitter:title" content={formattedContentTitle} />
-<meta name="twitter:description" content={content.description ? content.description : SITE.description} />
+<meta
+  name="twitter:description"
+  content={content.description ? content.description : SITE.description}
+/>
 <!-- <meta name="twitter:image" content={canonicalImageSrc} /> -->
 <meta name="twitter:image:alt" content={imageAlt} />