spoko-design-system 0.2.49 → 0.2.50

package/src/components/flags/FlagPL.vue

@@ -1,4 +1,4 @@
-<template>
-      <span
-            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
+<template>
+      <span
+            class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
 </template>

package/src/components/flags/FlagUA.vue

@@ -1,3 +1,3 @@
-<template>
-    <span class="flag-ua" />
+<template>
+    <span class="flag-ua" />
 </template>

package/src/components/layout/Container.astro

@@ -1,7 +1,7 @@
----
-const { class: className, isFullWidth } = Astro.props;
----
-
-<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
-  <slot />
-</div>
+---
+const { class: className, isFullWidth } = Astro.props;
+---
+
+<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
+  <slot />
+</div>

package/src/components/layout/Header.astro

@@ -1,80 +1,80 @@
----
-const { class: className } = Astro.props;
-import { Icon } from "astro-icon/components";
-
-const navItemsLeft = [
-  {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    img: "/Components.jpg",
-  },
-  {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    img: "/Patterns.jpg",
-  },
-];
----
-
-<nav
-  itemscope
-  itemtype="http://schema.org/WPHeader"
-  class:list={[
-    className,
-    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
-  ]}
->
-  <div class="flex items-center justify-start sm:items-stretch order-1">
-    <slot name="logo" />
-
-    <div class="hidden sm:block sm:ml-6">
-      <div class="flex space-x-4" itemprop="hasPart">
-        {
-          navItemsLeft.map(({ title, description, url, img }) => (
-            <a
-              href={url}
-              class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
-              title={description}
-              itemprop="url"
-            >
-              {title}
-            </a>
-          ))
-        }
-      </div>
-    </div>
-  </div>
-
-  <div
-    class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
-  >
-    <slot name="search" />
-  </div>
-
-  <div
-    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
-    itemprop="hasPart"
-    itemscope
-    itemtype="http://schema.org/SiteNavigationElement"
-  >
-    <a
-      class="icon-btn mx-2"
-      title=""
-      aria-label=""
-      href="#"
-      itemprop="url"
-      data-astro-reload
-    >
-      <Icon name="carbon:language" />
-    </a>
-  </div>
-</nav>
-
-<style is:global>
-  nav {
-    /* display: grid;  */
-    place-items: center;
-  }
-</style>
+---
+const { class: className } = Astro.props;
+import { Icon } from "astro-icon/components";
+
+const navItemsLeft = [
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    img: "/Components.jpg",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    img: "/Patterns.jpg",
+  },
+];
+---
+
+<nav
+  itemscope
+  itemtype="http://schema.org/WPHeader"
+  class:list={[
+    className,
+    "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0",
+  ]}
+>
+  <div class="flex items-center justify-start sm:items-stretch order-1">
+    <slot name="logo" />
+
+    <div class="hidden sm:block sm:ml-6">
+      <div class="flex space-x-4" itemprop="hasPart">
+        {
+          navItemsLeft.map(({ title, description, url, img }) => (
+            <a
+              href={url}
+              class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
+              title={description}
+              itemprop="url"
+            >
+              {title}
+            </a>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
+  >
+    <slot name="search" />
+  </div>
+
+  <div
+    class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 print:hidden order-3 sm:order-3 w-20 justify-end"
+    itemprop="hasPart"
+    itemscope
+    itemtype="http://schema.org/SiteNavigationElement"
+  >
+    <a
+      class="icon-btn mx-2"
+      title=""
+      aria-label=""
+      href="#"
+      itemprop="url"
+      data-astro-reload
+    >
+      <Icon name="carbon:language" />
+    </a>
+  </div>
+</nav>
+
+<style is:global>
+  nav {
+    /* display: grid;  */
+    place-items: center;
+  }
+</style>

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",
-};
-
-export const OPEN_GRAPH = {
-  image: {
-    src: "",
-    alt: "",
-  },
-  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: "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: "Jumbatron", link: "/components/jumbatron/" },
-  { 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: "Patterns", header: true },
-  { text: "Introduction", link: "/patterns/introduction/" },
-];
+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",
+};
+
+export const OPEN_GRAPH = {
+  image: {
+    src: "",
+    alt: "",
+  },
+  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: "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: "Jumbatron", link: "/components/jumbatron/" },
+  { 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: "Patterns", header: true },
+  { text: "Introduction", link: "/patterns/introduction/" },
+];

package/src/design.config.ts

@@ -1,81 +1,81 @@
-export const COLORS = {
-  gray: [
-    { name: "100", value: "#f3f4f6" },
-    { name: "200", value: "#e5e7eb" },
-    { name: "300", value: "#b5bbc5" },
-    { name: "400", value: "#9ca3af" },
-    { name: "500", value: "#64748B" },
-    { name: "600", value: "#475569" },
-    { name: "700", value: "#334155" },
-    { name: "800", value: "#1e293b" },
-    { name: "900", value: "#0f172a" },
-  ],
-  blue: [
-    { name: "50", value: "#eff6ff" },
-    { name: "100", value: "#dbeafe" },
-    { name: "200", value: "#bfdbfe" },
-    { name: "300", value: "#93c5fd" },
-    { name: "400", value: "#60a5fa" },
-    { name: "500", value: "#3b82f6" },
-    { name: "540", value: '#0069ff'},
-    { name: "545", value: '#005ad7'},
-    { name: "550", value: '#0040c5'},
-    { name: "600", value: "#02307d" },
-    { name: "601", value: '#002059'},
-    { name: "700", value: "#001e50" },
-    { name: "800", value: "#00437a" },
-    { name: "900", value: "#000f28" },
-    { name: "901", value: "#0c1a32" },
-    { name: "wrc", value: "#0000c8" },
-  ],
-  lightBlue: [
-    { name: "400", value: "#00b0f0" },
-    { name: "500", value: "#0099da" },
-    { name: "600", value: "#0087c1" },
-    { name: "700", value: "#006ea6" },
-  ],
-  red: [
-    { name: "400", value: "#f8b5b5" },
-    { name: "500", value: "#f49f9f" },
-    { name: "600", value: "#e57373" },
-  ],
-};
-
-export const TYPOGRAPHY = {
-  fontFamily: "Inter, system",
-  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" },
-  ],
-};
-
-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)" },
-  ],
-};
-
-
-export const FONTS = {
-types: [
-    { name: "vw_textregular", value: "font-textregular" },
-    { name: "vw_textregular", value: "font-sans" },
-    { name: "vw_textbold", value: "font-textbold" },
-    { name: "vw_headbold", value: "font-headbold" },
-    { name: "vw_headregular", value: "font-headregular" },
-    { name: "vw_headlight", value: "font-headlight" },
-    { name: "vw_textlight", value: "font-textlight" },
-    { name: "Nova Mono", value: "font-novamono" },
-    { name: "Nova Mono", value: "font-mono" }
-  ],
-};
+export const COLORS = {
+  gray: [
+    { name: "100", value: "#f3f4f6" },
+    { name: "200", value: "#e5e7eb" },
+    { name: "300", value: "#b5bbc5" },
+    { name: "400", value: "#9ca3af" },
+    { name: "500", value: "#64748B" },
+    { name: "600", value: "#475569" },
+    { name: "700", value: "#334155" },
+    { name: "800", value: "#1e293b" },
+    { name: "900", value: "#0f172a" },
+  ],
+  blue: [
+    { name: "50", value: "#eff6ff" },
+    { name: "100", value: "#dbeafe" },
+    { name: "200", value: "#bfdbfe" },
+    { name: "300", value: "#93c5fd" },
+    { name: "400", value: "#60a5fa" },
+    { name: "500", value: "#3b82f6" },
+    { name: "540", value: '#0069ff'},
+    { name: "545", value: '#005ad7'},
+    { name: "550", value: '#0040c5'},
+    { name: "600", value: "#02307d" },
+    { name: "601", value: '#002059'},
+    { name: "700", value: "#001e50" },
+    { name: "800", value: "#00437a" },
+    { name: "900", value: "#000f28" },
+    { name: "901", value: "#0c1a32" },
+    { name: "wrc", value: "#0000c8" },
+  ],
+  lightBlue: [
+    { name: "400", value: "#00b0f0" },
+    { name: "500", value: "#0099da" },
+    { name: "600", value: "#0087c1" },
+    { name: "700", value: "#006ea6" },
+  ],
+  red: [
+    { name: "400", value: "#f8b5b5" },
+    { name: "500", value: "#f49f9f" },
+    { name: "600", value: "#e57373" },
+  ],
+};
+
+export const TYPOGRAPHY = {
+  fontFamily: "Inter, system",
+  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" },
+  ],
+};
+
+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)" },
+  ],
+};
+
+
+export const FONTS = {
+types: [
+    { name: "vw_textregular", value: "font-textregular" },
+    { name: "vw_textregular", value: "font-sans" },
+    { name: "vw_textbold", value: "font-textbold" },
+    { name: "vw_headbold", value: "font-headbold" },
+    { name: "vw_headregular", value: "font-headregular" },
+    { name: "vw_headlight", value: "font-headlight" },
+    { name: "vw_textlight", value: "font-textlight" },
+    { name: "Nova Mono", value: "font-novamono" },
+    { name: "Nova Mono", value: "font-mono" }
+  ],
+};

