spoko-design-system 0.3.3 → 0.3.8

package/src/pages/index.astro

@@ -2,7 +2,7 @@
 import { changeLanguage } from "i18next";
 import { Icon } from "astro-icon/components";
 import { SITE } from "../config";
-import Jumbatron from "../components/Jumbatron.vue";
+import Jumbotron from "../components/Jumbotron.astro";
 import Layout from "../layouts/Layout.astro";
 import Headline from "../components/Headline.vue";
 import Button from "../components/Button.vue";
@@ -33,7 +33,7 @@ const navItems = [
 
 <Layout>
   <div class="bg-slate-100 min-h-screen text-center">
-    <Jumbatron class="w-full" intro={SITE.title}>
+    <Jumbotron title={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"
@@ -41,7 +41,7 @@ const navItems = [
       />
 
       <Button
-        slot="cta"
+        slot="cta-content"
         href="/core/introduction/"
         title="Spoko Design System"
         primary
@@ -49,7 +49,7 @@ const navItems = [
       >
         Read More
       </Button>
-    </Jumbatron>
+    </Jumbotron>
     <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)"
@@ -105,16 +105,16 @@ const navItems = [
       <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-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> catalog.polo.blue</a>
+          <a href="https://catalog.polo.blue" class="example-link" 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-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> polo.blue</a>
+          <a href="https://polo.blue" class="example-link" 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-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank"> spoko.space</a>
+          <a href="https://spoko.space" class="example-link" 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-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white" target="_blank">sale.polo.blue</a>
+          <a href="https://sale.polo.blue/" class="example-link" target="_blank">sale.polo.blue</a>
         </li>
       </ul>
      </div>
@@ -124,3 +124,8 @@ const navItems = [
   </div>
   <script is:inline></script>
 </Layout>
+<style>
+  .example-link {
+    @apply transition ease-in-out delay-200 duration-300 text-blue-medium hover:(text-accent-light decoration-blue-medium) underline decoration-white;
+  }
+</style>

package/uno-config/theme/colors.ts

@@ -20,7 +20,6 @@ export const colors = {
 
     // Secondary colors - accent palette
     accent: {
-        lightest: '#00b0f0',
         light: '#0099da',
         default: '#0087c1',    // Default accent
         dark: '#006ea6',
@@ -36,7 +35,6 @@ export const colors = {
         default: '#9ca3af',    // Base gray
         dark: '#6a767d',       
         darker: '#4b5563',
-        black: '#000000',      // Pure black
     },
       
     // Slate colors - gray-blue palette

package/uno-config/theme/container.ts

@@ -0,0 +1,25 @@
+// uno-config/theme/container.ts
+import { breakpoints } from './breakpoints';
+
+export const container = {
+  center: true,
+  padding: {
+    sm: '1rem',
+    md: '2rem',
+    lg: '3rem',
+    xl: '4rem',
+    '2xl': '5rem',
+    '3xl': '5rem',
+    '4xl': '5rem',
+  },
+  maxWidth: {
+    sm: breakpoints.sm,
+    md: breakpoints.md,
+    lg: breakpoints.lg,
+    xl: breakpoints.xl,
+    '2xl': breakpoints['2xl'],
+    // For larger breakpoints, keep the 2xl width
+    '3xl': breakpoints['2xl'],
+    '4xl': breakpoints['2xl'],
+  },
+};

package/uno-config/theme/index.ts

@@ -5,6 +5,7 @@ import { breakpoints } from './breakpoints';
 import { dimensions } from './dimensions';
 import { effects } from './effects';
 import { gridTemplates } from './grid';
+import { container } from './container';
 
 export const theme = {
   colors,
@@ -14,6 +15,7 @@ export const theme = {
   gridTemplateColumn: gridTemplates.columns, 
   breakpoints,
   screens: breakpoints,
+  container,
 };
 
 export {
@@ -23,4 +25,5 @@ export {
   dimensions,
   effects,
   gridTemplates,
+  container,
 };

package/uno-config/theme/shortcuts/components.ts

@@ -34,7 +34,7 @@ export const componentShortcuts = [
   // Category related
   ['category-section', `pb-4 w-full ${COLORS.bgWhite} mb-4 overflow-x-hidden ${LAYOUT.flex.wrap} max-w-full`],
   ['category-tile', `${LAYOUT.flex.wrap} sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) 3xl:(w-19.60% min-w-19.60%) flex ml-1 lg:ml-1.5 first:ml-4`],
-  ['category-toggler', `sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest px-4 leading-7 pb-0.5 md:pl-0`],
+  ['category-toggler', `w-8 sm:bg-opacity-20 pt-1 ${LAYOUT.flex.center} hover:text-accent-light text-neutral-light hover:text-blue-lightest px-4 leading-7 pb-0.5 md:pl-0`],
   ['category-link', 'w-full sm:w-auto text-neutral-default hover:(bg-gray-50 sm:bg-inherit) py-2 sm:py-0 text-lg font-medium text-left px-3 block sm:(text-base leading-4 mb-1.5) md:(px-4 py-1 table-cell)'],
   ['category-carousel__link', `uppercase ml-auto px-4 text-xs ${LAYOUT.flex.alignCenter} mt-3 hover:underline`],
 

package/uno-config/theme/shortcuts/index.ts

@@ -4,6 +4,7 @@ import { buttonShortcuts } from './buttons';
 import { layoutShortcuts } from './layout';
 import { componentShortcuts } from './components';
 import { productShortcuts } from './product';
+import { jumbotronShortcuts } from './jumbotron';
 
 const convertToShortcuts = (shortcuts: string[][]): UserShortcuts => {
   return Object.fromEntries(shortcuts.map(([name, value]) => [name, value]));
@@ -13,5 +14,6 @@ export const shortcuts: UserShortcuts = {
   ...convertToShortcuts(buttonShortcuts),
   ...convertToShortcuts(layoutShortcuts),
   ...convertToShortcuts(componentShortcuts),
-  ...convertToShortcuts(productShortcuts)
+  ...convertToShortcuts(productShortcuts),
+  ...convertToShortcuts(jumbotronShortcuts),
 };

package/uno-config/theme/shortcuts/jumbotron.ts

@@ -0,0 +1,44 @@
+// shortcuts/jumbotron.ts
+import { COLORS, LAYOUT, TRANSITIONS, IMAGE_STYLES } from './constants'
+
+export const jumbotronShortcuts = [
+  // Default variant
+  ['jumbotron-header-base', 'relative mx-auto my-auto lg:w-full text-center py-8'],
+  ['jumbotron-container-small', 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20'],
+  ['jumbotron-container-large', 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'],
+  ['jumbotron-title-default', 'text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl'],
+  ['jumbotron-cta-wrapper', 'mt-5 sm:(mt-8 flex justify-center)'],
+
+  // Hero variant
+  ['jumbotron-hero-wrapper', 'relative w-full'],
+  ['jumbotron-hero-image', 'absolute inset-0 w-full h-full'],
+  ['jumbotron-hero-overlay', 'absolute inset-0 bg-gradient-to-r from-blue-900 to-transparent opacity-90 z-1'],
+  ['jumbotron-hero-container', 'xl:container mx-auto px-3.5 md:px-8 py-8 h-56 sm:h-72 md:max-h-72 items-center flex'],
+  ['jumbotron-hero-header', 'relative z-10 text-white'],
+  ['jumbotron-hero-title', 'font-headlight text-3xl sm:text-4xl md:text-5xl xl:text-6xl mt-1 line-clamp-3 leading-tight'],
+
+  // Post variant
+  ['jumbotron-post-header', 'post-header pt-11 w-full justify-center text-white z-2 relative'],
+  ['jumbotron-post-heading', 'heading text-white relative flex items-center justify-center mt-auto w-full z-[2]'],
+  ['jumbotron-post-container', 'w-full sm:max-w-[640px] md:max-w-3xl lg:max-w-5xl xl:max-w-7xl 2xl:max-w-[1536px] px-4 py-5 flex flex-col flex-wrap'],
+  ['jumbotron-post-title', 'font-headlight text-2xl mb-1 sm:text-3xl md:(text-4xl mb-3) xl:text-6xl mt-1 order-2 line-clamp-3 pb-1'],
+
+  // Metadata and categories
+  ['jumbotron-meta', 'order-3 flex items-center text-gray-100'],
+  ['jumbotron-categories', 'order-1'],
+
+  // Content styles
+  ['jumbotron-description', 'mb-1 line-clamp-3 text-base sm:text-lg leading-none mt-4'],
+  ['jumbotron-info', 'font-medium mb-4 line-clamp-1 text-base sm:text-lg mt-2'],
+
+  // Post Split variant
+  ['jumbotron-split-wrapper', 'w-full'],
+  ['jumbotron-split-container', 'xl:container mx-auto px-3.5 md:px-0'],
+  ['jumbotron-split-header', 'w-full justify-center text-white z-2 mt-auto md:(grid grid-cols-2) pb-4 mb-8'],
+  ['jumbotron-split-content', 'container px-3.5 py-5 md:py-0 flex flex-wrap'],
+  ['jumbotron-split-title', 'font-headlight text-3xl md:(text-4xl mb-3) xl:text-11 mt-1 order-2 line-clamp-3 pb-1 w-full'],
+  ['jumbotron-split-meta', 'order-3 flex items-center text-gray-100'],
+  ['jumbotron-split-image-wrapper', 'relative -mb-8 md:(mt-4 -ml-4 mr-4)'],
+  ['jumbotron-split-image', 'relative shadow-xl md:max-h-112'],
+  ['jumbotron-split-img', 'aspect-video'] // border-white border-4
+];

package/src/components/Jumbatron.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { useSlots } from 'vue';
-
-const slots = useSlots()
-const hasSlot = (name) => {
-  return !!slots[name];
-}
-const props = defineProps({
-  small: {
-    type: Boolean,
-    default: null,
-    required: false,
-  },
-  intro: {
-    type: String,
-    default: '',
-    required: false,
-  }
-})
-</script>
-
-<template>
-  <header class="relative flow content-grid bg-vw  mx-auto my-auto py-8 lg:w-full text-center"  :class="props.small ? 'md:min-h-xs sm:py-12 md:py-14 lg:py-16 xl:py-20' : 'md:min-h-md sm:py-16 md:py-20 lg:py-28 xl:py-32'">
-      
-        <slot name="intro">
-          <h1 class="text-3xl headline-light text-white sm:(text-4xl pt-0) md:text-5xl lg:text-6xl " v-html="props.intro" />
-        </slot>
-   
-      <slot name="subtitle" />
-      <div class="mt-5 sm:(mt-8 flex justify-center)" v-if="hasSlot('cta')">
-          <slot name="cta" />
-      </div>
-    </header>
-</template>
-<style>
-.bg-vw {
-  background: radial-gradient(circle at 50% 85%,
-      #00437A 0%,
-      #001E50 100%)
-}
-</style>

package/src/pages/components/jumbatron.mdx

@@ -1,95 +0,0 @@
----
-title: "Jumbatron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbatron from '../../components/Jumbatron.vue'
-import Button from '../../components/Button.vue'
-
-# Jumbatron
-
-A jumbotron indicates a big box for calling extra attention to some special content or information.
-
-Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
-
-## Jumbatron - classic
-<div class="component-preview">
-    <Jumbatron class="w-full"  intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">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."
-        />
-        <Button primary slot="cta" rounded
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
-        <span slot="intro" set:html= />
-        <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"
-        />
-        <Button primary slot="cta" rounded
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
-
-## Small Jumbatron
-
-<div class="component-preview">
-    <Jumbatron class="w-full" small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron small intro={`Lorem ipsum dolor sit amet, <span class=\"text-accent-light\">consectetur</span> adipiscing elit.`}>
-       
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="subtitle"
-        />
-        <Button primary slot="cta"
-          href="#"
-          title="short text"
-        >
-         Read More
-        </Button>
-    </Jumbatron>
-```
-
-
-## Small Jumbatron - custom slot intro instead of prop
-<div class="component-preview">
-    <Jumbatron class="w-full" small >
-        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.</h2>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron class="w-full" small >
-        <h2 slot="intro" class="text-3xl text-white sm:(text-3xl pt-0) md:text-4xl lg:text-5xl font-light font-headbold">
-          Lorem ipsum dolor sit amet, <span class="text-accent-light">consectetur</span> adipiscing elit.
-        </h2>
-        <p slot="subtitle"
-          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-    </Jumbatron>
-```