spoko-design-system 0.8.5 → 0.8.8

package/.astro/content.d.ts

@@ -56,6 +56,10 @@ declare module 'astro:content' {
 		collection: C;
 		slug: E;
 	};
+	export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+		collection: C;
+		id: string;
+	};
 
 	/** @deprecated Use `getEntry` instead. */
 	export function getEntryBySlug<
@@ -84,6 +88,13 @@ declare module 'astro:content' {
 		filter?: (entry: CollectionEntry<C>) => unknown,
 	): Promise<CollectionEntry<C>[]>;
 
+	export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter?: LiveLoaderCollectionFilterType<C>,
+	): Promise<
+		import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+	>;
+
 	export function getEntry<
 		C extends keyof ContentEntryMap,
 		E extends ValidContentEntrySlug<C> | (string & {}),
@@ -120,6 +131,10 @@ declare module 'astro:content' {
 			? Promise<DataEntryMap[C][E]> | undefined
 			: Promise<DataEntryMap[C][E]>
 		: Promise<CollectionEntry<C> | undefined>;
+	export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+		collection: C,
+		filter: string | LiveLoaderEntryFilterType<C>,
+	): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>;
 
 	/** Resolve an array of entry references from the same collection */
 	export function getEntries<C extends keyof ContentEntryMap>(
@@ -163,5 +178,33 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
+	type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+		infer TData,
+		infer TEntryFilter,
+		infer TCollectionFilter,
+		infer TError
+	>
+		? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+		: { data: never; entryFilter: never; collectionFilter: never; error: never };
+	type ExtractDataType<T> = ExtractLoaderTypes<T>['data'];
+	type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter'];
+	type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter'];
+	type ExtractErrorType<T> = ExtractLoaderTypes<T>['error'];
+
+	type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+		LiveContentConfig['collections'][C]['schema'] extends undefined
+			? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+			: import('astro/zod').infer<
+					Exclude<LiveContentConfig['collections'][C]['schema'], undefined>
+				>;
+	type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+		ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>;
+	type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+		LiveContentConfig['collections'][C]['loader']
+	>;
+
 	export type ContentConfig = typeof import("./../src/content.config.mjs");
+	export type LiveContentConfig = never;
 }

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.9.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"experimentalDefaultStyles\":true},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.11.0","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]

package/.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1749557085797
+		"lastUpdateCheck": 1751564292126
 	}
 }

package/.astro/types.d.ts

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

package/icon.config.ts

@@ -216,6 +216,7 @@ export const iconConfig: IconConfig = {
       "info",
       "lamp",
       "lightbulb",
+      "link",
       "package",
       "qr-code",
       "radio",

package/index.ts

@@ -16,6 +16,7 @@ export { default as ProductDetailsList } from './src/components/ProductDetailsLi
 export { default as FeaturesList } from './src/components/FeaturesList.vue';
 export { default as ProductCodes } from './src/components/ProductCodes.vue';
 export { default as Headline } from './src/components/Headline.vue';
+export { default as Quote } from './src/components/Quote.vue';
 
 export { default as ProductEngineType } from './src/components/Product/ProductEngineType.vue';
 export { default as ProductButton } from './src/components/Product/ProductButton.vue';
@@ -43,7 +44,8 @@ export { default as Copyright } from './src/components/Copyright.astro';
 export { default as HandDrive } from './src/components/HandDrive.astro';
 export { default as Faq } from './src/components/Faq.astro';
 export { default as FaqItem } from './src/components/FaqItem.astro';
-export { default as ButtonCopy } from './src/components/ButtonCopy.astro'; // Add this line
+export { default as ButtonCopy } from './src/components/ButtonCopy.astro';
+export { default as CallToAction } from './src/components/Layout/CallToAction.vue';
 
 export { default as ProductImage } from './src/components/Product/ProductImage.astro';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.8.5",
+  "version": "0.8.8",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -62,6 +62,7 @@
     "@iconify-json/ic": "^1.2.2",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify-json/la": "^1.2.1",
+    "@iconify-json/lucide": "^1.2.54",
     "@iconify-json/material-symbols-light": "^1.2.28",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.2",

package/public/arrow-bottom.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 18 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(-0.0247114,-3.02628e-18,2.90782e-18,-0.0237442,23.7506,13.5573)">
+        <path d="M254.6,477.479C259.711,473.272 561.717,170.223 561.717,170.223C561.717,170.223 576.205,153.951 597.839,153.983C621.181,154.019 636.425,170.096 636.425,170.096C636.425,170.096 939.167,475.94 940.854,477.463C967.2,501.255 956.012,536.939 942.827,551.356C928.606,566.906 896.33,575.498 868.319,549.101C865.351,546.304 604.846,285.516 604.846,285.516C604.846,285.516 601.137,280.823 597.481,280.661C594.25,280.517 589.683,285.449 589.683,285.449C589.683,285.449 332.794,543.858 326.478,549.801C312.614,562.847 276.463,576.895 252.279,552.019C218.24,517.006 250.72,480.673 254.6,477.479Z" style="fill:rgb(48,53,59);"/>
+    </g>
+</svg>

package/src/components/Headline.vue

@@ -12,17 +12,57 @@ const props = defineProps({
     required: false,
     default: null
   },
+  fontFamily: {
+    type: String as PropType<'head' | 'text' | 'novamono' | 'mono'>,
+    required: false,
+    default: 'head'
+  },
+  fontWeight: {
+    type: String as PropType<'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin'>,
+    required: false,
+    default: 'regular'
+  },
   underline: {
     type: Boolean,
     required: false,
     default: false
   }
 })
