@altrex-ui/styling 1.0.2 → 1.0.3

package/dist/tokens.css

@@ -137,4 +137,16 @@
   --altrex-breakpoints-lg: 1024px;
   --altrex-breakpoints-xl: 1280px;
   --altrex-breakpoints-2xl: 1536px;
+  --altrex-touchTarget-minimum: 44px;
+  --altrex-touchTarget-comfortable: 48px;
+  --altrex-touchTarget-spacious: 56px;
+  --altrex-fluidSpacing-xs: clamp(0.25rem, 1vw, 0.5rem);
+  --altrex-fluidSpacing-sm: clamp(0.5rem, 2vw, 1rem);
+  --altrex-fluidSpacing-md: clamp(1rem, 3vw, 2rem);
+  --altrex-fluidSpacing-lg: clamp(1.5rem, 4vw, 3rem);
+  --altrex-fluidSpacing-xl: clamp(2rem, 6vw, 4rem);
+  --altrex-fluidTypography-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
+  --altrex-fluidTypography-h1: clamp(2rem, 1.5rem + 2.5vw, 3rem);
+  --altrex-fluidTypography-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
+  --altrex-fluidTypography-h3: clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);
 }

package/dist/tokens.d.ts

@@ -12,6 +12,9 @@ export const tokens: {
   borderRadius: Record<string, string>;
   shadow: Record<string, string>;
   breakpoints: Record<string, string>;
+  touchTarget: Record<string, string>;
+  fluidSpacing: Record<string, string>;
+  fluidTypography: Record<string, string>;
 };
 
 export const flatTokens: Record<string, string>;

package/dist/tokens.js

@@ -186,6 +186,24 @@ export const tokens = {
     "lg": "1024px",
     "xl": "1280px",
     "2xl": "1536px"
+  },
+  "touchTarget": {
+    "minimum": "44px",
+    "comfortable": "48px",
+    "spacious": "56px"
+  },
+  "fluidSpacing": {
+    "xs": "clamp(0.25rem, 1vw, 0.5rem)",
+    "sm": "clamp(0.5rem, 2vw, 1rem)",
+    "md": "clamp(1rem, 3vw, 2rem)",
+    "lg": "clamp(1.5rem, 4vw, 3rem)",
+    "xl": "clamp(2rem, 6vw, 4rem)"
+  },
+  "fluidTypography": {
+    "body": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
+    "h1": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+    "h2": "clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)",
+    "h3": "clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem)"
   }
 };
 
