spoko-design-system 0.2.95 → 0.2.97

package/src/pages/core/typography.astro

@@ -1,48 +1,49 @@
----
-    import MainLayout from '../../layouts/MainLayout.astro'
-    import { TYPOGRAPHY } from '../../design.config'
-    import { FONTS } from '../../design.config'
-    const getStyle = (item) => {
-        return `font-size: ${item.size}; font-weight: ${item.weight};`
-    }
----
-
-<MainLayout>
-    <h1>Typography</h1>
-    <div class="w-full">
-    {
-        TYPOGRAPHY.scale.map((item) => (
-            <div class="mt-6 border-t py-4">
-                <p style={getStyle(item)}>Hello world</p>
-                <div class="flex gap-6 text-slate-500 font-mono">
-                    <span>{item.name}</span>
-                    <span>weight: {item.weight}</span>
-                    <span>size: {item.size}</span>
-                </div>
-            </div>
-        ))
-    }
-    </div>
-    <div class="font-novamono"></div>
-
-
-    <h1>Fonts</h1>
-    <div class="component-preview ">
-        <div class="flex flex-wrap gap-16">
-        {FONTS.types.map(({name, value}) => (
-            <div class="w-full">
-                <div class={`${value} text-3xl`} >Lorem Ipsum</div>
-                <div class="">{name}</div>
-                <code>{value}</code>
-            </div>
-        ))}
-        </div>
-    </div>
-
-    <pre class="astro-code bg-slate-800 text-white">
-    {FONTS.types.map(({name, value}) => (
-            <div class="my-5">{`${name}:`}<br><pre>{value}</pre></div>
-        ))}
-    </pre>
-
-</MainLayout>
+---
+import MainLayout from '../../layouts/MainLayout.astro'
+import { typography } from '../../../uno-config/theme/typography'
+
+const fonts = Object.entries(typography.fontFamily)
+const loremText = "Lorem ipsum dolor sit amet, consectetur adipiscing"
+---
+
+<MainLayout>
+    <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+        <h1 class="text-4xl font-bold text-gray-900 mb-8">Font Family Preview</h1>
+        
+        <!-- Font Preview Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+            {fonts.map(([name, family]) => (
+                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
+                    <!-- Font Sample -->
+                    <div class={`font-${name} text-3xl mb-4 min-h-[120px] flex items-center`}>
+                        {loremText}
+                    </div>
+                    
+                    <!-- Font Info -->
+                    <div class="border-t pt-4">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-lg font-medium text-gray-900">{name}</span>
+                            <span class="px-3 py-1 bg-gray-100 rounded-full text-sm text-gray-600">font-{name}</span>
+                        </div>
+                        <code class="text-sm text-gray-500 block overflow-x-auto whitespace-nowrap">
+                            {family.join(', ')}
+                        </code>
+                    </div>
+                </div>
+            ))}
+        </div>
+
+        <!-- Font Configuration Code -->
+        <div class="bg-gray-900 rounded-lg overflow-hidden">
+            <div class="bg-gray-800 px-4 py-2 text-gray-400">
+                Font Configuration
+            </div>
+            <pre class="p-4 overflow-x-auto">
+                <code class="text-gray-200 text-sm">
+{fonts.map(([name, family]) => `font-${name}:\n${family.join(', ')}
+`).join('\n')}</code>
+            </pre>
+        </div>
+    </div>
+</MainLayout>
+

package/src/pages/index.astro

