spoko-design-system 0.5.7 → 0.5.8

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

@@ -0,0 +1,44 @@
+// shortcuts/inputs.ts
+
+export const inputShortcuts = [
+  // Base input styles
+  ['input-base', 'block w-full text-4.5 text-blue-medium border-0 border-b-1 border-neutral-light appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium'],
+  
+  // Base label styles with optimized transform settings
+  ['input-label-base', 'absolute text-sm text-slate-light dark:text-neutral-default origin-top-left transform-gpu transition-all duration-300 ease-in-out'],
+  
+  // We're going back to direct arbitrary selectors in the input component
+  // since the grouped selectors seem to be causing issues with the focus behavior
+  
+  // Variant styles for labels - position only, no transforms
+  ['input-label-standard', 'top-3 -z-10'],
+  ['input-label-filled', 'top-4 z-10 start-2.5'],
+  
+  // Container styles
+  ['input-wrapper-standard', 'relative z-0'],
+  ['input-wrapper-filled', 'relative'],
+  
+  // Input variant styles
+  ['input-standard', 'py-2.5 px-0 bg-transparent'],
+  ['input-filled', 'rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 dark:bg-gray-700'],
+  
+  // Special input types
+  ['input-textarea', 'resize-none'],
+  
+  // Size variants
+  ['input-sm', 'text-sm'],
+  ['input-md', 'text-base'],
+  ['input-lg', 'text-lg py-3'],
+  ['input-label-sm', 'text-xs'],
+  ['input-label-md', 'text-sm'],
+  ['input-label-lg', 'text-base'],
+  
+  // Status styles - grouped logically
+  ['input-error', 'border-red-500 focus:border-red-500 dark:border-red-400 dark:focus:border-red-400'],
+  ['input-label-error', 'text-red-500 dark:text-red-400'],
+  ['input-error-message', 'mt-1 text-xs text-red-500 dark:text-red-400'],
+  
+  ['input-success', 'border-green-500 focus:border-green-500 dark:border-green-400 dark:focus:border-green-400'],
+  ['input-label-success', 'text-green-500 dark:text-green-400'],
+  ['input-success-message', 'mt-1 text-xs text-green-500 dark:text-green-400'],
+];

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