+
+// Generate the typography class based on font family and weight
+const getTypographyClass = (): string => {
+  const family = props.fontFamily
+  const weight = props.fontWeight
+  
+  // Handle special cases for mono fonts
+  if (family === 'novamono' || family === 'mono') {
+    return `font-${family}`
+  }
+  
+  // For head family, generate specific classes
+  if (family === 'head') {
+    if (weight === 'light') return 'headline-light'
+    if (weight === 'bold') return 'headline-bold'
+    if (weight === 'light-bold') return 'headline-light-bold'
+    if (weight === 'light-thin') return 'headline-light-thin'
+    return 'headline' // for regular weight
+  }
+  
+  // For text family, generate appropriate class
+  if (family === 'text') {
+    return `font-text${weight}`
+  }
+  
+  // Default fallback
+  return 'headline'
+}
+
+const typographyClass = getTypographyClass()
 </script>
 
 <template>
   <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
-    :class="`headline ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
+    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
     <slot />
   </component>
 </template>
@@ -45,4 +85,4 @@ const props = defineProps({
     background-color: #64748b
   }
 }
-</style>
+</style>

package/src/components/Layout/CallToAction.astro

@@ -0,0 +1,53 @@
+---
+import Button from "./../Button.vue"
+
+interface Props {
+  class?: string;
+  title?: string;
+  description?: string;
+}
+
+const { class: additionalClasses, title: propTitle, description: propDescription } = Astro.props;
+
+// Sprawdzamy, czy slot 'description' ma jakąkolwiek zawartość
+const hasDescriptionSlotContent = Astro.slots.has('description');
+---
+
+<section
+  class:list={[
+    "full-width border-blue-medium bg-blue-darker/5 border-t-4 md:(border-t-0 px-6 bg-white) my-8",
+    additionalClasses,
+  ]}
+>
+  <div class="flex flex-col items-center gap-4 md:(flex-row border-l-4 border-blue-medium bg-blue-darker/5 px-6) py-6">
+    <div class="flex-shrink-0 hidden md:block">
+      <slot name="icon">
+        <span i-ph:sparkle-thin class="mr-1 text-8 md:text-10 text-brand-secondary"></span>
+      </slot>
+    </div>
+    <div class="flex-1 text-center md:text-left">
+      <h3 class="text-lg font-semibold text-blue-darker">
+        <slot name="title">
+          {propTitle || 'Domyślny tytuł akcji'}
+        </slot>
+      </h3>
+      {(propDescription || hasDescriptionSlotContent) && (
+        <p class="text-blue-darker mt-1">
+          <slot name="description">
+            {propDescription || 'Domyślny opis, który zachęca do działania.'}
+          </slot>
+        </p>
+      )}
+    </div>
+    <slot name="action">
+      <Button
+        type="button"
+        class:list="w-fit place-self-center gap-2"
+        tertiary
+        rounded
+        title="Domyślny przycisk akcji">
+        Kliknij mnie!
+      </Button>
+    </slot>
+  </div>
+</section>

