@vectoriox/iox-ui 5.43.0 → 5.45.0

package/src/design-core/flavor-spec.generated.ts

@@ -1429,6 +1429,208 @@ export const SPEC_AXES = {
         "inverse-line": 0.03
       }
     }
+  },
+  "scrolls": {
+    "normal": {
+      "label": "Normal",
+      "he": "רגילה",
+      "hint": "The browser's own scrolling.",
+      "lenis": null
+    },
+    "smooth": {
+      "label": "Smooth",
+      "he": "חלקה",
+      "hint": "A short glide after each wheel turn — what every IOX site does today.",
+      "lenis": {
+        "duration": 1.2,
+        "easing": "expo-out",
+        "wheelMultiplier": 1,
+        "syncTouch": false
+      }
+    },
+    "extra": {
+      "label": "Extra smooth",
+      "he": "חלקה מאוד",
+      "hint": "A longer, softer glide; each wheel turn moves a little less.",
+      "lenis": {
+        "duration": 1.8,
+        "easing": "expo-out",
+        "wheelMultiplier": 0.9,
+        "syncTouch": false
+      }
+    }
+  },
+  "animations": {
+    "still": {
+      "label": "Still",
+      "he": "ללא",
+      "hint": "Nothing moves in as you scroll. Buttons and cards still respond to the pointer (Speed).",
+      "parts": {}
+    },
+    "subtle": {
+      "label": "Subtle",
+      "he": "עדינה",
+      "hint": "Each section's content fades in once, together.",
+      "parts": {
+        "content": {
+          "type": "fadeIn",
+          "duration": 500
+        }
+      }
+    },
+    "standard": {
+      "label": "Standard",
+      "he": "רגילה",
+      "hint": "Headings rise in; cards, prices and steps follow one after another.",
+      "parts": {
+        "heading": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 500
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 16,
+          "duration": 450,
+          "stagger": 80,
+          "cap": 6
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 600
+        }
+      }
+    },
+    "lively": {
+      "label": "Lively",
+      "he": "תוססת",
+      "hint": "Bigger, longer entrances; side-by-side rows slide in from their side; the hero's words fade in.",
+      "parts": {
+        "heroText": {
+          "type": "fadeIn",
+          "duration": 400
+        },
+        "heading": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600
+        },
+        "items": {
+          "type": "moveUp",
+          "distance": 24,
+          "duration": 600,
+          "stagger": 100,
+          "cap": 8
+        },
+        "media": {
+          "type": "fadeIn",
+          "duration": 700
+        },
+        "rowMedia": {
+          "type": "moveLeft",
+          "mirror": "moveRight",
+          "distance": 24,
+          "duration": 600
+        }
+      }
+    }
+  },
+  "animationFamilies": {
+    "nav": [],
+    "footer": [],
+    "hero": [
+      "heroText"
+    ],
+    "header": [
+      "heading"
+    ],
+    "detail": [
+      "heading",
+      "media"
+    ],
+    "proof": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "feature": [
+      "content",
+      "heading",
+      "items",
+      "media",
+      "rowMedia"
+    ],
+    "collection": [
+      "content",
+      "heading",
+      "items"
+    ],
+    "story": [
+      "content",
+      "heading",
+      "media"
+    ],
+    "cta": [
+      "content",
+      "heading"
+    ],
+    "contact": [
+      "content",
+      "heading"
+    ],
+    "faq": [
+      "content",
+      "heading"
+    ],
+    "pricing": [
+      "content",
+      "heading",
+      "items"
+    ]
+  },
+  "betweens": {
+    "none": {
+      "label": "None",
+      "he": "ללא",
+      "hint": "The next page simply appears.",
+      "transition": "none"
+    },
+    "fade": {
+      "label": "Fade",
+      "he": "דהייה",
+      "hint": "The page fades into the next.",
+      "transition": "fade",
+      "feel": "snappy"
+    },
+    "slide": {
+      "label": "Slide",
+      "he": "החלקה",
+      "hint": "The next page pushes this one aside (from the left on a Hebrew site). On phones: Fade.",
+      "transition": "move-left",
+      "rtl": "move-right",
+      "feel": "smooth",
+      "phone": "fade"
+    },
+    "cinematic": {
+      "label": "Cinematic",
+      "he": "קולנועית",
+      "hint": "This page sinks back while the next rises over it. On phones: Fade.",
+      "transition": "parallax-up",
+      "feel": "cinematic",
+      "phone": "fade"
+    }
+  },
+  "motionChoices": {
+    "pre": {
+      "scroll": "smooth",
+      "animate": "still",
+      "between": "cinematic"
+    },
+    "reduced": {
+      "scroll": "normal",
+      "animate": "still",
+      "between": "none"
+    }
   }
 } as const;
 
