spoko-design-system 0.0.1

package/src/pages/components/buttons.mdx

@@ -0,0 +1,60 @@
+---
+title: "Buttons"
+layout: "../../layouts/MainLayout.astro"
+---
+import MainButton from '../../components/MainButton.vue'
+
+## All buttons
+
+This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
+
+Find the code for this page in the `src/pages/components/buttons.md` file.
+
+<div class="component-preview">
+    <MainButton primary><b>Primary</b></MainButton>
+    <MainButton secondary>Secondary</MainButton>
+    <MainButton text>Text</MainButton>
+</div>
+
+```js
+  <MainButton primary>Primary</MainButton>
+  <MainButton secondary>Secondary</MainButton>
+  <MainButton text>Text</MainButton>
+```
+
+## Primary button
+
+We use the primary button for main actions like saving a form or creating a new item.
+
+<div class="component-preview">
+    <MainButton primary>Primary button</MainButton>
+</div>
+
+```js
+<MainButton primary>Primary button</MainButton>
+```
+
+## Secondary button
+
+Secondary buttons accompany primary buttons to provide additional actions.
+For example, cancel buttons are secondary buttons.
+
+<div class="component-preview">
+    <MainButton secondary>Secondary button</MainButton>
+</div>
+
+```js
+<MainButton secondary>Secondary button</MainButton>
+```
+
+## Text button
+
+Text buttons are used for actions that do not require a primary or secondary button.
+
+<div class="component-preview">
+    <MainButton text>Text button</MainButton>
+</div>
+
+```js
+<MainButton text>Text button</MainButton>
+```

package/src/pages/components/copyright.mdx

@@ -0,0 +1,24 @@
+---
+title: "Copyright"
+layout: "../../layouts/MainLayout.astro"
+---
+import Copyright from '../../components/Copyright.astro'
+
+## Copyright
+
+Copyright component
+<div class="component-preview">
+       <Copyright class="z-0 w-full">
+        <div slot="left-item">left item</div>
+        <div slot="middle-item">middle item</div>
+        <div slot="right-item">right item</div>
+       </Copyright>
+</div>
+
+```js
+        <Copyright class="fixed bottom-0 z-0 w-full" >
+          <div slot="left-item">left item</div>
+          <div slot="middle-item">middle item</div>
+          <div slot="right-item">right item</div>
+        </Copyright>
+```

package/src/pages/components/flags.mdx

@@ -0,0 +1,27 @@
+---
+title: "FuckRussia"
+layout: "../../layouts/MainLayout.astro"
+---
+import FlagPL from '../../components/flags/FlagPL.vue'
+import FlagUA from '../../components/flags/FlagUA.vue'
+
+## Flags
+Flags - icons
+
+### Flag PL
+        <div class="component-preview">
+                <FlagPL />
+        </div>
+
+```js
+        <FlagPL />
+```
+
+###Flag UA
+        <div class="component-preview">
+                <FlagUA />
+        </div>
+
+```js
+        <FlagUA />
+```

package/src/pages/components/fuck-russia.mdx

@@ -0,0 +1,16 @@
+---
+title: "FuckRussia"
+layout: "../../layouts/MainLayout.astro"
+---
+import FuckRussia from '../../components/FuckRussia.vue'
+
+## FuckRussia
+
+FuckRussia - solidarity with Ukraine.
+        <div class="component-preview">
+                <FuckRussia class="flex" />
+        </div>
+
+```js
+        <FuckRussia class="flex" />
+```

package/src/pages/components/hand-drive.mdx

@@ -0,0 +1,27 @@
+---
+title: "HandDrive"
+layout: "../../layouts/MainLayout.astro"
+---
+import HandDrive from '../../components/HandDrive.astro'
+
+## HandDrive
+
+### HandDrive RHD
+<div class="component-preview">
+     <HandDrive handDrive={0}  />
+</div>
+
+```js
+     <HandDrive handDrive={0} />
+```
+
+
+
+### HandDrive LHD
+<div class="component-preview">
+     <HandDrive handDrive={1}  />
+</div>
+
+```js
+     <HandDrive handDrive={1} />
+```

package/src/pages/components/icons.astro

@@ -0,0 +1,45 @@
+---
+import MainLayout from '../../layouts/MainLayout.astro';
+import { Icon } from 'astro-icon/components';
+
+const ICONS = {
+        mdi: ["facebook", "instagram", "post-it-note-edit-outline"], // Loads only Material Design Icon's "account" SVG
+        'ant-design': ["menu-fold-outlined", "menu-unfold-outlined", "menu-outlined" ],
+        bi: ["envelope-open", "credit-card"],
+        bx: ["arrow-back"],
+        carbon: ["language", "checkmark", "home", "dicom-overlay"],
+        el: ["star-empty", "star"],
+        'eos-icons': ["three-dots-loading"],
+        fluent: ["share-android-24-regular"],
+        'fluent-emoji': ["cookie"],
+        la: ["arrow-right", "arrow-left"],
+        octicon: ["chevron-left-24", "x-24"],
+        uil: ["map-marker", "envelope", "phone"]
+}
+
+---
+
+<MainLayout>
+    <h1>Icons</h1>
+        <pre  class="astro-code bg-slate-800 text-white">import &#123; Icon &#125; from 'astro-icon/components';</pre>
+        <div class="">
+        {Object.keys(ICONS).map((key) => (
+                <h2>{key}</h2>
+                <div class="inline-grid grid-cols-4 gap-0 w-full">
+                        {ICONS[key].map((value) => (
+                                <div>
+                                <div class="component-preview ">
+<Icon name={`${key}:${value}`} />
+                                </div>
+                                <pre class="astro-code bg-slate-800 text-white text-sm">&lt;Icon name={`${key}:${value}`} /&gt;</pre>
+                                </div>
+                        ))}
+                </div>
+        ))}
+        </div>
+
+
+
+</MainLayout>
+
+