package/src/pages/components/headline.mdx

@@ -29,7 +29,7 @@ supported parameters
 ```js
 as: {
         type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-        default: null,
+        default: 'span',  
         required: true,
 },
 textSize: {
@@ -40,113 +40,98 @@ textSize: {
 
 ```
 
-## Headline H1
 
-<div class="component-preview">
-        <Headline as="h1">Lorem Ipsum</Headline>
+## Examples
+
+<div class="component-preview flex-wrap flex-col justify-start !items-start">
+<ul class="list-decimal list-outside">
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="novamono">Nova Mono Code Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="mono">Mono Code Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
+    <Icon name="ph:cat-thin" class="inline-block mr-4" />
+    Headline with Icon
+  </Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1">Default Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
+    <Icon name="ph:cat-thin" class="inline-block mr-4" />
+    Complete Example
+  </Headline></li>
+</ul>
 </div>
 
 ```js
-<Headline as="h1">
-        Lorem Ipsum
-</Headline>
+/* 1 */
+<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
 
-```
+/* 2 */
+<Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>
 
+/* 3 */
+<Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>
 
-## Headline H2
+/* 4 */
+<Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>
 
-<div class="component-preview">
-<Headline as="h2"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />Lorem Ipsum</Headline>
-</div>
+/* 5 */
+<Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>
 
-```js
-<Headline as="h2">
-        <Icon name="ph:cat-thin" class="mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />
-        Lorem Ipsum
-</Headline>
+/* 6 */
+<Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>
 
-```
+/* 7 */
+<Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>
 
-## Headline DIV
+/* 8 */
+<Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>
 
-<div class="component-preview">
-<Headline as="div"><Icon name="ph:cat-thin" class="inline-block  mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
-</div>
+/* 9 */
+<Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>
 
-```js
-<Headline as="div">
-        <Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />
-        Lorem Ipsum
-</Headline>
+/* 10 */
+<Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>
 
-```
+/* 11 */
+<Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>
 
-## Headline P
-Paragraph `<p>`
+/* 12 */
+<Headline as="code" font-family="mono">Mono Code Text</Headline>
 
-<div class="component-preview">
-<Headline as="p"><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
-</div>
+/* 13 */
+<Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>
 
-```js
-<Headline as="p">
-        <Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
-        Lorem Ipsum
-</Headline>
-
-```
-
-## Headline without icon
+/* 14 */
+<Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>
 
-<div class="component-preview">
-<Headline as="p">Lorem Ipsum</Headline>
-</div>
-
-```js
-<Headline as="p">Lorem Ipsum</Headline>
-
-```
-
-## Headline without icon, text size 4xl
-
-<div class="component-preview">
-<Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
-</div>
-
-```js
-<Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
-
-```
-
-
-## Headline without icon, text size 4xl with blue icon
-
-<div class="component-preview">
-<Headline as="h1" text-size="4xl"><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
-</div>
-
-```js
-<Headline as="h1" text-size="4xl"  icon-color="blue-wrc">
-        <Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
-        Lorem Ipsum
+/* 15 */
+<Headline as="h3" font-family="head" font-weight="bold" text-size="2xl">
+  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
+  Headline with Icon
 </Headline>
 
-```
-
+/* 16 */
+<Headline as="h1">Default Headline</Headline>
 
-## Headline with underline
+/* 17 */
+<Headline as="h1" font-family="head" font-weight="light-bold" text-size="4xl" underline>
+  <Icon name="ph:cat-thin" class="inline-block mr-4 text-blue-wrc" />
+  Complete Example
+</Headline>
 
-<div class="component-preview">
-<Headline as="h1" text-size="4xl" underline><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
-</div>
 
-```js
-<Headline as="h1" text-size="4xl"  icon-color="blue-wrc" underline>
-        <Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />
-        Lorem Ipsum
-</Headline>
 
 ```
 
+
 #

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