@@ -1,65 +1,65 @@
-// shortcuts/layout.ts
-import { 
-  COLORS, 
-  LAYOUT, 
-  IMAGE_STYLES, 
-  TYPOGRAPHY,
-  TRANSITIONS,
-  aspectRatios 
-} from './constants'
-
-// Generate image shortcuts dynamically
-const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
-  `img--${ratio}`,
-  `${aspect} ${IMAGE_STYLES.base}`
-])
-
-export const layoutShortcuts = [
-  // 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}`],
-  ['nav', `${COLORS.bgWhite} ${COLORS.bgDark} ${LAYOUT.position.absolute} sm:fixed w-full top-0 z-41 mx-auto ${LAYOUT.spacing.containerPadding} pt-1 h-24 ${LAYOUT.flex.between} flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden`],
-
-  // View Toggles
-  ['view-grid', 'lg:flex-wrap'],
-  ['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
-
-  // Containers
-  ['products-container', 'products-wrapper'],
-  ['products-wrapper', `${LAYOUT.flex.wrap} ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
-  ['product-list', 'sm:block products-wrapper'],
-  ['products-grid', `${LAYOUT.flex.alignCenter} w-full flex-nowrap pr-4 md:grid grid-rows-1 overflow-hidden ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]`],
-  ['similar-products', `${LAYOUT.flex.center} space-y-4 gap-8 flex-wrap px-4 md:grid ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5`],
-  ['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
-  ['search-container', 'mb-2 sm:mb-0'],
-
-  // Category Menu
-  ['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-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
-  ['sidebar-title', `font-headregular text-accent-light text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 ${LAYOUT.flex.center} sm:justify-start py-3`],
-  ['subcat', 'text-3.75 block cursor-pointer text-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
-  ['subsubcat', 'pl-2'],
-
-  // 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`],
-
-  // Image Shortcuts
-  ...imageShortcuts,
-  ['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
-  ['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
-
-  // Utility Classes
-  ['close-light', 'before:bg-white after:bg-white'],
-  ['close-dark', 'before:bg-black after:bg-black'],
-  ['colon-after', 'after:content-[":"]'],
-  ['adsbygoogle', 'w-full text-center'],
-  ['underline-on-hover', `${LAYOUT.position.relative} ${LAYOUT.flex.base} w-full ${COLORS.bgWhite} pb-1 after:absolute after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100`],
-  ['cat-link', `cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-brand-secondary underline) uppercase py-2 md:py-0`],
+// shortcuts/layout.ts
+import { 
+  COLORS, 
+  LAYOUT, 
+  IMAGE_STYLES, 
+  TYPOGRAPHY,
+  TRANSITIONS,
+  aspectRatios 
+} from './constants'
+
+// Generate image shortcuts dynamically
+const imageShortcuts = Object.entries(aspectRatios).map(([ratio, aspect]) => [
+  `img--${ratio}`,
+  `${aspect} ${IMAGE_STYLES.base}`
+])
+
+export const layoutShortcuts = [
+  // 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}`],
+  ['nav', `${COLORS.bgWhite} ${COLORS.bgDark} ${LAYOUT.position.absolute} sm:fixed w-full top-0 z-41 mx-auto ${LAYOUT.spacing.containerPadding} pt-1 h-24 ${LAYOUT.flex.between} flex-wrap sm:(flex-nowrap pt-0 h-14) max-w-screen print-hidden`],
+
+  // View Toggles
+  ['view-grid', 'lg:flex-wrap'],
+  ['view-list', 'lg:flex-col divide-y-1 divide-solid divide-neutral-lighter'],
+
+  // Containers
+  ['products-container', 'products-wrapper'],
+  ['products-wrapper', `${LAYOUT.flex.wrap} ${COLORS.bgWhite} mb-4 w-full mb-auto md:(pl-4 px-2 -mt-3)`],
+  ['product-list', 'sm:block products-wrapper'],
+  ['products-grid', `${LAYOUT.flex.alignCenter} w-full flex-nowrap pr-4 md:grid grid-rows-1 overflow-hidden ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 max-h-[6rem]`],
+  ['similar-products', `${LAYOUT.flex.center} space-y-4 gap-8 flex-wrap px-4 md:grid ${LAYOUT.grid.cols2} lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5`],
+  ['similar-section', `${COLORS.bgWhite} w-full drop-shadow-xl`],
+  ['search-container', 'mb-2 sm:mb-0'],
+
+  // Category Menu
+  ['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-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
+  ['sidebar-title', `font-headregular text-accent-light text-xl md:(text-2xl px-4) mb-2 px-14 sm:px-3 ${LAYOUT.flex.center} sm:justify-start py-3`],
+  ['subcat', 'text-3.75 block cursor-pointer text-blue-darker hover:(text-accent-default underline) md:mb-1 py-2 md:py-0'],
+  ['subsubcat', 'pl-2'],
+
+  // 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`],
+
+  // Image Shortcuts
+  ...imageShortcuts,
+  ['img--small', `h-full w-60 sm:(w-22) xl:(w-30) ${IMAGE_STYLES.base}`],
+  ['img--medium', `h-full w-60 ${IMAGE_STYLES.base}`],
+
+  // Utility Classes
+  ['close-light', 'before:bg-white after:bg-white'],
+  ['close-dark', 'before:bg-black after:bg-black'],
+  ['colon-after', 'after:content-[":"]'],
+  ['adsbygoogle', 'w-full text-center'],
+  ['underline-on-hover', `${LAYOUT.position.relative} ${LAYOUT.flex.base} w-full ${COLORS.bgWhite} pb-1 after:absolute after:w-[calc(100%-1rem)] after:left-0 after:h-px after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100`],
+  ['cat-link', `cursor-pointer text-accent-deepBlue ${COLORS.textNeutralLight} hover:(text-brand-secondary underline) uppercase py-2 md:py-0`],
 ];

package/uno-config/theme/typography.ts

@@ -1,30 +1,30 @@
-// theme/typography.ts
-interface FontFamily {
-    [key: string]: string[];
-  }
-  
-  interface FontSize {
-    [key: string]: string;
-  }
-  
-  interface Typography {
-    fontFamily: FontFamily;
-    fontSize: FontSize;
-  }
-  
-  export const typography: Typography = {
-    fontFamily: {
-      sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
-      novamono: ['Nova Mono'],
-      mono: ['Nova Mono'],
-      headlight: ['vw_headlight', 'system-ui'],
-      headregular: ['vw_headregular'],
-      headbold: ['vw_headbold'],
-      textlight: ['vw_textlight'],
-      textregular: ['vw_textregular'],
-      textbold: ['vw_textbold']
-    },
-    fontSize: {
-      xxs: '.625rem',
-    }
+// theme/typography.ts
+interface FontFamily {
+    [key: string]: string[];
+  }
+  
+  interface FontSize {
+    [key: string]: string;
+  }
+  
+  interface Typography {
+    fontFamily: FontFamily;
+    fontSize: FontSize;
+  }
+  
+  export const typography: Typography = {
+    fontFamily: {
+      sans: ['vw_textregular', 'system-ui', 'ui-sans-serif'],
+      novamono: ['Nova Mono'],
+      mono: ['Nova Mono'],
+      headlight: ['vw_headlight', 'system-ui'],
+      headregular: ['vw_headregular'],
+      headbold: ['vw_headbold'],
+      textlight: ['vw_textlight'],
+      textregular: ['vw_textregular'],
+      textbold: ['vw_textbold']
+    },
+    fontSize: {
+      xxs: '.625rem',
+    }
   };

package/uno.config.ts

@@ -1,3 +1,3 @@
-import { createSdsConfig } from './uno-config';
-
+import { createSdsConfig } from './uno-config';
+
 export default createSdsConfig();

package/src/components/Input.astro

@@ -1,86 +0,0 @@
----
-// Input.astro
-interface Props {
-  id: string;
-  name?: string; 
-  label: string;
-  variant?: 'filled' | 'standard';
-  type?: HTMLInputElement['type'] | 'textarea'; // support textarea
-  value?: string;
-  required?: boolean;
-  rows?: number; // rows for textarea
-  placeholder?: string; 
-  class?: string; // additional classes
-}
-
-const {
-  id,
-  name,
-  label,
-  variant = 'standard',
-  type = 'text',
-  value = '',
-  required = false,
-  rows = 3, 
-  placeholder = " ", //space for "floating label")
-  class: additionalClasses = "", 
-  ...restProps 
-} = Astro.props;
-
-// Common classes for both variants
-const baseInputClasses = "block w-full text-4.5 text-blue-medium border-0 border-b-1 border-neutral-light appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-lightest focus:outline-none focus:ring-0 focus:border-blue-medium peer";
-
-const baseLabelClasses = "absolute text-sm text-slate-medium dark:text-neutral-default transform scale-75 origin-[0] peer-focus:text-blue-medium peer-focus:dark:text-blue-lightest peer-placeholder-shown:scale-100 peer-focus:scale-75 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto transition-all duration-300 ease-in-out";
-
-// Variant specific classes
-const variantClasses = {
-  filled: {
-    wrapper: "relative",
-    input: `${baseInputClasses} rounded-t-lg px-2.5 pb-2.5 pt-5 bg-gray-50 dark:bg-gray-700 ${additionalClasses}`,
-    label: `${baseLabelClasses} -translate-y-4 top-4 z-10 start-2.5 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-4`
-  },
-  standard: {
-    wrapper: "relative z-0",
-    input: `${baseInputClasses} py-2.5 px-0 bg-transparent ${additionalClasses}`,
-    label: `${baseLabelClasses} -translate-y-6 top-3 -z-10 peer-focus:start-0 peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-6`
-  }
-};
-
-const classes = variantClasses[variant];
-
-// Keep border-b-1 for textarea but add resize-none
-const textareaClasses = type === 'textarea' 
-  ? `${classes.input} resize-none` 
-  : classes.input;
----
-
-<div class={classes.wrapper}>
-  {type === 'textarea' ? (
-    <textarea
-      name={name}
-      id={id}
-      rows={rows}
-      required={required}
-      class={textareaClasses}
-      placeholder={placeholder}
-      {...restProps}
-    >{value}</textarea>
-  ) : (
-    <input
-      type={type}
-      name={name}
-      id={id}
-      value={value}
-      required={required}
-      class={classes.input}
-      placeholder={placeholder}
-      {...restProps}
-    />
-  )}
-  <label
-    for={id}
-    class={classes.label}
-  >
-    {label}
-  </label>
-</div>