package/src/pages/components/input.mdx

@@ -0,0 +1,15 @@
+---
+title: Input
+layout: ../../layouts/MainLayout.astro
+---
+import MainInput from '../../components/MainInput.vue'
+
+## Input text
+
+<div class="component-preview">
+    <MainInput label="Name"></MainInput>
+</div>
+
+```js
+<MainInput type="text" value="Hello world!"></MainInput>
+```

package/src/pages/components/jumbatron.mdx

@@ -0,0 +1,48 @@
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbatron from '../../components/Jumbatron.vue'
+
+## Jumbatron
+
+This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
+
+Find the code for this page in the `src/pages/components/buttons.md` file.
+<div class="component-preview">
+    <Jumbatron class="w-full">
+        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
+        <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="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+
+
+        <a slot="cta"
+          href="/about/"
+          title="short text"
+          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
+        >
+         Read More
+        </a>
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron>
+        <span slot="intro" set:html="text-intro" />
+        <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="subtitle"
+        />
+
+
+        <a slot="cta"
+          href="/about/"
+          title="short text"
+          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
+        >
+         Read More
+        </a>
+    </Jumbatron>
+```

package/src/pages/components/slimbanner.mdx

@@ -0,0 +1,27 @@
+---
+title: "SlimBanner"
+layout: "../../layouts/MainLayout.astro"
+---
+import SlimBanner from '../../components/SlimBanner.vue'
+
+## SlimBanner
+
+SlimBanner - solidarity with Ukraine.
+
+<div class="component-preview">
+      <SlimBanner
+        client:load
+        showCloseButton
+        transition:name="slim-banner"
+        transition:persist
+      />
+</div>
+
+```js
+      <SlimBanner
+        client:load
+        showCloseButton
+        transition:name="slim-banner"
+        transition:persist
+      />
+```

package/src/pages/components/status-pill.mdx

@@ -0,0 +1,22 @@
+---
+title: "Status Pill"
+layout: "../../layouts/MainLayout.astro"
+
+---
+import MainStatusPill from '../../components/MainStatusPill.vue'
+
+## All Status pills
+
+<div class="component-preview">
+    <MainStatusPill success>Success</MainStatusPill>
+    <MainStatusPill info>Info</MainStatusPill>
+    <MainStatusPill error>Error</MainStatusPill>
+    <MainStatusPill warning>Warning</MainStatusPill>
+</div>
+
+```js
+    <MainStatusPill success>Success</MainStatusPill>
+    <MainStatusPill info>Info</MainStatusPill>
+    <MainStatusPill error>Error</MainStatusPill>
+    <MainStatusPill warning>Warning</MainStatusPill>
+```

package/src/pages/components/table.mdx

@@ -0,0 +1,20 @@
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import MainTable from '../../components/MainTable.vue'
+
+
+## Primary table
+
+<div class="component-preview">
+    <MainTable></MainTable>
+</div>
+
+### Code
+
+```ts
+<MainTable :data="data"></MainTable>
+```

package/src/pages/core/colors.mdx

@@ -0,0 +1,8 @@
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<MainColors />

package/src/pages/core/introduction.mdx

@@ -0,0 +1,68 @@
+---
+title: Introduction
+description: Docs intro
+layout: ../../layouts/MainLayout.astro
+---
+
+# Spoko Design System Theme
+
+Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
+
+## Getting started
+
+### Adding new sections
+
+Although it's not required, you can create folders for new sections.
+
+To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
+
+Example:
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/buttons" },
+    ...,
+    { text: "New section", header: true },
+    { text: "New component", link: "/new-section/new-component.md" },
+];
+```
+
+### Adding new pages
+
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.md`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+
+You're free to organize the pages however you want.
+
+### Customizing Core section (colors, typography, shadows...)
+
+If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.
+
+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`.
+
+### Adding your components
+
+Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
+
+To get started check how the `MainButton` component is used in the `src/pages/en/buttons.md` file.
+
+You can import your component library or create your own and document it easily.
+
+### `.component-preview` utility
+
+There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
+
+<div class="component-preview">
+    <button class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
+</div>
+
+### Have fun!
+
+Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.

package/src/pages/core/shadows.astro

@@ -0,0 +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>
+</MainLayout>

package/src/pages/core/typography.astro

@@ -0,0 +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>
+
+</MainLayout>

package/src/pages/index.astro

@@ -0,0 +1,52 @@
+---
+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>

package/src/pages/patterns/introduction.mdx

@@ -0,0 +1,61 @@
+---
+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>
+```

package/src/styles/_variables.scss

@@ -0,0 +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;