spoko-design-system 0.0.1 → 0.0.5

package/src/pages/core/shadows.astro

@@ -1,21 +1,21 @@
----
-import MainLayout from '../../layouts/MainLayout.astro';
-import { SHADOWS } from '../../design.config'
-
----
-
-<MainLayout>
-    <h1>Shadows</h1>
-    <div class="component-preview">
-        <div class="inline-grid grid-cols-2 gap-16">
-        {SHADOWS.types.map(({name, value}) => (
-            <div class="p-2 bg-white rounded-md text-slate-500 text-right pt-16 pl-24 font-mono" style={"box-shadow: " + value}>{name}</div>
-        ))}
-        </div>
-    </div>
-    <pre class="astro-code bg-slate-800 text-white">
-    {SHADOWS.types.map(({name, value}) => (
-            <div class="my-2">{`${name}: ${value}`}</div>
-        ))}
-    </pre>
+---
+import MainLayout from '../../layouts/MainLayout.astro';
+import { SHADOWS } from '../../design.config'
+
+---
+
+<MainLayout>
+    <h1>Shadows</h1>
+    <div class="component-preview">
+        <div class="inline-grid grid-cols-2 gap-16">
+        {SHADOWS.types.map(({name, value}) => (
+            <div class="p-2 bg-white rounded-md text-slate-500 text-right pt-16 pl-24 font-mono" style={"box-shadow: " + value}>{name}</div>
+        ))}
+        </div>
+    </div>
+    <pre class="astro-code bg-slate-800 text-white">
+    {SHADOWS.types.map(({name, value}) => (
+            <div class="my-2">{`${name}: ${value}`}</div>
+        ))}
+    </pre>
 </MainLayout>

package/src/pages/core/typography.astro

@@ -1,47 +1,47 @@
----
-    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>
-
-
-
-    <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>    
-            </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>
-
+---
+    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>    
+            </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>

package/src/pages/index.astro

@@ -1,52 +1,70 @@
----
-import { SITE } from "../config";
-const navItems = [
-	{
-		title: 'Core',
-		description: 'Base colors, typography, shadows, and more.',
-		url: '/core/introduction',
-		img: '/Core.jpg'
-	},
-	{
-		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'
-	}
-]
-
----
-
-
-
-<div class="bg-slate-100 min-h-screen text-center">
-	<header class="pt-12 pb-24 px-4 bg-gradient-to-br from-slate-700 to-black">
-		<div class="flex items-center justify-center p-4">
-			<img src="/astro-design-system-logo.svg" alt="Astro Design System Logo">
-		</div>
-		<h1 class=" text-white text-4xl font-medium drop-shadow-sm">{SITE.title}</h1>
-		<p class="text-lg mt-4 text-slate-300">{SITE.description}</p>
-	</header>
-	<nav>
-		<ul class="flex gap-4 max-w-5xl mx-auto text-left mt-12">
-		{
-			navItems.map(({ title, description, url, img }) => (
-				<a href={url} class="flex flex-col bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center p-4">
-					<img src={img} alt={title}>
-					<h2 class="text-lg font-medium">{title}</h2>
-					<p class="text-slate-500">{description}</p>
-				</a>
-			))
-		}
-		</ul>
-	</nav>
-</div>
-
-<script is:inline>
-</script>
+---
+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";
+
+const navItems = [
+    {
+        title: "Core",
+        description: "Base colors, typography, shadows, and more.",
+        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">
+    <span slot="intro" set:html={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
+      >
+     Read More
+    </Button>
+</Jumbatron>
+  <nav>
+    <ul class="flex gap-4 max-w-5xl mx-auto text-left mt-12">
+      {
+        navItems.map(({ title, description, url, icon }) => (
+          <a
+            href={url}
+            class="flex flex-col bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 text-center"
+          >
+            <Headline as="h2" textSize="2xl">
+              <Icon name={icon} aria-hidden="true" class="text-blue-wrc mr-2" />
+              {title}
+            </Headline>
+            <p class="text-slate-500">{description}</p>
+          </a>
+        ))
+      }
+    </ul>
+  </nav>
+</div>
+</Layout>
+<script is:inline></script>

package/src/pages/patterns/introduction.mdx

@@ -1,61 +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
-
-```ts
-<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
-
-```ts
- <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-64 border border-solid px-3 text-sm" placeholder="Search..."/>
-    </Header>
-</div>
-
-### Code
-
-```ts
-<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 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
+
+```ts
+<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
+
+```ts
+ <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
+
+```ts
+<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/styles/_variables.scss

@@ -1,75 +1,75 @@
-$navbar-height-md: 56px;
-$navbar-height: 52px;
-$special-menu-height: 145px;
-$footer-navbar-height: 45px;
-$footer-content-height: 166px;
-
-$content-padding-bottom: 17px;
-
-
-// Color system
-
-$white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !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": $gray-500,
-        "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: #232737;
-$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;
+$navbar-height-md: 56px;
+$navbar-height: 52px;
+$special-menu-height: 145px;
+$footer-navbar-height: 45px;
+$footer-content-height: 166px;
+
+$content-padding-bottom: 17px;
+
+
+// Color system
+
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !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": $gray-500,
+        "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: #232737;
+$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;