spoko-design-system 0.2.95 → 0.2.97

package/tsconfig.json

@@ -1,29 +1,29 @@
-{
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
-  "compilerOptions": {
-    "baseUrl": "src",
-
-    // Enable JSON imports.
-    "resolveJsonModule": true,
-    
-    // Enable stricter transpilation for better output.
-    "isolatedModules": true,
-    
-    // Astro will directly run your TypeScript code, no transpilation needed.
-    "noEmit": true,
-
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "jsx": "preserve",
-    "allowJs": true,
-    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
-    "paths": {
-      "@components/*": ["components/*"],
-      "@utils/*": ["utils/*"],
-      "@types/*": ["types/*"]
-    }
-  },
-  "exclude": ["dist", "node_modules"]
+{
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.astro", "src/**/*.d.ts", "*.ts"],
+  "compilerOptions": {
+    "baseUrl": "src",
+
+    // Enable JSON imports.
+    "resolveJsonModule": true,
+    
+    // Enable stricter transpilation for better output.
+    "isolatedModules": true,
+    
+    // Astro will directly run your TypeScript code, no transpilation needed.
+    "noEmit": true,
+
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "preserve",
+    "allowJs": true,
+    "types": ["vite/client", "vitest", "@vue/runtime-dom", "@astrojs/ts", "@astrojs/ts-plugin", "unplugin-vue-macros/macros-global", "unplugin-icons/types/astro"],
+    "paths": {
+      "@components/*": ["components/*"],
+      "@utils/*": ["utils/*"],
+      "@types/*": ["types/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
 }

package/uno-config/index.ts

@@ -1,62 +1,62 @@
-// uno-config/index.ts
-import type { UserConfig, UserShortcuts } from 'unocss'
-import { defineConfig } from 'unocss';
-import {
-  transformerDirectives,
-  transformerVariantGroup,
-  presetAttributify,
-  presetIcons,
-  presetTypography,
-  presetUno,
-  presetWebFonts,
-} from 'unocss';
-
-import { shortcuts } from './theme/shortcuts';
-import { theme } from './theme';
-
-interface CustomConfig extends Partial<UserConfig> {
-  shortcuts?: UserShortcuts;
-  theme?: Partial<typeof theme>;
-}
-
-export function createSdsConfig(customConfig: CustomConfig = {}) {
-  return defineConfig({
-    transformers: [
-      transformerDirectives(),
-      transformerVariantGroup(),
-    ],
-    shortcuts: {
-      ...shortcuts,
-      ...(customConfig.shortcuts || {})
-    },
-    theme: {
-      ...theme,
-      ...(customConfig.theme || {})
-    },
-    safelist: [
-      'md:grid-cols-product'
-    ],
-    presets: [
-      presetUno(),
-      presetAttributify(),
-      presetIcons({
-        scale: 1.2,
-        warn: true,
-        prefix: 'i-',
-        extraProperties: {
-          'display': 'inline-block',
-          'vertical-align': 'middle',
-        },
-      }),
-      presetTypography(),
-      presetWebFonts({
-        provider: 'none',
-        fonts: theme.fontFamily
-      })
-    ],
-    ...customConfig
-  });
-}
-
-export * from './theme';
+// uno-config/index.ts
+import type { UserConfig, UserShortcuts } from 'unocss'
+import { defineConfig } from 'unocss';
+import {
+  transformerDirectives,
+  transformerVariantGroup,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+} from 'unocss';
+
+import { shortcuts } from './theme/shortcuts';
+import { theme } from './theme';
+
+interface CustomConfig extends Partial<UserConfig> {
+  shortcuts?: UserShortcuts;
+  theme?: Partial<typeof theme>;
+}
+
+export function createSdsConfig(customConfig: CustomConfig = {}) {
+  return defineConfig({
+    transformers: [
+      transformerDirectives(),
+      transformerVariantGroup(),
+    ],
+    shortcuts: {
+      ...shortcuts,
+      ...(customConfig.shortcuts || {})
+    },
+    theme: {
+      ...theme,
+      ...(customConfig.theme || {})
+    },
+    safelist: [
+      'md:grid-cols-product'
+    ],
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetIcons({
+        scale: 1.2,
+        warn: true,
+        prefix: 'i-',
+        extraProperties: {
+          'display': 'inline-block',
+          'vertical-align': 'middle',
+        },
+      }),
+      presetTypography(),
+      presetWebFonts({
+        provider: 'none',
+        fonts: theme.fontFamily
+      })
+    ],
+    ...customConfig
+  });
+}
+
+export * from './theme';
 export * from './theme/shortcuts';

package/uno-config/theme/breakpoints.ts

@@ -1,10 +1,10 @@
-// theme/breakpoints.ts
-export const breakpoints = {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-    '3xl': '1920px',
-    '4xl': '2400px',
+// theme/breakpoints.ts
+export const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1920px',
+    '4xl': '2400px',
   };

package/uno-config/theme/colors.ts

@@ -1,67 +1,67 @@
-// theme/colors.ts
-export const colors = {
-    // Brand colors - core identity colors
-    brand: {
-        primary: '#0040c5',    // Main brand color
-        secondary: '#00b0f0',  // Supporting brand color
-    },
-
-    // Primary blues - main blue palette
-    blue: {
-        ultralight: '#dbeafe',
-        lightest: '#3b82f6',   // Lightest shade
-        light: '#0069ff',
-        default: '#005ad7',    // Default/base blue
-        medium: '#02307d',
-        darker: '#001e50',
-        darkest: '#000f28',    // Darkest shade
-        wrc: '#0000c8',        // Special WRC color
-    },
-
-    // Secondary colors - accent palette
-    accent: {
-        lightest: '#00b0f0',
-        light: '#0099da',
-        default: '#0087c1',    // Default accent
-        dark: '#006ea6',
-        darker: '#00437a',
-        deepBlue: '#0c1a32',
-    },
-
-    // Neutral colors - grayscale
-    neutral: {
-        lightest: '#f3f4f6',   // Lightest gray 
-        lighter: '#e5e7eb',
-        light: '#b5bbc5',
-        default: '#9ca3af',    // Base gray
-        dark: '#6a767d',       
-        darker: '#4b5563',
-        black: '#000000',      // Pure black
-    },
-      
-    // Slate colors - gray-blue palette
-    slate: {
-        light: '#64748B',
-        default: '#475569',
-        dark: '#334155',    
-        darkest: '#1e293b',
-    },
-
-    // System colors - functional colors
-    system: {
-        success: '#10B981',    // Green - success state
-        warning: '#FBBF24',    // Yellow - warning state
-        error: '#EF4444',      // Red - error state 
-        info: '#3B82F6',       // Blue - information state
-    },
-
-    // States - interaction states
-    state: {
-        overlay: 'rgb(0 0 0 / 0.06)',    // Overlay & Hover state
-        disabled: 'rgb(0 0 0 / 0.12)',  // Disabled state
-    }
-};
-
-// Export types for TypeScript
-export type Colors = typeof colors;
+// theme/colors.ts
+export const colors = {
+    // Brand colors - core identity colors
+    brand: {
+        primary: '#0040c5',    // Main brand color
+        secondary: '#00b0f0',  // Supporting brand color
+    },
+
+    // Primary blues - main blue palette
+    blue: {
+        ultralight: '#dbeafe',
+        lightest: '#3b82f6',   // Lightest shade
+        light: '#0069ff',
+        default: '#005ad7',    // Default/base blue
+        medium: '#02307d',
+        darker: '#001e50',
+        darkest: '#000f28',    // Darkest shade
+        wrc: '#0000c8',        // Special WRC color
+    },
+
+    // Secondary colors - accent palette
+    accent: {
+        lightest: '#00b0f0',
+        light: '#0099da',
+        default: '#0087c1',    // Default accent
+        dark: '#006ea6',
+        darker: '#00437a',
+        deepBlue: '#0c1a32',
+    },
+
+    // Neutral colors - grayscale
+    neutral: {
+        lightest: '#f3f4f6',   // Lightest gray 
+        lighter: '#e5e7eb',
+        light: '#b5bbc5',
+        default: '#9ca3af',    // Base gray
+        dark: '#6a767d',       
+        darker: '#4b5563',
+        black: '#000000',      // Pure black
+    },
+      
+    // Slate colors - gray-blue palette
+    slate: {
+        light: '#64748B',
+        default: '#475569',
+        dark: '#334155',    
+        darkest: '#1e293b',
+    },
+
+    // System colors - functional colors
+    system: {
+        success: '#10B981',    // Green - success state
+        warning: '#FBBF24',    // Yellow - warning state
+        error: '#EF4444',      // Red - error state 
+        info: '#3B82F6',       // Blue - information state
+    },
+
+    // States - interaction states
+    state: {
+        overlay: 'rgb(0 0 0 / 0.06)',    // Overlay & Hover state
+        disabled: 'rgb(0 0 0 / 0.12)',  // Disabled state
+    }
+};
+
+// Export types for TypeScript
+export type Colors = typeof colors;
 export type ColorShade = keyof typeof colors;

package/uno-config/theme/dimensions.ts

@@ -1,18 +1,18 @@
-// theme/dimensions.ts
-export const dimensions = {
-    height: {
-      'tile': '104px',
-      'tile-mobile': '78px',
-      'sidebar': 'calc(100vh - 5.125rem)',
-      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
-      'icon': '46px',
-    },
-    maxHeight: {
-      'icon': '46px',
-      'sidebar': 'calc(100vh - 5.125rem)',
-    },
-    minHeight: {
-      'tile': '104px',
-      'tile-mobile': '78px',
-    }
+// theme/dimensions.ts
+export const dimensions = {
+    height: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+      'full-mobile': 'calc(var(--vh, 1vh) * 100)',
+      'icon': '46px',
+    },
+    maxHeight: {
+      'icon': '46px',
+      'sidebar': 'calc(100vh - 5.125rem)',
+    },
+    minHeight: {
+      'tile': '104px',
+      'tile-mobile': '78px',
+    }
   };

package/uno-config/theme/effects.ts

@@ -1,15 +1,15 @@
-// theme/effects.ts
-export const effects = {
-    filter: {
-      blur: 'blur(5px)',
-    },
-    backgroundSize: {
-      full: '100% 100%',
-    },
-    aspectRatio: {
-      '4/3': '4 / 3',
-    },
-    cursor: {
-      'zoom-in': 'zoom-in',
-    },
+// theme/effects.ts
+export const effects = {
+    filter: {
+      blur: 'blur(5px)',
+    },
+    backgroundSize: {
+      full: '100% 100%',
+    },
+    aspectRatio: {
+      '4/3': '4 / 3',
+    },
+    cursor: {
+      'zoom-in': 'zoom-in',
+    },
   };

package/uno-config/theme/grid.ts

@@ -1,11 +1,11 @@
-// theme/grid.ts
-export const gridTemplates = {
-    columns: {
-      16: 'repeat(16, minmax(0, 1fr))',
-      product: '15rem 20rem minmax(15rem, 1fr)',
-      productGrid: '15rem minmax(20rem, 1fr)',
-      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
-      replacement: '6.25rem 12rem auto',
-      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
-    }
+// theme/grid.ts
+export const gridTemplates = {
+    columns: {
+      16: 'repeat(16, minmax(0, 1fr))',
+      product: '15rem 20rem minmax(15rem, 1fr)',
+      productGrid: '15rem minmax(20rem, 1fr)',
+      productGalleryDesktop: 'calc(100% - 14% - 0.9375rem) 14%',
+      replacement: '6.25rem 12rem auto',
+      'details-desktop': '12.5rem calc(100% - 12.5rem - 1rem)'
+    }
   };

package/uno-config/theme/index.ts

@@ -1,26 +1,26 @@
-// uno-config/theme/index.ts
-import { colors } from './colors';
-import { typography } from './typography';
-import { breakpoints } from './breakpoints';
-import { dimensions } from './dimensions';
-import { effects } from './effects';
-import { gridTemplates } from './grid';
-
-export const theme = {
-  colors,
-  ...typography,
-  ...dimensions,
-  ...effects,
-  gridTemplateColumn: gridTemplates.columns, 
-  breakpoints,
-  screens: breakpoints,
-};
-
-export {
-  colors,
-  typography,
-  breakpoints,
-  dimensions,
-  effects,
-  gridTemplates,
+// uno-config/theme/index.ts
+import { colors } from './colors';
+import { typography } from './typography';
+import { breakpoints } from './breakpoints';
+import { dimensions } from './dimensions';
+import { effects } from './effects';
+import { gridTemplates } from './grid';
+
+export const theme = {
+  colors,
+  ...typography,
+  ...dimensions,
+  ...effects,
+  gridTemplateColumn: gridTemplates.columns, 
+  breakpoints,
+  screens: breakpoints,
+};
+
+export {
+  colors,
+  typography,
+  breakpoints,
+  dimensions,
+  effects,
+  gridTemplates,
 };

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

@@ -1,39 +1,42 @@
-// shortcuts/buttons.ts
-export const buttonShortcuts = [
-
-    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
-    ['icon-btn', 'text-[0.9em] inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:(opacity-100 text-teal-600)'],
-
-    // Primary buttons
-    ['btn-primary', 'bg-accent-lightest border border-transparent hover:bg-accent-light inline-flex items-center justify-center shadow text-base text-blue-darker'],
-    ['btn-primary-outline', 'border-accent-light border font-medium inline-flex items-center justify-center shadow text-base text-accent-default transition-all hover:(bg-accent-light text-white)'],
-    
-    // Secondary buttons
-    ['btn-secondary', 'bg-neutral-dark border border-transparent hover:bg-neutral-darker inline-flex items-center justify-center shadow text-base text-white'],
-    ['btn-secondary-outline', 'border-neutral-dark border text-neutral-dark font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-neutral-dark)'],
-    
-    // Tertiary buttons
-    ['btn-tertiary', 'inline-flex border border-transparent items-center font-medium text-center text-white bg-blue-darker hover:bg-accent-darker focus:ring-4 focus:outline-none focus:ring-blue-light'],
-    ['btn-tertiary-outline', 'inline-flex border items-center font-medium text-center text-blue-darker border-blue-darker transition-colors focus:(ring-2 outline-none ring-blue-light)'],
-    
-    // Utility buttons
-    ['btn-text', 'text-neutral-dark border border-transparent hover:underline transition-all'],
-    ['btn-tag', 'bg-blue-ultralight text-blue-darker font-medium mr-2 dark:bg-neutral-darker dark:text-blue-light border border-blue-default hover:border-blue-medium justify-center'],
-    
-    // Size variants
-    ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
-    ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap'],
-    ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap'],
-
-    // Hover variants
-    ['btn-white-hover', 'hover:(text-blue-darker bg-white border-blue-darker)'],
-    ['btn-light-hover', 'hover:(text-blue-darker bg-accent-lightest border-accent-lightest)'],
-    ['btn-medium-hover', 'hover:(text-white bg-brand-primary border-brand-primary)'],
-    ['btn-dark-hover', 'hover:(bg-blue-darker text-white border-blue-darker)'],
-
-    ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
-    ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
-
-    ['btn-prcode', 'relative inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-700 absolute w-4 pl-0.5)']
-    
+// shortcuts/buttons.ts
+import { BUTTON_STYLES, TRANSITIONS } from './constants'
+
+const { base, sizes, variants, hover } = BUTTON_STYLES
+
+export const buttonShortcuts = [
+    // Base buttons
+    ['btn', `px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:(cursor-default bg-gray-600 opacity-50)`],
+    ['icon-btn', `text-[0.9em] inline-block cursor-pointer select-none opacity-75 ${TRANSITIONS.base} hover:(opacity-100 text-teal-600)`],
+
+    // Primary buttons
+    ['btn-primary', `${base.layout} ${base.text} ${variants.primary.solid}`],
+    ['btn-primary-outline', `${base.layout} ${base.text} ${variants.primary.outline} ${base.transition}`],
+    
+    // Secondary buttons
+    ['btn-secondary', `${base.layout} ${base.text} ${variants.secondary.solid}`],
+    ['btn-secondary-outline', `${base.layout} ${base.text} ${variants.secondary.outline}`],
+    
+    // Tertiary buttons
+    ['btn-tertiary', `${base.layout} ${base.text} ${variants.tertiary.solid}`],
+    ['btn-tertiary-outline', `${base.layout} border ${base.text} ${variants.tertiary.outline} ${base.transition}`],
+    
+    // Utility buttons
+    ['btn-text', 'text-neutral-dark border border-transparent hover:underline transition-all'],
+    ['btn-tag', 'bg-blue-ultralight text-blue-darker font-medium mr-2 dark:bg-neutral-darker dark:text-blue-light border border-blue-default hover:border-blue-medium justify-center'],
+    
+    // Size variants
+    ['btn-normal', sizes.normal],
+    ['btn-sm', sizes.sm],
+    ['btn-xs', sizes.xs],
+
+    // Hover variants
+    ['btn-white-hover', hover.white],
+    ['btn-light-hover', hover.light],
+    ['btn-medium-hover', hover.medium],
+    ['btn-dark-hover', hover.dark],
+
+    // Special buttons
+    ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
+    ['btn-copy-text', 'shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
+    ['btn-prcode', 'relative inline-block text-center leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 not-last:mr-2 not-last:after:content-[+] after:(text-blue-700 absolute w-4 pl-0.5)']
 ];