@@ -1,126 +1,126 @@
----
-import { changeLanguage } from "i18next";
-import { Icon } from "astro-icon/components";
-import { SITE } from "../config";
-import Jumbatron from "../components/Jumbatron.vue";
-import Layout from "../layouts/Layout.astro";
-import Headline from "../components/Headline.vue";
-import Button from "../components/Button.vue";
-import Quote from "../components/Quote.vue";
-import FeaturesList from "../components/FeaturesList.vue";
-
-const navItems = [
-  {
-    title: "Core",
-    description: "Base colors, typography, shadows etc.",
-    url: "/core/introduction",
-    icon: "ant-design:cluster-outlined",
-  },
-  {
-    title: "Components",
-    description: "The building blocks for our UI.",
-    url: "/components/buttons",
-    icon: "ant-design:build-twotone",
-  },
-  {
-    title: "Patterns",
-    description: "Common patterns for building interfaces.",
-    url: "/patterns/introduction",
-    icon: "ant-design:audit-outlined",
-  },
-];
----
-
-<Layout>
-  <div class="bg-slate-100 min-h-screen text-center">
-    <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"
-        set:html={SITE.description}
-      />
-
-      <Button
-        slot="cta"
-        href="/core/introduction/"
-        title="Spoko Design System"
-        primary
-        rounded
-      >
-        Read More
-      </Button>
-    </Jumbatron>
-    <nav>
-      <div
-        class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
-      >
-        {
-          navItems.map(({ title, description, url, icon }) => (
-            <a
-              href={url}
-              title={description}
-              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
-            >
-              <Headline as="h2" textSize="2xl" underline={false}>
-                <Icon
-                  name={icon}
-                  aria-hidden="true"
-                  class="text-blue-400 mr-2"
-                />
-                {title}
-              </Headline>
-              <p class="text-slate-500 w-full">{description}</p>
-            </a>
-          ))
-        }
-      </div>
-    </nav>
-    <div
-      class="mt-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative"
-    >
-      <Quote>
-        <blockquote>
-          Well done is better than well said.
-          <small class="block font-headlight">- Benjamin Franklin</small>
-        </blockquote>
-      </Quote>
-    </div>
-
-    <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
-
-      <div>
-        <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
-        <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
-          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-light-blue-400">
-            <Icon name="mdi:npm"/>
-          </a>
-          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-light-blue-400">
-            <Icon name="mdi:github"/>
-          </a>
-        </div>
-      </div>
- 
-
-     <div>
-      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
-      <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://catalog.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"> catalog.polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0">
-          <a href="https://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"> polo.blue</a>
-        </li>
-        <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>
-
-
-    </div>
-  </div>
-  <script is:inline></script>
-</Layout>
+---
+import { changeLanguage } from "i18next";
+import { Icon } from "astro-icon/components";
+import { SITE } from "../config";
+import Jumbatron from "../components/Jumbatron.vue";
+import Layout from "../layouts/Layout.astro";
+import Headline from "../components/Headline.vue";
+import Button from "../components/Button.vue";
+import Quote from "../components/Quote.vue";
+import FeaturesList from "../components/FeaturesList.vue";
+
+const navItems = [
+  {
+    title: "Core",
+    description: "Base colors, typography, shadows etc.",
+    url: "/core/introduction",
+    icon: "ant-design:cluster-outlined",
+  },
+  {
+    title: "Components",
+    description: "The building blocks for our UI.",
+    url: "/components/buttons",
+    icon: "ant-design:build-twotone",
+  },
+  {
+    title: "Patterns",
+    description: "Common patterns for building interfaces.",
+    url: "/patterns/introduction",
+    icon: "ant-design:audit-outlined",
+  },
+];
+---
+
+<Layout>
+  <div class="bg-slate-100 min-h-screen text-center">
+    <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"
+        set:html={SITE.description}
+      />
+
+      <Button
+        slot="cta"
+        href="/core/introduction/"
+        title="Spoko Design System"
+        primary
+        rounded
+      >
+        Read More
+      </Button>
+    </Jumbatron>
+    <nav>
+      <div
+        class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12 md:(px-0 flex-row)"
+      >
+        {
+          navItems.map(({ title, description, url, icon }) => (
+            <a
+              href={url}
+              title={description}
+              class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center py-16)"
+            >
+              <Headline as="h2" textSize="2xl" underline={false}>
+                <Icon
+                  name={icon}
+                  aria-hidden="true"
+                  class="text-blue-400 mr-2"
+                />
+                {title}
+              </Headline>
+              <p class="text-slate-500 w-full">{description}</p>
+            </a>
+          ))
+        }
+      </div>
+    </nav>
+    <div
+      class="mt-12 py-20 bg-blue-700 bg-vw text-white flex items-center justify-center relative"
+    >
+      <Quote>
+        <blockquote>
+          Well done is better than well said.
+          <small class="block font-headlight">- Benjamin Franklin</small>
+        </blockquote>
+      </Quote>
+    </div>
+
+    <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
+
+      <div>
+        <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
+        <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
+          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-light-blue-400">
+            <Icon name="mdi:npm"/>
+          </a>
+          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-light-blue-400">
+            <Icon name="mdi:github"/>
+          </a>
+        </div>
+      </div>
+ 
+
+     <div>
+      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
+      <ul class="grid text-2xl pt-6 lg:(auto-cols-max grid-flow-col py-6) text-left">
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://catalog.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"> catalog.polo.blue</a>
+        </li>
+        <li class="leading-5 me-6 mb-4 lg:mb-0">
+          <a href="https://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"> polo.blue</a>
+        </li>
+        <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>
+
+
+    </div>
+  </div>
+  <script is:inline></script>
+</Layout>