@@ -46,7 +46,7 @@ export const componentShortcuts = [
   // Carousel
   ['carousel-tile', `${LAYOUT.flex.base} w-52 min-w-52 ml-1 lg:ml-1.5`],
   ['carousel-product-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%) relative`],
-  ['carousel-item', `w-full w-full group-hover:filter-invert relative ${LAYOUT.flex.col}`],
+  ['carousel-item', `w-full pt-1 w-full group-hover:filter-invert relative ${LAYOUT.flex.col}`],
   ['carousel-big', 'shadow-[inset_0_10px_60px_-15px_rgba(0,0,0,0.1)] w-full h-full'],
 
   // PDP (Product Detail Page)

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

@@ -105,11 +105,21 @@ export const BUTTON_STYLES = {
 // Common typography styles
 export const TYPOGRAPHY = {
   headline: {
-    base: 'font-headlight',
-    bold: 'font-headlight font-bold',
-    light: 'font-headlight font-300 tracking-tight',
+    base: 'font-headregular',        
+    bold: 'font-headbold',           // dedykowany font bold
+    light: 'font-headlight',         
+    lightBold: 'font-headlight font-bold',  // light font + CSS bold
+    lightThin: 'font-headlight font-300 tracking-tight',  // light + thin + tracking
+    // base: 'font-headregular',
+    // bold: 'font-headlight font-bold',
+    // light: 'font-headlight font-300 tracking-tight',
   },
   text: {
+    light: 'font-textlight',         
+    regular: 'font-textregular',     
+    bold: 'font-textbold',           
+    lightBold: 'font-textlight font-bold',  // light font + CSS bold
+    lightThin: 'font-textlight font-300 tracking-tight',  // light + th
     xs: 'text-3',
     sm: 'text 3.5',
     base: 'text-4',

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

@@ -15,6 +15,13 @@ const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
 ])
 
 export const layoutShortcuts = [
+  
+  // Headers and Banners
+  ['headline', TYPOGRAPHY.headline.bold],
+  ['headline-light', TYPOGRAPHY.headline.light],
+  ['slimbanner', `px-4 sm:px-8 ${LAYOUT.flex.center} text-xs sm:text-base leading-none ${LAYOUT.position.relative} bg-gray-50 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden`],
+
+
   // Main Layout
   ['l-main', `text-slate-dark ${LAYOUT.spacing.topPadding} ${COLORS.bgWhite}`],
   ['main', `text-slate-dark ${COLORS.textNeutralLight} ${COLORS.bgDark} ${LAYOUT.spacing.topPadding} ${LAYOUT.position.relative}`],
@@ -37,7 +44,7 @@ export const layoutShortcuts = [
   ['cat-menu', `fixed h-21 bottom-[-6px] w-full z-10 border-t-1 border-neutral-light ${COLORS.bgWhite} dark:bg-blue-darkest text-center sm:(static z-auto border-t-none h-28)`],
   ['cat-card', 'p-4 text-base break-inside-avoid-column'],
   ['cat-name', 'mt-2 h-[2em] text-xs leading-none group-hover:filter-invert 3xl:text-3.25'],
-  ['cats-slide', `${TRANSITIONS.base} mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black ${COLORS.textNeutralLight} hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer ${LAYOUT.flex.colCenter} px-1.5 cursor-grab active:cursor-grabbing overflow-hidden`],
+  ['cats-slide', `${TRANSITIONS.base} pt-1 mb-0.5 min-h-tile-mobile sm:(min-h-tile h-tile mb-2 p-3) text-black ${COLORS.textNeutralLight} hover:(text-white even:bg-blue-medium odd:bg-accent-light) cursor-pointer ${LAYOUT.flex.colCenter} px-1.5 cursor-grab active:cursor-grabbing overflow-hidden`],
   ['cats-img', `max-w-full h-8 md:h-icon ${IMAGE_STYLES.objectContain} w-full left-0 right-0 top-0 bottom-0`],
 
   // Sidebars and Navigation
@@ -46,8 +53,11 @@ export const layoutShortcuts = [
   ['subsubcat', 'pl-2'],
 
   // Headers and Banners
-  ['headline', TYPOGRAPHY.headline.bold],
-  ['headline-light', TYPOGRAPHY.headline.light],
+  ['headline', TYPOGRAPHY.headline.base],        
+  ['headline-light', TYPOGRAPHY.headline.light], 
+  ['headline-bold', TYPOGRAPHY.headline.bold],
+  ['headline-light-bold', TYPOGRAPHY.headline.lightBold],
+  ['headline-light-thin', TYPOGRAPHY.headline.lightThin],
   ['slimbanner', `px-4 sm:px-8 ${LAYOUT.flex.center} text-xs sm:text-base leading-none ${LAYOUT.position.relative} bg-gray-50 z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden`],
 
   // Image Shortcuts