@@ -322,7 +340,19 @@ export const flatTokens = {
   "breakpoints.md": "768px",
   "breakpoints.lg": "1024px",
   "breakpoints.xl": "1280px",
-  "breakpoints.2xl": "1536px"
+  "breakpoints.2xl": "1536px",
+  "touchTarget.minimum": "44px",
+  "touchTarget.comfortable": "48px",
+  "touchTarget.spacious": "56px",
+  "fluidSpacing.xs": "clamp(0.25rem, 1vw, 0.5rem)",
+  "fluidSpacing.sm": "clamp(0.5rem, 2vw, 1rem)",
+  "fluidSpacing.md": "clamp(1rem, 3vw, 2rem)",
+  "fluidSpacing.lg": "clamp(1.5rem, 4vw, 3rem)",
+  "fluidSpacing.xl": "clamp(2rem, 6vw, 4rem)",
+  "fluidTypography.body": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
+  "fluidTypography.h1": "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+  "fluidTypography.h2": "clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)",
+  "fluidTypography.h3": "clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem)"
 };
 
 export const cssVarNames = {
@@ -458,5 +488,17 @@ export const cssVarNames = {
   "breakpoints.md": "--altrex-breakpoints-md",
   "breakpoints.lg": "--altrex-breakpoints-lg",
   "breakpoints.xl": "--altrex-breakpoints-xl",
-  "breakpoints.2xl": "--altrex-breakpoints-2xl"
+  "breakpoints.2xl": "--altrex-breakpoints-2xl",
+  "touchTarget.minimum": "--altrex-touchTarget-minimum",
+  "touchTarget.comfortable": "--altrex-touchTarget-comfortable",
+  "touchTarget.spacious": "--altrex-touchTarget-spacious",
+  "fluidSpacing.xs": "--altrex-fluidSpacing-xs",
+  "fluidSpacing.sm": "--altrex-fluidSpacing-sm",
+  "fluidSpacing.md": "--altrex-fluidSpacing-md",
+  "fluidSpacing.lg": "--altrex-fluidSpacing-lg",
+  "fluidSpacing.xl": "--altrex-fluidSpacing-xl",
+  "fluidTypography.body": "--altrex-fluidTypography-body",
+  "fluidTypography.h1": "--altrex-fluidTypography-h1",
+  "fluidTypography.h2": "--altrex-fluidTypography-h2",
+  "fluidTypography.h3": "--altrex-fluidTypography-h3"
 };

package/dist/tokens.styl

@@ -136,6 +136,18 @@ $altrex-breakpoints-md = 768px
 $altrex-breakpoints-lg = 1024px
 $altrex-breakpoints-xl = 1280px
 $altrex-breakpoints-2xl = 1536px
+$altrex-touchTarget-minimum = 44px
+$altrex-touchTarget-comfortable = 48px
+$altrex-touchTarget-spacious = 56px
+$altrex-fluidSpacing-xs = clamp(0.25rem, 1vw, 0.5rem)
+$altrex-fluidSpacing-sm = clamp(0.5rem, 2vw, 1rem)
+$altrex-fluidSpacing-md = clamp(1rem, 3vw, 2rem)
+$altrex-fluidSpacing-lg = clamp(1.5rem, 4vw, 3rem)
+$altrex-fluidSpacing-xl = clamp(2rem, 6vw, 4rem)
+$altrex-fluidTypography-body = clamp(1rem, 0.95rem + 0.25vw, 1.125rem)
+$altrex-fluidTypography-h1 = clamp(2rem, 1.5rem + 2.5vw, 3rem)
+$altrex-fluidTypography-h2 = clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem)
+$altrex-fluidTypography-h3 = clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem)
 
 // Component-specific tokens
 $altrex-border-radius-button-default = $altrex-borderRadius-default
@@ -170,3 +182,48 @@ altrex-icon-xl()
 altrex-icon-xxl()
   height: 64px
   width: 64px
+
+// Mobile-first breakpoint mixin
+// Usage: +above('md') { /* styles */ }
+above(breakpoint)
+  @media (min-width: lookup('$altrex-breakpoints-' + breakpoint))
+    {block}
+
+// Touch-first interaction detection
+// Usage: +touch-device() { /* styles */ }
+touch-device()
+  @media (hover: none) and (pointer: coarse)
+    {block}
+
+// Touch target sizing (WCAG 2.1 Level AAA)
+// Usage: touch-target() or touch-target('comfortable')
+touch-target(size = 'minimum')
+  min-width: lookup('$altrex-touchTarget-' + size)
+  min-height: lookup('$altrex-touchTarget-' + size)
+  display: inline-flex
+  align-items: center
+  justify-content: center
+
+// Container with mobile padding
+// Usage: container-width() or container-width($altrex-breakpoints-lg)
+container-width(max-width = '100%')
+  width: 100%
+  max-width: max-width
+  margin-left: auto
+  margin-right: auto
+  padding-left: $altrex-spacing-4
+  padding-right: $altrex-spacing-4
+
+  +above('md')
+    padding-left: $altrex-spacing-6
+    padding-right: $altrex-spacing-6
+
+// Stack to row pattern
+// Usage: stack-to-row() or stack-to-row('lg')
+stack-to-row(breakpoint = 'md')
+  display: flex
+  flex-direction: column
+  gap: $altrex-spacing-4
+
+  +above(breakpoint)
+    flex-direction: row

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altrex-ui/styling",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Core design tokens for the Altrex design system",
   "main": "dist/index.js",
   "exports": {