package/src/pages/patterns/introduction.mdx

@@ -1,60 +1,60 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import Container from '../../components/layout/Container.astro'
-import Header from '../../components/layout/Header.astro'
-
-
-# Patterns
-
-Common patterns for building interfaces.
-
-
-
-## Container (max-w-screen-xl)
-
-<div class="component-preview" style="display: block">
-    <Container class="bg-white">content</Container>
-</div>
-
-### Code
-
-```html
-<Container class="bg-white">content</Container>
-```
-
-
-## Container FullWidth (max-w-full)
-
-<div class="component-preview" style="display: block">
-    <Container class="bg-white" isFullWidth>content</Container>
-</div>
-
-### Code
-
-```html
- <Container class="bg-white" isFullWidth>content</Container>
-```
-
-## Header
-
-<div class="component-preview" style="display: block">
-    <Header class="static">
-        <div slot="logo" class="flex-shrink-0 flex items-center h-8">
-            <div class="bg-gray">LOGO</div>
-        </div>
-        <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
-    </Header>
-</div>
-
-### Code
-
-```html
-<Header>
-    <div slot="logo" class="flex-shrink-0 flex items-center h-8">
-            <div class="bg-gray">LOGO</div>
-        </div>
-    <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
-</Header>
-```
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import Container from '../../components/layout/Container.astro'
+import Header from '../../components/layout/Header.astro'
+
+
+# Patterns
+
+Common patterns for building interfaces.
+
+
+
+## Container (max-w-screen-xl)
+
+<div class="component-preview" style="display: block">
+    <Container class="bg-white">content</Container>
+</div>
+
+### Code
+
+```html
+<Container class="bg-white">content</Container>
+```
+
+
+## Container FullWidth (max-w-full)
+
+<div class="component-preview" style="display: block">
+    <Container class="bg-white" isFullWidth>content</Container>
+</div>
+
+### Code
+
+```html
+ <Container class="bg-white" isFullWidth>content</Container>
+```
+
+## Header
+
+<div class="component-preview" style="display: block">
+    <Header class="static">
+        <div slot="logo" class="flex-shrink-0 flex items-center h-8">
+            <div class="bg-gray">LOGO</div>
+        </div>
+        <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
+    </Header>
+</div>
+
+### Code
+
+```html
+<Header>
+    <div slot="logo" class="flex-shrink-0 flex items-center h-8">
+            <div class="bg-gray">LOGO</div>
+        </div>
+    <input type="text" slot="search" class="h-full  w-full sm:w-52 md:w-64 border border-solid px-3 text-sm" placeholder="Search..."/>
+</Header>
+```

package/src/pwa.ts

