spoko-design-system 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.8.0](https://github.com/polo-blue/sds/compare/v1.7.0...v1.8.0) (2025-10-29)
+
+### Features
+
+* **Headline:** add responsive design support and advanced features ([254d5d3](https://github.com/polo-blue/sds/commit/254d5d30f8eff673a48343270f0f23eb39ab7f95))
+
 ## [1.7.0](https://github.com/polo-blue/sds/compare/v1.6.0...v1.7.0) (2025-10-29)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Headline.vue

@@ -1,85 +1,90 @@
 <script setup lang="ts">
-import type { PropType } from 'vue';
-
-const props = defineProps({
-  as: {
-    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: 'span',
-    required: true,
-  },
-  textSize: {
-    type: String as PropType<
-      | 'xs'
-      | 'sm'
-      | 'base'
-      | 'lg'
-      | 'xl'
-      | '2xl'
-      | '3xl'
-      | '4xl'
-      | '5xl'
-      | '6xl'
-      | '7xl'
-      | '8xl'
-      | '9xl'
-    >,
-    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, String] as PropType<boolean | 'center'>,
-    required: false,
-    default: false,
-  },
+import { computed, useAttrs } from 'vue';
+
+const attrs = useAttrs();
+
+interface HeadlineProps {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+  class?: string;
+  fontFamily?: 'head' | 'text' | 'novamono' | 'mono';
+  fontWeight?: 'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin';
+  underline?: boolean | 'center';
+  defaultSize?: string;
+  noFlexLayout?: boolean;
+  noMargin?: boolean;
+  noLeading?: boolean;
+}
+
+const props = withDefaults(defineProps<HeadlineProps>(), {
+  as: 'span',
+  class: '',
+  fontFamily: 'head',
+  fontWeight: 'regular',
+  underline: false,
+  defaultSize: 'text-inherit',
+  noFlexLayout: false,
+  noMargin: false,
+  noLeading: false,
 });
 
-// Generate the typography class based on font family and weight
-const getTypographyClass = (): string => {
-  const family = props.fontFamily;
-  const weight = props.fontWeight;
+const typographyClass = computed(() => {
+  const { fontFamily, fontWeight } = props;
 
-  // Handle special cases for mono fonts
-  if (family === 'novamono' || family === 'mono') {
-    return `font-${family}`;
+  if (fontFamily === 'novamono' || fontFamily === 'mono') {
+    return `font-${fontFamily}`;
   }
 
-  // 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
+  if (fontFamily === 'head') {
+    const weightMap = {
+      light: 'headline-light',
+      bold: 'headline-bold',
+      'light-bold': 'headline-light-bold',
+      'light-thin': 'headline-light-thin',
+      regular: 'headline',
+    };
+    return weightMap[fontWeight] || 'headline';
   }
 
-  // For text family, generate appropriate class
-  if (family === 'text') {
-    return `font-text${weight}`;
+  if (fontFamily === 'text') {
+    return `font-text${fontWeight}`;
   }
 
-  // Default fallback
   return 'headline';
-};
+});
+
+const underlineClass = computed(() => {
+  if (props.underline === true) return 'headline--underline';
+  if (props.underline === 'center') return 'headline--underline-center';
+  return '';
+});
+
+const layoutClass = computed(() => {
+  // Centered underline needs block + text-center
+  if (props.underline === 'center') return 'block text-center';
 
-const typographyClass = getTypographyClass();
+  // Default flex layout for icon alignment (unless disabled)
+  if (!props.noFlexLayout) {
+    return 'flex sm:block md:flex items-center';
+  }
+
+  return '';
+});
+
+const computedClasses = computed(() => {
+  const baseClasses = [];
+
+  // Conditionally add base classes
+  if (!props.noMargin) baseClasses.push('mb-2.5');
+  if (!props.noLeading) baseClasses.push('leading-none');
+
+  const sizeClasses = props.class || props.defaultSize;
+
+  return `${baseClasses.join(' ')} ${typographyClass.value} ${sizeClasses} ${underlineClass.value} ${layoutClass.value}`.trim();
+});
 </script>
 
 <template>
-  <component
-    :is="props.as"
-    class="mb-2.5 leading-none"
-    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline === true ? 'headline--underline' : ''} ${props.underline === 'center' ? 'headline--underline-center block text-center' : 'flex sm:block md:flex items-center'}`"
-  >
+  <component :is="as" :class="computedClasses" v-bind="attrs">
     <slot />
   </component>
 </template>
@@ -92,14 +97,14 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute left-0 bottom-0;
     height: 3px;
     width: 55px;
-    background-color: var(--clr-primary-400);
+    background-color: var(--headline-underline-accent, var(--clr-primary-400));
   }
 
   &:before {
     @apply content-empty absolute left-0 bottom-px h-px;
     width: 95%;
     max-width: 255px;
-    background-color: #64748b;
+    background-color: var(--headline-underline-base, #64748b);
   }
 }
 
@@ -110,7 +115,7 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute left-1/2 bottom-px h-px;
     width: 95%;
     max-width: 255px;
-    background-color: #64748b;
+    background-color: var(--headline-underline-base, #64748b);
     transform: translateX(-50%);
   }
 
@@ -118,7 +123,7 @@ const typographyClass = getTypographyClass();
     @apply content-empty absolute bottom-0;
     height: 3px;
     width: 55px;
-    background-color: var(--clr-primary-400);
+    background-color: var(--headline-underline-accent, var(--clr-primary-400));
     left: calc(50% - min(47.5%, 127.5px));
   }
 }

package/src/pages/components/headline.mdx

@@ -24,113 +24,313 @@ Thanks to this, I can make a header that always looks the same, regardless of wh
 import Headline from 'spoko-design-system/src/components/Headline.vue';
 ```
 
-### Settings
-supported parameters
-```js
-as: {
-        type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-        default: 'span',  
-        required: true,
-},
-textSize: {
-        type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl'>,
-        required: false,
-        default: null
+### Props
+
+```typescript
+interface HeadlineProps {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+  // default: 'span'
+
+  class?: string;
+  // default: ''
+  // Use any UnoCSS/Tailwind classes including responsive variants
+  // Examples: 'text-4xl', 'text-2xl md:text-4xl lg:text-6xl'
+
+  fontFamily?: 'head' | 'text' | 'novamono' | 'mono';
+  // default: 'head'
+
+  fontWeight?: 'light' | 'regular' | 'bold' | 'light-bold' | 'light-thin';
+  // default: 'regular'
+
+  underline?: boolean | 'center';
+  // default: false
+  // true: left-aligned underline, 'center': centered underline
+
+  defaultSize?: string;
+  // default: 'text-inherit'
+  // Used when no class prop is provided
+
+  noFlexLayout?: boolean;
+  // default: false
+  // Disables the default flex layout behavior
+
+  noMargin?: boolean;
+  // default: false
+  // Disables default mb-2.5 margin
+
+  noLeading?: boolean;
+  // default: false
+  // Disables default leading-none line height
 }
+```
 
+### HTML Attributes Support
+
+The component supports all standard HTML attributes via `v-bind="$attrs"`:
+
+```vue
+<Headline
+  as="h1"
+  class="text-4xl"
+  id="main-title"
+  data-section="hero"
+  aria-label="Main headline"
+>
+  Accessible Headline
+</Headline>
+```
+
+### CSS Custom Properties
+
+Customize underline colors using CSS variables:
+
+```css
+/* Override underline colors globally */
+:root {
+  --headline-underline-accent: #0066cc;  /* Main underline color */
+  --headline-underline-base: #999999;    /* Thin line color */
+}
+
+/* Or scope to specific headlines */
+.custom-headline {
+  --headline-underline-accent: #ff6600;
+  --headline-underline-base: #cccccc;
+}
 ```
 
 
 ## Examples
 
+### Basic Usage
+
 <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">
+  <li class="px-4 pb-4"><Headline as="h1" font-family="head" font-weight="regular" class="text-xl">Regular Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-family="head" font-weight="light" class="text-lg">Light Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" font-family="head" font-weight="bold" class="text-2xl">Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h4" font-family="head" font-weight="light-bold" class="text-base">Light Bold Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h5" font-family="head" font-weight="light-thin" class="text-sm">Light Thin Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" class="text-base">Default Text (inherits size)</Headline></li>
+</ul>
+</div>
+
+### Responsive Typography
+
+<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" class="text-2xl md:text-4xl lg:text-6xl">Responsive Hero</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-weight="bold" class="text-xl md:text-3xl lg:text-5xl">Bold Responsive</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h3" class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">Multi-breakpoint</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-weight="light-bold" class="text-lg md:text-2xl lg:text-4xl 3xl:text-6xl">Extra large screens</Headline></li>
+</ul>
+</div>
+
+### Font Families & Weights
+
+<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="p" font-family="text" font-weight="light" class="text-base">Light Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="p" font-family="text" font-weight="bold" class="text-base">Bold Text</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="novamono" class="text-sm">Nova Mono Code</Headline></li>
+  <li class="px-4 pb-4"><Headline as="code" font-family="mono" class="text-sm">Mono Code</Headline></li>
+</ul>
+</div>
+
+### With Underline
+
+<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="h2" font-weight="light-thin" class="text-3xl" underline>Underlined Headline</Headline></li>
+  <li class="px-4 pb-4"><Headline as="h2" font-weight="bold" class="text-2xl md:text-4xl" underline="center">Centered Underline</Headline></li>
+</ul>
+</div>
+
+### With Icons
+
+<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="h3" font-weight="bold" class="text-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>
+  <li class="px-4 pb-4"><Headline as="h1" font-weight="light-bold" class="text-xl md:text-3xl lg:text-5xl" underline>
     <Icon name="ph:cat-thin" class="inline-block mr-4" />
-    Complete Example
+    Responsive with Icon & Underline
   </Headline></li>
 </ul>
 </div>
 
-```js
-/* 1 */
-<Headline as="h1" font-family="head" font-weight="regular">Regular Headline</Headline>
+## Code Examples
 
-/* 2 */
-<Headline as="h2" font-family="head" font-weight="light">Light Headline</Headline>
+### Basic Usage
+```vue
+<!-- Simple headline with defaults (inherits font size) -->
+<Headline as="h1">Default Headline</Headline>
 
-/* 3 */
-<Headline as="h3" font-family="head" font-weight="bold">Bold Headline</Headline>
+<!-- With explicit size -->
+<Headline as="h1" class="text-xl">Regular Headline</Headline>
 
-/* 4 */
-<Headline as="h4" font-family="head" font-weight="light-bold">Light Bold Headline</Headline>
+<!-- Font family and weight -->
+<Headline as="h2" font-weight="light" class="text-lg">Light Headline</Headline>
+<Headline as="h3" font-weight="bold" class="text-2xl">Bold Headline</Headline>
+```
 
-/* 5 */
-<Headline as="h5" font-family="head" font-weight="light-thin">Light Thin Headline</Headline>
+### Responsive Typography
+```vue
+<!-- Hero headline - small on mobile, large on desktop -->
+<Headline as="h1" class="text-2xl md:text-4xl lg:text-6xl">
+  Responsive Hero
+</Headline>
 
-/* 6 */
-<Headline as="p" font-family="text" font-weight="light">Light Text Content</Headline>
+<!-- Progressive scaling across all breakpoints -->
+<Headline as="h2" class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
+  Multi-breakpoint Headline
+</Headline>
 
-/* 7 */
-<Headline as="p" font-family="text" font-weight="regular">Regular Text Content</Headline>
+<!-- Extra large screens support -->
+<Headline as="h2" font-weight="light-bold" class="text-lg md:text-2xl lg:text-4xl 3xl:text-6xl">
+  Scales up to 3xl breakpoint
+</Headline>
+```
 
-/* 8 */
-<Headline as="p" font-family="text" font-weight="bold">Bold Text Content</Headline>
+### Font Families
+```vue
+<!-- Heading font (default) -->
+<Headline as="h1" font-weight="regular" class="text-xl">
+  Regular Headline
+</Headline>
 
-/* 9 */
-<Headline as="p" font-family="text" font-weight="light-bold">Light Bold Text Content</Headline>
+<!-- Text font for body content -->
+<Headline as="p" font-family="text" font-weight="light" class="text-base">
+  Light Text Content
+</Headline>
 
-/* 10 */
-<Headline as="p" font-family="text" font-weight="light-thin">Light Thin Text Content</Headline>
+<!-- Monospace fonts -->
+<Headline as="code" font-family="novamono" class="text-sm">
+  Nova Mono Code
+</Headline>
 
-/* 11 */
-<Headline as="code" font-family="novamono">Nova Mono Code Text</Headline>
+<Headline as="code" font-family="mono" class="text-sm">
+  Mono Code
+</Headline>
+```
 
-/* 12 */
-<Headline as="code" font-family="mono">Mono Code Text</Headline>
+### With Underline
+```vue
+<!-- Left-aligned underline -->
+<Headline as="h2" class="text-3xl" underline>
+  Underlined Headline
+</Headline>
 
-/* 13 */
-<Headline as="h1" font-family="head" font-weight="bold" text-size="4xl">Large Bold Headline</Headline>
+<!-- Centered underline with responsive sizing -->
+<Headline as="h2" font-weight="bold" class="text-2xl md:text-4xl" underline="center">
+  Centered Underline
+</Headline>
+```
 
-/* 14 */
-<Headline as="h2" font-family="head" font-weight="light-thin" text-size="3xl" underline>Underlined Light Thin Headline</Headline>
+### With Icons
+```vue
+<!-- Icon with responsive sizing -->
+<Headline as="h1" font-weight="light-bold" class="text-xl md:text-3xl lg:text-5xl" underline>
+  <Icon name="ph:cat-thin" class="inline-block mr-4" />
+  Complete Example
+</Headline>
 
-/* 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" />
+<!-- Simple icon headline -->
+<Headline as="h3" font-weight="bold" class="text-2xl">
+  <Icon name="ph:cat-thin" class="inline-block mr-4" />
   Headline with Icon
 </Headline>
+```
 
-/* 16 */
-<Headline as="h1">Default Headline</Headline>
+### Custom Styling
+```vue
+<!-- Combine with any UnoCSS/Tailwind utilities -->
+<Headline as="h1" class="text-4xl md:text-6xl text-blue-600 dark:text-blue-400">
+  Colored Headline
+</Headline>
 
-/* 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
+<!-- Responsive colors and sizes -->
+<Headline
+  as="h2"
+  font-weight="bold"
+  class="text-2xl md:text-4xl text-slate-700 md:text-blue-600"
+>
+  Responsive Color & Size
+</Headline>
+```
+
+### Advanced Features
+
+#### Remove Default Spacing
+```vue
+<!-- No bottom margin -->
+<Headline as="h1" class="text-4xl" no-margin>
+  Headline without margin
+</Headline>
+
+<!-- No line height adjustment -->
+<Headline as="h2" class="text-2xl" no-leading>
+  Headline with normal line height
 </Headline>
 
+<!-- Remove both -->
+<Headline as="h3" class="text-xl" no-margin no-leading>
+  Fully custom spacing
+</Headline>
+```
+
+#### Disable Flex Layout
+```vue
+<!-- By default, headlines without underline use flex layout for icon alignment -->
+<!-- Disable it with noFlexLayout -->
+<Headline as="h2" class="text-2xl" no-flex-layout>
+  Block-level headline
+</Headline>
+```
 
+#### Custom Underline Colors
+```vue
+<!-- In your component or style tag -->
+<style>
+  .custom-underline-headline {
+    --headline-underline-accent: #ff6600;
+    --headline-underline-base: #cccccc;
+  }
+</style>
+
+<Headline
+  as="h1"
+  class="text-4xl custom-underline-headline"
+  underline
+>
+  Custom colored underline
+</Headline>
+```
 
+#### Accessibility Features
+```vue
+<!-- Add ARIA attributes for screen readers -->
+<Headline
+  as="h1"
+  class="text-4xl"
+  id="page-title"
+  role="heading"
+  aria-level="1"
+  aria-label="Welcome to our website"
+>
+  Welcome
+</Headline>
+
+<!-- Add data attributes for tracking or testing -->
+<Headline
+  as="h2"
+  class="text-2xl"
+  data-testid="section-heading"
+  data-analytics="hero-title"
+>
+  Section Title
+</Headline>
 ```
 
 

package/uno-config/index.ts

@@ -165,6 +165,8 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       // All peer selectors from the list (needed for floating labels)
       ...peerSelectorClasses,
     ],
+    // Disable default extractors to prevent false positives from JavaScript code
+    extractorDefault: false,
     // Optimized extractors for static Astro builds
     extractors: [
       {
@@ -207,7 +209,7 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
       presetAttributify(),
       presetIcons({
         scale: 1.2,
-        warn: true,
+        warn: true, // Show warnings for actual missing icons
         prefix: 'i-',
         extraProperties: {
           'display': 'inline-block',

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

@@ -7,7 +7,7 @@ import { breakpoints } from './../breakpoints';
 
 export const jumbotronShortcuts = [
   // Default variant
-  ['jumbotron-header-base', 'relative mx-auto my-auto lg:w-full text-center py-8'],
+  ['jumbotron-header-base', 'relative mx-auto my-auto 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'],