@@ -1443,6 +1645,775 @@ export const SPEC_SPRINGS = {
   }
 } as const;
 
+export const SPEC_MOODS = {
+  "calm": "Calm",
+  "warm": "Warm",
+  "natural": "Natural",
+  "elegant": "Elegant",
+  "luxurious": "Luxurious",
+  "minimal": "Minimal",
+  "professional": "Professional",
+  "trustworthy": "Trustworthy",
+  "friendly": "Friendly",
+  "playful": "Playful",
+  "bold": "Bold",
+  "energetic": "Energetic",
+  "dark": "Dark",
+  "editorial": "Editorial",
+  "technical": "Technical",
+  "romantic": "Romantic",
+  "crafted": "Hand-made"
+} as const;
+
+export const SPEC_STYLE_PRESETS = [
+  {
+    "id": "clear-care",
+    "name": "Clear care",
+    "flavorId": "crisp",
+    "seed": "#0E7490",
+    "tint": "subtle",
+    "pairId": "manrope",
+    "shape": "soft",
+    "density": "regular",
+    "motion": "standard",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "standard",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "trustworthy",
+      "calm",
+      "professional"
+    ],
+    "uupm": [
+      "Accessible & Ethical",
+      "Minimalism & Swiss Style"
+    ],
+    "blurb": "Clean, light and easy to read. Says \"you are in good hands\".",
+    "slice": true
+  },
+  {
+    "id": "swiss-grid",
+    "name": "Swiss grid",
+    "flavorId": "crisp",
+    "seed": "#111827",
+    "tint": "neutral",
+    "pairId": "inter-tight",
+    "shape": "sharp",
+    "density": "compact",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "none"
+    },
+    "modes": [
+      "light",
+      "dark"
+    ],
+    "moods": [
+      "minimal",
+      "professional",
+      "technical"
+    ],
+    "uupm": [
+      "Minimalism & Swiss Style",
+      "Swiss Modernism 2.0"
+    ],
+    "blurb": "Black on white, a strict grid, nothing extra.",
+    "slice": true
+  },
+  {
+    "id": "trusted-advisor",
+    "name": "Trusted advisor",
+    "flavorId": "crisp",
+    "seed": "#1E3A8A",
+    "tint": "subtle",
+    "pairId": "plex",
+    "shape": "subtle",
+    "density": "regular",
+    "motion": "standard",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "trustworthy",
+      "professional"
+    ],
+    "uupm": [
+      "Accessible & Ethical",
+      "Trust & Authority (landing)"
+    ],
+    "blurb": "Navy, plain type, firm edges. Serious without being cold.",
+    "slice": true
+  },
+  {
+    "id": "fresh-practice",
+    "name": "Fresh practice",
+    "flavorId": "crisp",
+    "seed": "#0284C7",
+    "tint": "rich",
+    "pairId": "inter-tight",
+    "shape": "round",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "subtle",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "friendly",
+      "calm",
+      "trustworthy"
+    ],
+    "uupm": [
+      "Soft UI Evolution",
+      "Accessible & Ethical"
+    ],
+    "blurb": "Bright, soft and reassuring, with rounded buttons.",
+    "slice": false
+  },
+  {
+    "id": "gallery-minimal",
+    "name": "Gallery minimal",
+    "flavorId": "linen",
+    "seed": "#3F4A5A",
+    "tint": "neutral",
+    "pairId": "instrument",
+    "shape": "sharp",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "extra",
+      "animate": "subtle",
+      "between": "fade"
+    },
+    "modes": [
+      "light",
+      "dark"
+    ],
+    "moods": [
+      "minimal",
+      "elegant",
+      "editorial"
+    ],
+    "uupm": [
+      "Exaggerated Minimalism",
+      "Editorial Grid / Magazine"
+    ],
+    "blurb": "White walls and a quiet serif. The work does the talking.",
+    "slice": true
+  },
+  {
+    "id": "warm-editorial",
+    "name": "Warm editorial",
+    "flavorId": "linen",
+    "seed": "#9A4F2B",
+    "tint": "subtle",
+    "pairId": "fraunces",
+    "shape": "sharp",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "subtle",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "warm",
+      "editorial",
+      "crafted"
+    ],
+    "uupm": [
+      "Editorial Grid / Magazine",
+      "Nature Distilled"
+    ],
+    "blurb": "Cream paper, terracotta and a soft serif, like a good magazine.",
+    "slice": true
+  },
+  {
+    "id": "soft-spa",
+    "name": "Soft spa",
+    "flavorId": "linen",
+    "seed": "#7D4E5E",
+    "tint": "rich",
+    "pairId": "cormorant",
+    "shape": "soft",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "extra",
+      "animate": "subtle",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "calm",
+      "elegant",
+      "natural"
+    ],
+    "uupm": [
+      "Soft UI Evolution",
+      "Nature Distilled"
+    ],
+    "blurb": "Rose-tinted cream, a fine serif and slow, gentle motion.",
+    "slice": true
+  },
+  {
+    "id": "quiet-luxury",
+    "name": "Quiet luxury",
+    "flavorId": "linen",
+    "seed": "#7A5B36",
+    "tint": "subtle",
+    "pairId": "cormorant",
+    "shape": "sharp",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "extra",
+      "animate": "subtle",
+      "between": "cinematic"
+    },
+    "modes": [
+      "light",
+      "dark"
+    ],
+    "moods": [
+      "luxurious",
+      "elegant",
+      "calm"
+    ],
+    "uupm": [
+      "Exaggerated Minimalism",
+      "Liquid Glass (luxury rows, without the glass)"
+    ],
+    "blurb": "Bronze on warm white. Expensive, never loud.",
+    "slice": false
+  },
+  {
+    "id": "after-dark",
+    "name": "After dark",
+    "flavorId": "midnight",
+    "seed": "#DB2777",
+    "tint": "subtle",
+    "pairId": "grotesk",
+    "shape": "soft",
+    "density": "regular",
+    "motion": "lively",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "dark"
+    ],
+    "moods": [
+      "bold",
+      "energetic",
+      "dark"
+    ],
+    "uupm": [
+      "Dark Mode (OLED)",
+      "Vibrant & Block-based"
+    ],
+    "blurb": "A night out: dark rooms, one bright colour, lively motion.",
+    "slice": false
+  },
+  {
+    "id": "ink-studio",
+    "name": "Ink studio",
+    "flavorId": "midnight",
+    "seed": "#EA580C",
+    "tint": "neutral",
+    "pairId": "inter-tight",
+    "shape": "sharp",
+    "density": "compact",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "slide"
+    },
+    "modes": [
+      "dark"
+    ],
+    "moods": [
+      "bold",
+      "dark",
+      "crafted"
+    ],
+    "uupm": [
+      "Dark Mode (OLED)",
+      "Brutalism"
+    ],
+    "blurb": "Black, sharp and orange. A shop with attitude.",
+    "slice": false
+  },
+  {
+    "id": "night-gallery",
+    "name": "Night gallery",
+    "flavorId": "midnight",
+    "seed": "#8B9BB4",
+    "tint": "neutral",
+    "pairId": "geist",
+    "shape": "sharp",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "extra",
+      "animate": "subtle",
+      "between": "cinematic"
+    },
+    "modes": [
+      "dark",
+      "light"
+    ],
+    "moods": [
+      "minimal",
+      "dark",
+      "editorial"
+    ],
+    "uupm": [
+      "Dark Mode (OLED)",
+      "Minimalism & Swiss Style"
+    ],
+    "blurb": "Pictures on black, like a darkened gallery.",
+    "slice": true
+  },
+  {
+    "id": "tech-studio",
+    "name": "Tech studio",
+    "flavorId": "midnight",
+    "seed": "#059669",
+    "tint": "subtle",
+    "pairId": "geist",
+    "shape": "soft",
+    "density": "regular",
+    "motion": "standard",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "fade"
+    },
+    "modes": [
+      "dark",
+      "light"
+    ],
+    "moods": [
+      "technical",
+      "bold",
+      "professional"
+    ],
+    "uupm": [
+      "Dark Mode (OLED)",
+      "Minimalism & Swiss Style"
+    ],
+    "blurb": "Dark, precise and modern, for people who build things.",
+    "slice": false
+  },
+  {
+    "id": "morning-glass",
+    "name": "Morning glass",
+    "flavorId": "glass",
+    "seed": "#0E8A89",
+    "tint": "subtle",
+    "pairId": "figtree",
+    "shape": "round",
+    "density": "regular",
+    "motion": "calm",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "subtle",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "calm",
+      "friendly",
+      "natural"
+    ],
+    "uupm": [
+      "Glassmorphism",
+      "Soft UI Evolution"
+    ],
+    "blurb": "Frosted panels over a soft teal light. Fresh and calm.",
+    "slice": true
+  },
+  {
+    "id": "holiday-light",
+    "name": "Holiday light",
+    "flavorId": "glass",
+    "seed": "#0A66E8",
+    "tint": "rich",
+    "pairId": "jakarta",
+    "shape": "round",
+    "density": "regular",
+    "motion": "lively",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "friendly",
+      "energetic"
+    ],
+    "uupm": [
+      "Liquid Glass",
+      "Glassmorphism"
+    ],
+    "blurb": "Sea-blue glass and big photos. Makes people want to go.",
+    "slice": false
+  },
+  {
+    "id": "frosted-portfolio",
+    "name": "Frosted portfolio",
+    "flavorId": "glass",
+    "seed": "#1F2937",
+    "tint": "neutral",
+    "pairId": "manrope",
+    "shape": "round",
+    "density": "airy",
+    "motion": "calm",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "extra",
+      "animate": "subtle",
+      "between": "cinematic"
+    },
+    "modes": [
+      "light",
+      "dark"
+    ],
+    "moods": [
+      "minimal",
+      "elegant"
+    ],
+    "uupm": [
+      "Glassmorphism",
+      "Spatial UI (VisionOS)"
+    ],
+    "blurb": "Grey glass and lots of space around your pictures.",
+    "slice": true
+  },
+  {
+    "id": "coral-studio",
+    "name": "Coral studio",
+    "flavorId": "glass",
+    "seed": "#E5484D",
+    "tint": "subtle",
+    "pairId": "figtree",
+    "shape": "round",
+    "density": "regular",
+    "motion": "lively",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "energetic",
+      "friendly"
+    ],
+    "uupm": [
+      "Glassmorphism",
+      "Vibrant & Block-based"
+    ],
+    "blurb": "Warm coral and bouncy buttons. Full of energy.",
+    "slice": false
+  },
+  {
+    "id": "corner-cafe",
+    "name": "Corner café",
+    "flavorId": "bloom",
+    "seed": "#9C4146",
+    "tint": "subtle",
+    "pairId": "bricolage",
+    "shape": "bubbly",
+    "density": "regular",
+    "motion": "lively",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "warm",
+      "friendly",
+      "playful"
+    ],
+    "uupm": [
+      "Vibrant & Block-based",
+      "Soft UI Evolution"
+    ],
+    "blurb": "Berry red, round shapes, a cheerful headline face.",
+    "slice": true
+  },
+  {
+    "id": "kind-community",
+    "name": "Kind community",
+    "flavorId": "bloom",
+    "seed": "#3B6939",
+    "tint": "subtle",
+    "pairId": "nunito",
+    "shape": "bubbly",
+    "density": "regular",
+    "motion": "standard",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "friendly",
+      "natural",
+      "trustworthy"
+    ],
+    "uupm": [
+      "Accessible & Ethical",
+      "Organic Biophilic"
+    ],
+    "blurb": "Leaf green and soft, open shapes. Welcoming to everyone.",
+    "slice": false
+  },
+  {
+    "id": "little-ones",
+    "name": "Little ones",
+    "flavorId": "bloom",
+    "seed": "#006A6A",
+    "tint": "rich",
+    "pairId": "sans-flex",
+    "shape": "bubbly",
+    "density": "regular",
+    "motion": "lively",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "normal",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "playful",
+      "friendly"
+    ],
+    "uupm": [
+      "Claymorphism",
+      "Vibrant & Block-based"
+    ],
+    "blurb": "Teal, chunky and playful. Made for families.",
+    "slice": false
+  },
+  {
+    "id": "garden-party",
+    "name": "Garden party",
+    "flavorId": "bloom",
+    "seed": "#7D5260",
+    "tint": "subtle",
+    "pairId": "bricolage",
+    "shape": "bubbly",
+    "density": "airy",
+    "motion": "standard",
+    "pillButtons": true,
+    "moves": {
+      "scroll": "smooth",
+      "animate": "standard",
+      "between": "fade"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "romantic",
+      "warm",
+      "friendly"
+    ],
+    "uupm": [
+      "Soft UI Evolution",
+      "Organic Biophilic"
+    ],
+    "blurb": "Dusty rose and soft lavender light. A celebration.",
+    "slice": true
+  },
+  {
+    "id": "bold-maker",
+    "name": "Bold maker",
+    "flavorId": "pop",
+    "seed": "#FF5C39",
+    "tint": "subtle",
+    "pairId": "grotesk",
+    "shape": "subtle",
+    "density": "compact",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "bold",
+      "playful",
+      "crafted"
+    ],
+    "uupm": [
+      "Neubrutalism",
+      "Vibrant & Block-based"
+    ],
+    "blurb": "Thick outlines and orange. Proud of what you make.",
+    "slice": true
+  },
+  {
+    "id": "festival",
+    "name": "Festival",
+    "flavorId": "pop",
+    "seed": "#FF4FA3",
+    "tint": "subtle",
+    "pairId": "archivo",
+    "shape": "subtle",
+    "density": "compact",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "lively",
+      "between": "slide"
+    },
+    "modes": [
+      "light",
+      "dark"
+    ],
+    "moods": [
+      "energetic",
+      "bold",
+      "playful"
+    ],
+    "uupm": [
+      "Memphis Design",
+      "Vibrant & Block-based"
+    ],
+    "blurb": "Pink, heavy type, poster energy.",
+    "slice": false
+  },
+  {
+    "id": "zine",
+    "name": "Zine",
+    "flavorId": "pop",
+    "seed": "#3D5AFE",
+    "tint": "neutral",
+    "pairId": "syne",
+    "shape": "sharp",
+    "density": "regular",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "bold",
+      "editorial",
+      "playful"
+    ],
+    "uupm": [
+      "Brutalism",
+      "Anti-Polish / Raw Aesthetic"
+    ],
+    "blurb": "Electric blue and an odd, wide face. Made by hand, on purpose.",
+    "slice": false
+  },
+  {
+    "id": "fresh-market",
+    "name": "Fresh market",
+    "flavorId": "pop",
+    "seed": "#00B86B",
+    "tint": "subtle",
+    "pairId": "grotesk",
+    "shape": "subtle",
+    "density": "regular",
+    "motion": "snappy",
+    "pillButtons": false,
+    "moves": {
+      "scroll": "normal",
+      "animate": "standard",
+      "between": "slide"
+    },
+    "modes": [
+      "light"
+    ],
+    "moods": [
+      "energetic",
+      "friendly",
+      "natural"
+    ],
+    "uupm": [
+      "Vibrant & Block-based",
+      "Flat Design"
+    ],
+    "blurb": "Green and bright, like a market stall in the morning.",
+    "slice": false
+  }
+] as const;
+
 export const SPEC_FONTS = {
   "Inter": "Inter:wght@300;400;500;600;700",
   "Inter Tight": "Inter+Tight:wght@500;600;700",