@@ -1,13 +1,13 @@
-import { registerSW } from 'virtual:pwa-register'
-
-registerSW({
-  immediate: true,
-  onRegisteredSW(swScriptUrl) {
-    // eslint-disable-next-line no-console
-    console.log('SW registered: ', swScriptUrl)
-  },
-  onOfflineReady() {
-    // eslint-disable-next-line no-console
-    console.log('PWA application ready to work offline')
-  },
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    // eslint-disable-next-line no-console
+    console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    // eslint-disable-next-line no-console
+    console.log('PWA application ready to work offline')
+  },
 })

package/src/styles/_variables.scss

@@ -1,70 +1,70 @@
-@use "sass:map";
-
-$white: #fff !default;
-$gray-100: #F3F4F6;
-$gray-200: #E5E7EB;
-$gray-300: #B5BBC5;
-$gray-400: #9CA3AF;
-$slate-medium: #64748B!default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black: #000 !default;
-
-$filter-label: #a8a8a8;
-
-$bg-stylish: #F6F6F6;
-$bg-highlighted: #E7E7E7;
-$badge-dark: #202020;
-
-// social media colors:
-$facebook: #4267B2;
-$youtube: #ff0000;
-$ebay: #3665f3;
-
-
-$grays: () !default;
-// stylelint-disable-next-line scss/dollar-variable-default
-$grays: map.merge(
-    (
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $slate-medium,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
-    ),
-    $grays
-);
-
-$lightblue: #ccecff;
-$vwblue: #0786ba;
-$vwblue2: #00b1eb;
-$blue: #0099da; //#0070B2; //#007bff !default;
-$darkblue: #00437A;
-$verydarkblue: #001E50;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #e83e8c !default;
-$red: #dc3545;//#e94e1b; //#dc3545 !default;
-$orange: #ff5a00; //allegro//#f4831d; //#ff9700; // #fd7e14 !default;
-$orange-darken: #e94d1a;
-$yellow: #ffc107 !default;
-$green: #28a745 !default;
-$teal: #20c997 !default;
-$cyan: #17a2b8 !default;
-$grey: #797878 !default;
-
-
-$primary: $blue; // $blue !default;
-$secondary: $grey; //$gray-600; //$gray-600 !default;
-$success: $green !default;
-$info: $ebay;//$cyan !default;
-$warning: $orange !default;
-$danger: $red !default;
-$light: $gray-100 !default;
-$dark: $gray-900 !default;
+@use "sass:map";
+
+$white: #fff !default;
+$gray-100: #F3F4F6;
+$gray-200: #E5E7EB;
+$gray-300: #B5BBC5;
+$gray-400: #9CA3AF;
+$slate-medium: #64748B!default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$filter-label: #a8a8a8;
+
+$bg-stylish: #F6F6F6;
+$bg-highlighted: #E7E7E7;
+$badge-dark: #202020;
+
+// social media colors:
+$facebook: #4267B2;
+$youtube: #ff0000;
+$ebay: #3665f3;
+
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map.merge(
+    (
+        "100": $gray-100,
+        "200": $gray-200,
+        "300": $gray-300,
+        "400": $gray-400,
+        "500": $slate-medium,
+        "600": $gray-600,
+        "700": $gray-700,
+        "800": $gray-800,
+        "900": $gray-900
+    ),
+    $grays
+);
+
+$lightblue: #ccecff;
+$vwblue: #0786ba;
+$vwblue2: #00b1eb;
+$blue: #0099da; //#0070B2; //#007bff !default;
+$darkblue: #00437A;
+$verydarkblue: #001E50;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545;//#e94e1b; //#dc3545 !default;
+$orange: #ff5a00; //allegro//#f4831d; //#ff9700; // #fd7e14 !default;
+$orange-darken: #e94d1a;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+$grey: #797878 !default;
+
+
+$primary: $blue; // $blue !default;
+$secondary: $grey; //$gray-600; //$gray-600 !default;
+$success: $green !default;
+$info: $ebay;//$cyan !default;
+$warning: $orange !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;