package/src/env.d.ts

@@ -1,2 +1,2 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

package/src/layouts/Layout.astro

@@ -1,60 +1,60 @@
----
-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 { t, changeLanguage } from "i18next";
-import "../styles/main.css";
-import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
-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">
-  <head>
-    <HeadCommon />
-    <HeadSEO {content} canonicalURL={canonicalURL} />
-    <title>
-      {
-        content.title
-          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
-          : CONFIG.SITE.title
-      }
-    </title>
-  </head>
-
-  <body class="bg-blue-50">
-    <div class="bg-white z-10 mb-11 relative">
-      <slot />
-    </div>
-    <footer>
-      <Copyright class="fixed bottom-0 z-0 w-full">
-        <a
-          slot="middle-item"
-          href={`https://spoko.space`}
-          target="_blank"
-          rel="follow noopener"
-          class="flex my-auto items-center mx-auto"
-          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>
-          <img
-            class="h-4 w-min md:h-5 "
-            src="spoko.space.svg"
-            alt="Modern Websites"
-            width="126"
-            height="23"
-            loading="lazy"
-          />
-        </a>
-      </Copyright>
-      <FooterCommon />
-    </footer>
-  </body>
-</html>
+---
+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 { t, changeLanguage } from "i18next";
+import "../styles/main.css";
+import Copyright from "../components/Copyright.astro";
+const locale = "en";
+changeLanguage(locale);
+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">
+  <head>
+    <HeadCommon />
+    <HeadSEO {content} canonicalURL={canonicalURL} />
+    <title>
+      {
+        content.title
+          ? `${content.title} 🚀 ${CONFIG.SITE.title}`
+          : CONFIG.SITE.title
+      }
+    </title>
+  </head>
+
+  <body class="bg-blue-50">
+    <div class="bg-white z-10 mb-11 relative">
+      <slot />
+    </div>
+    <footer>
+      <Copyright class="fixed bottom-0 z-0 w-full">
+        <a
+          slot="middle-item"
+          href={`https://spoko.space`}
+          target="_blank"
+          rel="follow noopener"
+          class="flex my-auto items-center mx-auto"
+          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>
+          <img
+            class="h-4 w-min md:h-5 "
+            src="spoko.space.svg"
+            alt="Modern Websites"
+            width="126"
+            height="23"
+            loading="lazy"
+          />
+        </a>
+      </Copyright>
+      <FooterCommon />
+    </footer>
+  </body>
+</html>